@elderbyte/ngx-starter 18.12.4 → 18.12.6

package/fesm2022/elderbyte-ngx-starter.mjs

@@ -1,11 +1,11 @@
 import * as i2$1 from '@angular/common';
 import { formatDate, CommonModule, formatCurrency, getCurrencySymbol, NgIf, AsyncPipe, NgFor, NgClass, NgTemplateOutlet, NgStyle, formatNumber, DecimalPipe, DatePipe, registerLocaleData, CurrencyPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Pipe, LOCALE_ID, Inject, NgModule, Optional, SkipSelf, Directive, Output, Input, forwardRef, ViewChild, HostBinding, ViewChildren, ContentChild, Injectable, Component, ChangeDetectionStrategy, Host, APP_INITIALIZER, TemplateRef, HostListener, EventEmitter, input, ViewEncapsulation, InjectionToken, ContentChildren, signal, computed, model, output, effect, Self, untracked, booleanAttribute, ElementRef, viewChild, contentChild } from '@angular/core';
+import { Pipe, LOCALE_ID, Inject, NgModule, Optional, SkipSelf, Directive, Output, Input, forwardRef, ViewChild, HostBinding, ViewChildren, ContentChild, Injectable, Component, ChangeDetectionStrategy, Host, APP_INITIALIZER, TemplateRef, HostListener, EventEmitter, input, ViewEncapsulation, InjectionToken, ContentChildren, signal, computed, model, output, effect, Self, ElementRef, booleanAttribute, viewChild, contentChild } from '@angular/core';
 import * as i1 from '@angular/platform-browser';
 import { Duration, Period, TemporalQueries, LocalTime, Instant, LocalDate, nativeJs, ZoneId, DateTimeFormatter, convert, ZonedDateTime, Temporal as Temporal$1 } from '@js-joda/core';
 import { LoggerFactory } from '@elderbyte/ts-logger';
-import { timer, defer, ReplaySubject, concat, finalize, exhaustMap, BehaviorSubject, Subject, switchMap, of, combineLatest, EMPTY, merge, throwError, forkJoin, mergeWith, Observable, from, toArray, zip, mergeMap as mergeMap$1, fromEvent, skipUntil, combineLatestWith as combineLatestWith$1, NEVER } from 'rxjs';
+import { timer, defer, ReplaySubject, concat, finalize, exhaustMap, BehaviorSubject, Subject, switchMap, of, combineLatest, EMPTY, merge, throwError, forkJoin, mergeWith, Observable, from, toArray, zip, mergeMap as mergeMap$1, fromEvent, skipUntil, map as map$1, combineLatestWith as combineLatestWith$1, NEVER } from 'rxjs';
 import { tap, takeUntil, takeWhile, map, filter, distinctUntilChanged, debounceTime, catchError, first, take, switchMap as switchMap$1, mergeMap, expand, reduce, startWith, skip, delay, share, combineLatestWith, skipWhile, timeout } from 'rxjs/operators';
 import { Temporal } from '@js-temporal/polyfill';
 import * as i1$2 from '@angular/common/http';
@@ -22,7 +22,7 @@ import * as i1$a from '@angular/material/form-field';
 import { MatFormFieldControl, MatFormField, MatLabel, MatFormFieldModule, MatPrefix, MatHint, MatError, MatSuffix } from '@angular/material/form-field';
 import * as i1$3 from '@angular/router';
 import { RouterModule, NavigationEnd, RouterLinkActive, RouterLink, RouterOutlet, convertToParamMap, EventType } from '@angular/router';
-import * as i6 from '@angular/material/icon';
+import * as i5 from '@angular/material/icon';
 import { MatIcon, MatIconModule } from '@angular/material/icon';
 import { MatSlideToggle, MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i2$2 from '@elderbyte/ngx-simple-webstorage';
@@ -32,13 +32,13 @@ import { MatToolbar, MatToolbarRow, MatToolbarModule } from '@angular/material/t
 import { MatCard, MatCardModule, MatCardContent } from '@angular/material/card';
 import * as i4 from '@angular/material/core';
 import { MatRipple, MatRippleModule, MatOption, mixinColor, MatCommonModule, NativeDateAdapter, MAT_DATE_LOCALE, DateAdapter, MatNativeDateModule } from '@angular/material/core';
-import * as i8 from '@angular/material/button';
+import * as i7 from '@angular/material/button';
 import { MatButtonModule, MatIconButton, MatButton, MatIconAnchor, MatAnchor } from '@angular/material/button';
 import * as i1$9 from '@angular/material/autocomplete';
 import { MatAutocompleteTrigger, MatAutocomplete, MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i1$7 from '@angular/material/chips';
 import { MatChipGrid, MatChipRow, MatChipRemove, MatChipInput, MatChipsModule, MatChip, MatChipAvatar, MatChipSet, MatChipTrailingIcon, MatChipListbox, MatChipOption } from '@angular/material/chips';
-import * as i4$1 from '@angular/material/input';
+import * as i3$2 from '@angular/material/input';
 import { MatInput, MatInputModule } from '@angular/material/input';
 import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
 import { MatList, MatListSubheaderCssMatStyler, MatListItem, MatListModule } from '@angular/material/list';
@@ -53,7 +53,7 @@ import * as i1$b from '@angular/material/checkbox';
 import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
 import * as i1$6 from '@angular/material/dialog';
 import { MatDialogClose, MAT_DIALOG_DATA, MatDialogConfig, MatDialogModule } from '@angular/material/dialog';
-import * as i10 from '@angular/material/menu';
+import * as i9 from '@angular/material/menu';
 import { MatMenuTrigger, MatMenu, MatMenuItem, MatMenuModule } from '@angular/material/menu';
 import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
 import { MatPaginator, MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
@@ -70,15 +70,15 @@ import { Subject as Subject$1 } from 'rxjs/internal/Subject';
 import { MatProgressSpinnerModule, MatProgressSpinner } from '@angular/material/progress-spinner';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { MatSidenavContainer, MatSidenav, MatSidenavContent, MatSidenavModule } from '@angular/material/sidenav';
-import * as i2$5 from '@angular/material/datepicker';
+import * as i1$c from '@angular/material/datepicker';
 import { MatDatepicker, MatDatepickerInput, MatDatepickerToggle, MatDatepickerToggleIcon, MatDateRangeInput, MatStartDate, MatEndDate, MatDateRangePicker, DateRange, MatDatepickerModule, MatCalendar } from '@angular/material/datepicker';
 import { TemplatePortal } from '@angular/cdk/portal';
-import * as i1$c from '@angular/cdk/overlay';
+import * as i1$d from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import localeDECH from '@angular/common/locales/de-CH';
 import * as StreamSaver from 'streamsaver';
 import { MatAccordion, MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle, MatExpansionPanelDescription, MatExpansionModule } from '@angular/material/expansion';
-import * as i1$d from '@angular/material/tabs';
+import * as i1$e from '@angular/material/tabs';
 import { MatTab } from '@angular/material/tabs';
 import { fetchEventSource, EventStreamContentType } from '@microsoft/fetch-event-source';
 
@@ -3415,14 +3415,25 @@ class IndexedEntities {
      */
     updateSome(updated) {
         const newData = [...this.entitiesSnapshot];
+        let anyUpdated = false;
+        const notFound = [];
         updated.forEach((update) => {
             const id = this.getItemId(update);
             const index = this.indexById(id);
             if (index != -1) {
                 newData[index] = update;
+                anyUpdated = true;
+            }
+            else {
+                notFound.push(update);
             }
         });
-        this.setEntities(newData);
+        if (notFound.length > 0) {
+            this.log.warn('could not find all entities to update ' + notFound.length + '/' + updated.length, notFound);
+        }
+        if (anyUpdated) {
+            this.setEntities(newData);
+        }
     }
     append(append) {
         this.insert(append, this.entitiesSnapshot.length);
@@ -7885,8 +7896,9 @@ class SelectionModel {
      *                                                                         *
      **************************************************************************/
     selectionChanged(origin) {
-        this.log.debug('selectionChanged triggerd by ' + origin);
-        this._selection.next(Array.from(this._selectionMap.values()));
+        const selected = Array.from(this._selectionMap.values());
+        this.log.debug('selectionChanged triggered by ' + origin, selected);
+        this._selection.next(selected);
     }
     selectInternal(values) {
         values = values.filter((v) => this.isSelectable(v));
@@ -13846,7 +13858,9 @@ class DataContextSelectionDirective {
         else {
             const context = this.dataContext$.getValue();
             if (context) {
-                this.selectionModel.select(context.snapshot.data, 'masterToggle');
+                const data = context.snapshot.data;
+                this.log.debug('selecting all data', data);
+                this.selectionModel.select(data, 'masterToggle');
             }
         }
     }
@@ -28868,821 +28882,823 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                 }]
         }] });
 
-class IntervalPickerModelEditor {
-    /***************************************************************************
-     *                                                                         *
-     * Constructor                                                             *
-     *                                                                         *
-     **************************************************************************/
-    constructor(model) {
-        this.model = model;
+class IntervalState {
+    constructor(startDate, endDate, startTime, endTime) {
+        this.startDate = startDate;
+        this.endDate = endDate;
+        this.startTime = startTime;
+        this.endTime = endTime;
+        this.startTime = this.startTime || Temporal.PlainTime.from('00:00');
+        this.endTime = this.endTime || Temporal.PlainTime.from('00:00');
     }
-    /***************************************************************************
-     *                                                                         *
-     * Date Shift API                                                          *
-     *                                                                         *
-     **************************************************************************/
-    shiftMonth(months, staticMode = false) {
-        this.setDatesFromRange(this.dateRange().shiftMonths(months));
-        if (staticMode && this.calendarMode() !== 'months') {
-            this.setCalendarMode('days');
-            return;
-        }
-        this.resetTimeRange();
-        this.setCalendarMode('months');
+    static createFromDateTimes(startDateTime, endDateTime) {
+        return new IntervalState(startDateTime.toPlainDate(), endDateTime.toPlainDate(), startDateTime.toPlainTime(), endDateTime.toPlainTime());
     }
-    shiftDay(days) {
-        this.setDatesFromRange(this.dateRange().shiftDays(days));
-        if (this.calendarMode() === 'weeks' && (days === 7 || days === -7)) {
-            this.setCalendarMode('weeks');
-            return;
+    get startDateTime() {
+        return IntervalPickerUtil.createTemporalDateTime(this.startDate, this.startTime);
+    }
+    get endDateTime() {
+        return IntervalPickerUtil.createTemporalDateTime(this.endDate, this.endTime);
+    }
+    withStartDate(newStartDate) {
+        return new IntervalState(newStartDate, this.endDate, this.startTime, this.endTime);
+    }
+    withEndDate(newEndDate) {
+        return new IntervalState(this.startDate, newEndDate, this.startTime, this.endTime);
+    }
+    withStartTime(newStartTime) {
+        return new IntervalState(this.startDate, this.endDate, newStartTime, this.endTime);
+    }
+    withEndTime(newEndTime) {
+        return new IntervalState(this.startDate, this.endDate, this.startTime, newEndTime);
+    }
+    withTime(newStartTime, newEndTime) {
+        return new IntervalState(this.startDate, this.endDate, newStartTime, newEndTime);
+    }
+}
+
+class IntervalPickerUtil {
+    static createElderInterval(intervalState) {
+        let startInstant;
+        let endInstant;
+        try {
+            const startDateTimeJS = TemporalUtil.getJSDateFromPlainDateTime(intervalState.startDateTime);
+            startInstant = TimeUtil.instant(startDateTimeJS);
+        }
+        catch (e) {
+            startInstant = null;
         }
-        this.setCalendarMode('days');
+        try {
+            const endDateTimeJS = TemporalUtil.getJSDateFromPlainDateTime(intervalState.endDateTime);
+            endInstant = TimeUtil.instant(endDateTimeJS);
+        }
+        catch (e) {
+            endInstant = null;
+        }
+        return new Interval(startInstant, endInstant);
     }
-    shiftYear(years, staticMode = false) {
-        this.setDatesFromRange(this.dateRange().shiftYears(years));
-        if (staticMode && this.calendarMode() !== 'years') {
-            this.setCalendarMode('days');
-            return;
+    static transformToIntervalState(interval) {
+        if (!interval) {
+            return null;
+        }
+        const startDateTimeJS = interval.start ? TimeUtil.date(interval.start) : null;
+        const endDateTimeJS = interval.end ? TimeUtil.date(interval.end) : null;
+        let startDate = null;
+        let endDate = null;
+        let startTime = null;
+        let endTime = null;
+        try {
+            const startDateTime = TemporalUtil.getPlainDateTimeFromJSDate(startDateTimeJS);
+            startDate = startDateTime.toPlainDate();
+            startTime = startDateTime.toPlainTime();
         }
-        this.resetTimeRange();
-        this.setCalendarMode('years');
+        catch (e) {
+            startDate = null;
+            startTime = null;
+        }
+        try {
+            const endDateTime = TemporalUtil.getPlainDateTimeFromJSDate(endDateTimeJS);
+            endDate = endDateTime.toPlainDate();
+            endTime = endDateTime.toPlainTime();
+        }
+        catch (e) {
+            endDate = null;
+            endTime = null;
+        }
+        return new IntervalState(startDate, endDate, startTime, endTime);
     }
-    /***************************************************************************
-     *                                                                         *
-     * Time Shift API                                                          *
-     *                                                                         *
-     **************************************************************************/
-    shiftTime(amount, unit) {
-        if (!this.isStartAndEndDatesSet()) {
-            return;
+    static createTemporalDateTime(date, time) {
+        if (!date) {
+            return null;
         }
-        const newStartDateTime = this.startDateTime().add({ [unit]: amount });
-        const newEndDateTime = this.endDateTime().add({ [unit]: amount });
-        this.setDateRange(Temporal.PlainDate.from(newStartDateTime), Temporal.PlainDate.from(newEndDateTime));
-        this.setTimeRange(Temporal.PlainTime.from(newStartDateTime), Temporal.PlainTime.from(newEndDateTime));
+        return Temporal.PlainDateTime.from({
+            year: date.year,
+            month: date.month,
+            day: date.day,
+            hour: time.hour,
+            minute: time.minute,
+            second: time.second,
+            millisecond: time.millisecond,
+        });
     }
-    smartShift(direction = 1) {
-        if (this.calendarMode() === 'quarters') {
-            const newRange = this.dateRange().shiftMonths(direction * 3);
-            this.setDatesFromRange(newRange);
-            return;
+    static isIntervalEquals(interval1, interval2) {
+        if (!interval1 && !interval2) {
+            return true;
         }
-        if (this.calendarMode() === 'months') {
-            const newRange = this.dateRange().shiftMonths(direction);
-            this.setDatesFromRange(newRange);
-            return;
+        if (!interval1 || !interval2) {
+            return false;
         }
-        if (this.calendarMode() === 'years') {
-            const newRange = this.dateRange().shiftYears(direction);
-            this.setDatesFromRange(newRange);
-            return;
+        return (this.isEquals(interval1.startDate, interval2.startDate) &&
+            this.isEquals(interval1.endDate, interval2.endDate) &&
+            this.isEquals(interval1.startTime, interval2.startTime) &&
+            this.isEquals(interval1.endTime, interval2.endTime));
+    }
+    static isEquals(x, y) {
+        if (!x && !y) {
+            return true;
         }
-        if (this.calendarMode() === 'weeks') {
-            const newRange = this.dateRange().shiftDays(7 * direction);
-            this.setDatesFromRange(newRange);
-            return;
+        if (!x || !y) {
+            return false;
         }
-        const daysDiff = this.dateRange().getDurationInDays();
-        const newRange = this.dateRange().shiftDays(daysDiff * direction);
-        this.setDatesFromRange(newRange);
+        return x.equals(y);
     }
-    /***************************************************************************
-     *                                                                         *
-     * Date Selection API                                                      *
-     *                                                                         *
-     **************************************************************************/
-    selectCurrentDay() {
-        this.setDatesFromRange(TemporalUtil.getCurrentDay(this.anchorDate()));
-        this.setCalendarMode('days');
-        this.resetTimeRange();
+    static isIntervalWithStartAndEnd(interval) {
+        return !!interval?.startDate && !!interval?.endDate;
     }
-    selectYesterday() {
-        this.setDatesFromRange(TemporalUtil.getYesterday(this.anchorDate()));
-        this.setCalendarMode('days');
-        this.resetTimeRange();
+    static isOpenInterval(interval) {
+        if (!interval) {
+            return false;
+        }
+        return ((!!interval.startDate && !interval.endDate) || (!interval.startDate && !!interval.endDate));
     }
-    selectCurrentMonth() {
-        this.setDatesFromRange(TemporalUtil.getCurrentMonth(this.anchorDate()));
-        this.setCalendarMode('months');
-        this.resetTimeRange();
+    static getDeltaHumanReadable(interval) {
+        if (IntervalPickerUtil.isOpenInterval(interval)) {
+            return '∞';
+        }
+        if (!IntervalPickerUtil.isIntervalWithStartAndEnd(interval)) {
+            return '-';
+        }
+        const duration = interval.startDateTime.until(interval.endDateTime);
+        const tmp = [];
+        if (duration.days) {
+            tmp.push(`${duration.days}d`);
+        }
+        if (duration.hours) {
+            tmp.push(`${duration.hours}h`);
+        }
+        if (duration.minutes) {
+            tmp.push(`${duration.minutes}min`);
+        }
+        if (duration.seconds) {
+            tmp.push(`${duration.seconds}s`);
+        }
+        if (!tmp.length) {
+            return '0s';
+        }
+        return tmp.join(', ');
     }
-    selectCurrentWeek() {
-        this.setDatesFromRange(TemporalUtil.getCurrentWeek(this.anchorDate()));
-        this.setCalendarMode('weeks');
-        this.resetTimeRange();
+    static getSmartShiftMessage(mode, dateInterval) {
+        if (!dateInterval) {
+            return '-';
+        }
+        const startDate = dateInterval.startDate;
+        const endDate = dateInterval.endDate;
+        switch (mode) {
+            case 'years':
+                return `1y (${startDate.year})`;
+            case 'quarters':
+                return `Q${TemporalUtil.getQuarterForDate(startDate)}, ${startDate.year}`;
+            case 'months':
+                return `1m (${startDate.monthCode}, ${startDate.year})`;
+            case 'weeks':
+                return `1w (CW ${startDate.weekOfYear}, ${endDate.year})`;
+            case 'days':
+                return `${startDate.until(endDate).days}d`;
+            case 'time':
+                return `${this.getDeltaHumanReadable(dateInterval)}`;
+            default:
+                return `${startDate.until(endDate).days}d`;
+        }
     }
-    selectPreviousWeek() {
-        this.setDatesFromRange(TemporalUtil.getPreviousWeek(this.anchorDate()));
-        this.setCalendarMode('weeks');
-        this.resetTimeRange();
+    static isTimeSetAndNotMidnight(time) {
+        if (!time) {
+            return false;
+        }
+        if (time.hour === 0 && time.minute === 0 && time.second === 0) {
+            return false;
+        }
+        return true;
     }
-    selectPreviousMonth() {
-        this.setDatesFromRange(TemporalUtil.getPreviousMonth(this.anchorDate()));
-        this.setCalendarMode('months');
-        this.resetTimeRange();
+    static setMillisecondsToZero(interval) {
+        return new IntervalState(interval.startDate, interval.endDate, interval.startTime.with({ millisecond: 0, microsecond: 0, nanosecond: 0 }), interval.endTime.with({ millisecond: 0, microsecond: 0, nanosecond: 0 }));
     }
-    selectLastThirtyDaysExcludingToday() {
-        this.setDatesFromRange(TemporalUtil.getLastThirtyDays(this.anchorDate()));
-        this.setCalendarMode('days');
-        this.resetTimeRange();
+    static roundUpToSeconds(time) {
+        return time.with({
+            second: time.second + 1,
+            millisecond: 0,
+            microsecond: 0,
+            nanosecond: 0,
+        });
     }
-    selectLastThirtyDaysIncludingToday() {
-        this.setDatesFromRange(TemporalUtil.getLastThirtyDaysIncludingToday(this.anchorDate()));
-        this.setCalendarMode('days');
-        this.resetTimeRange();
+    static updateMatCalendarActiveDate(calendarStart, calendarEnd, startDate, endDate) {
+        if (!calendarStart || !calendarEnd) {
+            return;
+        }
+        if (!startDate && !endDate) {
+            return;
+        }
+        setTimeout(() => {
+            // timeout is needed to run calendar update last, otherwise there are issues
+            if (startDate) {
+                calendarStart.activeDate = TemporalUtil.getJSDateFromPlainDateTime(startDate);
+            }
+            if (endDate) {
+                calendarEnd.activeDate = TemporalUtil.getJSDateFromPlainDateTime(endDate);
+            }
+        }, 0);
     }
-    selectCurrentYear() {
-        this.setDatesFromRange(TemporalUtil.getCurrentYear(this.anchorDate()));
-        this.setCalendarMode('years');
-        this.resetTimeRange();
+    static updateMatCalendarTodayDate(calendarStart, calendarEnd) {
+        if (!calendarStart || !calendarEnd) {
+            return;
+        }
+        calendarStart.updateTodaysDate();
+        calendarEnd.updateTodaysDate();
     }
-    selectPreviousYear() {
-        this.setDatesFromRange(TemporalUtil.getPreviousYear(this.anchorDate()));
-        this.setCalendarMode('years');
-        this.resetTimeRange();
+}
+
+class AnchorState {
+    constructor(fixedDate, fixedTime = Temporal.PlainTime.from('00:00'), referenceDateTime = IntervalPickerUtil.roundUpToSeconds(Temporal.Now.plainDateTimeISO())) {
+        this.fixedDate = fixedDate;
+        this.fixedTime = fixedTime;
+        this.referenceDateTime = referenceDateTime;
     }
-    selectLast365Days() {
-        this.setDatesFromRange(TemporalUtil.getLast365Days(this.anchorDate()));
-        this.setCalendarMode('days');
-        this.resetTimeRange();
+    static createFromDateTime(dateTime) {
+        return new AnchorState(dateTime.toPlainDate(), dateTime.toPlainTime());
     }
-    selectCurrentQuarter() {
-        this.setDatesFromRange(TemporalUtil.getCurrentQuarter(this.anchorDate()));
-        this.setCalendarMode('quarters');
-        this.resetTimeRange();
+    static createFromJsDate(date) {
+        const dateTime = TemporalUtil.getPlainDateTimeFromJSDate(date);
+        return new AnchorState(dateTime.toPlainDate(), dateTime.toPlainTime());
     }
-    selectPreviousQuarter() {
-        this.setDatesFromRange(TemporalUtil.getPreviousQuarter(this.anchorDate()));
-        this.setCalendarMode('quarters');
-        this.resetTimeRange();
+    static empty() {
+        return new AnchorState(null);
     }
-    selectLastSevenDaysExcludingToday() {
-        this.setDatesFromRange(TemporalUtil.getLastSevenDays(this.anchorDate()));
-        this.setCalendarMode('days');
-        this.resetTimeRange();
+    withDate(date) {
+        return new AnchorState(date, this.fixedTime);
     }
-    selectLastSevenDaysIncludingToday() {
-        this.setDatesFromRange(TemporalUtil.getLastSevenDaysIncludingToday(this.anchorDate()));
-        this.setCalendarMode('days');
-        this.resetTimeRange();
+    withTime(time) {
+        return new AnchorState(this.fixedDate, time);
     }
-    /***************************************************************************
-     *                                                                         *
-     * Time Selection API                                                      *
-     *                                                                         *
-     **************************************************************************/
-    // time range selections
-    selectLastHour() {
-        this.selectLastByDuration({ hours: 1 });
+    withTimeMidnight() {
+        return new AnchorState(this.fixedDate, Temporal.PlainTime.from('00:00'));
     }
-    selectLast24Hours() {
-        this.selectLastByDuration({ days: 1 });
+    withReferenceDateTimeNow() {
+        return new AnchorState(this.fixedDate, this.fixedTime, IntervalPickerUtil.roundUpToSeconds(Temporal.Now.plainDateTimeISO()));
     }
-    selectLastFiveMinutes() {
-        this.selectLastByDuration({ minutes: 5 });
+    get fixedDateTime() {
+        if (!this.fixedDate) {
+            return null;
+        }
+        return IntervalPickerUtil.createTemporalDateTime(this.fixedDate, this.fixedTime);
     }
-    selectLastByDuration(duration) {
-        this.refreshBaseReferenceDateTime();
-        const end = this.anchorDateTime();
-        const start = end.subtract(duration);
-        const startPlainDate = Temporal.PlainDate.from(start);
-        const startPlainTime = Temporal.PlainTime.from(start);
-        this.setDateRange(startPlainDate, this.anchorDate());
-        this.setTimeRange(startPlainTime, this.anchorTime());
-        this.setCalendarMode('days');
+    get isFixed() {
+        return this.fixedDate !== null;
     }
-    /***************************************************************************
-     *                                                                         *
-     * Private methods                                                         *
-     *                                                                         *
-     **************************************************************************/
-    anchorTime() {
-        return this.model.anchorTime();
+    get date() {
+        return this.fixedDate || this.referenceDateTime.toPlainDate();
     }
-    anchorDate() {
-        return this.model.anchorDate();
+    get time() {
+        return this.fixedTime || this.referenceDateTime.toPlainTime();
     }
-    setCalendarMode(mode) {
-        this.model.calendarMode.set(mode);
+    get dateTime() {
+        return this.fixedDateTime || this.referenceDateTime;
     }
-    calendarMode() {
-        return this.model.calendarMode();
+    get isTimeMidnight() {
+        return this.fixedTime.hour === 0 && this.fixedTime.minute === 0 && this.fixedTime.second === 0;
     }
-    dateRange() {
-        return this.model.dateRange();
+}
+
+class IntervalAnchorController {
+    constructor(manager) {
+        this.manager = manager;
     }
-    resetTimeRange() {
-        this.setTimeRange(Temporal.PlainTime.from('00:00'), Temporal.PlainTime.from('00:00'));
+    resetAnchor() {
+        this.manager.setAnchor(AnchorState.empty());
     }
-    setTimeRange(start, end) {
-        this.model.setStartTime(start);
-        this.model.setEndTime(end);
+    resetAnchorTime() {
+        this.manager.setAnchor(this.manager.anchorValue.withTimeMidnight());
     }
-    setDateRange(start, end) {
-        this.model.setStartDate(start);
-        this.model.setEndDate(end);
+    setFixedAnchorPointToStartDateTime() {
+        const startDateTime = this.manager.intervalValue?.startDateTime;
+        this.manager.setAnchor(AnchorState.createFromDateTime(startDateTime));
     }
-    setDatesFromRange(range) {
-        this.setDateRange(range.start, range.end);
+    setFixedAnchorPointToEndDateTime() {
+        const endDateTime = this.manager.intervalValue?.endDateTime;
+        this.manager.setAnchor(AnchorState.createFromDateTime(endDateTime));
     }
-    shiftSelectionToAnchorDate() {
-        if (!this.isStartAndEndDatesSet() || !this.fixedAnchorDate()) {
+}
+
+class IntervalCalendarController {
+    constructor(manager) {
+        this.manager = manager;
+    }
+    setStartDateFromJSDate(date) {
+        const startDate = TemporalUtil.getPlainDateFromJSDate(date);
+        if (!this.manager.intervalValue) {
+            this.manager.setInterval(new IntervalState(startDate, null));
             return;
         }
-        const range = this.dateRange();
-        const endDate = this.fixedAnchorDate();
-        const startDate = endDate.subtract({ days: range.getDurationInDays() });
-        this.setDateRange(startDate, endDate);
-        if (this.calendarMode() === 'months') {
-            this.selectCurrentMonth();
-        }
-        if (this.calendarMode() === 'years') {
-            this.selectCurrentYear();
-        }
-        if (this.calendarMode() === 'weeks') {
-            this.selectCurrentWeek();
-        }
+        this.manager.setInterval(this.manager.intervalValue.withStartDate(startDate));
     }
-    fixedAnchorDate() {
-        return this.model.fixedAnchorDate();
+    setEndDateFromJSDate(date) {
+        const endDate = TemporalUtil.getPlainDateFromJSDate(date);
+        if (!this.manager.intervalValue) {
+            this.manager.setInterval(new IntervalState(null, endDate));
+            return;
+        }
+        this.manager.setInterval(this.manager.intervalValue.withEndDate(endDate));
     }
-    fixedAnchorTime() {
-        return this.model.fixedAnchorTime();
+}
+
+class IntervalFormController {
+    constructor(manager) {
+        this.manager = manager;
+        this.log = LoggerFactory.getLogger(this.constructor.name);
     }
-    anchorDateTime() {
-        return this.model.anchorDateTime();
+    setStartDateFromString(htmlString) {
+        try {
+            const plainDate = TemporalUtil.getPlainDateFromHtmlDateString(htmlString);
+            const endDate = this.manager.intervalValue?.endDate || plainDate.add({ days: 1 });
+            this.manager.setInterval(new IntervalState(plainDate, endDate));
+        }
+        catch (e) {
+            this.log.warn('Incorrect date / time anchor form input. Could not set anchor.', htmlString);
+        }
     }
-    startDateTime() {
-        return this.model.startDateTime();
+    setEndDateFromString(htmlString) {
+        try {
+            const plainDate = TemporalUtil.getPlainDateFromHtmlDateString(htmlString);
+            const startDate = this.manager.intervalValue?.startDate || plainDate.subtract({ days: 1 });
+            this.manager.setInterval(new IntervalState(startDate, plainDate));
+        }
+        catch (e) {
+            this.log.warn('Incorrect date / time anchor form input. Could not set anchor.', htmlString);
+        }
     }
-    endDateTime() {
-        return this.model.endDateTime();
+    setAnchorDateFromString(htmlString) {
+        try {
+            const plainDate = TemporalUtil.getPlainDateFromHtmlDateString(htmlString);
+            this.manager.setAnchor(this.manager.anchorValue.withDate(plainDate));
+        }
+        catch (e) {
+            this.log.warn('Incorrect date / time anchor form input. Could not set anchor.', htmlString);
+        }
     }
-    isStartAndEndDatesSet() {
-        return this.model.isStartAndEndDatesSet();
+    setAnchorTimeFromString(htmlString) {
+        try {
+            const plainTime = TemporalUtil.getPlainTimeFromHtmlTimeString(htmlString);
+            this.manager.setAnchor(this.manager.anchorValue.withTime(plainTime));
+        }
+        catch (e) {
+            this.log.warn('Incorrect date / time anchor form input. Could not set anchor.', htmlString);
+        }
     }
-    shiftSelectionToAnchorTime() {
-        if (!this.isStartAndEndDatesSet() || !this.fixedAnchorTime()) {
-            return;
+    setStartTimeFromString(timeStr) {
+        try {
+            const startTime = TemporalUtil.getPlainTimeFromHtmlTimeString(timeStr);
+            const startDate = this.manager.intervalValue?.startDate || Temporal.Now.plainDateISO();
+            this.manager.setInterval(new IntervalState(startDate, this.manager.intervalValue?.endDate || null, startTime, this.manager.intervalValue?.endTime || null));
         }
-        const duration = this.startDateTime().until(this.endDateTime());
-        const newStartDateTime = this.anchorDateTime().subtract(duration);
-        const newEndDateTime = this.anchorDateTime();
-        this.setDateRange(Temporal.PlainDate.from(newStartDateTime), Temporal.PlainDate.from(newEndDateTime));
-        this.setTimeRange(Temporal.PlainTime.from(newStartDateTime), Temporal.PlainTime.from(newEndDateTime));
-        if (this.calendarMode() === 'months') {
-            this.selectCurrentMonth();
+        catch (e) {
+            this.log.warn('Incorrect date / time form input. Could not set new Interval.', timeStr, e);
         }
-        if (this.calendarMode() === 'years') {
-            this.selectCurrentYear();
+    }
+    setEndTimeFromString(timeStr) {
+        try {
+            const endTime = TemporalUtil.getPlainTimeFromHtmlTimeString(timeStr);
+            const endDate = this.manager.intervalValue?.endDate || Temporal.Now.plainDateISO();
+            this.manager.setInterval(new IntervalState(this.manager.intervalValue?.startDate || null, endDate, this.manager.intervalValue?.startTime || null, endTime));
         }
-        if (this.calendarMode() === 'weeks') {
-            this.selectCurrentWeek();
+        catch (e) {
+            this.log.warn('Incorrect date / time form input. Could not set new Interval.', timeStr);
         }
     }
-    refreshBaseReferenceDateTime() {
-        const dateTime = Temporal.Now.zonedDateTimeISO();
-        const date = Temporal.PlainDate.from(dateTime);
-        const time = Temporal.PlainTime.from(dateTime);
-        this.model.baseReferenceDate.set(date);
-        this.model.baseReferenceTime.set(time);
+}
+
+class SmartShiftState {
+    constructor(duration, mode) {
+        this.duration = duration;
+        this.mode = mode;
+    }
+    static empty() {
+        return new SmartShiftState(null, null);
     }
 }
 
-class PlainDateIntervalMessageRenderer {
-    static toMessage(mode, dateInterval) {
-        if (!dateInterval) {
-            return '-';
-        }
-        const startDate = dateInterval.start;
-        const endDate = dateInterval.end;
-        switch (mode) {
-            case 'years':
-                return `1y (${startDate.year})`;
-            case 'quarters':
-                return `Q${TemporalUtil.getQuarterForDate(startDate)}, ${startDate.year}`;
-            case 'months':
-                return `1m (${startDate.monthCode}, ${startDate.year})`;
-            case 'weeks':
-                return `1w (CW ${this.calendarWeek(startDate)}, ${endDate.year})`;
-            case 'days':
-                return `${this.dateRangeInDays(dateInterval)}d`;
-            default:
-                return '?';
-        }
+class IntervalSelectController {
+    constructor(manager) {
+        this.manager = manager;
     }
-    static calendarWeek(date) {
-        if (!date) {
-            return null;
-        }
-        return date.weekOfYear;
+    refreshAnchor() {
+        this.manager.setAnchor(this.manager.anchorValue.withReferenceDateTimeNow());
     }
-    static dateRangeInDays(dateInterval) {
-        if (!dateInterval) {
-            return 0;
-        }
-        return dateInterval.getDurationInDays();
+    setSmartShiftState(duration, mode) {
+        this.manager.setSmartShift(new SmartShiftState(duration, mode));
+    }
+    selectCurrentDay() {
+        this.refreshAnchor();
+        const endDate = this.manager.anchorValue.date.add({ days: 1 });
+        const startDate = endDate.subtract({ days: 1 });
+        this.manager.setInterval(new IntervalState(startDate, endDate));
+        this.setSmartShiftState(Temporal.Duration.from({ days: 1 }), 'days');
+    }
+    selectYesterday() {
+        this.refreshAnchor();
+        const endDate = this.manager.anchorValue.date;
+        const startDate = endDate.subtract({ days: 1 });
+        this.manager.setInterval(new IntervalState(startDate, endDate));
+        this.setSmartShiftState(Temporal.Duration.from({ days: 1 }), 'days');
+    }
+    selectLastSevenDaysExcludingToday() {
+        this.refreshAnchor();
+        const endDate = this.manager.anchorValue.date;
+        const startDate = endDate.subtract({ days: 7 });
+        this.manager.setInterval(new IntervalState(startDate, endDate));
+        this.setSmartShiftState(Temporal.Duration.from({ days: 7 }), 'days');
+    }
+    selectLastSevenDaysIncludingToday() {
+        this.refreshAnchor();
+        const endDate = this.manager.anchorValue.date.add({ days: 1 });
+        const startDate = endDate.subtract({ days: 7 });
+        this.manager.setInterval(new IntervalState(startDate, endDate));
+        this.setSmartShiftState(Temporal.Duration.from({ days: 7 }), 'days');
+    }
+    selectLastThirtyDaysExcludingToday() {
+        this.refreshAnchor();
+        const endDate = this.manager.anchorValue.date;
+        const startDate = endDate.subtract({ days: 30 });
+        this.manager.setInterval(new IntervalState(startDate, endDate));
+        this.setSmartShiftState(Temporal.Duration.from({ days: 30 }), 'days');
+    }
+    selectLastThirtyDaysIncludingToday() {
+        this.refreshAnchor();
+        const endDate = this.manager.anchorValue.date.add({ days: 1 });
+        const startDate = endDate.subtract({ days: 30 });
+        this.manager.setInterval(new IntervalState(startDate, endDate));
+        this.setSmartShiftState(Temporal.Duration.from({ days: 30 }), 'days');
+    }
+    selectLast365daysExcludingToday() {
+        this.refreshAnchor();
+        const endDate = this.manager.anchorValue.date;
+        const startDate = endDate.subtract({ days: 365 });
+        this.manager.setInterval(new IntervalState(startDate, endDate));
+        this.setSmartShiftState(Temporal.Duration.from({ days: 365 }), 'days');
+    }
+    selectLast365daysIncludingToday() {
+        this.refreshAnchor();
+        const endDate = this.manager.anchorValue.date.add({ days: 1 });
+        const startDate = endDate.subtract({ days: 365 });
+        this.manager.setInterval(new IntervalState(startDate, endDate));
+        this.setSmartShiftState(Temporal.Duration.from({ days: 365 }), 'days');
+    }
+    selectLastFiveMinutes() {
+        this.refreshAnchor();
+        const anchorDateTime = this.manager.anchorValue.dateTime;
+        const startDateTime = anchorDateTime.subtract({ minutes: 5 });
+        this.manager.setInterval(IntervalState.createFromDateTimes(startDateTime, anchorDateTime));
+        this.setSmartShiftState(Temporal.Duration.from({ minutes: 5 }), 'time');
+    }
+    selectLastHour() {
+        this.refreshAnchor();
+        const anchorDateTime = this.manager.anchorValue.dateTime;
+        const startDateTime = anchorDateTime.subtract({ hours: 1 });
+        this.manager.setInterval(IntervalState.createFromDateTimes(startDateTime, anchorDateTime));
+        this.setSmartShiftState(Temporal.Duration.from({ hours: 1 }), 'time');
+    }
+    selectLast24Hours() {
+        this.refreshAnchor();
+        const anchorDateTime = this.manager.anchorValue.dateTime;
+        const startDateTime = anchorDateTime.subtract({ hours: 24 });
+        this.manager.setInterval(IntervalState.createFromDateTimes(startDateTime, anchorDateTime));
+        this.setSmartShiftState(Temporal.Duration.from({ hours: 24 }), 'time');
+    }
+    selectCurrentWeek() {
+        this.refreshAnchor();
+        const range = TemporalUtil.getCurrentWeek(this.manager.anchorValue.date);
+        this.manager.setInterval(new IntervalState(range.start, range.end));
+        this.setSmartShiftState(Temporal.Duration.from({ days: 7 }), 'weeks');
+    }
+    selectCurrentMonth() {
+        this.refreshAnchor();
+        const range = TemporalUtil.getCurrentMonth(this.manager.anchorValue.date);
+        this.manager.setInterval(new IntervalState(range.start, range.end));
+        this.setSmartShiftState(Temporal.Duration.from({ months: 1 }), 'months');
+    }
+    selectCurrentQuarter() {
+        this.refreshAnchor();
+        const range = TemporalUtil.getCurrentQuarter(this.manager.anchorValue.date);
+        this.manager.setInterval(new IntervalState(range.start, range.end));
+        this.setSmartShiftState(Temporal.Duration.from({ months: 3 }), 'quarters');
+    }
+    selectCurrentYear() {
+        this.refreshAnchor();
+        const range = TemporalUtil.getCurrentYear(this.manager.anchorValue.date);
+        this.manager.setInterval(new IntervalState(range.start, range.end));
+        this.setSmartShiftState(Temporal.Duration.from({ years: 1 }), 'years');
     }
 }
 
-class PlainTemporalDurationMessageRenderer {
-    static toMessage(duration) {
-        if (!duration) {
-            return '∞';
-        }
-        const tmp = [];
-        if (duration.days) {
-            tmp.push(`${duration.days}d`);
-        }
-        if (duration.hours) {
-            tmp.push(`${duration.hours}h`);
-        }
-        if (duration.minutes) {
-            tmp.push(`${duration.minutes}min`);
-        }
-        if (duration.seconds) {
-            tmp.push(`${duration.seconds}s`);
-        }
-        if (!tmp.length) {
-            return '0s';
+class IntervalShiftController {
+    constructor(manager) {
+        this.manager = manager;
+        this.log = LoggerFactory.getLogger(this.constructor.name);
+    }
+    shiftDay(days) {
+        this.manager.setInterval(new IntervalState(this.manager.intervalValue.startDate.add({ days }), this.manager.intervalValue.endDate.add({ days }), this.manager.intervalValue.startTime, this.manager.intervalValue.endTime));
+    }
+    shiftWeek(weeks) {
+        this.manager.setInterval(new IntervalState(this.manager.intervalValue.startDate.add({ weeks }), this.manager.intervalValue.endDate.add({ weeks }), this.manager.intervalValue.startTime, this.manager.intervalValue.endTime));
+    }
+    shiftMonth(months) {
+        this.manager.setInterval(new IntervalState(this.manager.intervalValue.startDate.add({ months }), this.manager.intervalValue.endDate.add({ months }), this.manager.intervalValue.startTime, this.manager.intervalValue.endTime));
+    }
+    shiftYear(years) {
+        this.manager.setInterval(new IntervalState(this.manager.intervalValue.startDate.add({ years }), this.manager.intervalValue.endDate.add({ years }), this.manager.intervalValue.startTime, this.manager.intervalValue.endTime));
+    }
+    shiftMinute(minutes) {
+        const newInterval = new IntervalState(this.manager.intervalValue.startDate, this.manager.intervalValue.endDate, this.manager.intervalValue.startTime?.add({ minutes }), this.manager.intervalValue.endTime?.add({ minutes }));
+        this.manager.setInterval(newInterval);
+    }
+    shiftHour(hours) {
+        const newInterval = new IntervalState(this.manager.intervalValue.startDate, this.manager.intervalValue.endDate, this.manager.intervalValue.startTime?.add({ hours: hours }), this.manager.intervalValue.endTime?.add({ hours: hours }));
+        this.manager.setInterval(newInterval);
+    }
+    smartShift(direction = 1) {
+        const state = this.manager.smartShiftValue;
+        if (!state.duration) {
+            this.log.warn('Cannot smart shift without a duration!');
+            return;
         }
-        return tmp.join(', ');
+        const duration = state.duration;
+        const interval = this.manager.intervalValue;
+        let newStartDateTime = direction === 1
+            ? interval.startDateTime.add(duration)
+            : interval.startDateTime.subtract(duration);
+        let newEndDateTime = direction === 1 ? interval.endDateTime.add(duration) : interval.endDateTime.subtract(duration);
+        const newInterval = IntervalState.createFromDateTimes(newStartDateTime, newEndDateTime);
+        this.manager.setInterval(newInterval);
     }
 }
 
-const defaultCalendarMode = 'days';
-class IntervalPickerModel {
+class IntervalController {
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor() {
+    constructor(manager) {
+        this.manager = manager;
         /***************************************************************************
          *                                                                         *
          * Fields                                                                  *
          *                                                                         *
          **************************************************************************/
         this.log = LoggerFactory.getLogger(this.constructor.name);
-        this._dateChangeEmitter = new EventEmitter();
-        this.calendarMode = signal(defaultCalendarMode);
-        this._startDate = signal(null);
-        this._endDate = signal(null);
-        this._startTime = signal(Temporal.PlainTime.from('00:00'));
-        this._endTime = signal(Temporal.PlainTime.from('00:00'));
-        // Anchor
-        this.baseReferenceDate = signal(Temporal.Now.plainDateISO());
-        this.baseReferenceTime = signal(Temporal.Now.plainTimeISO());
-        this.fixedAnchorDate = signal(null);
-        this.fixedAnchorTime = signal(Temporal.PlainTime.from('00:00'));
-        this.isEmittingOnChange = signal(true);
-        this.isUpdatingIntervalOnAnchorChange = signal(false);
-        this._isInitialized = false;
-        this.isFixedAnchorDateSet = computed(() => {
-            return !!this.fixedAnchorDate();
-        });
-        this.anchorDate = computed(() => {
-            if (this.fixedAnchorDate()) {
-                return this.fixedAnchorDate();
-            }
-            return this.baseReferenceDate();
-        });
-        this.anchorTime = computed(() => {
-            if (this.fixedAnchorDate() && this.fixedAnchorTime()) {
-                return this.fixedAnchorTime();
-            }
-            return this.baseReferenceTime();
-        });
-        this.anchorDateTime = computed(() => {
-            return this.anchorDate().toPlainDateTime(this.anchorTime());
-        });
-        this.dateRange = computed(() => {
-            if (!this.isStartAndEndDatesSet()) {
-                return null;
-            }
-            return new TemporalPlainDateInterval(this.startDate(), this.endDate());
-        });
-        this.dateRangeForCalendar = computed(() => {
-            if (!this.isStartAndEndDatesSet()) {
-                return null;
-            }
-            const startDate = TemporalUtil.getJSDateFromPlainDateTime(this.startDate());
-            const endDate = TemporalUtil.getJSDateFromPlainDateTime(this.endDate());
-            return new DateRange(startDate, endDate);
-        });
-        this.isStartAndEndDatesEmpty = computed(() => {
-            return !this.startDate() && !this.endDate();
-        });
-        this.isStartAndEndDatesSet = computed(() => {
-            return !!(this.startDate() && this.endDate());
-        });
-        this.isRangeNotSet = computed(() => {
-            return !this.isStartAndEndDatesSet();
-        });
-        this.startDateTime = computed(() => {
-            if (!this.startDate()) {
-                return null;
-            }
-            if (this.startTime()) {
-                return this.startDate().toPlainDateTime(this.startTime());
-            }
-            return this.startDate();
-        });
-        this.endDateTime = computed(() => {
-            if (!this.endDate()) {
-                return null;
-            }
-            if (this.endTime()) {
-                return this.endDate().toPlainDateTime(this.endTime());
-            }
-            return this.endDate();
-        });
-        this.startDateAsJSDate = computed(() => {
-            if (!this.startDate()) {
-                return null;
-            }
-            return TemporalUtil.getJSDateFromPlainDateTime(this.startDate());
-        });
-        this.endDateAsJSDate = computed(() => {
-            if (!this.endDate()) {
-                return null;
-            }
-            return TemporalUtil.getJSDateFromPlainDateTime(this.endDate());
-        });
-        this.startDateTimeAsJSDate = computed(() => {
-            if (!this.startDateTime()) {
-                return null;
-            }
-            return TemporalUtil.getJSDateFromPlainDateTime(this.startDateTime());
-        });
-        this.endDateTimeAsJSDate = computed(() => {
-            if (!this.endDateTime()) {
-                return null;
-            }
-            return TemporalUtil.getJSDateFromPlainDateTime(this.endDateTime());
-        });
-        this.viewIntervalMessage = computed(() => PlainDateIntervalMessageRenderer.toMessage(this.calendarMode(), this.dateRange()));
-        this.deltaHumanReadable = computed(() => {
-            if (this.isStartAndEndDatesEmpty()) {
-                return '';
-            }
-            const duration = this.deltaAsTemporalDuration(this.startDateTime(), this.endDateTime());
-            return PlainTemporalDurationMessageRenderer.toMessage(duration);
-        });
-        this.getStartTimeString = computed(() => {
-            return TemporalUtil.getHtmlTimeStringFromPlainTime(this.startTime());
-        });
-        this.getEndTimeString = computed(() => {
-            return TemporalUtil.getHtmlTimeStringFromPlainTime(this.endTime());
-        });
-        this.getAnchorTimeString = computed(() => {
-            return TemporalUtil.getHtmlTimeStringFromPlainTime(this.fixedAnchorTime());
-        });
-        this.getAnchorPointAsLocaleDate = computed(() => {
-            const anchorPoint = this.fixedAnchorDate();
-            if (!anchorPoint) {
-                return null;
-            }
-            const jsDate = TemporalUtil.getJSDateFromPlainDateTime(anchorPoint);
-            const localeDate = TimeUtil.dateToLocalDate(jsDate);
-            return localeDate;
-        });
-        this.startDateHtmlString = computed(() => {
-            return TemporalUtil.getHtmlDateString(this.startDateTime());
-        });
-        this.endDateHtmlString = computed(() => {
-            return TemporalUtil.getHtmlDateString(this.endDateTime());
-        });
-        this.isStartTimeSetAndNotMidnight = computed(() => {
-            if (!this.startTime()) {
-                return false;
-            }
-            return (this.startTime().hour !== 0 || this.startTime().minute !== 0 || this.startTime().second !== 0);
-        });
-        this.isEndTimeSetAndNotMidnight = computed(() => {
-            if (!this.endTime()) {
-                return false;
-            }
-            return this.endTime().hour !== 0 || this.endTime().minute !== 0 || this.endTime().second !== 0;
-        });
-        this.isFixedAnchorTimeSetAndNotMidnight = computed(() => {
-            if (!this.fixedAnchorTime()) {
-                return false;
-            }
-            return (this.fixedAnchorTime().hour !== 0 ||
-                this.fixedAnchorTime().minute !== 0 ||
-                this.fixedAnchorTime().second !== 0);
-        });
-        this.editor = new IntervalPickerModelEditor(this);
-        effect(() => {
-            const startDateTime = this.startDateTime();
-            const endDateTime = this.endDateTime();
-            if (this.isEmittingOnChange()) {
-                this.emitMainDates(); // TODO Only emit if changed
-            }
-        });
+        this.select = new IntervalSelectController(manager);
+        this.shift = new IntervalShiftController(manager);
+        this.form = new IntervalFormController(manager);
+        this.calendar = new IntervalCalendarController(manager);
+        this.anchor = new IntervalAnchorController(manager);
     }
     /***************************************************************************
      *                                                                         *
-     * Properties                                                              *
+     * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    startDate() {
-        return this._startDate();
-    }
-    endDate() {
-        return this._endDate();
+    clearInterval() {
+        this.manager.setInterval(null);
     }
-    startTime() {
-        return this._startTime();
+    clearEndTime() {
+        this.manager.setInterval(this.manager.intervalValue.withEndTime(null));
     }
-    endTime() {
-        return this._endTime();
+    clearStartTime() {
+        this.manager.setInterval(this.manager.intervalValue.withStartTime(null));
     }
+    manualEmit() { }
+}
+
+class IntervalPickerStateManager {
     /***************************************************************************
      *                                                                         *
-     * Public API                                                              *
+     * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    setInitialized() {
-        this._isInitialized = true;
-    }
-    setStartDate(value) {
-        const current = untracked(this._startDate);
-        if (!TemporalUtil.equalPlainDates(current, value)) {
-            this._startDate.set(value);
-        }
-    }
-    setEndDate(value) {
-        const current = untracked(this._endDate);
-        if (!TemporalUtil.equalPlainDates(current, value)) {
-            this._endDate.set(value);
-        }
-    }
-    setStartTime(value) {
-        const current = untracked(this._startTime);
-        if (!TemporalUtil.equalPlainTimes(current, value)) {
-            this._startTime.set(value);
-        }
-    }
-    setEndTime(value) {
-        const current = untracked(this._endTime);
-        if (!TemporalUtil.equalPlainTimes(current, value)) {
-            this._endTime.set(value);
-        }
-    }
-    setStartDateFromHtmlString(htmlString) {
-        const date = TemporalUtil.getPlainDateFromHtmlDateString(htmlString);
-        if (!date) {
-            return;
-        }
-        this.calendarMode.set('days');
-        this.setStartDate(date);
-    }
-    setEndDateFromHtmlString(htmlString) {
-        const date = TemporalUtil.getPlainDateFromHtmlDateString(htmlString);
-        if (!date) {
-            return;
-        }
-        this.calendarMode.set('days');
-        this.setEndDate(date);
-    }
-    setInterval(value) {
-        this.setDateTimesFromElderInterval(value);
-    }
-    setAnchorDateTime(value) {
-        this.setAnchorDateTimeFromJsDate(value);
+    constructor() {
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.log = LoggerFactory.getLogger(this.constructor.name);
+        this._anchor = new BehaviorSubject(AnchorState.empty());
+        this._interval = new BehaviorSubject(null);
+        this._smartShift = new BehaviorSubject(null);
+        this._intervalChange = new Subject();
+        this.isInitialized = false;
     }
-    setupEventEmitter(e) {
-        this._dateChangeEmitter = e;
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    get interval$() {
+        return this._interval.asObservable();
     }
-    setStartTimeFromString(timeStr) {
-        const time = TemporalUtil.getPlainTimeFromHtmlTimeString(timeStr);
-        if (time) {
-            this.setStartTime(time);
-        }
-        if (!untracked(this._startDate)) {
-            this.setStartDate(Temporal.Now.plainDateISO());
-        }
-        this.calendarMode.set('days');
+    get anchor$() {
+        return this._anchor.asObservable();
     }
-    setEndTimeFromString(timeStr) {
-        const time = TemporalUtil.getPlainTimeFromHtmlTimeString(timeStr);
-        if (time) {
-            this.setEndTime(time);
-        }
-        if (!untracked(this._endDate)) {
-            this.setEndDate(Temporal.Now.plainDateISO());
-        }
-        this.calendarMode.set('days');
+    get smartShift$() {
+        return this._smartShift.asObservable();
     }
-    resetCalendarMode() {
-        this.calendarMode.set(defaultCalendarMode);
+    get intervalValue() {
+        return this._interval.getValue();
     }
-    setAnchorDateTimeFromJsDate(dateTime) {
-        if (!dateTime) {
-            return;
-        }
-        const date = TemporalUtil.getPlainDateFromJSDate(dateTime);
-        const time = TemporalUtil.getPlainTimeFromJSDate(dateTime);
-        this.fixedAnchorDate.set(date);
-        this.fixedAnchorTime.set(time);
+    get anchorValue() {
+        return this._anchor.getValue();
     }
-    setFixedAnchorPointToStartDateTime() {
-        if (!this.startDate()) {
-            this.resetFixedAnchorPoint();
-            return;
-        }
-        if (this.startDate()) {
-            this.fixedAnchorDate.set(this.startDate());
-        }
-        if (this.startTime()) {
-            this.fixedAnchorTime.set(this.startTime());
-        }
+    get smartShiftValue() {
+        return this._smartShift.getValue();
     }
-    setFixedAnchorPointToEndDateTime() {
-        if (!this.endDate()) {
-            this.resetFixedAnchorPoint();
-            return;
-        }
-        if (this.endDate()) {
-            this.fixedAnchorDate.set(this.endDate());
-        }
-        if (this.endTime()) {
-            this.fixedAnchorTime.set(this.endTime());
-        }
+    get intervalChange() {
+        return this._intervalChange.asObservable();
     }
-    resetFixedAnchorPoint() {
-        this.fixedAnchorDate.set(null);
-        this.fixedAnchorTime.set(Temporal.PlainTime.from('00:00'));
-        if (this.isUpdatingIntervalOnAnchorChange() && this.isStartAndEndDatesSet()) {
-            this.shiftRangeEndToToday();
-        }
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    setAnchor(anchor) {
+        this._anchor.next(anchor);
     }
-    setAnchorDateFromForm(dateArg) {
-        if (!dateArg) {
-            this.fixedAnchorDate.set(null);
-            return;
-        }
-        const jsDate = TimeUtil.localDateToDate(dateArg);
-        const plainDate = TemporalUtil.getPlainDateFromJSDate(jsDate);
-        if (!plainDate) {
-            this.log.warn('Invalid date', plainDate);
+    setExternalAnchor(TemporalDateTime) {
+        if (!TemporalDateTime) {
+            this.setAnchor(AnchorState.empty());
             return;
         }
-        this.fixedAnchorDate.set(plainDate);
-        if (!this.isUpdatingIntervalOnAnchorChange()) {
-            return;
-        }
-        if (this.fixedAnchorDate()) {
-            this.editor.shiftSelectionToAnchorDate();
-        }
-    }
-    clearStartDateTime() {
-        this.setStartDate(null);
-        this.setStartTime(null);
-    }
-    clearEndDateTime() {
-        this.setEndDate(null);
-        this.setEndTime(null);
-    }
-    clearStartTime() {
-        this.setStartTime(null);
-    }
-    clearEndTime() {
-        this.setEndTime(null);
+        this.setAnchor(AnchorState.createFromDateTime(TemporalDateTime));
     }
-    resetFixedAnchorTime() {
-        this.fixedAnchorTime.set(Temporal.PlainTime.from('00:00'));
-    }
-    setAnchorTimeFromForm(htmlString) {
-        const time = TemporalUtil.getPlainTimeFromHtmlTimeString(htmlString);
-        if (!time) {
+    setExternalInterval(interval) {
+        if (!interval) {
+            this.setInterval(new IntervalState(null, null));
             return;
         }
-        if (!this.fixedAnchorDate()) {
-            this.fixedAnchorDate.set(Temporal.Now.plainDateISO());
-        }
-        this.fixedAnchorTime.set(time);
-        if (!this.isUpdatingIntervalOnAnchorChange()) {
+        if (!interval) {
+            this.setInterval(new IntervalState(null, null));
             return;
         }
-        if (this.fixedAnchorTime()) {
-            this.editor.shiftSelectionToAnchorTime();
-        }
+        this.setInterval(interval);
     }
-    emitMainDates() {
-        if (!this._isInitialized) {
-            return;
-        }
-        const interval = this.createElderInterval();
-        this._dateChangeEmitter.emit(interval);
+    setSmartShift(smartShift) {
+        this._smartShift.next(smartShift);
     }
-    /***************************************************************************
-     *                                                                         *
-     * Private methods                                                         *
-     *                                                                         *
-     **************************************************************************/
-    setDateTimesFromElderInterval(interval) {
-        if (!interval) {
-            this.setStartDate(null);
-            this.setEndDate(null);
+    setInterval(interval) {
+        if (!this.isInitialized && !interval) {
             return;
         }
-        if (interval.start) {
-            const startDateAsJSDate = TimeUtil.date(interval.start);
-            this.setStartDate(TemporalUtil.getPlainDateFromJSDate(startDateAsJSDate));
-            this.setStartTime(TemporalUtil.getPlainTimeFromJSDate(startDateAsJSDate));
-        }
-        else {
-            this.setStartDate(null);
-        }
-        if (interval.end) {
-            const endDateAsJSDate = TimeUtil.date(interval.end);
-            this.setEndDate(TemporalUtil.getPlainDateFromJSDate(endDateAsJSDate));
-            this.setEndTime(TemporalUtil.getPlainTimeFromJSDate(endDateAsJSDate));
-        }
-        else {
-            this.setEndDate(null);
-        }
-        this.log.debug('Applied interval to picker model:', interval);
-    }
-    createElderInterval() {
-        let start, end = null;
-        if (this.startDateTime()) {
-            const jsDate = TemporalUtil.getJSDateFromPlainDateTime(this.startDateTime());
-            start = TimeUtil.instant(jsDate);
-        }
-        if (this.endDateTime()) {
-            const jsDate = TemporalUtil.getJSDateFromPlainDateTime(this.endDateTime());
-            end = TimeUtil.instant(jsDate);
-        }
-        if (!start && !end) {
-            return new Interval(null, null);
-        }
-        return new Interval(start, end);
-    }
-    shiftRangeEndToToday() {
-        if (!this.isStartAndEndDatesSet()) {
+        if (this._interval.getValue() &&
+            IntervalPickerUtil.isIntervalEquals(this._interval.getValue(), interval)) {
             return;
         }
-        const duration = this.startDate().until(this.endDate());
-        this.setEndDate(Temporal.Now.plainDateISO());
-        this.setStartDate(this.endDate().subtract(duration));
+        const newInterval = interval ? IntervalPickerUtil.setMillisecondsToZero(interval) : null;
+        this._interval.next(newInterval);
+        this._intervalChange.next(newInterval);
     }
-    deltaAsTemporalDuration(startDateTime, endDateTime) {
-        if (!startDateTime || !endDateTime) {
-            return null;
-        }
-        return startDateTime.until(endDateTime);
+}
+
+class IntervalPickerPresenter {
+    constructor(interval$, anchor$, smartShift$) {
+        this.startDateHtmlString = computed(() => {
+            return TemporalUtil.getHtmlDateString(this.intervalState()?.startDate);
+        });
+        this.endDateHtmlString = computed(() => {
+            return TemporalUtil.getHtmlDateString(this.intervalState()?.endDate);
+        });
+        this.anchorDateHtmlString = computed(() => {
+            return TemporalUtil.getHtmlDateString(this.anchorState()?.fixedDate);
+        });
+        this.startTimeHtmlString = computed(() => {
+            return TemporalUtil.getHtmlTimeStringFromPlainTime(this.intervalState()?.startTime);
+        });
+        this.endTimeHtmlString = computed(() => {
+            return TemporalUtil.getHtmlTimeStringFromPlainTime(this.intervalState()?.endTime);
+        });
+        this.anchorTimeHtmlString = computed(() => {
+            return TemporalUtil.getHtmlTimeStringFromPlainTime(this.anchorState()?.fixedTime);
+        });
+        this.isValidIntervalSet = computed(() => {
+            return IntervalPickerUtil.isIntervalWithStartAndEnd(this.intervalState());
+        });
+        this.deltaHumanReadable = computed(() => {
+            return IntervalPickerUtil.getDeltaHumanReadable(this.intervalState());
+        });
+        this.smartShiftMessage = computed(() => {
+            try {
+                return IntervalPickerUtil.getSmartShiftMessage(this.smartShiftState().mode, this.intervalState());
+            }
+            catch (e) {
+                return '-';
+            }
+        });
+        this.startDateTimeAsJSDate = computed(() => {
+            if (!this.intervalState()?.startDateTime) {
+                return null;
+            }
+            return TemporalUtil.getJSDateFromPlainDateTime(this.intervalState()?.startDateTime);
+        });
+        this.endDateTimeAsJSDate = computed(() => {
+            if (!this.intervalState()?.endDateTime) {
+                return null;
+            }
+            return TemporalUtil.getJSDateFromPlainDateTime(this.intervalState()?.endDateTime);
+        });
+        this.dateRangeForCalendar = computed(() => {
+            const start = this.startDateTimeAsJSDate();
+            const end = this.endDateTimeAsJSDate();
+            return new DateRange(start, end);
+        });
+        this.isStartTimeSetAndNotMidnight = computed(() => {
+            return IntervalPickerUtil.isTimeSetAndNotMidnight(this.intervalState()?.startTime);
+        });
+        this.isEndTimeSetAndNotMidnight = computed(() => {
+            return IntervalPickerUtil.isTimeSetAndNotMidnight(this.intervalState()?.endTime);
+        });
+        this.isFixedAnchorDateSet = computed(() => {
+            return this.anchorState().isFixed;
+        });
+        this.isAnchorTimeMidnight = computed(() => {
+            return this.anchorState().isTimeMidnight;
+        });
+        this.isAnchorMenuDisabled = computed(() => {
+            return !this.startDateHtmlString() && !this.endDateHtmlString() && !this.anchorState().isFixed;
+        });
+        this.calendarAnchorDateCssClassFn = (cellDate, view) => {
+            const calendarAnchorDateCssClassFnBody = (cellDate, view) => {
+                const anchorDate = this.anchorState()?.fixedDate;
+                if (!anchorDate) {
+                    return '';
+                }
+                const date = TemporalUtil.getJSDateFromPlainDateTime(anchorDate);
+                if (!date) {
+                    return '';
+                }
+                if (cellDate.getDate() === date.getDate() &&
+                    cellDate.getMonth() === date.getMonth() &&
+                    cellDate.getFullYear() === date.getFullYear()) {
+                    return 'elder-custom-anchor-date';
+                }
+                return '';
+            };
+            return calendarAnchorDateCssClassFnBody(cellDate, view);
+        };
+        this.intervalState = toSignal(interval$);
+        this.anchorState = toSignal(anchor$);
+        this.smartShiftState = toSignal(smartShift$);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: IntervalPickerModel, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: IntervalPickerModel }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: IntervalPickerModel, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
 
 class ElderIntervalPickerComponent {
-    set interval(value) {
-        this.model.setInterval(value);
-    }
-    set anchorDateTime(value) {
-        this.model.setAnchorDateTime(value);
-    }
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(model) {
-        this.model = model;
+    constructor() {
         /***************************************************************************
          *                                                                         *
          * Fields                                                                  *
          *                                                                         *
          **************************************************************************/
         this.log = LoggerFactory.getLogger(this.constructor.name);
-        this.emitOnChange = input(true, { transform: (v) => booleanAttribute(v) });
-        this.intervalInputMode = input('date-range');
-        this.showAnchor = input(false, { transform: (v) => booleanAttribute(v) });
-        this.anchorReadOnly = input(false, { transform: (v) => booleanAttribute(v) });
-        this.showResultText = input(true, { transform: (v) => booleanAttribute(v) });
-        this.showHelpText = input(false, { transform: (v) => booleanAttribute(v) });
-        this.lastExcludesToday = input(false, { transform: (v) => booleanAttribute(v) });
-        this.dateChange = new EventEmitter();
-        this.calendarAnchorDateCssClassFn = (cellDate, view) => {
-            return this.calendarAnchorDateCssClassFnBody(cellDate, view);
-        };
-        this.model.setupEventEmitter(this.dateChange);
-        effect(() => {
-            if (this.model.anchorDate()) {
-                this.updateMatCalendarTodayDate();
+        this.autoEmitMode = true;
+        this.emitOnChange = true;
+        this.emitType = 'interval';
+        this.intervalInputMode = input('date-time-range');
+        this.showAnchor = input(false);
+        this.anchorReadOnly = input(false);
+        this.externalAnchorDateTime = input(Temporal.Now.plainDateTimeISO());
+        this.externalInterval = input(null);
+        this.manager = new IntervalPickerStateManager();
+        this.controller = new IntervalController(this.manager);
+        this.presenter = new IntervalPickerPresenter(this.manager.interval$, this.manager.anchor$, this.manager.smartShift$);
+        this.manager.intervalChange.pipe(takeUntilDestroyed()).subscribe({
+            next: (state) => this.tryUpdateMatCalendarActiveDate(state),
+        });
+        this.intervalChange = this.manager.intervalChange.pipe(map$1((srcInterval) => {
+            if (!srcInterval) {
+                return null;
             }
+            const elderInterval = IntervalPickerUtil.createElderInterval(srcInterval);
+            if (this.emitType === 'iso') {
+                console.log('emitting type iso', coerceIntervalIsoStr(elderInterval));
+                return coerceIntervalIsoStr(elderInterval);
+            }
+            console.log('emitting type elder interval', elderInterval);
+            return elderInterval;
+        }));
+        this.manager.anchor$.pipe(takeUntilDestroyed()).subscribe((anchor) => {
+            IntervalPickerUtil.updateMatCalendarTodayDate(this.calendarStart, this.calendarEnd);
         });
-        effect(() => {
-            this.updateMatCalendarActiveDate(this.model.startDate(), this.model.endDate());
+        const externalAnchorObservable = toObservable(this.externalAnchorDateTime);
+        externalAnchorObservable.pipe(takeUntilDestroyed()).subscribe({
+            next: (date) => {
+                this.manager.setExternalAnchor(date);
+            },
+        });
+        const externalIntervalObservable = toObservable(this.externalInterval);
+        externalIntervalObservable.pipe(takeUntilDestroyed()).subscribe({
+            next: (interval) => {
+                const result = coerceInterval(interval);
+                this.manager.setInterval(IntervalPickerUtil.transformToIntervalState(result || null));
+            },
         });
     }
     /***************************************************************************
@@ -29690,19 +29706,21 @@ class ElderIntervalPickerComponent {
      * Life Cycle                                                              *
      *                                                                         *
      **************************************************************************/
+    ngOnInit() { }
+    ngOnDestroy() {
+        this.removeEventListeners();
+    }
     ngAfterViewInit() {
-        this.model.isEmittingOnChange.set(this.emitOnChange());
         this.setupDateInputCalendarFocusPrevention();
         setTimeout(() => {
-            this.model.setInitialized();
+            // this prevents ngmodel issue
+            this.manager.isInitialized = true;
+            console.log('externalInterval', this.externalInterval());
         }, 0);
     }
-    ngOnDestroy() {
-        this.removeEventListeners();
-    }
     /***************************************************************************
      *                                                                         *
-     * Public API                                                              *
+     * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
     setupDateInputCalendarFocusPrevention() {
@@ -29727,43 +29745,6 @@ class ElderIntervalPickerComponent {
         nativeElementStart.addEventListener('focus', this.calendarElFocusEventHandler, true);
         nativeElementEnd.addEventListener('focus', this.calendarElFocusEventHandler, true);
     }
-    clearStartDateTime() {
-        this.model.clearStartDateTime();
-        this.model.resetCalendarMode();
-        if (this.emitOnChange()) {
-            this.model.emitMainDates();
-        }
-    }
-    clearEndDateTime() {
-        this.model.clearEndDateTime();
-        this.model.resetCalendarMode();
-        if (this.emitOnChange()) {
-            this.model.emitMainDates();
-        }
-    }
-    clearStartAndEndDateTimes() {
-        this.model.clearStartDateTime();
-        this.model.clearEndDateTime();
-        this.model.resetCalendarMode();
-        if (this.emitOnChange()) {
-            this.model.emitMainDates();
-        }
-    }
-    handleStartCalendarChange(changedDate) {
-        this.model.calendarMode.set('days');
-        const newPlainDate = TemporalUtil.getPlainDateFromJSDate(changedDate);
-        this.model.setStartDate(newPlainDate);
-    }
-    handleEndCalendarChange(changedDate) {
-        this.model.calendarMode.set('days');
-        const newPlainDate = TemporalUtil.getPlainDateFromJSDate(changedDate);
-        this.model.setEndDate(newPlainDate);
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Private methods                                                         *
-     *                                                                         *
-     **************************************************************************/
     removeEventListeners() {
         if (!this.calendarStartElRef || !this.calendarEndElRef) {
             return;
@@ -29776,47 +29757,16 @@ class ElderIntervalPickerComponent {
         nativeElementStart.removeEventListener('focus', this.calendarElFocusEventHandler, true);
         nativeElementEnd.removeEventListener('focus', this.calendarElFocusEventHandler, true);
     }
-    calendarAnchorDateCssClassFnBody(cellDate, view) {
-        const anchorDate = this.model.fixedAnchorDate();
-        if (!anchorDate) {
-            return '';
-        }
-        const date = TemporalUtil.getJSDateFromPlainDateTime(anchorDate);
-        if (!date) {
-            return '';
-        }
-        if (cellDate.getDate() === date.getDate() &&
-            cellDate.getMonth() === date.getMonth() &&
-            cellDate.getFullYear() === date.getFullYear()) {
-            return 'elder-custom-anchor-date';
-        }
-        return '';
-    }
-    updateMatCalendarActiveDate(startDate, endDate) {
-        if (!this.calendarStart || !this.calendarEnd) {
-            return;
+    tryUpdateMatCalendarActiveDate(interval) {
+        try {
+            IntervalPickerUtil.updateMatCalendarActiveDate(this.calendarStart, this.calendarEnd, interval.startDate, interval.endDate);
         }
-        if (!startDate && !endDate) {
-            return;
+        catch (e) {
+            console.debug('Failed to update calendar active date', e);
         }
-        const calendarStart = this.calendarStart;
-        const calendarEnd = this.calendarEnd;
-        setTimeout(() => {
-            // timeout is needed to run calendar update last, otherwise there are issues
-            if (startDate) {
-                calendarStart.activeDate = TemporalUtil.getJSDateFromPlainDateTime(startDate);
-            }
-            if (endDate) {
-                calendarEnd.activeDate = TemporalUtil.getJSDateFromPlainDateTime(endDate);
-            }
-        }, 0);
-    }
-    updateMatCalendarTodayDate() {
-        this.calendarStart.updateTodaysDate();
-        this.calendarEnd.updateTodaysDate();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderIntervalPickerComponent, deps: [{ token: IntervalPickerModel }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: ElderIntervalPickerComponent, isStandalone: true, selector: "elder-interval-picker", inputs: { emitOnChange: { classPropertyName: "emitOnChange", publicName: "emitOnChange", 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 }, showResultText: { classPropertyName: "showResultText", publicName: "showResultText", isSignal: true, isRequired: false, transformFunction: null }, showHelpText: { classPropertyName: "showHelpText", publicName: "showHelpText", isSignal: true, isRequired: false, transformFunction: null }, lastExcludesToday: { classPropertyName: "lastExcludesToday", publicName: "lastExcludesToday", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: false, isRequired: false, transformFunction: null }, anchorDateTime: { classPropertyName: "anchorDateTime", publicName: "anchorDateTime", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange" }, providers: [IntervalPickerModel, { 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      <ng-container *ngTemplateOutlet=\"intervalSelector\"></ng-container>\n    </div>\n    <div class=\"layout-col\">\n      <!-- smart shift -->\n      <div class=\"layout-row place-around-center\">\n        <button mat-icon-button (click)=\"model.editor.smartShift(-1)\" [disabled]=\"model.isRangeNotSet()\">\n          <mat-icon>keyboard_double_arrow_left</mat-icon>\n        </button>\n        <span>{{ model.viewIntervalMessage() }}</span>\n        <button mat-icon-button (click)=\"model.editor.smartShift(1)\" [disabled]=\"model.isRangeNotSet()\">\n          <mat-icon>keyboard_double_arrow_right</mat-icon>\n        </button>\n      </div>\n      <!-- calendars and input controls -->\n      <ng-container *ngTemplateOutlet=\"calendarsTemplate\"></ng-container>\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          @if (showHelpText()) {\n            <h5 class=\"mat-h5\">{{ 'intervalPicker.selectSmartInterval' | translate }}</h5>\n          }\n          <!-- select current -->\n          <button mat-button (click)=\"model.editor.selectCurrentWeek()\">\n            {{ 'intervalPicker.currentPeriod.week' | translate }}\n          </button>\n          <button mat-button (click)=\"model.editor.selectCurrentMonth()\">\n            {{ 'intervalPicker.currentPeriod.month' | translate }}\n          </button>\n          <button mat-button (click)=\"model.editor.selectCurrentQuarter()\">\n            {{ 'intervalPicker.currentPeriod.quarter' | translate }}\n          </button>\n          <button mat-button (click)=\"model.editor.selectCurrentYear()\">\n            {{ 'intervalPicker.currentPeriod.year' | translate }}\n          </button>\n        </div>\n        <div class=\"fixed-shifts-container\">\n          <ng-container *ngTemplateOutlet=\"fixedShifts\"></ng-container>\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        <ng-container *ngTemplateOutlet=\"anchorInputField\"></ng-container>\n      }\n    </div>\n    @if (showResultText()) {\n      <!-- result interval -->\n      <div class=\"layout-col place-center-center\">\n        <div class=\"date-interval mat-caption pt-xs\">\n          @if (model.startDateTimeAsJSDate()) {\n            {{ model.startDateTimeAsJSDate() | date: 'dd.MM. y, HH:mm:ss' }}\n          } @else {\n            {{ 'intervalPicker.startDateNotSet' | translate }}\n          }\n          <span> - </span>\n          @if (model.endDateTimeAsJSDate()) {\n            {{ model.endDateTimeAsJSDate() | date: 'dd.MM. y, HH:mm:ss' }}\n          } @else {\n            {{ 'intervalPicker.endDateNotSet' | translate }}\n          }\n        </div>\n        <div>\n          <span class=\"mat-caption\">{{ model.deltaHumanReadable() || '&nbsp;' }}</span>\n        </div>\n      </div>\n    }\n    <div class=\"layout-row gap-lg\">\n      <button\n        mat-raised-button\n        color=\"primary\"\n        (click)=\"clearStartAndEndDateTimes()\"\n        [disabled]=\"model.isStartAndEndDatesEmpty()\"\n      >\n        {{ 'intervalPicker.clear' | translate }}\n      </button>\n\n      @if (!this.emitOnChange()) {\n        <button color=\"primary\" mat-raised-button (click)=\"model.emitMainDates()\">\n          {{ 'actions.ok' | translate }}\n        </button>\n      }\n    </div>\n  </div>\n</div>\n\n<ng-template #intervalSelector>\n  <div class=\"layout-col\">\n    @if (showHelpText()) {\n      <h5 class=\"mat-h5\">{{ 'intervalPicker.selectAbsoluteInterval' | translate }}</h5>\n    }\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)=\"model.editor.selectCurrentDay()\">\n          @if (model.isFixedAnchorDateSet()) {\n            {{ 'intervalPicker.anchorDay' | translate }}\n          } @else {\n            {{ 'intervalPicker.today' | translate }}\n          }\n        </button>\n        <button mat-button (click)=\"model.editor.selectYesterday()\">\n          @if (model.isFixedAnchorDateSet()) {\n            {{ 'intervalPicker.last' | translate }} 1 {{ 'intervalPicker.day' | translate }}\n          } @else {\n            {{ 'intervalPicker.yesterday' | translate }}\n          }\n        </button>\n        @if (lastExcludesToday()) {\n          <button mat-button (click)=\"model.editor.selectLastSevenDaysExcludingToday()\">\n            {{ 'intervalPicker.last' | translate }} 7 {{ 'intervalPicker.days' | translate }}\n          </button>\n          <button mat-button (click)=\"model.editor.selectLastThirtyDaysExcludingToday()\">\n            {{ 'intervalPicker.last' | translate }} 30 {{ 'intervalPicker.days' | translate }}\n          </button>\n        } @else {\n          <button mat-button (click)=\"model.editor.selectLastSevenDaysIncludingToday()\">\n            {{ 'intervalPicker.last' | translate }} 7 {{ 'intervalPicker.days' | translate }}\n          </button>\n          <button mat-button (click)=\"model.editor.selectLastThirtyDaysIncludingToday()\">\n            {{ 'intervalPicker.last' | translate }} 30 {{ 'intervalPicker.days' | translate }}\n          </button>\n        }\n        @if (intervalInputMode() === 'date-time-range') {\n          <div class=\"pt-sm\"></div>\n          <button mat-button (click)=\"model.editor.selectLastFiveMinutes()\">\n            {{ 'intervalPicker.last' | translate }} 5 {{ 'intervalPicker.minutes' | translate }}\n          </button>\n          <button mat-button (click)=\"model.editor.selectLastHour()\">\n            {{ 'intervalPicker.last' | translate }} {{ 'intervalPicker.hour' | translate }}\n          </button>\n          <button mat-button (click)=\"model.editor.selectLast24Hours()\">\n            {{ 'intervalPicker.last' | translate }} 24 {{ 'intervalPicker.hours' | translate }}\n          </button>\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #calendarsTemplate>\n  <div class=\"layout-row place-around-center\" style=\"align-items: flex-start; min-height: 280px\">\n    <mat-calendar\n      #rangeCalendarStart\n      style=\"width: 210px; max-width: 100%\"\n      [selected]=\"model.dateRangeForCalendar()\"\n      (selectedChange)=\"handleStartCalendarChange($event)\"\n      [maxDate]=\"model.endDateAsJSDate()\"\n      [dateClass]=\"calendarAnchorDateCssClassFn\"\n    >\n    </mat-calendar>\n    <mat-calendar\n      #rangeCalendarEnd\n      style=\"width: 210px; max-width: 100%\"\n      [selected]=\"model.dateRangeForCalendar()\"\n      (selectedChange)=\"handleEndCalendarChange($event)\"\n      [minDate]=\"model.startDateAsJSDate()\"\n      [dateClass]=\"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]=\"model.startDateHtmlString()\"\n          (ngModelChange)=\"model.setStartDateFromHtmlString($event)\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          (click)=\"this.clearStartDateTime()\"\n          [disabled]=\"!this.model.startDate()\"\n        >\n          <mat-icon>close</mat-icon>\n        </button>\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]=\"model.endDateHtmlString()\"\n          (ngModelChange)=\"model.setEndDateFromHtmlString($event)\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          (click)=\"this.clearEndDateTime()\"\n          [disabled]=\"!this.model.endDate()\"\n        >\n          <mat-icon>close</mat-icon>\n        </button>\n      </mat-form-field>\n    </div>\n  </div>\n  <br />\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]=\"model.getStartTimeString()\"\n          (ngModelChange)=\"model.setStartTimeFromString($event)\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          (click)=\"this.model.clearStartTime()\"\n          [disabled]=\"!this.model.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]=\"model.getEndTimeString()\"\n          (ngModelChange)=\"model.setEndTimeFromString($event)\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          (click)=\"this.model.clearEndTime()\"\n          [disabled]=\"!this.model.isEndTimeSetAndNotMidnight()\"\n        >\n          <mat-icon>close</mat-icon>\n        </button>\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #fixedShifts>\n  @if (showHelpText()) {\n    <h5 class=\"mat-h5\">{{ 'intervalPicker.shiftInterval' | translate }}</h5>\n  }\n  <div class=\"layout-col place-start-stretch\">\n    <div class=\"layout-row place-between-center\">\n      <button mat-icon-button (click)=\"model.editor.shiftDay(-1)\" [disabled]=\"model.isRangeNotSet()\">\n        <mat-icon>keyboard_double_arrow_left</mat-icon>\n      </button>\n      <span>{{ 'intervalPicker.day' | translate }}</span>\n      <button mat-icon-button (click)=\"model.editor.shiftDay(1)\" [disabled]=\"model.isRangeNotSet()\">\n        <mat-icon>keyboard_double_arrow_right</mat-icon>\n      </button>\n    </div>\n    <div class=\"layout-row place-between-center\">\n      <button mat-icon-button (click)=\"model.editor.shiftMonth(-1, true)\" [disabled]=\"model.isRangeNotSet()\">\n        <mat-icon>keyboard_double_arrow_left</mat-icon>\n      </button>\n      <span>{{ 'intervalPicker.month' | translate }}</span>\n      <button mat-icon-button (click)=\"model.editor.shiftMonth(1, true)\" [disabled]=\"model.isRangeNotSet()\">\n        <mat-icon>keyboard_double_arrow_right</mat-icon>\n      </button>\n    </div>\n    <div class=\"layout-row place-between-center\">\n      <button mat-icon-button (click)=\"model.editor.shiftYear(-1, true)\" [disabled]=\"model.isRangeNotSet()\">\n        <mat-icon>keyboard_double_arrow_left</mat-icon>\n      </button>\n      <span>{{ 'intervalPicker.year' | translate }}</span>\n      <button mat-icon-button (click)=\"model.editor.shiftYear(1, true)\" [disabled]=\"model.isRangeNotSet()\">\n        <mat-icon>keyboard_double_arrow_right</mat-icon>\n      </button>\n    </div>\n\n    @if (intervalInputMode() === 'date-time-range') {\n      <!-- shift minute -->\n      <div class=\"layout-row place-between-center\">\n        <button\n          mat-icon-button\n          (click)=\"model.editor.shiftTime(-1, 'minutes')\"\n          [disabled]=\"model.isRangeNotSet()\"\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)=\"model.editor.shiftTime(1, 'minutes')\"\n          [disabled]=\"model.isRangeNotSet()\"\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)=\"model.editor.shiftTime(-1, 'hours')\"\n          [disabled]=\"model.isRangeNotSet()\"\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)=\"model.editor.shiftTime(1, 'hours')\"\n          [disabled]=\"model.isRangeNotSet()\"\n        >\n          <mat-icon>keyboard_double_arrow_right</mat-icon>\n        </button>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #anchorInputField>\n  <div class=\"layout-row flex-none gap-md\">\n    <mat-menu #anchorMenu=\"matMenu\">\n      @if (model.startDate()) {\n        <button\n          mat-menu-item\n          (click)=\"model.setFixedAnchorPointToEndDateTime()\"\n          [disabled]=\"!model.endDate()\"\n        >\n          <mat-icon class=\"material-symbols-outlined\">login</mat-icon>\n          <span>{{ 'intervalPicker.endDate' | translate }}</span>\n        </button>\n      }\n      @if (model.endDate()) {\n        <button\n          mat-menu-item\n          (click)=\"model.setFixedAnchorPointToStartDateTime()\"\n          [disabled]=\"!model.startDate()\"\n        >\n          <mat-icon class=\"material-symbols-outlined\">logout</mat-icon>\n          <span>{{ 'intervalPicker.startDate' | translate }}</span>\n        </button>\n      }\n      @if (model.fixedAnchorDate()) {\n        <button\n          mat-menu-item\n          (click)=\"this.model.resetFixedAnchorPoint()\"\n          [disabled]=\"!model.fixedAnchorDate() || 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      <elder-local-date-input\n        name=\"anchorDateInput\"\n        (valueUpdated)=\"model.setAnchorDateFromForm($event)\"\n        [value]=\"model.getAnchorPointAsLocaleDate()\"\n        [readonly]=\"anchorReadOnly()\"\n      >\n      </elder-local-date-input>\n      @if (!anchorReadOnly()) {\n        <button\n          mat-icon-button\n          matSuffix\n          [matMenuTriggerFor]=\"anchorMenu\"\n          [disabled]=\"model.isStartAndEndDatesEmpty() && !model.fixedAnchorDate()\"\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]=\"model.getAnchorTimeString()\"\n          (ngModelChange)=\"model.setAnchorTimeFromForm($event)\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          (click)=\"this.model.resetFixedAnchorTime()\"\n          [disabled]=\"!model.isFixedAnchorTimeSetAndNotMidnight() || anchorReadOnly()\"\n        >\n          <mat-icon>close</mat-icon>\n        </button>\n      </mat-form-field>\n    }\n  </div>\n</ng-template>\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: i2$5.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$a.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$a.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$a.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$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"], exportAs: ["matInput"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: ElderLocalDateInputComponent, selector: "elder-local-date-input", inputs: ["zone", "autoDatePicker", "arrows", "today", "center", "datePickerTouchUi", "allowNull", "datePickerEnabled", "isoValue", "dateValue", "isoDateValue"], outputs: ["blurred", "valueUpdatedBlur", "isoValueChange", "dateValueChange", "isoDateValueChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i10.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: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderIntervalPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: ElderIntervalPickerComponent, isStandalone: true, selector: "elder-interval-picker", inputs: { autoEmitMode: { classPropertyName: "autoEmitMode", publicName: "autoEmitMode", isSignal: false, isRequired: false, transformFunction: null }, emitOnChange: { classPropertyName: "emitOnChange", publicName: "emitOnChange", isSignal: false, isRequired: false, transformFunction: null }, emitType: { classPropertyName: "emitType", publicName: "emitType", isSignal: false, 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 mat-icon-button matSuffix [matMenuTriggerFor]=\"anchorMenu\" [disabled]=\"presenter.isAnchorMenuDisabled()\">\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-raised-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-raised-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$c.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$a.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$a.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$a.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$1.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: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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: i2.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: "18.2.5", ngImport: i0, type: ElderIntervalPickerComponent, decorators: [{
             type: Component,
@@ -29834,12 +29784,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                         FormsModule,
                         MatButtonModule,
                         MatCalendar,
-                        ElderLocalDateInputComponent,
                         MatTooltip,
                         TranslateModule,
                         MatMenuModule,
-                    ], providers: [IntervalPickerModel, { provide: DateAdapter, useClass: CustomDateAdapter }], changeDetection: ChangeDetectionStrategy.OnPush, 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      <ng-container *ngTemplateOutlet=\"intervalSelector\"></ng-container>\n    </div>\n    <div class=\"layout-col\">\n      <!-- smart shift -->\n      <div class=\"layout-row place-around-center\">\n        <button mat-icon-button (click)=\"model.editor.smartShift(-1)\" [disabled]=\"model.isRangeNotSet()\">\n          <mat-icon>keyboard_double_arrow_left</mat-icon>\n        </button>\n        <span>{{ model.viewIntervalMessage() }}</span>\n        <button mat-icon-button (click)=\"model.editor.smartShift(1)\" [disabled]=\"model.isRangeNotSet()\">\n          <mat-icon>keyboard_double_arrow_right</mat-icon>\n        </button>\n      </div>\n      <!-- calendars and input controls -->\n      <ng-container *ngTemplateOutlet=\"calendarsTemplate\"></ng-container>\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          @if (showHelpText()) {\n            <h5 class=\"mat-h5\">{{ 'intervalPicker.selectSmartInterval' | translate }}</h5>\n          }\n          <!-- select current -->\n          <button mat-button (click)=\"model.editor.selectCurrentWeek()\">\n            {{ 'intervalPicker.currentPeriod.week' | translate }}\n          </button>\n          <button mat-button (click)=\"model.editor.selectCurrentMonth()\">\n            {{ 'intervalPicker.currentPeriod.month' | translate }}\n          </button>\n          <button mat-button (click)=\"model.editor.selectCurrentQuarter()\">\n            {{ 'intervalPicker.currentPeriod.quarter' | translate }}\n          </button>\n          <button mat-button (click)=\"model.editor.selectCurrentYear()\">\n            {{ 'intervalPicker.currentPeriod.year' | translate }}\n          </button>\n        </div>\n        <div class=\"fixed-shifts-container\">\n          <ng-container *ngTemplateOutlet=\"fixedShifts\"></ng-container>\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        <ng-container *ngTemplateOutlet=\"anchorInputField\"></ng-container>\n      }\n    </div>\n    @if (showResultText()) {\n      <!-- result interval -->\n      <div class=\"layout-col place-center-center\">\n        <div class=\"date-interval mat-caption pt-xs\">\n          @if (model.startDateTimeAsJSDate()) {\n            {{ model.startDateTimeAsJSDate() | date: 'dd.MM. y, HH:mm:ss' }}\n          } @else {\n            {{ 'intervalPicker.startDateNotSet' | translate }}\n          }\n          <span> - </span>\n          @if (model.endDateTimeAsJSDate()) {\n            {{ model.endDateTimeAsJSDate() | date: 'dd.MM. y, HH:mm:ss' }}\n          } @else {\n            {{ 'intervalPicker.endDateNotSet' | translate }}\n          }\n        </div>\n        <div>\n          <span class=\"mat-caption\">{{ model.deltaHumanReadable() || '&nbsp;' }}</span>\n        </div>\n      </div>\n    }\n    <div class=\"layout-row gap-lg\">\n      <button\n        mat-raised-button\n        color=\"primary\"\n        (click)=\"clearStartAndEndDateTimes()\"\n        [disabled]=\"model.isStartAndEndDatesEmpty()\"\n      >\n        {{ 'intervalPicker.clear' | translate }}\n      </button>\n\n      @if (!this.emitOnChange()) {\n        <button color=\"primary\" mat-raised-button (click)=\"model.emitMainDates()\">\n          {{ 'actions.ok' | translate }}\n        </button>\n      }\n    </div>\n  </div>\n</div>\n\n<ng-template #intervalSelector>\n  <div class=\"layout-col\">\n    @if (showHelpText()) {\n      <h5 class=\"mat-h5\">{{ 'intervalPicker.selectAbsoluteInterval' | translate }}</h5>\n    }\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)=\"model.editor.selectCurrentDay()\">\n          @if (model.isFixedAnchorDateSet()) {\n            {{ 'intervalPicker.anchorDay' | translate }}\n          } @else {\n            {{ 'intervalPicker.today' | translate }}\n          }\n        </button>\n        <button mat-button (click)=\"model.editor.selectYesterday()\">\n          @if (model.isFixedAnchorDateSet()) {\n            {{ 'intervalPicker.last' | translate }} 1 {{ 'intervalPicker.day' | translate }}\n          } @else {\n            {{ 'intervalPicker.yesterday' | translate }}\n          }\n        </button>\n        @if (lastExcludesToday()) {\n          <button mat-button (click)=\"model.editor.selectLastSevenDaysExcludingToday()\">\n            {{ 'intervalPicker.last' | translate }} 7 {{ 'intervalPicker.days' | translate }}\n          </button>\n          <button mat-button (click)=\"model.editor.selectLastThirtyDaysExcludingToday()\">\n            {{ 'intervalPicker.last' | translate }} 30 {{ 'intervalPicker.days' | translate }}\n          </button>\n        } @else {\n          <button mat-button (click)=\"model.editor.selectLastSevenDaysIncludingToday()\">\n            {{ 'intervalPicker.last' | translate }} 7 {{ 'intervalPicker.days' | translate }}\n          </button>\n          <button mat-button (click)=\"model.editor.selectLastThirtyDaysIncludingToday()\">\n            {{ 'intervalPicker.last' | translate }} 30 {{ 'intervalPicker.days' | translate }}\n          </button>\n        }\n        @if (intervalInputMode() === 'date-time-range') {\n          <div class=\"pt-sm\"></div>\n          <button mat-button (click)=\"model.editor.selectLastFiveMinutes()\">\n            {{ 'intervalPicker.last' | translate }} 5 {{ 'intervalPicker.minutes' | translate }}\n          </button>\n          <button mat-button (click)=\"model.editor.selectLastHour()\">\n            {{ 'intervalPicker.last' | translate }} {{ 'intervalPicker.hour' | translate }}\n          </button>\n          <button mat-button (click)=\"model.editor.selectLast24Hours()\">\n            {{ 'intervalPicker.last' | translate }} 24 {{ 'intervalPicker.hours' | translate }}\n          </button>\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #calendarsTemplate>\n  <div class=\"layout-row place-around-center\" style=\"align-items: flex-start; min-height: 280px\">\n    <mat-calendar\n      #rangeCalendarStart\n      style=\"width: 210px; max-width: 100%\"\n      [selected]=\"model.dateRangeForCalendar()\"\n      (selectedChange)=\"handleStartCalendarChange($event)\"\n      [maxDate]=\"model.endDateAsJSDate()\"\n      [dateClass]=\"calendarAnchorDateCssClassFn\"\n    >\n    </mat-calendar>\n    <mat-calendar\n      #rangeCalendarEnd\n      style=\"width: 210px; max-width: 100%\"\n      [selected]=\"model.dateRangeForCalendar()\"\n      (selectedChange)=\"handleEndCalendarChange($event)\"\n      [minDate]=\"model.startDateAsJSDate()\"\n      [dateClass]=\"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]=\"model.startDateHtmlString()\"\n          (ngModelChange)=\"model.setStartDateFromHtmlString($event)\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          (click)=\"this.clearStartDateTime()\"\n          [disabled]=\"!this.model.startDate()\"\n        >\n          <mat-icon>close</mat-icon>\n        </button>\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]=\"model.endDateHtmlString()\"\n          (ngModelChange)=\"model.setEndDateFromHtmlString($event)\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          (click)=\"this.clearEndDateTime()\"\n          [disabled]=\"!this.model.endDate()\"\n        >\n          <mat-icon>close</mat-icon>\n        </button>\n      </mat-form-field>\n    </div>\n  </div>\n  <br />\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]=\"model.getStartTimeString()\"\n          (ngModelChange)=\"model.setStartTimeFromString($event)\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          (click)=\"this.model.clearStartTime()\"\n          [disabled]=\"!this.model.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]=\"model.getEndTimeString()\"\n          (ngModelChange)=\"model.setEndTimeFromString($event)\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          (click)=\"this.model.clearEndTime()\"\n          [disabled]=\"!this.model.isEndTimeSetAndNotMidnight()\"\n        >\n          <mat-icon>close</mat-icon>\n        </button>\n      </mat-form-field>\n    </div>\n  }\n</ng-template>\n\n<ng-template #fixedShifts>\n  @if (showHelpText()) {\n    <h5 class=\"mat-h5\">{{ 'intervalPicker.shiftInterval' | translate }}</h5>\n  }\n  <div class=\"layout-col place-start-stretch\">\n    <div class=\"layout-row place-between-center\">\n      <button mat-icon-button (click)=\"model.editor.shiftDay(-1)\" [disabled]=\"model.isRangeNotSet()\">\n        <mat-icon>keyboard_double_arrow_left</mat-icon>\n      </button>\n      <span>{{ 'intervalPicker.day' | translate }}</span>\n      <button mat-icon-button (click)=\"model.editor.shiftDay(1)\" [disabled]=\"model.isRangeNotSet()\">\n        <mat-icon>keyboard_double_arrow_right</mat-icon>\n      </button>\n    </div>\n    <div class=\"layout-row place-between-center\">\n      <button mat-icon-button (click)=\"model.editor.shiftMonth(-1, true)\" [disabled]=\"model.isRangeNotSet()\">\n        <mat-icon>keyboard_double_arrow_left</mat-icon>\n      </button>\n      <span>{{ 'intervalPicker.month' | translate }}</span>\n      <button mat-icon-button (click)=\"model.editor.shiftMonth(1, true)\" [disabled]=\"model.isRangeNotSet()\">\n        <mat-icon>keyboard_double_arrow_right</mat-icon>\n      </button>\n    </div>\n    <div class=\"layout-row place-between-center\">\n      <button mat-icon-button (click)=\"model.editor.shiftYear(-1, true)\" [disabled]=\"model.isRangeNotSet()\">\n        <mat-icon>keyboard_double_arrow_left</mat-icon>\n      </button>\n      <span>{{ 'intervalPicker.year' | translate }}</span>\n      <button mat-icon-button (click)=\"model.editor.shiftYear(1, true)\" [disabled]=\"model.isRangeNotSet()\">\n        <mat-icon>keyboard_double_arrow_right</mat-icon>\n      </button>\n    </div>\n\n    @if (intervalInputMode() === 'date-time-range') {\n      <!-- shift minute -->\n      <div class=\"layout-row place-between-center\">\n        <button\n          mat-icon-button\n          (click)=\"model.editor.shiftTime(-1, 'minutes')\"\n          [disabled]=\"model.isRangeNotSet()\"\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)=\"model.editor.shiftTime(1, 'minutes')\"\n          [disabled]=\"model.isRangeNotSet()\"\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)=\"model.editor.shiftTime(-1, 'hours')\"\n          [disabled]=\"model.isRangeNotSet()\"\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)=\"model.editor.shiftTime(1, 'hours')\"\n          [disabled]=\"model.isRangeNotSet()\"\n        >\n          <mat-icon>keyboard_double_arrow_right</mat-icon>\n        </button>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #anchorInputField>\n  <div class=\"layout-row flex-none gap-md\">\n    <mat-menu #anchorMenu=\"matMenu\">\n      @if (model.startDate()) {\n        <button\n          mat-menu-item\n          (click)=\"model.setFixedAnchorPointToEndDateTime()\"\n          [disabled]=\"!model.endDate()\"\n        >\n          <mat-icon class=\"material-symbols-outlined\">login</mat-icon>\n          <span>{{ 'intervalPicker.endDate' | translate }}</span>\n        </button>\n      }\n      @if (model.endDate()) {\n        <button\n          mat-menu-item\n          (click)=\"model.setFixedAnchorPointToStartDateTime()\"\n          [disabled]=\"!model.startDate()\"\n        >\n          <mat-icon class=\"material-symbols-outlined\">logout</mat-icon>\n          <span>{{ 'intervalPicker.startDate' | translate }}</span>\n        </button>\n      }\n      @if (model.fixedAnchorDate()) {\n        <button\n          mat-menu-item\n          (click)=\"this.model.resetFixedAnchorPoint()\"\n          [disabled]=\"!model.fixedAnchorDate() || 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      <elder-local-date-input\n        name=\"anchorDateInput\"\n        (valueUpdated)=\"model.setAnchorDateFromForm($event)\"\n        [value]=\"model.getAnchorPointAsLocaleDate()\"\n        [readonly]=\"anchorReadOnly()\"\n      >\n      </elder-local-date-input>\n      @if (!anchorReadOnly()) {\n        <button\n          mat-icon-button\n          matSuffix\n          [matMenuTriggerFor]=\"anchorMenu\"\n          [disabled]=\"model.isStartAndEndDatesEmpty() && !model.fixedAnchorDate()\"\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]=\"model.getAnchorTimeString()\"\n          (ngModelChange)=\"model.setAnchorTimeFromForm($event)\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          (click)=\"this.model.resetFixedAnchorTime()\"\n          [disabled]=\"!model.isFixedAnchorTimeSetAndNotMidnight() || anchorReadOnly()\"\n        >\n          <mat-icon>close</mat-icon>\n        </button>\n      </mat-form-field>\n    }\n  </div>\n</ng-template>\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: () => [{ type: IntervalPickerModel }], propDecorators: { calendarStart: [{
+                        ElderIntervalInputComponent,
+                        MatMenuModule,
+                    ], 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 mat-icon-button matSuffix [matMenuTriggerFor]=\"anchorMenu\" [disabled]=\"presenter.isAnchorMenuDisabled()\">\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-raised-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-raised-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
+            }], autoEmitMode: [{
+                type: Input
+            }], emitOnChange: [{
+                type: Input
+            }], emitType: [{
+                type: Input
+            }], calendarStart: [{
                 type: ViewChild,
                 args: ['rangeCalendarStart']
             }], calendarEnd: [{
@@ -29857,12 +29816,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             }], endDateInput: [{
                 type: ViewChild,
                 args: ['endDateInput']
-            }], dateChange: [{
-                type: Output
-            }], interval: [{
-                type: Input
-            }], anchorDateTime: [{
-                type: Input
             }] } });
 
 class ElderOverlayOriginDirective {
@@ -30170,7 +30123,7 @@ class ElderOverlayComponent {
         const searchPanelPortal = new TemplatePortal(this.templateRef, this.viewContainer);
         return this._overlayRef.attach(searchPanelPortal);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderOverlayComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$c.Overlay }, { token: i1$c.OverlayPositionBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderOverlayComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$d.Overlay }, { token: i1$d.OverlayPositionBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: ElderOverlayComponent, isStandalone: true, selector: "elder-overlay", inputs: { originX: "originX", originY: "originY", overlayX: "overlayX", overlayY: "overlayY", offsetY: "offsetY", offsetX: "offsetX", backdrop: "backdrop", backdropVisible: "backdropVisible", origin: "origin", positionStrategy: "positionStrategy", overlaySize: "overlaySize" }, outputs: { keydownEvents: "keydownEvents", attachedChange: "attachedChange" }, providers: [
             {
                 provide: ElderOverlayRef,
@@ -30207,7 +30160,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                         },
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$c.Overlay }, { type: i1$c.OverlayPositionBuilder }], propDecorators: { templateRef: [{
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$d.Overlay }, { type: i1$d.OverlayPositionBuilder }], propDecorators: { templateRef: [{
                 type: ViewChild,
                 args: [TemplateRef, { static: true }]
             }], originX: [{
@@ -30240,133 +30193,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
 
 class ElderIntervalPickerToggleComponent {
     constructor() {
-        /***************************************************************************
-         *                                                                         *
-         * Fields                                                                  *
-         *                                                                         *
-         **************************************************************************/
         this.log = LoggerFactory.getLogger(this.constructor.name);
-        this.intervalInputElement = signal(undefined);
-        this.emitOnChange = input(true, { transform: (v) => booleanAttribute(v) });
-        this.showAnchor = input(false, { transform: (v) => booleanAttribute(v) });
-        this.anchorReadOnly = input(false, { transform: (v) => booleanAttribute(v) });
-        this.disabled = input(false, { transform: (v) => booleanAttribute(v) });
-        this.buttonDisabled = computed(() => this.intervalInputDisabled() || this.disabled());
-        this.intervalInputDisabled = signal(false);
-        this.showResultText = input(true, { transform: (v) => booleanAttribute(v) });
-        this.showHelpText = input(true, { transform: (v) => booleanAttribute(v) });
-        this.lastExcludesToday = input(false, { transform: (v) => booleanAttribute(v) });
-        this.anchorDateTime = input(null);
-        this.inputInterval = null;
-        this.intervalInputMode = 'date-range'; // will be overwritten by connected element after view init
+        this.connectedIntervalInput = null;
+        this.intervalInputMode = signal('date-time-range');
+        this.emitType = signal('interval');
+        this.externalInterval = signal(null);
+        this.showAnchor = input(false);
+        this.anchorReadOnly = input(false);
+        this.externalAnchorDateTime = input(null);
+        this.disabled = booleanAttribute(false);
     }
     /***************************************************************************
      *                                                                         *
      * Life Cycle                                                              *
      *                                                                         *
      **************************************************************************/
-    ngOnDestroy() {
-        this.inputIntervalElSubscription.unsubscribe();
-    }
     ngAfterViewInit() {
-        const intervalControl = this.intervalInputElement();
-        if (intervalControl.disabled) {
-            this.intervalInputDisabled.set(true);
+        if (!this.connectedIntervalInput) {
+            this.log.error('ElderIntervalPickerToggleComponent: connectedIntervalInput is required.');
+            return;
         }
-        this.inputIntervalElSubscription = intervalControl.valueUpdated.subscribe({
-            next: (value) => this.updateModelInterval(this.coerceInterval(value)),
+        this.intervalInputMode.set(this.connectedIntervalInput.mode);
+        this.emitType.set(this.connectedIntervalInput.valueAsIsoStr ? 'iso' : 'interval');
+        this.connectedIntervalInput.valueChange.subscribe((interval) => {
+            this.externalInterval.set(interval);
         });
-        this.intervalInputMode = intervalControl.mode;
-        this.updateModelInterval(this.readIntervalInputValue(intervalControl));
+        if (this.connectedIntervalInput.value) {
+            // this is necessary to set the value of the interval picker
+            this.externalInterval.set(this.connectedIntervalInput.value);
+        }
     }
     /***************************************************************************
      *                                                                         *
      * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    handleOverlayAttachedChange(attached) {
-        if (this.emitOnChange()) {
-            return;
-        }
-        this.updateModelFromIntervalInput();
-    }
-    updateModelFromIntervalInput() {
-        this.updateModelInterval(this.readIntervalInputValue(this.intervalInputElement()));
+    setConnectedIntervalInput(intervalInput) {
+        this.connectedIntervalInput = intervalInput;
     }
     handleIntervalPickerDateChange(interval) {
-        this.inputInterval = interval;
-        this.updateIntervalInputElement(this.inputInterval);
-    }
-    registerInputComponent(inputComponent) {
-        this.intervalInputElement.set(inputComponent);
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Private methods                                                         *
-     *                                                                         *
-     **************************************************************************/
-    updateModelInterval(value) {
-        this.inputInterval = value;
-        this.connectedIntervalPicker.model.setInterval(value);
-    }
-    updateIntervalInputElement(interval) {
-        const intervalControl = this.intervalInputElement();
-        if (intervalControl) {
-            intervalControl.value = interval;
-        }
-    }
-    readIntervalInputValue(intervalComponent) {
-        if (intervalComponent) {
-            return this.coerceInterval(intervalComponent.value);
-        }
-        return undefined;
-    }
-    coerceInterval(value) {
-        if (value instanceof Interval) {
-            return value;
-        }
-        else if (value != undefined) {
-            return Interval.parse(value);
-        }
-        else {
-            return undefined;
-        }
+        this.connectedIntervalInput.value = interval;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderIntervalPickerToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", type: ElderIntervalPickerToggleComponent, isStandalone: true, selector: "elder-interval-picker-toggle", inputs: { emitOnChange: { classPropertyName: "emitOnChange", publicName: "emitOnChange", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showResultText: { classPropertyName: "showResultText", publicName: "showResultText", isSignal: true, isRequired: false, transformFunction: null }, showHelpText: { classPropertyName: "showHelpText", publicName: "showHelpText", isSignal: true, isRequired: false, transformFunction: null }, lastExcludesToday: { classPropertyName: "lastExcludesToday", publicName: "lastExcludesToday", isSignal: true, isRequired: false, transformFunction: null }, anchorDateTime: { classPropertyName: "anchorDateTime", publicName: "anchorDateTime", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "connectedIntervalPicker", first: true, predicate: ["connectedIntervalPicker"], descendants: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", 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
         mat-icon-button
         [elderOverlayOrigin]="dateIntervalOverlay"
         [elderOverlayTrigger]="dateIntervalOverlay"
-        [disabled]="buttonDisabled()"
-        (click)="updateModelFromIntervalInput()"
         class="elder-control-icon-button mat-datepicker-toggle"
       >
         <mat-icon>date_range</mat-icon>
       </button>
     </span>
 
-    <elder-overlay #dateIntervalOverlay (attachedChange)="handleOverlayAttachedChange($event)">
+    <elder-overlay #dateIntervalOverlay>
       <elder-dialog-panel>
         <div class="pb-md pt-xs">
           <elder-interval-picker
             #connectedIntervalPicker
-            [intervalInputMode]="intervalInputMode"
-            [emitOnChange]="emitOnChange()"
-            [interval]="inputInterval"
-            (dateChange)="handleIntervalPickerDateChange($event)"
+            [intervalInputMode]="intervalInputMode()"
+            (intervalChange)="handleIntervalPickerDateChange($event)"
+            [externalInterval]="externalInterval()"
             [showAnchor]="showAnchor()"
-            [anchorDateTime]="anchorDateTime()"
             [anchorReadOnly]="anchorReadOnly()"
-            [showResultText]="showResultText()"
-            [showHelpText]="showHelpText()"
-            [lastExcludesToday]="lastExcludesToday()"
+            [externalAnchorDateTime]="externalAnchorDateTime()"
+            [emitType]="emitType()"
           ></elder-interval-picker>
         </div>
       </elder-dialog-panel>
     </elder-overlay>
-  `, isInline: true, dependencies: [{ kind: "component", type: ElderIntervalPickerComponent, selector: "elder-interval-picker", inputs: ["emitOnChange", "intervalInputMode", "showAnchor", "anchorReadOnly", "showResultText", "showHelpText", "lastExcludesToday", "interval", "anchorDateTime"], outputs: ["dateChange"] }, { 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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: ElderOverlayTriggerDirective, selector: "[elderOverlayTrigger]", inputs: ["elderOverlayTrigger", "elderOverlayTriggerType", "elderOverlayTriggerEnabled"] }, { kind: "directive", type: ElderOverlayOriginDirective, selector: "[elderOverlayOrigin]", inputs: ["elderOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: ElderIntervalPickerComponent, selector: "elder-interval-picker", inputs: ["autoEmitMode", "emitOnChange", "emitType", "intervalInputMode", "showAnchor", "anchorReadOnly", "externalAnchorDateTime", "externalInterval"], outputs: ["intervalChange"] }, { 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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: ElderOverlayTriggerDirective, selector: "[elderOverlayTrigger]", inputs: ["elderOverlayTrigger", "elderOverlayTriggerType", "elderOverlayTriggerEnabled"] }, { kind: "directive", type: ElderOverlayOriginDirective, selector: "[elderOverlayOrigin]", inputs: ["elderOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderIntervalPickerToggleComponent, decorators: [{
             type: Component,
@@ -30392,29 +30289,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
         mat-icon-button
         [elderOverlayOrigin]="dateIntervalOverlay"
         [elderOverlayTrigger]="dateIntervalOverlay"
-        [disabled]="buttonDisabled()"
-        (click)="updateModelFromIntervalInput()"
         class="elder-control-icon-button mat-datepicker-toggle"
       >
         <mat-icon>date_range</mat-icon>
       </button>
     </span>
 
-    <elder-overlay #dateIntervalOverlay (attachedChange)="handleOverlayAttachedChange($event)">
+    <elder-overlay #dateIntervalOverlay>
       <elder-dialog-panel>
         <div class="pb-md pt-xs">
           <elder-interval-picker
             #connectedIntervalPicker
-            [intervalInputMode]="intervalInputMode"
-            [emitOnChange]="emitOnChange()"
-            [interval]="inputInterval"
-            (dateChange)="handleIntervalPickerDateChange($event)"
+            [intervalInputMode]="intervalInputMode()"
+            (intervalChange)="handleIntervalPickerDateChange($event)"
+            [externalInterval]="externalInterval()"
             [showAnchor]="showAnchor()"
-            [anchorDateTime]="anchorDateTime()"
             [anchorReadOnly]="anchorReadOnly()"
-            [showResultText]="showResultText()"
-            [showHelpText]="showHelpText()"
-            [lastExcludesToday]="lastExcludesToday()"
+            [externalAnchorDateTime]="externalAnchorDateTime()"
+            [emitType]="emitType()"
           ></elder-interval-picker>
         </div>
       </elder-dialog-panel>
@@ -30425,6 +30317,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
         }], propDecorators: { connectedIntervalPicker: [{
                 type: ViewChild,
                 args: ['connectedIntervalPicker']
+            }], connectedIntervalInput: [{
+                type: Input
+            }], disabled: [{
+                type: Input
             }] } });
 
 class ElderIntervalPickerBindingDirective {
@@ -30442,9 +30338,10 @@ class ElderIntervalPickerBindingDirective {
     ngAfterContentInit() {
         if (!this.intervalInputComponent || !this.intervalPickerToggleComponent) {
             console.error('ElderIntervalPickerBindingDirective: Both components are required, IntervalInputComponent and IntervalPickerToggleComponent.');
+            return;
         }
+        this.intervalPickerToggleComponent.connectedIntervalInput = this.intervalInputComponent;
         this.intervalInputComponent.isDefaultDatePickerDisabled = true;
-        this.intervalPickerToggleComponent.registerInputComponent(this.intervalInputComponent);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderIntervalPickerBindingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: ElderIntervalPickerBindingDirective, isStandalone: true, selector: "[elderIntervalPickerBinding]", queries: [{ propertyName: "intervalInputComponent", first: true, predicate: ElderIntervalInputComponent, descendants: true }, { propertyName: "intervalPickerToggleComponent", first: true, predicate: ElderIntervalPickerToggleComponent, descendants: true }], ngImport: i0 }); }
@@ -35076,7 +34973,7 @@ class ElderTabDirective {
     constructor(tab) {
         this.tab = tab;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderTabDirective, deps: [{ token: i1$d.MatTab }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderTabDirective, deps: [{ token: i1$e.MatTab }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: ElderTabDirective, isStandalone: true, selector: "[elderTab]", inputs: { id: ["elderTab", "id"] }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderTabDirective, decorators: [{
@@ -35085,7 +34982,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                     selector: '[elderTab]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i1$d.MatTab }], propDecorators: { id: [{
+        }], ctorParameters: () => [{ type: i1$e.MatTab }], propDecorators: { id: [{
                 type: Input,
                 args: ['elderTab']
             }] } });
@@ -35316,7 +35213,7 @@ class ElderTabGroupRoutingDirective {
     serializeIndexMarker(index) {
         return ElderTabGroupRoutingDirective.TAB_INDEX_PREFIX + String(index);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderTabGroupRoutingDirective, deps: [{ token: ElderUrlFragmentParamsService }, { token: i1$d.MatTabGroup }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderTabGroupRoutingDirective, deps: [{ token: ElderUrlFragmentParamsService }, { token: i1$e.MatTabGroup }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: ElderTabGroupRoutingDirective, isStandalone: true, selector: "[elderTabGroupRouting]", inputs: { tabGroupQueryParamKey: ["elderTabGroupRouting", "tabGroupQueryParamKey"] }, queries: [{ propertyName: "tabs", predicate: MatTab }, { propertyName: "elderTabs", predicate: ElderTabDirective }], exportAs: ["elderTabGroupRouting"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderTabGroupRoutingDirective, decorators: [{
@@ -35326,7 +35223,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                     exportAs: 'elderTabGroupRouting',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: ElderUrlFragmentParamsService }, { type: i1$d.MatTabGroup }], propDecorators: { tabGroupQueryParamKey: [{
+        }], ctorParameters: () => [{ type: ElderUrlFragmentParamsService }, { type: i1$e.MatTabGroup }], propDecorators: { tabGroupQueryParamKey: [{
                 type: Input,
                 args: ['elderTabGroupRouting']
             }], tabs: [{