@elderbyte/ngx-starter 19.1.15 → 19.1.17

package/fesm2022/elderbyte-ngx-starter.mjs

@@ -13252,7 +13252,7 @@ class ElderConfirmDialogComponent {
         this.yesNo = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ElderConfirmDialogComponent, deps: [{ token: i1$7.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: ElderConfirmDialogComponent, isStandalone: true, selector: "elder-confirm-dialog", ngImport: i0, template: "<div class=\"layout-col full\">\n  <mat-toolbar elderTheme class=\"flex-none\">\n    <mat-toolbar-row class=\"gap-sm\">\n      <button mat-icon-button [matDialogClose]=\"false\"><mat-icon>close</mat-icon></button>\n      <h3>{{ title | translate }}</h3>\n    </mat-toolbar-row>\n  </mat-toolbar>\n\n  <div class=\"layout-col flex p-md\">\n    <div class=\"flex\">\n      <p translate>{{ message }}</p>\n    </div>\n\n    <div class=\"layout-row place-end-center gap-md flex-none\" cdkTrapFocus>\n      <button type=\"button\" mat-button (click)=\"dialogRef.close(false)\">\n        {{ (yesNo ? 'actions.no' : 'actions.cancel') | translate }}\n      </button>\n\n      <button type=\"submit\" mat-flat-button cdkFocusInitial (click)=\"dialogRef.close(true)\">\n        {{ (yesNo ? 'actions.yes' : 'actions.ok') | translate }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: ElderThemeDirective, selector: "[elderTheme]" }, { kind: "directive", type: MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: ElderConfirmDialogComponent, isStandalone: true, selector: "elder-confirm-dialog", ngImport: i0, template: "<div class=\"layout-col full\">\n  <mat-toolbar elderTheme class=\"flex-none\">\n    <mat-toolbar-row class=\"gap-sm\">\n      <button mat-icon-button type=\"button\" [matDialogClose]=\"false\">\n        <mat-icon>close</mat-icon>\n      </button>\n      <h3>{{ title | translate }}</h3>\n    </mat-toolbar-row>\n  </mat-toolbar>\n\n  <div class=\"layout-col flex p-md\">\n    <div class=\"flex\">\n      <p translate>{{ message }}</p>\n    </div>\n\n    <div class=\"layout-row place-end-center gap-md flex-none\" cdkTrapFocus>\n      <button type=\"button\" mat-button (click)=\"dialogRef.close(false)\">\n        {{ (yesNo ? 'actions.no' : 'actions.cancel') | translate }}\n      </button>\n\n      <button type=\"submit\" mat-flat-button cdkFocusInitial (click)=\"dialogRef.close(true)\">\n        {{ (yesNo ? 'actions.yes' : 'actions.ok') | translate }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: ElderThemeDirective, selector: "[elderTheme]" }, { kind: "directive", type: MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ElderConfirmDialogComponent, decorators: [{
             type: Component,
@@ -13266,7 +13266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         TranslateModule,
                         CdkTrapFocus,
                         MatButton,
-                    ], template: "<div class=\"layout-col full\">\n  <mat-toolbar elderTheme class=\"flex-none\">\n    <mat-toolbar-row class=\"gap-sm\">\n      <button mat-icon-button [matDialogClose]=\"false\"><mat-icon>close</mat-icon></button>\n      <h3>{{ title | translate }}</h3>\n    </mat-toolbar-row>\n  </mat-toolbar>\n\n  <div class=\"layout-col flex p-md\">\n    <div class=\"flex\">\n      <p translate>{{ message }}</p>\n    </div>\n\n    <div class=\"layout-row place-end-center gap-md flex-none\" cdkTrapFocus>\n      <button type=\"button\" mat-button (click)=\"dialogRef.close(false)\">\n        {{ (yesNo ? 'actions.no' : 'actions.cancel') | translate }}\n      </button>\n\n      <button type=\"submit\" mat-flat-button cdkFocusInitial (click)=\"dialogRef.close(true)\">\n        {{ (yesNo ? 'actions.yes' : 'actions.ok') | translate }}\n      </button>\n    </div>\n  </div>\n</div>\n" }]
+                    ], template: "<div class=\"layout-col full\">\n  <mat-toolbar elderTheme class=\"flex-none\">\n    <mat-toolbar-row class=\"gap-sm\">\n      <button mat-icon-button type=\"button\" [matDialogClose]=\"false\">\n        <mat-icon>close</mat-icon>\n      </button>\n      <h3>{{ title | translate }}</h3>\n    </mat-toolbar-row>\n  </mat-toolbar>\n\n  <div class=\"layout-col flex p-md\">\n    <div class=\"flex\">\n      <p translate>{{ message }}</p>\n    </div>\n\n    <div class=\"layout-row place-end-center gap-md flex-none\" cdkTrapFocus>\n      <button type=\"button\" mat-button (click)=\"dialogRef.close(false)\">\n        {{ (yesNo ? 'actions.no' : 'actions.cancel') | translate }}\n      </button>\n\n      <button type=\"submit\" mat-flat-button cdkFocusInitial (click)=\"dialogRef.close(true)\">\n        {{ (yesNo ? 'actions.yes' : 'actions.ok') | translate }}\n      </button>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$7.MatDialogRef }] });
 
 class QuestionDialogConfig extends ElderDialogConfig {
@@ -13287,7 +13287,7 @@ class ElderQuestionDialogComponent {
         return !!this.answer;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ElderQuestionDialogComponent, deps: [{ token: i1$7.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: ElderQuestionDialogComponent, isStandalone: true, selector: "elder-question-dialog", ngImport: i0, template: "<div class=\"layout-col full\">\n  <mat-toolbar elderTheme class=\"flex-none\">\n    <mat-toolbar-row class=\"gap-sm\">\n      <button mat-icon-button [matDialogClose]=\"false\"><mat-icon>close</mat-icon></button>\n      <h3>{{ data.title | translate }}</h3>\n    </mat-toolbar-row>\n  </mat-toolbar>\n\n  <form #f=\"ngForm\" class=\"layout-col flex p-md\" (ngSubmit)=\"confirm($event)\" cdkTrapFocus>\n    <div class=\"layout-col flex\">\n      <p>{{ data.question }}</p>\n\n      <mat-form-field class=\"full-width\">\n        <input\n          matInput\n          type=\"text\"\n          name=\"name\"\n          [(ngModel)]=\"answer\"\n          cdkFocusInitial\n          placeholder=\"{{ 'context.name' | translate }}\"\n          required\n        />\n      </mat-form-field>\n    </div>\n\n    <div class=\"layout-row place-end-center gap-md flex-none\">\n      <button mat-button type=\"button\" (click)=\"cancel($event)\">\n        {{ 'actions.cancel' | translate }}\n      </button>\n\n      <button mat-button type=\"submit\" color=\"primary\" [disabled]=\"!isValid\">\n        {{ 'actions.ok' | translate }}\n      </button>\n    </div>\n  </form>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: ElderThemeDirective, selector: "[elderTheme]" }, { kind: "directive", type: MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.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: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: 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: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: ElderQuestionDialogComponent, isStandalone: true, selector: "elder-question-dialog", ngImport: i0, template: "<div class=\"layout-col full\">\n  <mat-toolbar elderTheme class=\"flex-none\">\n    <mat-toolbar-row class=\"gap-sm\">\n      <button mat-icon-button type=\"button\" [matDialogClose]=\"false\">\n        <mat-icon>close</mat-icon>\n      </button>\n      <h3>{{ data.title | translate }}</h3>\n    </mat-toolbar-row>\n  </mat-toolbar>\n\n  <form #f=\"ngForm\" class=\"layout-col flex p-md\" (ngSubmit)=\"confirm($event)\" cdkTrapFocus>\n    <div class=\"layout-col flex\">\n      <p>{{ data.question }}</p>\n\n      <mat-form-field class=\"full-width\">\n        <input\n          matInput\n          type=\"text\"\n          name=\"name\"\n          [(ngModel)]=\"answer\"\n          cdkFocusInitial\n          placeholder=\"{{ 'context.name' | translate }}\"\n          required\n        />\n      </mat-form-field>\n    </div>\n\n    <div class=\"layout-row place-end-center gap-md flex-none\">\n      <button mat-button type=\"button\" (click)=\"cancel($event)\">\n        {{ 'actions.cancel' | translate }}\n      </button>\n\n      <button mat-button type=\"submit\" color=\"primary\" [disabled]=\"!isValid\">\n        {{ 'actions.ok' | translate }}\n      </button>\n    </div>\n  </form>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: ElderThemeDirective, selector: "[elderTheme]" }, { kind: "directive", type: MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.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: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: 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: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ElderQuestionDialogComponent, decorators: [{
             type: Component,
@@ -13304,7 +13304,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         MatInput,
                         MatButton,
                         TranslateModule,
-                    ], template: "<div class=\"layout-col full\">\n  <mat-toolbar elderTheme class=\"flex-none\">\n    <mat-toolbar-row class=\"gap-sm\">\n      <button mat-icon-button [matDialogClose]=\"false\"><mat-icon>close</mat-icon></button>\n      <h3>{{ data.title | translate }}</h3>\n    </mat-toolbar-row>\n  </mat-toolbar>\n\n  <form #f=\"ngForm\" class=\"layout-col flex p-md\" (ngSubmit)=\"confirm($event)\" cdkTrapFocus>\n    <div class=\"layout-col flex\">\n      <p>{{ data.question }}</p>\n\n      <mat-form-field class=\"full-width\">\n        <input\n          matInput\n          type=\"text\"\n          name=\"name\"\n          [(ngModel)]=\"answer\"\n          cdkFocusInitial\n          placeholder=\"{{ 'context.name' | translate }}\"\n          required\n        />\n      </mat-form-field>\n    </div>\n\n    <div class=\"layout-row place-end-center gap-md flex-none\">\n      <button mat-button type=\"button\" (click)=\"cancel($event)\">\n        {{ 'actions.cancel' | translate }}\n      </button>\n\n      <button mat-button type=\"submit\" color=\"primary\" [disabled]=\"!isValid\">\n        {{ 'actions.ok' | translate }}\n      </button>\n    </div>\n  </form>\n</div>\n" }]
+                    ], template: "<div class=\"layout-col full\">\n  <mat-toolbar elderTheme class=\"flex-none\">\n    <mat-toolbar-row class=\"gap-sm\">\n      <button mat-icon-button type=\"button\" [matDialogClose]=\"false\">\n        <mat-icon>close</mat-icon>\n      </button>\n      <h3>{{ data.title | translate }}</h3>\n    </mat-toolbar-row>\n  </mat-toolbar>\n\n  <form #f=\"ngForm\" class=\"layout-col flex p-md\" (ngSubmit)=\"confirm($event)\" cdkTrapFocus>\n    <div class=\"layout-col flex\">\n      <p>{{ data.question }}</p>\n\n      <mat-form-field class=\"full-width\">\n        <input\n          matInput\n          type=\"text\"\n          name=\"name\"\n          [(ngModel)]=\"answer\"\n          cdkFocusInitial\n          placeholder=\"{{ 'context.name' | translate }}\"\n          required\n        />\n      </mat-form-field>\n    </div>\n\n    <div class=\"layout-row place-end-center gap-md flex-none\">\n      <button mat-button type=\"button\" (click)=\"cancel($event)\">\n        {{ 'actions.cancel' | translate }}\n      </button>\n\n      <button mat-button type=\"submit\" color=\"primary\" [disabled]=\"!isValid\">\n        {{ 'actions.ok' | translate }}\n      </button>\n    </div>\n  </form>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$7.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -14779,7 +14779,7 @@ class ElderCompositeSortComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ElderCompositeSortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: ElderCompositeSortComponent, isStandalone: true, selector: "elder-composite-sort", inputs: { availableSorts: { classPropertyName: "availableSorts", publicName: "availableSorts", isSignal: true, isRequired: true, transformFunction: null }, sorts: { classPropertyName: "sorts", publicName: "sorts", isSignal: true, isRequired: false, transformFunction: null }, translationPrefix: { classPropertyName: "translationPrefix", publicName: "translationPrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sorts: "sortsChange", sortsChange: "sortsChange" }, ngImport: i0, template: "<div class=\"layout-row place-start-center flex-none\">\n  <button mat-button type=\"button\" [matMenuTriggerFor]=\"menu\">\n    {{ translationPrefix() + selectedSort().id | translate }}\n\n    <mat-icon style=\"font-size: 22px; height: 22px;\">sort</mat-icon>\n\n    <mat-menu #menu=\"matMenu\">\n      @for (namedSort of availableSorts(); track namedSort.id) {\n        <button mat-menu-item type=\"button\" (click)=\"selectSort(namedSort)\">\n          <mat-icon>sort</mat-icon>\n          <span [class.mat-body-strong]=\"selectedSort()?.id === namedSort.id\">{{\n            translationPrefix() + namedSort.id | translate\n          }}</span>\n        </button>\n      }\n    </mat-menu>\n  </button>\n\n  <button mat-icon-button type=\"button\" (click)=\"toggleSortDirection($event)\">\n    <mat-icon style=\"font-size: 22px\">{{\n      selectedSortDirection() === 'asc' ? 'arrow_downward' : 'arrow_upward'\n    }}</mat-icon>\n  </button>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: ElderCompositeSortComponent, isStandalone: true, selector: "elder-composite-sort", inputs: { availableSorts: { classPropertyName: "availableSorts", publicName: "availableSorts", isSignal: true, isRequired: true, transformFunction: null }, sorts: { classPropertyName: "sorts", publicName: "sorts", isSignal: true, isRequired: false, transformFunction: null }, translationPrefix: { classPropertyName: "translationPrefix", publicName: "translationPrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sorts: "sortsChange", sortsChange: "sortsChange" }, ngImport: i0, template: "<div class=\"layout-row place-start-center flex-none\">\n  <button mat-button type=\"button\" [matMenuTriggerFor]=\"menu\">\n    {{ translationPrefix() + selectedSort().id | translate }}\n\n    <mat-icon style=\"font-size: 22px; height: 22px\">sort</mat-icon>\n\n    <mat-menu #menu=\"matMenu\">\n      @for (namedSort of availableSorts(); track namedSort.id) {\n        <button mat-menu-item type=\"button\" (click)=\"selectSort(namedSort)\">\n          <mat-icon>sort</mat-icon>\n          <span [class.mat-body-strong]=\"selectedSort()?.id === namedSort.id\">{{\n            translationPrefix() + namedSort.id | translate\n          }}</span>\n        </button>\n      }\n    </mat-menu>\n  </button>\n\n  <button mat-icon-button type=\"button\" (click)=\"toggleSortDirection($event)\">\n    <mat-icon style=\"font-size: 22px\">{{\n      selectedSortDirection() === 'asc' ? 'arrow_downward' : 'arrow_upward'\n    }}</mat-icon>\n  </button>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ElderCompositeSortComponent, decorators: [{
             type: Component,
@@ -14791,7 +14791,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         MatMenuItem,
                         TranslateModule,
                         MatMenuTrigger,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-row place-start-center flex-none\">\n  <button mat-button type=\"button\" [matMenuTriggerFor]=\"menu\">\n    {{ translationPrefix() + selectedSort().id | translate }}\n\n    <mat-icon style=\"font-size: 22px; height: 22px;\">sort</mat-icon>\n\n    <mat-menu #menu=\"matMenu\">\n      @for (namedSort of availableSorts(); track namedSort.id) {\n        <button mat-menu-item type=\"button\" (click)=\"selectSort(namedSort)\">\n          <mat-icon>sort</mat-icon>\n          <span [class.mat-body-strong]=\"selectedSort()?.id === namedSort.id\">{{\n            translationPrefix() + namedSort.id | translate\n          }}</span>\n        </button>\n      }\n    </mat-menu>\n  </button>\n\n  <button mat-icon-button type=\"button\" (click)=\"toggleSortDirection($event)\">\n    <mat-icon style=\"font-size: 22px\">{{\n      selectedSortDirection() === 'asc' ? 'arrow_downward' : 'arrow_upward'\n    }}</mat-icon>\n  </button>\n</div>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-row place-start-center flex-none\">\n  <button mat-button type=\"button\" [matMenuTriggerFor]=\"menu\">\n    {{ translationPrefix() + selectedSort().id | translate }}\n\n    <mat-icon style=\"font-size: 22px; height: 22px\">sort</mat-icon>\n\n    <mat-menu #menu=\"matMenu\">\n      @for (namedSort of availableSorts(); track namedSort.id) {\n        <button mat-menu-item type=\"button\" (click)=\"selectSort(namedSort)\">\n          <mat-icon>sort</mat-icon>\n          <span [class.mat-body-strong]=\"selectedSort()?.id === namedSort.id\">{{\n            translationPrefix() + namedSort.id | translate\n          }}</span>\n        </button>\n      }\n    </mat-menu>\n  </button>\n\n  <button mat-icon-button type=\"button\" (click)=\"toggleSortDirection($event)\">\n    <mat-icon style=\"font-size: 22px\">{{\n      selectedSortDirection() === 'asc' ? 'arrow_downward' : 'arrow_upward'\n    }}</mat-icon>\n  </button>\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 class ElderCompositeSortDcDirective {
@@ -19720,7 +19720,7 @@ class ElderLanguageSwitcherComponent {
         return this.language.isLanguageActive(lang);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ElderLanguageSwitcherComponent, deps: [{ token: ElderLanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: ElderLanguageSwitcherComponent, isStandalone: true, selector: "elder-language-switcher", inputs: { slimMode: "slimMode" }, ngImport: i0, template: "<mat-menu #languageMenu=\"matMenu\">\n  <button\n    mat-menu-item\n    type=\"button\"\n    *ngFor=\"let lang of languages\"\n    (click)=\"currentLanguage = lang\"\n  >\n    <mat-icon>language</mat-icon>\n    <span class=\"text-body-large\" [class.active]=\"isLanguageActive(lang)\">{{ 'language.' + lang | translate }}</span>\n  </button>\n</mat-menu>\n\n<button mat-button type=\"button\" *ngIf=\"slimMode\" [matMenuTriggerFor]=\"languageMenu\">\n  <div class=\"layout-row place-start-center\">\n    <mat-icon>language</mat-icon>\n    <span class=\"language\">{{ currentLanguage }}</span>\n  </div>\n</button>\n\n<mat-form-field *ngIf=\"!slimMode\">\n  <mat-select\n    placeholder=\"{{ 'language.language' | translate }}\"\n    name=\"language\"\n    [(ngModel)]=\"currentLanguage\"\n  >\n    <mat-option *ngFor=\"let lang of languages\" [value]=\"lang\">{{\n      'language.' + lang | translate\n    }}</mat-option>\n  </mat-select>\n</mat-form-field>\n", styles: [".language{font-size:16px;text-transform:uppercase}.active{font-weight:700}\n"], dependencies: [{ kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: ElderLanguageSwitcherComponent, isStandalone: true, selector: "elder-language-switcher", inputs: { slimMode: "slimMode" }, ngImport: i0, template: "<mat-menu #languageMenu=\"matMenu\">\n  <button\n    mat-menu-item\n    type=\"button\"\n    *ngFor=\"let lang of languages\"\n    (click)=\"currentLanguage = lang\"\n  >\n    <mat-icon>language</mat-icon>\n    <span class=\"text-body-large\" [class.active]=\"isLanguageActive(lang)\">{{\n      'language.' + lang | translate\n    }}</span>\n  </button>\n</mat-menu>\n\n<button mat-button type=\"button\" *ngIf=\"slimMode\" [matMenuTriggerFor]=\"languageMenu\">\n  <div class=\"layout-row place-start-center\">\n    <mat-icon>language</mat-icon>\n    <span class=\"language\">{{ currentLanguage }}</span>\n  </div>\n</button>\n\n<mat-form-field *ngIf=\"!slimMode\">\n  <mat-select\n    placeholder=\"{{ 'language.language' | translate }}\"\n    name=\"language\"\n    [(ngModel)]=\"currentLanguage\"\n  >\n    <mat-option *ngFor=\"let lang of languages\" [value]=\"lang\">{{\n      'language.' + lang | translate\n    }}</mat-option>\n  </mat-select>\n</mat-form-field>\n", styles: [".language{font-size:16px;text-transform:uppercase}.active{font-weight:700}\n"], dependencies: [{ kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ElderLanguageSwitcherComponent, decorators: [{
             type: Component,
@@ -19737,7 +19737,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         FormsModule,
                         MatOption,
                         TranslateModule,
-                    ], template: "<mat-menu #languageMenu=\"matMenu\">\n  <button\n    mat-menu-item\n    type=\"button\"\n    *ngFor=\"let lang of languages\"\n    (click)=\"currentLanguage = lang\"\n  >\n    <mat-icon>language</mat-icon>\n    <span class=\"text-body-large\" [class.active]=\"isLanguageActive(lang)\">{{ 'language.' + lang | translate }}</span>\n  </button>\n</mat-menu>\n\n<button mat-button type=\"button\" *ngIf=\"slimMode\" [matMenuTriggerFor]=\"languageMenu\">\n  <div class=\"layout-row place-start-center\">\n    <mat-icon>language</mat-icon>\n    <span class=\"language\">{{ currentLanguage }}</span>\n  </div>\n</button>\n\n<mat-form-field *ngIf=\"!slimMode\">\n  <mat-select\n    placeholder=\"{{ 'language.language' | translate }}\"\n    name=\"language\"\n    [(ngModel)]=\"currentLanguage\"\n  >\n    <mat-option *ngFor=\"let lang of languages\" [value]=\"lang\">{{\n      'language.' + lang | translate\n    }}</mat-option>\n  </mat-select>\n</mat-form-field>\n", styles: [".language{font-size:16px;text-transform:uppercase}.active{font-weight:700}\n"] }]
+                    ], template: "<mat-menu #languageMenu=\"matMenu\">\n  <button\n    mat-menu-item\n    type=\"button\"\n    *ngFor=\"let lang of languages\"\n    (click)=\"currentLanguage = lang\"\n  >\n    <mat-icon>language</mat-icon>\n    <span class=\"text-body-large\" [class.active]=\"isLanguageActive(lang)\">{{\n      'language.' + lang | translate\n    }}</span>\n  </button>\n</mat-menu>\n\n<button mat-button type=\"button\" *ngIf=\"slimMode\" [matMenuTriggerFor]=\"languageMenu\">\n  <div class=\"layout-row place-start-center\">\n    <mat-icon>language</mat-icon>\n    <span class=\"language\">{{ currentLanguage }}</span>\n  </div>\n</button>\n\n<mat-form-field *ngIf=\"!slimMode\">\n  <mat-select\n    placeholder=\"{{ 'language.language' | translate }}\"\n    name=\"language\"\n    [(ngModel)]=\"currentLanguage\"\n  >\n    <mat-option *ngFor=\"let lang of languages\" [value]=\"lang\">{{\n      'language.' + lang | translate\n    }}</mat-option>\n  </mat-select>\n</mat-form-field>\n", styles: [".language{font-size:16px;text-transform:uppercase}.active{font-weight:700}\n"] }]
         }], ctorParameters: () => [{ type: ElderLanguageService }], propDecorators: { slimMode: [{
                 type: Input
             }] } });
@@ -19953,7 +19953,7 @@ class ElderDetailDialogComponent {
         this.dialogRef.close(this.entity$.getValue());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ElderDetailDialogComponent, deps: [{ token: i1$7.MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }, { token: ElderMasterDetailService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: ElderDetailDialogComponent, isStandalone: true, selector: "elder-detail-dialog", ngImport: i0, template: "<div class=\"layout-col full\" *ngIf=\"entity$ | async as entity\">\n  <span style=\"width: 100vw\"></span>\n\n  <!-- Header Section -->\n  <elder-toolbar class=\"gap-md\">\n    <button (click)=\"close()\" mat-icon-button *elderToolbarColumn=\"'left.begin'\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </elder-toolbar>\n\n  <div class=\"layout-row flex gap-md\">\n    <ng-container\n      *ngTemplateOutlet=\"data.detailTemplateRef; context: { $implicit: entity }\"\n    ></ng-container>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ElderToolbarComponent, selector: "elder-toolbar", inputs: ["color"] }, { kind: "directive", type: ElderToolbarColumnDirective, selector: "[elderToolbarColumn]", inputs: ["elderToolbarColumn", "elderToolbarDefault"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: ElderDetailDialogComponent, isStandalone: true, selector: "elder-detail-dialog", ngImport: i0, template: "<div class=\"layout-col full\" *ngIf=\"entity$ | async as entity\">\n  <span style=\"width: 100vw\"></span>\n\n  <!-- Header Section -->\n  <elder-toolbar class=\"gap-md\">\n    <button (click)=\"close()\" type=\"button\" mat-icon-button *elderToolbarColumn=\"'left.begin'\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </elder-toolbar>\n\n  <div class=\"layout-row flex gap-md\">\n    <ng-container\n      *ngTemplateOutlet=\"data.detailTemplateRef; context: { $implicit: entity }\"\n    ></ng-container>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ElderToolbarComponent, selector: "elder-toolbar", inputs: ["color"] }, { kind: "directive", type: ElderToolbarColumnDirective, selector: "[elderToolbarColumn]", inputs: ["elderToolbarColumn", "elderToolbarDefault"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ElderDetailDialogComponent, decorators: [{
             type: Component,
@@ -19965,7 +19965,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         MatIcon,
                         NgTemplateOutlet,
                         AsyncPipe,
-                    ], template: "<div class=\"layout-col full\" *ngIf=\"entity$ | async as entity\">\n  <span style=\"width: 100vw\"></span>\n\n  <!-- Header Section -->\n  <elder-toolbar class=\"gap-md\">\n    <button (click)=\"close()\" mat-icon-button *elderToolbarColumn=\"'left.begin'\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </elder-toolbar>\n\n  <div class=\"layout-row flex gap-md\">\n    <ng-container\n      *ngTemplateOutlet=\"data.detailTemplateRef; context: { $implicit: entity }\"\n    ></ng-container>\n  </div>\n</div>\n" }]
+                    ], template: "<div class=\"layout-col full\" *ngIf=\"entity$ | async as entity\">\n  <span style=\"width: 100vw\"></span>\n\n  <!-- Header Section -->\n  <elder-toolbar class=\"gap-md\">\n    <button (click)=\"close()\" type=\"button\" mat-icon-button *elderToolbarColumn=\"'left.begin'\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </elder-toolbar>\n\n  <div class=\"layout-row flex gap-md\">\n    <ng-container\n      *ngTemplateOutlet=\"data.detailTemplateRef; context: { $implicit: entity }\"\n    ></ng-container>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$7.MatDialogRef, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
@@ -30200,7 +30200,7 @@ class ElderIntervalPickerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ElderIntervalPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: ElderIntervalPickerComponent, isStandalone: true, selector: "elder-interval-picker", inputs: { emitType: { classPropertyName: "emitType", publicName: "emitType", isSignal: true, isRequired: false, transformFunction: null }, autoEmitMode: { classPropertyName: "autoEmitMode", publicName: "autoEmitMode", isSignal: true, isRequired: false, transformFunction: null }, intervalInputMode: { classPropertyName: "intervalInputMode", publicName: "intervalInputMode", isSignal: true, isRequired: false, transformFunction: null }, showAnchor: { classPropertyName: "showAnchor", publicName: "showAnchor", isSignal: true, isRequired: false, transformFunction: null }, anchorReadOnly: { classPropertyName: "anchorReadOnly", publicName: "anchorReadOnly", isSignal: true, isRequired: false, transformFunction: null }, externalAnchorDateTime: { classPropertyName: "externalAnchorDateTime", publicName: "externalAnchorDateTime", isSignal: true, isRequired: false, transformFunction: null }, externalInterval: { classPropertyName: "externalInterval", publicName: "externalInterval", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { intervalChange: "intervalChange" }, providers: [{ provide: DateAdapter, useClass: CustomDateAdapter }], viewQueries: [{ propertyName: "calendarStart", first: true, predicate: ["rangeCalendarStart"], descendants: true }, { propertyName: "calendarEnd", first: true, predicate: ["rangeCalendarEnd"], descendants: true }, { propertyName: "calendarStartElRef", first: true, predicate: ["rangeCalendarStart"], descendants: true, read: ElementRef }, { propertyName: "calendarEndElRef", first: true, predicate: ["rangeCalendarEnd"], descendants: true, read: ElementRef }, { propertyName: "startDateInput", first: true, predicate: ["startDateInput"], descendants: true }, { propertyName: "endDateInput", first: true, predicate: ["endDateInput"], descendants: true }], ngImport: i0, template: "<div class=\"interval-picker-component p-md layout-col gap-xxl\">\n  <div class=\"layout-row gap-xxl place-between-start\" style=\"gap: 5%\">\n    <div class=\"layout-col gap-md pt-xs\">\n      <div class=\"layout-col\">\n        <div class=\"layout-row select-buttons-container gap-sm\">\n          <div class=\"layout-col gap-xs place-start-stretch\">\n            <button mat-button (click)=\"controller.select.selectCurrentDay()\">\n              @if (presenter.isFixedAnchorDateSet()) {\n                {{ 'intervalPicker.anchorDay' | translate }}\n              } @else {\n                {{ 'intervalPicker.today' | translate }}\n              }\n            </button>\n            <button mat-button (click)=\"controller.select.selectYesterday()\">\n              @if (presenter.isFixedAnchorDateSet()) {\n                {{ 'intervalPicker.last' | translate }} 1 {{ 'intervalPicker.day' | translate }}\n              } @else {\n                {{ 'intervalPicker.yesterday' | translate }}\n              }\n            </button>\n            <button mat-button (click)=\"controller.select.selectLastSevenDaysIncludingToday()\">\n              {{ 'intervalPicker.last' | translate }} 7\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            <button mat-button (click)=\"controller.select.selectLastThirtyDaysIncludingToday()\">\n              {{ 'intervalPicker.last' | translate }} 30\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            <button mat-button (click)=\"controller.select.selectLast365daysIncludingToday()\">\n              {{ 'intervalPicker.last' | translate }} 365\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            @if (intervalInputMode() === 'date-time-range') {\n              <div class=\"pt-sm\"></div>\n              <button mat-button (click)=\"controller.select.selectLastFiveMinutes()\">\n                {{ 'intervalPicker.last' | translate }} 5\n                {{ 'intervalPicker.minutes' | translate }}\n              </button>\n              <button mat-button (click)=\"controller.select.selectLastHour()\">\n                {{ 'intervalPicker.last' | translate }} {{ 'intervalPicker.hour' | translate }}\n              </button>\n              <button mat-button (click)=\"controller.select.selectLast24Hours()\">\n                {{ 'intervalPicker.last' | translate }} 24\n                {{ 'intervalPicker.hours' | translate }}\n              </button>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"layout-col\">\n      <!-- smart shift -->\n      <div class=\"layout-row place-around-center\">\n        <button\n          mat-icon-button\n          (click)=\"controller.shift.smartShift(-1)\"\n          [disabled]=\"!presenter.isValidIntervalSet()\"\n        >\n          <mat-icon>keyboard_double_arrow_left</mat-icon>\n        </button>\n        <span>{{ presenter.smartShiftMessage() }}</span>\n        <button\n          mat-icon-button\n          (click)=\"controller.shift.smartShift(1)\"\n          [disabled]=\"!presenter.isValidIntervalSet()\"\n        >\n          <mat-icon>keyboard_double_arrow_right</mat-icon>\n        </button>\n      </div>\n      <!-- calendars and input controls -->\n      <div\n        class=\"layout-row place-around-center\"\n        style=\"align-items: flex-start; min-height: 280px\"\n      >\n        <mat-calendar\n          #rangeCalendarStart\n          style=\"width: 210px; max-width: 100%\"\n          [selected]=\"presenter.dateRangeForCalendar()\"\n          (selectedChange)=\"controller.calendar.setStartDateFromJSDate($event)\"\n          [maxDate]=\"presenter.endDateTimeAsJSDate()\"\n          [dateClass]=\"presenter.calendarAnchorDateCssClassFn\"\n        >\n        </mat-calendar>\n        <mat-calendar\n          #rangeCalendarEnd\n          style=\"width: 210px; max-width: 100%\"\n          [selected]=\"presenter.dateRangeForCalendar()\"\n          (selectedChange)=\"controller.calendar.setEndDateFromJSDate($event)\"\n          [minDate]=\"presenter.startDateTimeAsJSDate()\"\n          [dateClass]=\"presenter.calendarAnchorDateCssClassFn\"\n        >\n        </mat-calendar>\n      </div>\n      <div class=\"layout-row place-around-center gap-xl pt-sm\">\n        <div class=\"layout-row place-around-center\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.startDate' | translate }}</mat-label>\n            <input\n              #startDateInput\n              name=\"startDateInput\"\n              matInput\n              type=\"date\"\n              [ngModel]=\"presenter.startDateHtmlString()\"\n              (ngModelChange)=\"controller.form.setStartDateFromString($event)\"\n            />\n          </mat-form-field>\n        </div>\n        <div class=\"layout-row place-around-center\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.endDate' | translate }}</mat-label>\n            <input\n              #endDateInput\n              name=\"endDateInput\"\n              matInput\n              type=\"date\"\n              [ngModel]=\"presenter.endDateHtmlString()\"\n              (ngModelChange)=\"controller.form.setEndDateFromString($event)\"\n            />\n          </mat-form-field>\n        </div>\n      </div>\n      @if (intervalInputMode() === 'date-time-range') {\n        <div class=\"layout-row place-around-center gap-xl pt-sm\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.startTime' | translate }}</mat-label>\n            <input\n              name=\"startTimeInput\"\n              matInput\n              type=\"time\"\n              #startTimeControl=\"ngModel\"\n              step=\"1\"\n              [ngModel]=\"presenter.startTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setStartTimeFromString($event)\"\n            />\n            <button\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.clearStartTime()\"\n              [disabled]=\"!presenter.isStartTimeSetAndNotMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.endTime' | translate }}</mat-label>\n            <input\n              name=\"endTimeInput\"\n              matInput\n              type=\"time\"\n              #endTimeControl=\"ngModel\"\n              step=\"1\"\n              [ngModel]=\"presenter.endTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setEndTimeFromString($event)\"\n            />\n            <button\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.clearEndTime()\"\n              [disabled]=\"!presenter.isEndTimeSetAndNotMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n        </div>\n      }\n      <br />\n    </div>\n    <div class=\"pt-xs\" style=\"width: 25%\">\n      <div class=\"layout-col gap-lg\">\n        <div class=\"layout-col gap-xs place-start-start\">\n          <!-- select current -->\n          <button mat-button (click)=\"controller.select.selectCurrentWeek()\">\n            {{ 'intervalPicker.currentPeriod.week' | translate }}\n          </button>\n          <button mat-button (click)=\"controller.select.selectCurrentMonth()\">\n            {{ 'intervalPicker.currentPeriod.month' | translate }}\n          </button>\n          <button mat-button (click)=\"controller.select.selectCurrentQuarter()\">\n            {{ 'intervalPicker.currentPeriod.quarter' | translate }}\n          </button>\n          <button mat-button (click)=\"controller.select.selectCurrentYear()\">\n            {{ 'intervalPicker.currentPeriod.year' | translate }}\n          </button>\n        </div>\n        <div class=\"fixed-shifts-container\">\n          <div class=\"layout-col place-start-stretch\">\n            <div class=\"layout-row place-between-center\">\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftDay(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.day' | translate }}</span>\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftDay(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n            <div class=\"layout-row place-between-center\">\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftMonth(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.month' | translate }}</span>\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftMonth(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n            <div class=\"layout-row place-between-center\">\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftYear(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.year' | translate }}</span>\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftYear(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n\n            @if (true) {\n              <!-- shift minute -->\n              <div class=\"layout-row place-between-center\">\n                <button\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftMinute(-1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_left</mat-icon>\n                </button>\n                <span>{{ 'intervalPicker.minute' | translate }}</span>\n                <button\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftMinute(1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_right</mat-icon>\n                </button>\n              </div>\n              <!-- shift hour -->\n              <div class=\"layout-row place-between-center\">\n                <button\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftHour(-1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_left</mat-icon>\n                </button>\n                <span>{{ 'intervalPicker.hour' | translate }}</span>\n                <button\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftHour(1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_right</mat-icon>\n                </button>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"layout-row place-between-center gap-xxl pt-sm\">\n  <div>\n    @if (showAnchor()) {\n      <div class=\"layout-row flex-none gap-md\">\n        <mat-menu #anchorMenu=\"matMenu\">\n          @if (presenter.startDateHtmlString()) {\n            <button\n              mat-menu-item\n              (click)=\"controller.anchor.setFixedAnchorPointToEndDateTime()\"\n              [disabled]=\"!presenter.startDateHtmlString()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">login</mat-icon>\n              <span>{{ 'intervalPicker.endDate' | translate }}</span>\n            </button>\n          }\n          @if (presenter.endDateHtmlString()) {\n            <button\n              mat-menu-item\n              (click)=\"controller.anchor.setFixedAnchorPointToStartDateTime()\"\n              [disabled]=\"!presenter.endDateHtmlString()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">logout</mat-icon>\n              <span>{{ 'intervalPicker.startDate' | translate }}</span>\n            </button>\n          }\n          @if (presenter.isFixedAnchorDateSet()) {\n            <button\n              mat-menu-item\n              (click)=\"controller.anchor.resetAnchor()\"\n              [disabled]=\"!presenter.isFixedAnchorDateSet() || anchorReadOnly()\"\n            >\n              <mat-icon>close</mat-icon>\n              <span>{{ 'intervalPicker.clear' | translate }}</span>\n            </button>\n          }\n        </mat-menu>\n\n        <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n          <mat-label>{{ 'intervalPicker.anchorDate' | translate }}</mat-label>\n          <input\n            #startDateInput\n            name=\"anchorDateInput\"\n            matInput\n            type=\"date\"\n            [ngModel]=\"presenter.anchorDateHtmlString()\"\n            (ngModelChange)=\"controller.form.setAnchorDateFromString($event)\"\n            [readonly]=\"anchorReadOnly()\"\n          />\n          @if (!anchorReadOnly()) {\n            <button\n              mat-icon-button\n              matSuffix\n              [matMenuTriggerFor]=\"anchorMenu\"\n              [disabled]=\"presenter.isAnchorMenuDisabled()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">more_horiz</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n        @if (intervalInputMode() === 'date-time-range') {\n          <mat-form-field class=\"input-control-container-short\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.anchorTime' | translate }}</mat-label>\n            <input\n              matInput\n              name=\"anchorTimeInput\"\n              type=\"time\"\n              #anchorTimeControl=\"ngModel\"\n              step=\"1\"\n              [readonly]=\"anchorReadOnly()\"\n              [ngModel]=\"presenter.anchorTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setAnchorTimeFromString($event)\"\n            />\n            <button\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.anchor.resetAnchorTime()\"\n              [disabled]=\"anchorReadOnly() || presenter.isAnchorTimeMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n        }\n      </div>\n    }\n  </div>\n  <!-- result interval -->\n  <div class=\"layout-col place-center-center\">\n    <div class=\"date-interval mat-caption pt-xs\">\n      @if (presenter.startDateTimeAsJSDate()) {\n        {{ presenter.startDateTimeAsJSDate() | date: 'dd.MM. y, HH:mm:ss' }}\n      } @else {\n        {{ 'intervalPicker.startDateNotSet' | translate }}\n      }\n      <span> - </span>\n      @if (presenter.endDateTimeAsJSDate()) {\n        {{ presenter.endDateTimeAsJSDate() | date: 'dd.MM. y, HH:mm:ss' }}\n      } @else {\n        {{ 'intervalPicker.endDateNotSet' | translate }}\n      }\n    </div>\n    <div>\n      <span class=\"mat-caption\">{{ presenter.deltaHumanReadable() || '&nbsp;' }}</span>\n    </div>\n  </div>\n  <div class=\"layout-row gap-lg\">\n    <button\n      mat-flat-button\n      color=\"primary\"\n      (click)=\"controller.clearInterval()\"\n      [disabled]=\"!presenter.isValidIntervalSet()\"\n    >\n      {{ 'intervalPicker.clear' | translate }}\n    </button>\n\n    @if (!this.autoEmitMode()) {\n      <button color=\"primary\" mat-flat-button (click)=\"controller.manualEmit()\">\n        {{ 'actions.ok' | translate }}\n      </button>\n    }\n  </div>\n</div>\n", styles: [".interval-picker-component{min-width:840px;max-width:100%}.fixed-shifts-container{max-width:160px}.input-control-container{width:192px;max-width:100%}.input-control-container-short{width:140px;max-width:100%}.select-buttons-container button{white-space:nowrap;text-align:left;justify-content:flex-start}::ng-deep .interval-picker-component .mat-calendar-body-cell.elder-custom-anchor-date .mat-calendar-body-cell-content{border-radius:50%;background-color:#def;background-color:#b4d2ebbf}\n"], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$e.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$b.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$b.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$b.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.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: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i9.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: ElderIntervalPickerComponent, isStandalone: true, selector: "elder-interval-picker", inputs: { emitType: { classPropertyName: "emitType", publicName: "emitType", isSignal: true, isRequired: false, transformFunction: null }, autoEmitMode: { classPropertyName: "autoEmitMode", publicName: "autoEmitMode", isSignal: true, isRequired: false, transformFunction: null }, intervalInputMode: { classPropertyName: "intervalInputMode", publicName: "intervalInputMode", isSignal: true, isRequired: false, transformFunction: null }, showAnchor: { classPropertyName: "showAnchor", publicName: "showAnchor", isSignal: true, isRequired: false, transformFunction: null }, anchorReadOnly: { classPropertyName: "anchorReadOnly", publicName: "anchorReadOnly", isSignal: true, isRequired: false, transformFunction: null }, externalAnchorDateTime: { classPropertyName: "externalAnchorDateTime", publicName: "externalAnchorDateTime", isSignal: true, isRequired: false, transformFunction: null }, externalInterval: { classPropertyName: "externalInterval", publicName: "externalInterval", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { intervalChange: "intervalChange" }, providers: [{ provide: DateAdapter, useClass: CustomDateAdapter }], viewQueries: [{ propertyName: "calendarStart", first: true, predicate: ["rangeCalendarStart"], descendants: true }, { propertyName: "calendarEnd", first: true, predicate: ["rangeCalendarEnd"], descendants: true }, { propertyName: "calendarStartElRef", first: true, predicate: ["rangeCalendarStart"], descendants: true, read: ElementRef }, { propertyName: "calendarEndElRef", first: true, predicate: ["rangeCalendarEnd"], descendants: true, read: ElementRef }, { propertyName: "startDateInput", first: true, predicate: ["startDateInput"], descendants: true }, { propertyName: "endDateInput", first: true, predicate: ["endDateInput"], descendants: true }], ngImport: i0, template: "<div class=\"interval-picker-component p-md layout-col gap-xxl\">\n  <div class=\"layout-row gap-xxl place-between-start\" style=\"gap: 5%\">\n    <div class=\"layout-col gap-md pt-xs\">\n      <div class=\"layout-col\">\n        <div class=\"layout-row select-buttons-container gap-sm\">\n          <div class=\"layout-col gap-xs place-start-stretch\">\n            <button mat-button type=\"button\" (click)=\"controller.select.selectCurrentDay()\">\n              @if (presenter.isFixedAnchorDateSet()) {\n                {{ 'intervalPicker.anchorDay' | translate }}\n              } @else {\n                {{ 'intervalPicker.today' | translate }}\n              }\n            </button>\n            <button mat-button type=\"button\" (click)=\"controller.select.selectYesterday()\">\n              @if (presenter.isFixedAnchorDateSet()) {\n                {{ 'intervalPicker.last' | translate }} 1 {{ 'intervalPicker.day' | translate }}\n              } @else {\n                {{ 'intervalPicker.yesterday' | translate }}\n              }\n            </button>\n            <button\n              mat-button\n              type=\"button\"\n              (click)=\"controller.select.selectLastSevenDaysIncludingToday()\"\n            >\n              {{ 'intervalPicker.last' | translate }} 7\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            <button\n              mat-button\n              type=\"button\"\n              (click)=\"controller.select.selectLastThirtyDaysIncludingToday()\"\n            >\n              {{ 'intervalPicker.last' | translate }} 30\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            <button\n              mat-button\n              type=\"button\"\n              (click)=\"controller.select.selectLast365daysIncludingToday()\"\n            >\n              {{ 'intervalPicker.last' | translate }} 365\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            @if (intervalInputMode() === 'date-time-range') {\n              <div class=\"pt-sm\"></div>\n              <button mat-button type=\"button\" (click)=\"controller.select.selectLastFiveMinutes()\">\n                {{ 'intervalPicker.last' | translate }} 5\n                {{ 'intervalPicker.minutes' | translate }}\n              </button>\n              <button mat-button type=\"button\" (click)=\"controller.select.selectLastHour()\">\n                {{ 'intervalPicker.last' | translate }} {{ 'intervalPicker.hour' | translate }}\n              </button>\n              <button mat-button type=\"button\" (click)=\"controller.select.selectLast24Hours()\">\n                {{ 'intervalPicker.last' | translate }} 24\n                {{ 'intervalPicker.hours' | translate }}\n              </button>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"layout-col\">\n      <!-- smart shift -->\n      <div class=\"layout-row place-around-center\">\n        <button\n          type=\"button\"\n          mat-icon-button\n          (click)=\"controller.shift.smartShift(-1)\"\n          [disabled]=\"!presenter.isValidIntervalSet()\"\n        >\n          <mat-icon>keyboard_double_arrow_left</mat-icon>\n        </button>\n        <span>{{ presenter.smartShiftMessage() }}</span>\n        <button\n          type=\"button\"\n          mat-icon-button\n          (click)=\"controller.shift.smartShift(1)\"\n          [disabled]=\"!presenter.isValidIntervalSet()\"\n        >\n          <mat-icon>keyboard_double_arrow_right</mat-icon>\n        </button>\n      </div>\n      <!-- calendars and input controls -->\n      <div\n        class=\"layout-row place-around-center\"\n        style=\"align-items: flex-start; min-height: 280px\"\n      >\n        <mat-calendar\n          #rangeCalendarStart\n          style=\"width: 210px; max-width: 100%\"\n          [selected]=\"presenter.dateRangeForCalendar()\"\n          (selectedChange)=\"controller.calendar.setStartDateFromJSDate($event)\"\n          [maxDate]=\"presenter.endDateTimeAsJSDate()\"\n          [dateClass]=\"presenter.calendarAnchorDateCssClassFn\"\n        >\n        </mat-calendar>\n        <mat-calendar\n          #rangeCalendarEnd\n          style=\"width: 210px; max-width: 100%\"\n          [selected]=\"presenter.dateRangeForCalendar()\"\n          (selectedChange)=\"controller.calendar.setEndDateFromJSDate($event)\"\n          [minDate]=\"presenter.startDateTimeAsJSDate()\"\n          [dateClass]=\"presenter.calendarAnchorDateCssClassFn\"\n        >\n        </mat-calendar>\n      </div>\n      <div class=\"layout-row place-around-center gap-xl pt-sm\">\n        <div class=\"layout-row place-around-center\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.startDate' | translate }}</mat-label>\n            <input\n              #startDateInput\n              name=\"startDateInput\"\n              matInput\n              type=\"date\"\n              [ngModel]=\"presenter.startDateHtmlString()\"\n              (ngModelChange)=\"controller.form.setStartDateFromString($event)\"\n            />\n          </mat-form-field>\n        </div>\n        <div class=\"layout-row place-around-center\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.endDate' | translate }}</mat-label>\n            <input\n              #endDateInput\n              name=\"endDateInput\"\n              matInput\n              type=\"date\"\n              [ngModel]=\"presenter.endDateHtmlString()\"\n              (ngModelChange)=\"controller.form.setEndDateFromString($event)\"\n            />\n          </mat-form-field>\n        </div>\n      </div>\n      @if (intervalInputMode() === 'date-time-range') {\n        <div class=\"layout-row place-around-center gap-xl pt-sm\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.startTime' | translate }}</mat-label>\n            <input\n              name=\"startTimeInput\"\n              matInput\n              type=\"time\"\n              #startTimeControl=\"ngModel\"\n              step=\"1\"\n              [ngModel]=\"presenter.startTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setStartTimeFromString($event)\"\n            />\n            <button\n              type=\"button\"\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.clearStartTime()\"\n              [disabled]=\"!presenter.isStartTimeSetAndNotMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.endTime' | translate }}</mat-label>\n            <input\n              name=\"endTimeInput\"\n              matInput\n              type=\"time\"\n              #endTimeControl=\"ngModel\"\n              step=\"1\"\n              [ngModel]=\"presenter.endTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setEndTimeFromString($event)\"\n            />\n            <button\n              type=\"button\"\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.clearEndTime()\"\n              [disabled]=\"!presenter.isEndTimeSetAndNotMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n        </div>\n      }\n      <br />\n    </div>\n    <div class=\"pt-xs\" style=\"width: 25%\">\n      <div class=\"layout-col gap-lg\">\n        <div class=\"layout-col gap-xs place-start-start\">\n          <!-- select current -->\n          <button type=\"button\" mat-button (click)=\"controller.select.selectCurrentWeek()\">\n            {{ 'intervalPicker.currentPeriod.week' | translate }}\n          </button>\n          <button type=\"button\" mat-button (click)=\"controller.select.selectCurrentMonth()\">\n            {{ 'intervalPicker.currentPeriod.month' | translate }}\n          </button>\n          <button type=\"button\" mat-button (click)=\"controller.select.selectCurrentQuarter()\">\n            {{ 'intervalPicker.currentPeriod.quarter' | translate }}\n          </button>\n          <button type=\"button\" mat-button (click)=\"controller.select.selectCurrentYear()\">\n            {{ 'intervalPicker.currentPeriod.year' | translate }}\n          </button>\n        </div>\n        <div class=\"fixed-shifts-container\">\n          <div class=\"layout-col place-start-stretch\">\n            <div class=\"layout-row place-between-center\">\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftDay(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.day' | translate }}</span>\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftDay(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n            <div class=\"layout-row place-between-center\">\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftMonth(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.month' | translate }}</span>\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftMonth(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n            <div class=\"layout-row place-between-center\">\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftYear(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.year' | translate }}</span>\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftYear(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n\n            @if (true) {\n              <!-- shift minute -->\n              <div class=\"layout-row place-between-center\">\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftMinute(-1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_left</mat-icon>\n                </button>\n                <span>{{ 'intervalPicker.minute' | translate }}</span>\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftMinute(1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_right</mat-icon>\n                </button>\n              </div>\n              <!-- shift hour -->\n              <div class=\"layout-row place-between-center\">\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftHour(-1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_left</mat-icon>\n                </button>\n                <span>{{ 'intervalPicker.hour' | translate }}</span>\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftHour(1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_right</mat-icon>\n                </button>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"layout-row place-between-center gap-xxl pt-sm\">\n  <div>\n    @if (showAnchor()) {\n      <div class=\"layout-row flex-none gap-md\">\n        <mat-menu #anchorMenu=\"matMenu\">\n          @if (presenter.startDateHtmlString()) {\n            <button\n              type=\"button\"\n              mat-menu-item\n              (click)=\"controller.anchor.setFixedAnchorPointToEndDateTime()\"\n              [disabled]=\"!presenter.startDateHtmlString()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">login</mat-icon>\n              <span>{{ 'intervalPicker.endDate' | translate }}</span>\n            </button>\n          }\n          @if (presenter.endDateHtmlString()) {\n            <button\n              type=\"button\"\n              mat-menu-item\n              (click)=\"controller.anchor.setFixedAnchorPointToStartDateTime()\"\n              [disabled]=\"!presenter.endDateHtmlString()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">logout</mat-icon>\n              <span>{{ 'intervalPicker.startDate' | translate }}</span>\n            </button>\n          }\n          @if (presenter.isFixedAnchorDateSet()) {\n            <button\n              type=\"button\"\n              mat-menu-item\n              (click)=\"controller.anchor.resetAnchor()\"\n              [disabled]=\"!presenter.isFixedAnchorDateSet() || anchorReadOnly()\"\n            >\n              <mat-icon>close</mat-icon>\n              <span>{{ 'intervalPicker.clear' | translate }}</span>\n            </button>\n          }\n        </mat-menu>\n\n        <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n          <mat-label>{{ 'intervalPicker.anchorDate' | translate }}</mat-label>\n          <input\n            #startDateInput\n            name=\"anchorDateInput\"\n            matInput\n            type=\"date\"\n            [ngModel]=\"presenter.anchorDateHtmlString()\"\n            (ngModelChange)=\"controller.form.setAnchorDateFromString($event)\"\n            [readonly]=\"anchorReadOnly()\"\n          />\n          @if (!anchorReadOnly()) {\n            <button\n              type=\"button\"\n              mat-icon-button\n              matSuffix\n              [matMenuTriggerFor]=\"anchorMenu\"\n              [disabled]=\"presenter.isAnchorMenuDisabled()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">more_horiz</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n        @if (intervalInputMode() === 'date-time-range') {\n          <mat-form-field class=\"input-control-container-short\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.anchorTime' | translate }}</mat-label>\n            <input\n              matInput\n              name=\"anchorTimeInput\"\n              type=\"time\"\n              #anchorTimeControl=\"ngModel\"\n              step=\"1\"\n              [readonly]=\"anchorReadOnly()\"\n              [ngModel]=\"presenter.anchorTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setAnchorTimeFromString($event)\"\n            />\n            <button\n              type=\"button\"\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.anchor.resetAnchorTime()\"\n              [disabled]=\"anchorReadOnly() || presenter.isAnchorTimeMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n        }\n      </div>\n    }\n  </div>\n  <!-- result interval -->\n  <div class=\"layout-col place-center-center\">\n    <div class=\"date-interval mat-caption pt-xs\">\n      @if (presenter.startDateTimeAsJSDate()) {\n        {{ presenter.startDateTimeAsJSDate() | date: 'dd.MM. y, HH:mm:ss' }}\n      } @else {\n        {{ 'intervalPicker.startDateNotSet' | translate }}\n      }\n      <span> - </span>\n      @if (presenter.endDateTimeAsJSDate()) {\n        {{ presenter.endDateTimeAsJSDate() | date: 'dd.MM. y, HH:mm:ss' }}\n      } @else {\n        {{ 'intervalPicker.endDateNotSet' | translate }}\n      }\n    </div>\n    <div>\n      <span class=\"mat-caption\">{{ presenter.deltaHumanReadable() || '&nbsp;' }}</span>\n    </div>\n  </div>\n  <div class=\"layout-row gap-lg\">\n    <button\n      type=\"button\"\n      mat-flat-button\n      color=\"primary\"\n      (click)=\"controller.clearInterval()\"\n      [disabled]=\"!presenter.isValidIntervalSet()\"\n    >\n      {{ 'intervalPicker.clear' | translate }}\n    </button>\n\n    @if (!this.autoEmitMode()) {\n      <button type=\"button\" color=\"primary\" mat-flat-button (click)=\"controller.manualEmit()\">\n        {{ 'actions.ok' | translate }}\n      </button>\n    }\n  </div>\n</div>\n", styles: [".interval-picker-component{min-width:840px;max-width:100%}.fixed-shifts-container{max-width:160px}.input-control-container{width:192px;max-width:100%}.input-control-container-short{width:140px;max-width:100%}.select-buttons-container button{white-space:nowrap;text-align:left;justify-content:flex-start}::ng-deep .interval-picker-component .mat-calendar-body-cell.elder-custom-anchor-date .mat-calendar-body-cell-content{border-radius:50%;background-color:#def;background-color:#b4d2ebbf}\n"], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$e.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$b.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$b.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$b.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.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: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i9.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ElderIntervalPickerComponent, decorators: [{
             type: Component,
@@ -30222,7 +30222,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         TranslateModule,
                         MatMenuModule,
                         ElderIntervalInputComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: DateAdapter, useClass: CustomDateAdapter }], template: "<div class=\"interval-picker-component p-md layout-col gap-xxl\">\n  <div class=\"layout-row gap-xxl place-between-start\" style=\"gap: 5%\">\n    <div class=\"layout-col gap-md pt-xs\">\n      <div class=\"layout-col\">\n        <div class=\"layout-row select-buttons-container gap-sm\">\n          <div class=\"layout-col gap-xs place-start-stretch\">\n            <button mat-button (click)=\"controller.select.selectCurrentDay()\">\n              @if (presenter.isFixedAnchorDateSet()) {\n                {{ 'intervalPicker.anchorDay' | translate }}\n              } @else {\n                {{ 'intervalPicker.today' | translate }}\n              }\n            </button>\n            <button mat-button (click)=\"controller.select.selectYesterday()\">\n              @if (presenter.isFixedAnchorDateSet()) {\n                {{ 'intervalPicker.last' | translate }} 1 {{ 'intervalPicker.day' | translate }}\n              } @else {\n                {{ 'intervalPicker.yesterday' | translate }}\n              }\n            </button>\n            <button mat-button (click)=\"controller.select.selectLastSevenDaysIncludingToday()\">\n              {{ 'intervalPicker.last' | translate }} 7\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            <button mat-button (click)=\"controller.select.selectLastThirtyDaysIncludingToday()\">\n              {{ 'intervalPicker.last' | translate }} 30\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            <button mat-button (click)=\"controller.select.selectLast365daysIncludingToday()\">\n              {{ 'intervalPicker.last' | translate }} 365\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            @if (intervalInputMode() === 'date-time-range') {\n              <div class=\"pt-sm\"></div>\n              <button mat-button (click)=\"controller.select.selectLastFiveMinutes()\">\n                {{ 'intervalPicker.last' | translate }} 5\n                {{ 'intervalPicker.minutes' | translate }}\n              </button>\n              <button mat-button (click)=\"controller.select.selectLastHour()\">\n                {{ 'intervalPicker.last' | translate }} {{ 'intervalPicker.hour' | translate }}\n              </button>\n              <button mat-button (click)=\"controller.select.selectLast24Hours()\">\n                {{ 'intervalPicker.last' | translate }} 24\n                {{ 'intervalPicker.hours' | translate }}\n              </button>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"layout-col\">\n      <!-- smart shift -->\n      <div class=\"layout-row place-around-center\">\n        <button\n          mat-icon-button\n          (click)=\"controller.shift.smartShift(-1)\"\n          [disabled]=\"!presenter.isValidIntervalSet()\"\n        >\n          <mat-icon>keyboard_double_arrow_left</mat-icon>\n        </button>\n        <span>{{ presenter.smartShiftMessage() }}</span>\n        <button\n          mat-icon-button\n          (click)=\"controller.shift.smartShift(1)\"\n          [disabled]=\"!presenter.isValidIntervalSet()\"\n        >\n          <mat-icon>keyboard_double_arrow_right</mat-icon>\n        </button>\n      </div>\n      <!-- calendars and input controls -->\n      <div\n        class=\"layout-row place-around-center\"\n        style=\"align-items: flex-start; min-height: 280px\"\n      >\n        <mat-calendar\n          #rangeCalendarStart\n          style=\"width: 210px; max-width: 100%\"\n          [selected]=\"presenter.dateRangeForCalendar()\"\n          (selectedChange)=\"controller.calendar.setStartDateFromJSDate($event)\"\n          [maxDate]=\"presenter.endDateTimeAsJSDate()\"\n          [dateClass]=\"presenter.calendarAnchorDateCssClassFn\"\n        >\n        </mat-calendar>\n        <mat-calendar\n          #rangeCalendarEnd\n          style=\"width: 210px; max-width: 100%\"\n          [selected]=\"presenter.dateRangeForCalendar()\"\n          (selectedChange)=\"controller.calendar.setEndDateFromJSDate($event)\"\n          [minDate]=\"presenter.startDateTimeAsJSDate()\"\n          [dateClass]=\"presenter.calendarAnchorDateCssClassFn\"\n        >\n        </mat-calendar>\n      </div>\n      <div class=\"layout-row place-around-center gap-xl pt-sm\">\n        <div class=\"layout-row place-around-center\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.startDate' | translate }}</mat-label>\n            <input\n              #startDateInput\n              name=\"startDateInput\"\n              matInput\n              type=\"date\"\n              [ngModel]=\"presenter.startDateHtmlString()\"\n              (ngModelChange)=\"controller.form.setStartDateFromString($event)\"\n            />\n          </mat-form-field>\n        </div>\n        <div class=\"layout-row place-around-center\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.endDate' | translate }}</mat-label>\n            <input\n              #endDateInput\n              name=\"endDateInput\"\n              matInput\n              type=\"date\"\n              [ngModel]=\"presenter.endDateHtmlString()\"\n              (ngModelChange)=\"controller.form.setEndDateFromString($event)\"\n            />\n          </mat-form-field>\n        </div>\n      </div>\n      @if (intervalInputMode() === 'date-time-range') {\n        <div class=\"layout-row place-around-center gap-xl pt-sm\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.startTime' | translate }}</mat-label>\n            <input\n              name=\"startTimeInput\"\n              matInput\n              type=\"time\"\n              #startTimeControl=\"ngModel\"\n              step=\"1\"\n              [ngModel]=\"presenter.startTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setStartTimeFromString($event)\"\n            />\n            <button\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.clearStartTime()\"\n              [disabled]=\"!presenter.isStartTimeSetAndNotMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.endTime' | translate }}</mat-label>\n            <input\n              name=\"endTimeInput\"\n              matInput\n              type=\"time\"\n              #endTimeControl=\"ngModel\"\n              step=\"1\"\n              [ngModel]=\"presenter.endTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setEndTimeFromString($event)\"\n            />\n            <button\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.clearEndTime()\"\n              [disabled]=\"!presenter.isEndTimeSetAndNotMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n        </div>\n      }\n      <br />\n    </div>\n    <div class=\"pt-xs\" style=\"width: 25%\">\n      <div class=\"layout-col gap-lg\">\n        <div class=\"layout-col gap-xs place-start-start\">\n          <!-- select current -->\n          <button mat-button (click)=\"controller.select.selectCurrentWeek()\">\n            {{ 'intervalPicker.currentPeriod.week' | translate }}\n          </button>\n          <button mat-button (click)=\"controller.select.selectCurrentMonth()\">\n            {{ 'intervalPicker.currentPeriod.month' | translate }}\n          </button>\n          <button mat-button (click)=\"controller.select.selectCurrentQuarter()\">\n            {{ 'intervalPicker.currentPeriod.quarter' | translate }}\n          </button>\n          <button mat-button (click)=\"controller.select.selectCurrentYear()\">\n            {{ 'intervalPicker.currentPeriod.year' | translate }}\n          </button>\n        </div>\n        <div class=\"fixed-shifts-container\">\n          <div class=\"layout-col place-start-stretch\">\n            <div class=\"layout-row place-between-center\">\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftDay(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.day' | translate }}</span>\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftDay(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n            <div class=\"layout-row place-between-center\">\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftMonth(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.month' | translate }}</span>\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftMonth(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n            <div class=\"layout-row place-between-center\">\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftYear(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.year' | translate }}</span>\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftYear(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n\n            @if (true) {\n              <!-- shift minute -->\n              <div class=\"layout-row place-between-center\">\n                <button\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftMinute(-1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_left</mat-icon>\n                </button>\n                <span>{{ 'intervalPicker.minute' | translate }}</span>\n                <button\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftMinute(1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_right</mat-icon>\n                </button>\n              </div>\n              <!-- shift hour -->\n              <div class=\"layout-row place-between-center\">\n                <button\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftHour(-1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_left</mat-icon>\n                </button>\n                <span>{{ 'intervalPicker.hour' | translate }}</span>\n                <button\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftHour(1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_right</mat-icon>\n                </button>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"layout-row place-between-center gap-xxl pt-sm\">\n  <div>\n    @if (showAnchor()) {\n      <div class=\"layout-row flex-none gap-md\">\n        <mat-menu #anchorMenu=\"matMenu\">\n          @if (presenter.startDateHtmlString()) {\n            <button\n              mat-menu-item\n              (click)=\"controller.anchor.setFixedAnchorPointToEndDateTime()\"\n              [disabled]=\"!presenter.startDateHtmlString()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">login</mat-icon>\n              <span>{{ 'intervalPicker.endDate' | translate }}</span>\n            </button>\n          }\n          @if (presenter.endDateHtmlString()) {\n            <button\n              mat-menu-item\n              (click)=\"controller.anchor.setFixedAnchorPointToStartDateTime()\"\n              [disabled]=\"!presenter.endDateHtmlString()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">logout</mat-icon>\n              <span>{{ 'intervalPicker.startDate' | translate }}</span>\n            </button>\n          }\n          @if (presenter.isFixedAnchorDateSet()) {\n            <button\n              mat-menu-item\n              (click)=\"controller.anchor.resetAnchor()\"\n              [disabled]=\"!presenter.isFixedAnchorDateSet() || anchorReadOnly()\"\n            >\n              <mat-icon>close</mat-icon>\n              <span>{{ 'intervalPicker.clear' | translate }}</span>\n            </button>\n          }\n        </mat-menu>\n\n        <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n          <mat-label>{{ 'intervalPicker.anchorDate' | translate }}</mat-label>\n          <input\n            #startDateInput\n            name=\"anchorDateInput\"\n            matInput\n            type=\"date\"\n            [ngModel]=\"presenter.anchorDateHtmlString()\"\n            (ngModelChange)=\"controller.form.setAnchorDateFromString($event)\"\n            [readonly]=\"anchorReadOnly()\"\n          />\n          @if (!anchorReadOnly()) {\n            <button\n              mat-icon-button\n              matSuffix\n              [matMenuTriggerFor]=\"anchorMenu\"\n              [disabled]=\"presenter.isAnchorMenuDisabled()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">more_horiz</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n        @if (intervalInputMode() === 'date-time-range') {\n          <mat-form-field class=\"input-control-container-short\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.anchorTime' | translate }}</mat-label>\n            <input\n              matInput\n              name=\"anchorTimeInput\"\n              type=\"time\"\n              #anchorTimeControl=\"ngModel\"\n              step=\"1\"\n              [readonly]=\"anchorReadOnly()\"\n              [ngModel]=\"presenter.anchorTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setAnchorTimeFromString($event)\"\n            />\n            <button\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.anchor.resetAnchorTime()\"\n              [disabled]=\"anchorReadOnly() || presenter.isAnchorTimeMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n        }\n      </div>\n    }\n  </div>\n  <!-- result interval -->\n  <div class=\"layout-col place-center-center\">\n    <div class=\"date-interval mat-caption pt-xs\">\n      @if (presenter.startDateTimeAsJSDate()) {\n        {{ presenter.startDateTimeAsJSDate() | date: 'dd.MM. y, HH:mm:ss' }}\n      } @else {\n        {{ 'intervalPicker.startDateNotSet' | translate }}\n      }\n      <span> - </span>\n      @if (presenter.endDateTimeAsJSDate()) {\n        {{ presenter.endDateTimeAsJSDate() | date: 'dd.MM. y, HH:mm:ss' }}\n      } @else {\n        {{ 'intervalPicker.endDateNotSet' | translate }}\n      }\n    </div>\n    <div>\n      <span class=\"mat-caption\">{{ presenter.deltaHumanReadable() || '&nbsp;' }}</span>\n    </div>\n  </div>\n  <div class=\"layout-row gap-lg\">\n    <button\n      mat-flat-button\n      color=\"primary\"\n      (click)=\"controller.clearInterval()\"\n      [disabled]=\"!presenter.isValidIntervalSet()\"\n    >\n      {{ 'intervalPicker.clear' | translate }}\n    </button>\n\n    @if (!this.autoEmitMode()) {\n      <button color=\"primary\" mat-flat-button (click)=\"controller.manualEmit()\">\n        {{ 'actions.ok' | translate }}\n      </button>\n    }\n  </div>\n</div>\n", styles: [".interval-picker-component{min-width:840px;max-width:100%}.fixed-shifts-container{max-width:160px}.input-control-container{width:192px;max-width:100%}.input-control-container-short{width:140px;max-width:100%}.select-buttons-container button{white-space:nowrap;text-align:left;justify-content:flex-start}::ng-deep .interval-picker-component .mat-calendar-body-cell.elder-custom-anchor-date .mat-calendar-body-cell-content{border-radius:50%;background-color:#def;background-color:#b4d2ebbf}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: DateAdapter, useClass: CustomDateAdapter }], template: "<div class=\"interval-picker-component p-md layout-col gap-xxl\">\n  <div class=\"layout-row gap-xxl place-between-start\" style=\"gap: 5%\">\n    <div class=\"layout-col gap-md pt-xs\">\n      <div class=\"layout-col\">\n        <div class=\"layout-row select-buttons-container gap-sm\">\n          <div class=\"layout-col gap-xs place-start-stretch\">\n            <button mat-button type=\"button\" (click)=\"controller.select.selectCurrentDay()\">\n              @if (presenter.isFixedAnchorDateSet()) {\n                {{ 'intervalPicker.anchorDay' | translate }}\n              } @else {\n                {{ 'intervalPicker.today' | translate }}\n              }\n            </button>\n            <button mat-button type=\"button\" (click)=\"controller.select.selectYesterday()\">\n              @if (presenter.isFixedAnchorDateSet()) {\n                {{ 'intervalPicker.last' | translate }} 1 {{ 'intervalPicker.day' | translate }}\n              } @else {\n                {{ 'intervalPicker.yesterday' | translate }}\n              }\n            </button>\n            <button\n              mat-button\n              type=\"button\"\n              (click)=\"controller.select.selectLastSevenDaysIncludingToday()\"\n            >\n              {{ 'intervalPicker.last' | translate }} 7\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            <button\n              mat-button\n              type=\"button\"\n              (click)=\"controller.select.selectLastThirtyDaysIncludingToday()\"\n            >\n              {{ 'intervalPicker.last' | translate }} 30\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            <button\n              mat-button\n              type=\"button\"\n              (click)=\"controller.select.selectLast365daysIncludingToday()\"\n            >\n              {{ 'intervalPicker.last' | translate }} 365\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            @if (intervalInputMode() === 'date-time-range') {\n              <div class=\"pt-sm\"></div>\n              <button mat-button type=\"button\" (click)=\"controller.select.selectLastFiveMinutes()\">\n                {{ 'intervalPicker.last' | translate }} 5\n                {{ 'intervalPicker.minutes' | translate }}\n              </button>\n              <button mat-button type=\"button\" (click)=\"controller.select.selectLastHour()\">\n                {{ 'intervalPicker.last' | translate }} {{ 'intervalPicker.hour' | translate }}\n              </button>\n              <button mat-button type=\"button\" (click)=\"controller.select.selectLast24Hours()\">\n                {{ 'intervalPicker.last' | translate }} 24\n                {{ 'intervalPicker.hours' | translate }}\n              </button>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"layout-col\">\n      <!-- smart shift -->\n      <div class=\"layout-row place-around-center\">\n        <button\n          type=\"button\"\n          mat-icon-button\n          (click)=\"controller.shift.smartShift(-1)\"\n          [disabled]=\"!presenter.isValidIntervalSet()\"\n        >\n          <mat-icon>keyboard_double_arrow_left</mat-icon>\n        </button>\n        <span>{{ presenter.smartShiftMessage() }}</span>\n        <button\n          type=\"button\"\n          mat-icon-button\n          (click)=\"controller.shift.smartShift(1)\"\n          [disabled]=\"!presenter.isValidIntervalSet()\"\n        >\n          <mat-icon>keyboard_double_arrow_right</mat-icon>\n        </button>\n      </div>\n      <!-- calendars and input controls -->\n      <div\n        class=\"layout-row place-around-center\"\n        style=\"align-items: flex-start; min-height: 280px\"\n      >\n        <mat-calendar\n          #rangeCalendarStart\n          style=\"width: 210px; max-width: 100%\"\n          [selected]=\"presenter.dateRangeForCalendar()\"\n          (selectedChange)=\"controller.calendar.setStartDateFromJSDate($event)\"\n          [maxDate]=\"presenter.endDateTimeAsJSDate()\"\n          [dateClass]=\"presenter.calendarAnchorDateCssClassFn\"\n        >\n        </mat-calendar>\n        <mat-calendar\n          #rangeCalendarEnd\n          style=\"width: 210px; max-width: 100%\"\n          [selected]=\"presenter.dateRangeForCalendar()\"\n          (selectedChange)=\"controller.calendar.setEndDateFromJSDate($event)\"\n          [minDate]=\"presenter.startDateTimeAsJSDate()\"\n          [dateClass]=\"presenter.calendarAnchorDateCssClassFn\"\n        >\n        </mat-calendar>\n      </div>\n      <div class=\"layout-row place-around-center gap-xl pt-sm\">\n        <div class=\"layout-row place-around-center\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.startDate' | translate }}</mat-label>\n            <input\n              #startDateInput\n              name=\"startDateInput\"\n              matInput\n              type=\"date\"\n              [ngModel]=\"presenter.startDateHtmlString()\"\n              (ngModelChange)=\"controller.form.setStartDateFromString($event)\"\n            />\n          </mat-form-field>\n        </div>\n        <div class=\"layout-row place-around-center\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.endDate' | translate }}</mat-label>\n            <input\n              #endDateInput\n              name=\"endDateInput\"\n              matInput\n              type=\"date\"\n              [ngModel]=\"presenter.endDateHtmlString()\"\n              (ngModelChange)=\"controller.form.setEndDateFromString($event)\"\n            />\n          </mat-form-field>\n        </div>\n      </div>\n      @if (intervalInputMode() === 'date-time-range') {\n        <div class=\"layout-row place-around-center gap-xl pt-sm\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.startTime' | translate }}</mat-label>\n            <input\n              name=\"startTimeInput\"\n              matInput\n              type=\"time\"\n              #startTimeControl=\"ngModel\"\n              step=\"1\"\n              [ngModel]=\"presenter.startTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setStartTimeFromString($event)\"\n            />\n            <button\n              type=\"button\"\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.clearStartTime()\"\n              [disabled]=\"!presenter.isStartTimeSetAndNotMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.endTime' | translate }}</mat-label>\n            <input\n              name=\"endTimeInput\"\n              matInput\n              type=\"time\"\n              #endTimeControl=\"ngModel\"\n              step=\"1\"\n              [ngModel]=\"presenter.endTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setEndTimeFromString($event)\"\n            />\n            <button\n              type=\"button\"\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.clearEndTime()\"\n              [disabled]=\"!presenter.isEndTimeSetAndNotMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n        </div>\n      }\n      <br />\n    </div>\n    <div class=\"pt-xs\" style=\"width: 25%\">\n      <div class=\"layout-col gap-lg\">\n        <div class=\"layout-col gap-xs place-start-start\">\n          <!-- select current -->\n          <button type=\"button\" mat-button (click)=\"controller.select.selectCurrentWeek()\">\n            {{ 'intervalPicker.currentPeriod.week' | translate }}\n          </button>\n          <button type=\"button\" mat-button (click)=\"controller.select.selectCurrentMonth()\">\n            {{ 'intervalPicker.currentPeriod.month' | translate }}\n          </button>\n          <button type=\"button\" mat-button (click)=\"controller.select.selectCurrentQuarter()\">\n            {{ 'intervalPicker.currentPeriod.quarter' | translate }}\n          </button>\n          <button type=\"button\" mat-button (click)=\"controller.select.selectCurrentYear()\">\n            {{ 'intervalPicker.currentPeriod.year' | translate }}\n          </button>\n        </div>\n        <div class=\"fixed-shifts-container\">\n          <div class=\"layout-col place-start-stretch\">\n            <div class=\"layout-row place-between-center\">\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftDay(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.day' | translate }}</span>\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftDay(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n            <div class=\"layout-row place-between-center\">\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftMonth(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.month' | translate }}</span>\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftMonth(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n            <div class=\"layout-row place-between-center\">\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftYear(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.year' | translate }}</span>\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftYear(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n\n            @if (true) {\n              <!-- shift minute -->\n              <div class=\"layout-row place-between-center\">\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftMinute(-1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_left</mat-icon>\n                </button>\n                <span>{{ 'intervalPicker.minute' | translate }}</span>\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftMinute(1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_right</mat-icon>\n                </button>\n              </div>\n              <!-- shift hour -->\n              <div class=\"layout-row place-between-center\">\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftHour(-1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_left</mat-icon>\n                </button>\n                <span>{{ 'intervalPicker.hour' | translate }}</span>\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftHour(1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_right</mat-icon>\n                </button>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"layout-row place-between-center gap-xxl pt-sm\">\n  <div>\n    @if (showAnchor()) {\n      <div class=\"layout-row flex-none gap-md\">\n        <mat-menu #anchorMenu=\"matMenu\">\n          @if (presenter.startDateHtmlString()) {\n            <button\n              type=\"button\"\n              mat-menu-item\n              (click)=\"controller.anchor.setFixedAnchorPointToEndDateTime()\"\n              [disabled]=\"!presenter.startDateHtmlString()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">login</mat-icon>\n              <span>{{ 'intervalPicker.endDate' | translate }}</span>\n            </button>\n          }\n          @if (presenter.endDateHtmlString()) {\n            <button\n              type=\"button\"\n              mat-menu-item\n              (click)=\"controller.anchor.setFixedAnchorPointToStartDateTime()\"\n              [disabled]=\"!presenter.endDateHtmlString()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">logout</mat-icon>\n              <span>{{ 'intervalPicker.startDate' | translate }}</span>\n            </button>\n          }\n          @if (presenter.isFixedAnchorDateSet()) {\n            <button\n              type=\"button\"\n              mat-menu-item\n              (click)=\"controller.anchor.resetAnchor()\"\n              [disabled]=\"!presenter.isFixedAnchorDateSet() || anchorReadOnly()\"\n            >\n              <mat-icon>close</mat-icon>\n              <span>{{ 'intervalPicker.clear' | translate }}</span>\n            </button>\n          }\n        </mat-menu>\n\n        <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n          <mat-label>{{ 'intervalPicker.anchorDate' | translate }}</mat-label>\n          <input\n            #startDateInput\n            name=\"anchorDateInput\"\n            matInput\n            type=\"date\"\n            [ngModel]=\"presenter.anchorDateHtmlString()\"\n            (ngModelChange)=\"controller.form.setAnchorDateFromString($event)\"\n            [readonly]=\"anchorReadOnly()\"\n          />\n          @if (!anchorReadOnly()) {\n            <button\n              type=\"button\"\n              mat-icon-button\n              matSuffix\n              [matMenuTriggerFor]=\"anchorMenu\"\n              [disabled]=\"presenter.isAnchorMenuDisabled()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">more_horiz</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n        @if (intervalInputMode() === 'date-time-range') {\n          <mat-form-field class=\"input-control-container-short\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.anchorTime' | translate }}</mat-label>\n            <input\n              matInput\n              name=\"anchorTimeInput\"\n              type=\"time\"\n              #anchorTimeControl=\"ngModel\"\n              step=\"1\"\n              [readonly]=\"anchorReadOnly()\"\n              [ngModel]=\"presenter.anchorTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setAnchorTimeFromString($event)\"\n            />\n            <button\n              type=\"button\"\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.anchor.resetAnchorTime()\"\n              [disabled]=\"anchorReadOnly() || presenter.isAnchorTimeMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n        }\n      </div>\n    }\n  </div>\n  <!-- result interval -->\n  <div class=\"layout-col place-center-center\">\n    <div class=\"date-interval mat-caption pt-xs\">\n      @if (presenter.startDateTimeAsJSDate()) {\n        {{ presenter.startDateTimeAsJSDate() | date: 'dd.MM. y, HH:mm:ss' }}\n      } @else {\n        {{ 'intervalPicker.startDateNotSet' | translate }}\n      }\n      <span> - </span>\n      @if (presenter.endDateTimeAsJSDate()) {\n        {{ presenter.endDateTimeAsJSDate() | date: 'dd.MM. y, HH:mm:ss' }}\n      } @else {\n        {{ 'intervalPicker.endDateNotSet' | translate }}\n      }\n    </div>\n    <div>\n      <span class=\"mat-caption\">{{ presenter.deltaHumanReadable() || '&nbsp;' }}</span>\n    </div>\n  </div>\n  <div class=\"layout-row gap-lg\">\n    <button\n      type=\"button\"\n      mat-flat-button\n      color=\"primary\"\n      (click)=\"controller.clearInterval()\"\n      [disabled]=\"!presenter.isValidIntervalSet()\"\n    >\n      {{ 'intervalPicker.clear' | translate }}\n    </button>\n\n    @if (!this.autoEmitMode()) {\n      <button type=\"button\" color=\"primary\" mat-flat-button (click)=\"controller.manualEmit()\">\n        {{ 'actions.ok' | translate }}\n      </button>\n    }\n  </div>\n</div>\n", styles: [".interval-picker-component{min-width:840px;max-width:100%}.fixed-shifts-container{max-width:160px}.input-control-container{width:192px;max-width:100%}.input-control-container-short{width:140px;max-width:100%}.select-buttons-container button{white-space:nowrap;text-align:left;justify-content:flex-start}::ng-deep .interval-picker-component .mat-calendar-body-cell.elder-custom-anchor-date .mat-calendar-body-cell-content{border-radius:50%;background-color:#def;background-color:#b4d2ebbf}\n"] }]
         }], ctorParameters: () => [], propDecorators: { intervalChange: [{
                 type: Output
             }], calendarStart: [{
@@ -30665,6 +30665,7 @@ class ElderIntervalPickerToggleComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: ElderIntervalPickerToggleComponent, isStandalone: true, selector: "elder-interval-picker-toggle", inputs: { connectedIntervalInput: { classPropertyName: "connectedIntervalInput", publicName: "connectedIntervalInput", isSignal: false, isRequired: false, transformFunction: null }, showAnchor: { classPropertyName: "showAnchor", publicName: "showAnchor", isSignal: true, isRequired: false, transformFunction: null }, anchorReadOnly: { classPropertyName: "anchorReadOnly", publicName: "anchorReadOnly", isSignal: true, isRequired: false, transformFunction: null }, externalAnchorDateTime: { classPropertyName: "externalAnchorDateTime", publicName: "externalAnchorDateTime", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "connectedIntervalPicker", first: true, predicate: ["connectedIntervalPicker"], descendants: true }], ngImport: i0, template: `
     <span style="padding-right: 8px">
       <button
+        type="button"
         mat-icon-button
         [elderOverlayOrigin]="dateIntervalOverlay"
         [elderOverlayTrigger]="dateIntervalOverlay"
@@ -30712,6 +30713,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                     template: `
     <span style="padding-right: 8px">
       <button
+        type="button"
         mat-icon-button
         [elderOverlayOrigin]="dateIntervalOverlay"
         [elderOverlayTrigger]="dateIntervalOverlay"
@@ -31355,7 +31357,7 @@ class ElderLocalizedInputComponent extends FormFieldBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ElderLocalizedInputComponent, deps: [{ token: ElderLocalizedInputDialogService }, { token: LocalisationPickerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: ElderLocalizedInputComponent, isStandalone: true, selector: "elder-localized-input", inputs: { textColumns: "textColumns", translatedValue: "translatedValue" }, outputs: { translatedValueChange: "translatedValueChange" }, host: { classAttribute: "elder-form-field-host" }, providers: buildFormIntegrationProviders(ElderLocalizedInputComponent), queries: [{ propertyName: "textColumnsQuery", predicate: ElderLocalizedTextColumnDirective }], usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"appearance\" [color]=\"color\">\n  <mat-label *ngIf=\"label\">{{ label | translate }}</mat-label>\n\n  <mat-icon matPrefix *ngIf=\"icon\" [color]=\"color\">\n    {{ icon }}\n  </mat-icon>\n\n  <button\n    matSuffix\n    mat-icon-button\n    (click)=\"openTranslationPopup($event)\"\n    aria-label=\"Search\"\n    elderStopEventPropagation\n    tabIndex=\"-1\"\n  >\n    <mat-icon>translate</mat-icon>\n  </button>\n\n  <!-- A dynamic input -->\n  <input\n    matInput\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [required]=\"required\"\n    readonly\n    [name]=\"name + '-localized'\"\n    [ngModel]=\"inputText$ | async\"\n    [ngModelOptions]=\"{ standalone: true }\"\n  />\n\n  <mat-hint>{{ hintText$ | async }}</mat-hint>\n</mat-form-field>\n", styles: [".prefix-padding{padding-right:4px}.leading-icon{font-size:16px;width:16px;height:16px}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "directive", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: ElderLocalizedInputComponent, isStandalone: true, selector: "elder-localized-input", inputs: { textColumns: "textColumns", translatedValue: "translatedValue" }, outputs: { translatedValueChange: "translatedValueChange" }, host: { classAttribute: "elder-form-field-host" }, providers: buildFormIntegrationProviders(ElderLocalizedInputComponent), queries: [{ propertyName: "textColumnsQuery", predicate: ElderLocalizedTextColumnDirective }], usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"appearance\" [color]=\"color\">\n  <mat-label *ngIf=\"label\">{{ label | translate }}</mat-label>\n\n  <mat-icon matPrefix *ngIf=\"icon\" [color]=\"color\">\n    {{ icon }}\n  </mat-icon>\n\n  <button\n    matSuffix\n    mat-icon-button\n    (click)=\"openTranslationPopup($event)\"\n    aria-label=\"Search\"\n    type=\"button\"\n  >\n    <mat-icon>translate</mat-icon>\n  </button>\n\n  <!-- A dynamic input -->\n  <input\n    matInput\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [required]=\"required\"\n    readonly\n    [name]=\"name + '-localized'\"\n    [ngModel]=\"inputText$ | async\"\n    [ngModelOptions]=\"{ standalone: true }\"\n  />\n\n  <mat-hint>{{ hintText$ | async }}</mat-hint>\n</mat-form-field>\n", styles: [".prefix-padding{padding-right:4px}.leading-icon{font-size:16px;width:16px;height:16px}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ElderLocalizedInputComponent, decorators: [{
             type: Component,
@@ -31373,7 +31375,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         MatHint,
                         AsyncPipe,
                         TranslateModule,
-                    ], template: "<mat-form-field [appearance]=\"appearance\" [color]=\"color\">\n  <mat-label *ngIf=\"label\">{{ label | translate }}</mat-label>\n\n  <mat-icon matPrefix *ngIf=\"icon\" [color]=\"color\">\n    {{ icon }}\n  </mat-icon>\n\n  <button\n    matSuffix\n    mat-icon-button\n    (click)=\"openTranslationPopup($event)\"\n    aria-label=\"Search\"\n    elderStopEventPropagation\n    tabIndex=\"-1\"\n  >\n    <mat-icon>translate</mat-icon>\n  </button>\n\n  <!-- A dynamic input -->\n  <input\n    matInput\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [required]=\"required\"\n    readonly\n    [name]=\"name + '-localized'\"\n    [ngModel]=\"inputText$ | async\"\n    [ngModelOptions]=\"{ standalone: true }\"\n  />\n\n  <mat-hint>{{ hintText$ | async }}</mat-hint>\n</mat-form-field>\n", styles: [".prefix-padding{padding-right:4px}.leading-icon{font-size:16px;width:16px;height:16px}\n"] }]
+                    ], template: "<mat-form-field [appearance]=\"appearance\" [color]=\"color\">\n  <mat-label *ngIf=\"label\">{{ label | translate }}</mat-label>\n\n  <mat-icon matPrefix *ngIf=\"icon\" [color]=\"color\">\n    {{ icon }}\n  </mat-icon>\n\n  <button\n    matSuffix\n    mat-icon-button\n    (click)=\"openTranslationPopup($event)\"\n    aria-label=\"Search\"\n    type=\"button\"\n  >\n    <mat-icon>translate</mat-icon>\n  </button>\n\n  <!-- A dynamic input -->\n  <input\n    matInput\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [required]=\"required\"\n    readonly\n    [name]=\"name + '-localized'\"\n    [ngModel]=\"inputText$ | async\"\n    [ngModelOptions]=\"{ standalone: true }\"\n  />\n\n  <mat-hint>{{ hintText$ | async }}</mat-hint>\n</mat-form-field>\n", styles: [".prefix-padding{padding-right:4px}.leading-icon{font-size:16px;width:16px;height:16px}\n"] }]
         }], ctorParameters: () => [{ type: ElderLocalizedInputDialogService }, { type: LocalisationPickerService }], propDecorators: { textColumnsQuery: [{
                 type: ContentChildren,
                 args: [ElderLocalizedTextColumnDirective]
@@ -31816,7 +31818,7 @@ class ElderSearchBoxComponent {
         this.searchContextDirective.reset();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ElderSearchBoxComponent, deps: [{ token: ElderSearchContextDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: ElderSearchBoxComponent, isStandalone: true, selector: "elder-search-box", inputs: { autoPanel: "autoPanel", name: "name", queryKey: "queryKey", placeholder: "placeholder", label: "label", hint: "hint", autocomplete: "autocomplete", appearance: "appearance", dense: "dense" }, host: { classAttribute: "elder-form-field-host" }, queries: [{ propertyName: "customSearchPanel", first: true, predicate: ElderSearchPanelComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], descendants: true, isSignal: true }, { propertyName: "overlayComponent", first: true, predicate: ElderOverlayComponent, descendants: true, isSignal: true }], exportAs: ["elderSearchBox"], ngImport: i0, template: "<div class=\"layout-row place-stretch-center full flex\">\n  <mat-form-field\n    [appearance]=\"appearance\"\n    class=\"elder-search-box-field flex-auto my-xs\"\n    [class]=\"'elder-round-form-field'\"\n    subscriptSizing=\"dynamic\"\n    [elderDense]=\"dense\"\n  >\n    <button\n      matPrefix\n      mat-icon-button\n      type=\"button\"\n      [elderOverlayTrigger]=\"searchPanel\"\n      (click)=\"blurFocus($event)\"\n    >\n      <mat-icon>search</mat-icon>\n    </button>\n\n    <input\n      matInput\n      type=\"text\"\n      [name]=\"name\"\n      [placeholder]=\"placeholder\"\n      #search\n      cdkFocusInitial\n      ngModel\n      elderSearchInput\n      [elderSearchInputKey]=\"queryKey\"\n      #searchInput=\"elderSearchInput\"\n      [autocomplete]=\"autoPanel && customSearchPanel() ? 'off' : autocomplete\"\n      [elderOverlayOrigin]=\"searchPanel\"\n      [elderOverlayTrigger]=\"searchPanel\"\n      [elderOverlayTriggerType]=\"'focus'\"\n      [elderOverlayTriggerEnabled]=\"\n        autoPanel && customSearchPanel() && (searchInput?.state$ | async)?.pristine\n      \"\n    />\n\n    @if (hint) {\n      <mat-hint>{{ hint }}</mat-hint>\n    }\n\n    <div class=\"layout-row\" matSuffix>\n      @if (touchedSearchInputs$ | async; as touchedInputs) {\n        @if (touchedInputs.length > 0) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            (click)=\"clearSearch($event)\"\n            name=\"clear\"\n            aria-label=\"Clear\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n\n        @if (customSearchPanel()) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            name=\"openPanel\"\n            [elderOverlayTrigger]=\"searchPanel\"\n            (click)=\"blurFocus($event)\"\n          >\n            <mat-icon\n              [matBadge]=\"touchedInputs.length\"\n              matBadgeSize=\"small\"\n              [matBadgeOverlap]=\"true\"\n              [matBadgeHidden]=\"touchedInputs.length === 0\"\n              matBadgeColor=\"accent\"\n              [color]=\"touchedInputs.length > 0 ? 'accent' : undefined\"\n            >\n              filter_list\n            </mat-icon>\n          </button>\n        }\n      }\n    </div>\n  </mat-form-field>\n</div>\n\n<!-- Overlay Panel for advanced search -->\n<elder-overlay #searchPanel=\"elderOverlay\">\n  <elder-dialog-panel class=\"elder-search-panel-container\">\n    <!-- Project the users custom search panel here -->\n    <ng-content select=\"elder-search-panel\"></ng-content>\n\n    <div class=\"layout-row place-between-center\">\n      <button mat-stroked-button type=\"button\" name=\"clear\" (click)=\"clearSearch($event)\">\n        {{ 'context.reset' | translate }}\n      </button>\n\n      <button\n        mat-flat-button\n        type=\"button\"\n        name=\"ok\"\n        color=\"primary\"\n        (click)=\"searchPanel.closeOverlay()\"\n      >\n        Ok\n      </button>\n    </div>\n  </elder-dialog-panel>\n</elder-overlay>\n", styles: [".elder-search-panel-container{min-width:250px;border-radius:var(--elder-pane-border-radius)}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense", "subscriptSizing", "floatLabel"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: ElderOverlayTriggerDirective, selector: "[elderOverlayTrigger]", inputs: ["elderOverlayTrigger", "elderOverlayTriggerType", "elderOverlayTriggerEnabled"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ElderSearchInputDirective, selector: "[elderSearchInput]", inputs: ["elderSearchInputTransform", "elderSearchInput", "elderSearchInputFallback", "valueAsId", "elderSearchInputKey"], exportAs: ["elderSearchInput"] }, { kind: "directive", type: ElderOverlayOriginDirective, selector: "[elderOverlayOrigin]", inputs: ["elderOverlayOrigin"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: ElderOverlayComponent, selector: "elder-overlay", inputs: ["originX", "originY", "overlayX", "overlayY", "offsetY", "offsetX", "backdrop", "backdropVisible", "origin", "positionStrategy", "overlaySize"], outputs: ["keydownEvents", "attachedChange"], exportAs: ["elderOverlay"] }, { kind: "component", type: ElderDialogPanelComponent, selector: "elder-dialog-panel" }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: ElderSearchBoxComponent, isStandalone: true, selector: "elder-search-box", inputs: { autoPanel: "autoPanel", name: "name", queryKey: "queryKey", placeholder: "placeholder", label: "label", hint: "hint", autocomplete: "autocomplete", appearance: "appearance", dense: "dense" }, host: { classAttribute: "elder-form-field-host" }, queries: [{ propertyName: "customSearchPanel", first: true, predicate: ElderSearchPanelComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], descendants: true, isSignal: true }, { propertyName: "overlayComponent", first: true, predicate: ElderOverlayComponent, descendants: true, isSignal: true }], exportAs: ["elderSearchBox"], ngImport: i0, template: "<div class=\"layout-row place-stretch-center full flex\">\n  <mat-form-field\n    [appearance]=\"appearance\"\n    class=\"elder-search-box-field flex-auto my-xs\"\n    [class]=\"'elder-round-form-field'\"\n    subscriptSizing=\"dynamic\"\n    [elderDense]=\"dense\"\n  >\n    <button\n      matPrefix\n      mat-icon-button\n      type=\"button\"\n      [elderOverlayTrigger]=\"searchPanel\"\n      (click)=\"blurFocus($event)\"\n    >\n      <mat-icon>search</mat-icon>\n    </button>\n\n    <input\n      matInput\n      type=\"text\"\n      [name]=\"name\"\n      [placeholder]=\"placeholder\"\n      #search\n      cdkFocusInitial\n      ngModel\n      elderSearchInput\n      [elderSearchInputKey]=\"queryKey\"\n      #searchInput=\"elderSearchInput\"\n      [autocomplete]=\"autoPanel && customSearchPanel() ? 'off' : autocomplete\"\n      [elderOverlayOrigin]=\"searchPanel\"\n      [elderOverlayTrigger]=\"searchPanel\"\n      [elderOverlayTriggerType]=\"'focus'\"\n      [elderOverlayTriggerEnabled]=\"\n        autoPanel && customSearchPanel() && (searchInput?.state$ | async)?.pristine\n      \"\n    />\n\n    @if (hint) {\n      <mat-hint>{{ hint }}</mat-hint>\n    }\n\n    <div class=\"layout-row\" matSuffix>\n      @if (touchedSearchInputs$ | async; as touchedInputs) {\n        @if (touchedInputs.length > 0) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            (click)=\"clearSearch($event)\"\n            name=\"clear\"\n            aria-label=\"Clear\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n\n        @if (customSearchPanel()) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            name=\"openPanel\"\n            [elderOverlayTrigger]=\"searchPanel\"\n            (click)=\"blurFocus($event)\"\n          >\n            <mat-icon\n              [matBadge]=\"touchedInputs.length\"\n              matBadgeSize=\"small\"\n              [matBadgeOverlap]=\"true\"\n              [matBadgeHidden]=\"touchedInputs.length === 0\"\n              matBadgeColor=\"accent\"\n              [color]=\"touchedInputs.length > 0 ? 'accent' : undefined\"\n            >\n              filter_list\n            </mat-icon>\n          </button>\n        }\n      }\n    </div>\n  </mat-form-field>\n</div>\n\n<!-- Overlay Panel for advanced search -->\n<elder-overlay #searchPanel=\"elderOverlay\">\n  <elder-dialog-panel class=\"elder-search-panel-container\">\n    <!-- Project the users custom search panel here -->\n    <ng-content select=\"elder-search-panel\"></ng-content>\n\n    <div class=\"layout-row place-between-center\">\n      <button mat-button type=\"button\" name=\"clear\" (click)=\"clearSearch($event)\">\n        {{ 'context.reset' | translate }}\n      </button>\n\n      <button\n        mat-flat-button\n        type=\"button\"\n        name=\"ok\"\n        color=\"primary\"\n        (click)=\"searchPanel.closeOverlay()\"\n      >\n        Ok\n      </button>\n    </div>\n  </elder-dialog-panel>\n</elder-overlay>\n", styles: [".elder-search-panel-container{min-width:250px;border-radius:var(--elder-pane-border-radius)}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense", "subscriptSizing", "floatLabel"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: ElderOverlayTriggerDirective, selector: "[elderOverlayTrigger]", inputs: ["elderOverlayTrigger", "elderOverlayTriggerType", "elderOverlayTriggerEnabled"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ElderSearchInputDirective, selector: "[elderSearchInput]", inputs: ["elderSearchInputTransform", "elderSearchInput", "elderSearchInputFallback", "valueAsId", "elderSearchInputKey"], exportAs: ["elderSearchInput"] }, { kind: "directive", type: ElderOverlayOriginDirective, selector: "[elderOverlayOrigin]", inputs: ["elderOverlayOrigin"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: ElderOverlayComponent, selector: "elder-overlay", inputs: ["originX", "originY", "overlayX", "overlayY", "offsetY", "offsetX", "backdrop", "backdropVisible", "origin", "positionStrategy", "overlaySize"], outputs: ["keydownEvents", "attachedChange"], exportAs: ["elderOverlay"] }, { kind: "component", type: ElderDialogPanelComponent, selector: "elder-dialog-panel" }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ElderSearchBoxComponent, decorators: [{
             type: Component,
@@ -31840,7 +31842,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         MatButton,
                         AsyncPipe,
                         TranslateModule,
-                    ], template: "<div class=\"layout-row place-stretch-center full flex\">\n  <mat-form-field\n    [appearance]=\"appearance\"\n    class=\"elder-search-box-field flex-auto my-xs\"\n    [class]=\"'elder-round-form-field'\"\n    subscriptSizing=\"dynamic\"\n    [elderDense]=\"dense\"\n  >\n    <button\n      matPrefix\n      mat-icon-button\n      type=\"button\"\n      [elderOverlayTrigger]=\"searchPanel\"\n      (click)=\"blurFocus($event)\"\n    >\n      <mat-icon>search</mat-icon>\n    </button>\n\n    <input\n      matInput\n      type=\"text\"\n      [name]=\"name\"\n      [placeholder]=\"placeholder\"\n      #search\n      cdkFocusInitial\n      ngModel\n      elderSearchInput\n      [elderSearchInputKey]=\"queryKey\"\n      #searchInput=\"elderSearchInput\"\n      [autocomplete]=\"autoPanel && customSearchPanel() ? 'off' : autocomplete\"\n      [elderOverlayOrigin]=\"searchPanel\"\n      [elderOverlayTrigger]=\"searchPanel\"\n      [elderOverlayTriggerType]=\"'focus'\"\n      [elderOverlayTriggerEnabled]=\"\n        autoPanel && customSearchPanel() && (searchInput?.state$ | async)?.pristine\n      \"\n    />\n\n    @if (hint) {\n      <mat-hint>{{ hint }}</mat-hint>\n    }\n\n    <div class=\"layout-row\" matSuffix>\n      @if (touchedSearchInputs$ | async; as touchedInputs) {\n        @if (touchedInputs.length > 0) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            (click)=\"clearSearch($event)\"\n            name=\"clear\"\n            aria-label=\"Clear\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n\n        @if (customSearchPanel()) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            name=\"openPanel\"\n            [elderOverlayTrigger]=\"searchPanel\"\n            (click)=\"blurFocus($event)\"\n          >\n            <mat-icon\n              [matBadge]=\"touchedInputs.length\"\n              matBadgeSize=\"small\"\n              [matBadgeOverlap]=\"true\"\n              [matBadgeHidden]=\"touchedInputs.length === 0\"\n              matBadgeColor=\"accent\"\n              [color]=\"touchedInputs.length > 0 ? 'accent' : undefined\"\n            >\n              filter_list\n            </mat-icon>\n          </button>\n        }\n      }\n    </div>\n  </mat-form-field>\n</div>\n\n<!-- Overlay Panel for advanced search -->\n<elder-overlay #searchPanel=\"elderOverlay\">\n  <elder-dialog-panel class=\"elder-search-panel-container\">\n    <!-- Project the users custom search panel here -->\n    <ng-content select=\"elder-search-panel\"></ng-content>\n\n    <div class=\"layout-row place-between-center\">\n      <button mat-stroked-button type=\"button\" name=\"clear\" (click)=\"clearSearch($event)\">\n        {{ 'context.reset' | translate }}\n      </button>\n\n      <button\n        mat-flat-button\n        type=\"button\"\n        name=\"ok\"\n        color=\"primary\"\n        (click)=\"searchPanel.closeOverlay()\"\n      >\n        Ok\n      </button>\n    </div>\n  </elder-dialog-panel>\n</elder-overlay>\n", styles: [".elder-search-panel-container{min-width:250px;border-radius:var(--elder-pane-border-radius)}\n"] }]
+                    ], template: "<div class=\"layout-row place-stretch-center full flex\">\n  <mat-form-field\n    [appearance]=\"appearance\"\n    class=\"elder-search-box-field flex-auto my-xs\"\n    [class]=\"'elder-round-form-field'\"\n    subscriptSizing=\"dynamic\"\n    [elderDense]=\"dense\"\n  >\n    <button\n      matPrefix\n      mat-icon-button\n      type=\"button\"\n      [elderOverlayTrigger]=\"searchPanel\"\n      (click)=\"blurFocus($event)\"\n    >\n      <mat-icon>search</mat-icon>\n    </button>\n\n    <input\n      matInput\n      type=\"text\"\n      [name]=\"name\"\n      [placeholder]=\"placeholder\"\n      #search\n      cdkFocusInitial\n      ngModel\n      elderSearchInput\n      [elderSearchInputKey]=\"queryKey\"\n      #searchInput=\"elderSearchInput\"\n      [autocomplete]=\"autoPanel && customSearchPanel() ? 'off' : autocomplete\"\n      [elderOverlayOrigin]=\"searchPanel\"\n      [elderOverlayTrigger]=\"searchPanel\"\n      [elderOverlayTriggerType]=\"'focus'\"\n      [elderOverlayTriggerEnabled]=\"\n        autoPanel && customSearchPanel() && (searchInput?.state$ | async)?.pristine\n      \"\n    />\n\n    @if (hint) {\n      <mat-hint>{{ hint }}</mat-hint>\n    }\n\n    <div class=\"layout-row\" matSuffix>\n      @if (touchedSearchInputs$ | async; as touchedInputs) {\n        @if (touchedInputs.length > 0) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            (click)=\"clearSearch($event)\"\n            name=\"clear\"\n            aria-label=\"Clear\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n\n        @if (customSearchPanel()) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            name=\"openPanel\"\n            [elderOverlayTrigger]=\"searchPanel\"\n            (click)=\"blurFocus($event)\"\n          >\n            <mat-icon\n              [matBadge]=\"touchedInputs.length\"\n              matBadgeSize=\"small\"\n              [matBadgeOverlap]=\"true\"\n              [matBadgeHidden]=\"touchedInputs.length === 0\"\n              matBadgeColor=\"accent\"\n              [color]=\"touchedInputs.length > 0 ? 'accent' : undefined\"\n            >\n              filter_list\n            </mat-icon>\n          </button>\n        }\n      }\n    </div>\n  </mat-form-field>\n</div>\n\n<!-- Overlay Panel for advanced search -->\n<elder-overlay #searchPanel=\"elderOverlay\">\n  <elder-dialog-panel class=\"elder-search-panel-container\">\n    <!-- Project the users custom search panel here -->\n    <ng-content select=\"elder-search-panel\"></ng-content>\n\n    <div class=\"layout-row place-between-center\">\n      <button mat-button type=\"button\" name=\"clear\" (click)=\"clearSearch($event)\">\n        {{ 'context.reset' | translate }}\n      </button>\n\n      <button\n        mat-flat-button\n        type=\"button\"\n        name=\"ok\"\n        color=\"primary\"\n        (click)=\"searchPanel.closeOverlay()\"\n      >\n        Ok\n      </button>\n    </div>\n  </elder-dialog-panel>\n</elder-overlay>\n", styles: [".elder-search-panel-container{min-width:250px;border-radius:var(--elder-pane-border-radius)}\n"] }]
         }], ctorParameters: () => [{ type: ElderSearchContextDirective }], propDecorators: { autoPanel: [{
                 type: Input
             }], name: [{
@@ -33964,11 +33966,11 @@ class ElderButtonGroupComponent {
     constructor() { }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ElderButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: ElderButtonGroupComponent, isStandalone: true, selector: "elder-button-group", ngImport: i0, template: "<div class=\"layout-row elder-button-group\">\n  <ng-content></ng-content>\n</div>\n", styles: [".elder-button-group button{padding:0 8px;border:var(--elder-border-light)}.elder-button-group button:not(:first-child):not(:last-child){border-radius:0;border-left:0}.elder-button-group button:first-child:not(:last-child){border-radius:var(--elder-border-radius-sm) 0 0 var(--elder-border-radius-sm)}.elder-button-group button:last-child:not(:first-child){border-radius:0 4px 4px 0;border-left:0}.elder-button-group button:last-child:first-child{border-radius:var(--elder-border-radius-sm)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: ElderButtonGroupComponent, isStandalone: true, selector: "elder-button-group", ngImport: i0, template: "<div class=\"layout-row elder-button-group\">\n  <ng-content></ng-content>\n</div>\n", styles: [".elder-button-group button{border:var(--elder-border-light);border-width:0!important;min-width:60px!important}.elder-button-group button:not(:first-child):not(:last-child){border-radius:0;border-left:0}.elder-button-group button:first-child:not(:last-child){border-radius:var(--mdc-filled-button-container-shape) 0 0 var(--mdc-filled-button-container-shape);border-right:0}.elder-button-group button:last-child:not(:first-child){border-radius:0 var(--mdc-filled-button-container-shape) var(--mdc-filled-button-container-shape) 0;border-left:0}.elder-button-group button:last-child:first-child{border-radius:var(--mdc-filled-button-container-shape)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ElderButtonGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-button-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, template: "<div class=\"layout-row elder-button-group\">\n  <ng-content></ng-content>\n</div>\n", styles: [".elder-button-group button{padding:0 8px;border:var(--elder-border-light)}.elder-button-group button:not(:first-child):not(:last-child){border-radius:0;border-left:0}.elder-button-group button:first-child:not(:last-child){border-radius:var(--elder-border-radius-sm) 0 0 var(--elder-border-radius-sm)}.elder-button-group button:last-child:not(:first-child){border-radius:0 4px 4px 0;border-left:0}.elder-button-group button:last-child:first-child{border-radius:var(--elder-border-radius-sm)}\n"] }]
+            args: [{ selector: 'elder-button-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, template: "<div class=\"layout-row elder-button-group\">\n  <ng-content></ng-content>\n</div>\n", styles: [".elder-button-group button{border:var(--elder-border-light);border-width:0!important;min-width:60px!important}.elder-button-group button:not(:first-child):not(:last-child){border-radius:0;border-left:0}.elder-button-group button:first-child:not(:last-child){border-radius:var(--mdc-filled-button-container-shape) 0 0 var(--mdc-filled-button-container-shape);border-right:0}.elder-button-group button:last-child:not(:first-child){border-radius:0 var(--mdc-filled-button-container-shape) var(--mdc-filled-button-container-shape) 0;border-left:0}.elder-button-group button:last-child:first-child{border-radius:var(--mdc-filled-button-container-shape)}\n"] }]
         }], ctorParameters: () => [] });
 
 class ElderUrlFragmentSwitcherComponent {
@@ -34003,6 +34005,8 @@ class ElderUrlFragmentSwitcherComponent {
      **************************************************************************/
     ngOnInit() {
         if (!this.disable) {
+            console.log('URL FRAGMEENTS');
+            console.log(this.urlFragments);
             const urlFragment = this.urlFragments.find((c) => {
                 try {
                     return c.fragment === this.urlRegex.exec(window.location.href)[this.regexArrayIndex];
@@ -34011,6 +34015,8 @@ class ElderUrlFragmentSwitcherComponent {
                     return false;
                 }
             });
+            console.log('URL FRAGMENT');
+            console.log(urlFragment);
             if (urlFragment) {
                 this.activeUrlFragment$.next(urlFragment);
             }
@@ -34026,7 +34032,7 @@ class ElderUrlFragmentSwitcherComponent {
         window.open(window.location.href.replace(this.urlRegex.exec(window.location.href)[this.regexArrayIndex], urlFragment), this.windowOpenIn);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ElderUrlFragmentSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: ElderUrlFragmentSwitcherComponent, isStandalone: true, selector: "elder-url-fragment-switcher", inputs: { disable: "disable", urlFragments: "urlFragments", urlRegex: "urlRegex", regexArrayIndex: "regexArrayIndex", windowOpenIn: "windowOpenIn" }, ngImport: i0, template: "<ng-container *ngIf=\"activeUrlFragment$ | async as activeUrlFragment\">\n  <elder-button-group>\n    <button\n      mat-stroked-button\n      type=\"button\"\n      disabled\n      [ngStyle]=\"{ 'background-color': activeUrlFragment.color }\"\n    >\n      <div class=\"layout-col\">\n        <span *ngIf=\"!disable\" class=\"caption\">{{ activeUrlFragment.name }}</span>\n      </div>\n    </button>\n\n    <button\n      mat-stroked-button\n      type=\"button\"\n      *ngIf=\"!disable\"\n      [matMenuTriggerFor]=\"fragmentMenu\"\n      [ngStyle]=\"{ 'background-color': activeUrlFragment.color }\"\n    >\n      <mat-icon>flip_camera_android</mat-icon>\n    </button>\n  </elder-button-group>\n</ng-container>\n\n<mat-menu #fragmentMenu=\"matMenu\">\n  <button\n    mat-menu-item\n    type=\"button\"\n    *ngFor=\"let urlFragment of urlFragments\"\n    (click)=\"setActiveUrlFragment(urlFragment.fragment)\"\n  >\n    <mat-icon [ngStyle]=\"{ color: urlFragment.color }\">flip_camera_android</mat-icon>\n    <span>{{ urlFragment.name }}</span>\n  </button>\n</mat-menu>\n", styles: [".activeURlFragment{padding-left:6px}.mat-body-strong{line-height:5px;padding-top:10px;padding-bottom:8px;color:#000}.caption{color:#fff}.mat-body-strong-no-caption{line-height:5px;padding-top:15px;padding-bottom:14px;color:#000}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ElderButtonGroupComponent, selector: "elder-button-group" }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: ElderUrlFragmentSwitcherComponent, isStandalone: true, selector: "elder-url-fragment-switcher", inputs: { disable: "disable", urlFragments: "urlFragments", urlRegex: "urlRegex", regexArrayIndex: "regexArrayIndex", windowOpenIn: "windowOpenIn" }, ngImport: i0, template: "<ng-container *ngIf=\"activeUrlFragment$ | async as activeUrlFragment\">\n  <elder-button-group>\n    <button\n      class=\"status-button\"\n      mat-stroked-button\n      type=\"button\"\n      disabled\n      [ngStyle]=\"{ 'background-color': activeUrlFragment.color }\"\n    >\n      <div class=\"layout-col\">\n        <span *ngIf=\"!disable\" class=\"caption\">{{ activeUrlFragment.name }}</span>\n      </div>\n    </button>\n\n    <button\n      mat-stroked-button\n      type=\"button\"\n      *ngIf=\"!disable\"\n      [matMenuTriggerFor]=\"fragmentMenu\"\n      [ngStyle]=\"{ 'background-color': activeUrlFragment.color }\"\n    >\n      <mat-icon>flip_camera_android</mat-icon>\n    </button>\n  </elder-button-group>\n</ng-container>\n\n<mat-menu #fragmentMenu=\"matMenu\">\n  <button\n    mat-menu-item\n    type=\"button\"\n    *ngFor=\"let urlFragment of urlFragments\"\n    (click)=\"setActiveUrlFragment(urlFragment.fragment)\"\n  >\n    <mat-icon [ngStyle]=\"{ color: urlFragment.color }\">flip_camera_android</mat-icon>\n    <span>{{ urlFragment.name }}</span>\n  </button>\n</mat-menu>\n", styles: [".activeURlFragment{padding-left:6px}.mat-body-strong{line-height:5px;padding-top:10px;padding-bottom:8px;color:#000}.caption{color:#fff}.mat-body-strong-no-caption{line-height:5px;padding-top:15px;padding-bottom:14px;color:#000}.status-button.status-button .caption{color:#f5f5f5!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ElderButtonGroupComponent, selector: "elder-button-group" }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ElderUrlFragmentSwitcherComponent, decorators: [{
             type: Component,
@@ -34041,7 +34047,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         NgFor,
                         MatMenuItem,
                         AsyncPipe,
-                    ], template: "<ng-container *ngIf=\"activeUrlFragment$ | async as activeUrlFragment\">\n  <elder-button-group>\n    <button\n      mat-stroked-button\n      type=\"button\"\n      disabled\n      [ngStyle]=\"{ 'background-color': activeUrlFragment.color }\"\n    >\n      <div class=\"layout-col\">\n        <span *ngIf=\"!disable\" class=\"caption\">{{ activeUrlFragment.name }}</span>\n      </div>\n    </button>\n\n    <button\n      mat-stroked-button\n      type=\"button\"\n      *ngIf=\"!disable\"\n      [matMenuTriggerFor]=\"fragmentMenu\"\n      [ngStyle]=\"{ 'background-color': activeUrlFragment.color }\"\n    >\n      <mat-icon>flip_camera_android</mat-icon>\n    </button>\n  </elder-button-group>\n</ng-container>\n\n<mat-menu #fragmentMenu=\"matMenu\">\n  <button\n    mat-menu-item\n    type=\"button\"\n    *ngFor=\"let urlFragment of urlFragments\"\n    (click)=\"setActiveUrlFragment(urlFragment.fragment)\"\n  >\n    <mat-icon [ngStyle]=\"{ color: urlFragment.color }\">flip_camera_android</mat-icon>\n    <span>{{ urlFragment.name }}</span>\n  </button>\n</mat-menu>\n", styles: [".activeURlFragment{padding-left:6px}.mat-body-strong{line-height:5px;padding-top:10px;padding-bottom:8px;color:#000}.caption{color:#fff}.mat-body-strong-no-caption{line-height:5px;padding-top:15px;padding-bottom:14px;color:#000}\n"] }]
+                    ], template: "<ng-container *ngIf=\"activeUrlFragment$ | async as activeUrlFragment\">\n  <elder-button-group>\n    <button\n      class=\"status-button\"\n      mat-stroked-button\n      type=\"button\"\n      disabled\n      [ngStyle]=\"{ 'background-color': activeUrlFragment.color }\"\n    >\n      <div class=\"layout-col\">\n        <span *ngIf=\"!disable\" class=\"caption\">{{ activeUrlFragment.name }}</span>\n      </div>\n    </button>\n\n    <button\n      mat-stroked-button\n      type=\"button\"\n      *ngIf=\"!disable\"\n      [matMenuTriggerFor]=\"fragmentMenu\"\n      [ngStyle]=\"{ 'background-color': activeUrlFragment.color }\"\n    >\n      <mat-icon>flip_camera_android</mat-icon>\n    </button>\n  </elder-button-group>\n</ng-container>\n\n<mat-menu #fragmentMenu=\"matMenu\">\n  <button\n    mat-menu-item\n    type=\"button\"\n    *ngFor=\"let urlFragment of urlFragments\"\n    (click)=\"setActiveUrlFragment(urlFragment.fragment)\"\n  >\n    <mat-icon [ngStyle]=\"{ color: urlFragment.color }\">flip_camera_android</mat-icon>\n    <span>{{ urlFragment.name }}</span>\n  </button>\n</mat-menu>\n", styles: [".activeURlFragment{padding-left:6px}.mat-body-strong{line-height:5px;padding-top:10px;padding-bottom:8px;color:#000}.caption{color:#fff}.mat-body-strong-no-caption{line-height:5px;padding-top:15px;padding-bottom:14px;color:#000}.status-button.status-button .caption{color:#f5f5f5!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { disable: [{
                 type: Input
             }], urlFragments: [{
@@ -35851,11 +35857,11 @@ class ElderPageExitLockIndicatorComponent {
         this.locks = toSignal(this.pageExitGuardService.locks$);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ElderPageExitLockIndicatorComponent, deps: [{ token: PageExitGuardService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: ElderPageExitLockIndicatorComponent, isStandalone: true, selector: "elder-page-exit-lock-indicator", ngImport: i0, template: "@if (isPageExitBlocked()) {\n  <button mat-icon-button [elderOverlayTrigger]=\"overlay\">\n    <mat-icon color=\"accent\">lock_clock</mat-icon>\n  </button>\n}\n\n<elder-overlay #overlay=\"elderOverlay\" originX=\"center\" overlayX=\"center\">\n  <elder-page-exit-lock-overview [locks]=\"locks()\" class=\"panel\"> </elder-page-exit-lock-overview>\n</elder-overlay>\n", styles: [".panel{width:250px;height:250px;border-radius:var(--elder-border-radius-sm);overflow:hidden;box-shadow:var(--elder-box-shadow-default)}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ElderOverlayModule }, { kind: "component", type: ElderOverlayComponent, selector: "elder-overlay", inputs: ["originX", "originY", "overlayX", "overlayY", "offsetY", "offsetX", "backdrop", "backdropVisible", "origin", "positionStrategy", "overlaySize"], outputs: ["keydownEvents", "attachedChange"], exportAs: ["elderOverlay"] }, { kind: "directive", type: ElderOverlayTriggerDirective, selector: "[elderOverlayTrigger]", inputs: ["elderOverlayTrigger", "elderOverlayTriggerType", "elderOverlayTriggerEnabled"] }, { kind: "component", type: ElderPageExitLockOverviewComponent, selector: "elder-page-exit-lock-overview", inputs: ["locks"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: ElderPageExitLockIndicatorComponent, isStandalone: true, selector: "elder-page-exit-lock-indicator", ngImport: i0, template: "@if (isPageExitBlocked()) {\n  <button mat-icon-button [elderOverlayTrigger]=\"overlay\" type=\"button\">\n    <mat-icon color=\"accent\">lock_clock</mat-icon>\n  </button>\n}\n\n<elder-overlay #overlay=\"elderOverlay\" originX=\"center\" overlayX=\"center\">\n  <elder-page-exit-lock-overview [locks]=\"locks()\" class=\"panel\"> </elder-page-exit-lock-overview>\n</elder-overlay>\n", styles: [".panel{width:250px;height:250px;border-radius:var(--elder-border-radius-sm);overflow:hidden;box-shadow:var(--elder-box-shadow-default)}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ElderOverlayModule }, { kind: "component", type: ElderOverlayComponent, selector: "elder-overlay", inputs: ["originX", "originY", "overlayX", "overlayY", "offsetY", "offsetX", "backdrop", "backdropVisible", "origin", "positionStrategy", "overlaySize"], outputs: ["keydownEvents", "attachedChange"], exportAs: ["elderOverlay"] }, { kind: "directive", type: ElderOverlayTriggerDirective, selector: "[elderOverlayTrigger]", inputs: ["elderOverlayTrigger", "elderOverlayTriggerType", "elderOverlayTriggerEnabled"] }, { kind: "component", type: ElderPageExitLockOverviewComponent, selector: "elder-page-exit-lock-overview", inputs: ["locks"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ElderPageExitLockIndicatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-page-exit-lock-indicator', imports: [MatIconButton, MatIcon, ElderOverlayModule, ElderPageExitLockOverviewComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isPageExitBlocked()) {\n  <button mat-icon-button [elderOverlayTrigger]=\"overlay\">\n    <mat-icon color=\"accent\">lock_clock</mat-icon>\n  </button>\n}\n\n<elder-overlay #overlay=\"elderOverlay\" originX=\"center\" overlayX=\"center\">\n  <elder-page-exit-lock-overview [locks]=\"locks()\" class=\"panel\"> </elder-page-exit-lock-overview>\n</elder-overlay>\n", styles: [".panel{width:250px;height:250px;border-radius:var(--elder-border-radius-sm);overflow:hidden;box-shadow:var(--elder-box-shadow-default)}\n"] }]
+            args: [{ selector: 'elder-page-exit-lock-indicator', imports: [MatIconButton, MatIcon, ElderOverlayModule, ElderPageExitLockOverviewComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isPageExitBlocked()) {\n  <button mat-icon-button [elderOverlayTrigger]=\"overlay\" type=\"button\">\n    <mat-icon color=\"accent\">lock_clock</mat-icon>\n  </button>\n}\n\n<elder-overlay #overlay=\"elderOverlay\" originX=\"center\" overlayX=\"center\">\n  <elder-page-exit-lock-overview [locks]=\"locks()\" class=\"panel\"> </elder-page-exit-lock-overview>\n</elder-overlay>\n", styles: [".panel{width:250px;height:250px;border-radius:var(--elder-border-radius-sm);overflow:hidden;box-shadow:var(--elder-box-shadow-default)}\n"] }]
         }], ctorParameters: () => [{ type: PageExitGuardService }] });
 
 class PageExitGuardModule {