@elderbyte/ngx-starter 18.8.2 → 18.10.0

package/lib/common/time/public_api.d.ts

@@ -3,3 +3,5 @@ export * from './interval';
 export * from './interval-coerce';
 export * from './time-util';
 export * from './date-util';
+export * from './temporal-util';
+export * from './temporal-plain-date-interval';

package/lib/common/time/temporal-plain-date-interval.d.ts

@@ -0,0 +1,15 @@
+import { Temporal } from '@js-temporal/polyfill';
+export declare class TemporalPlainDateInterval {
+    start: Temporal.PlainDate;
+    end: Temporal.PlainDate;
+    constructor(start: Temporal.PlainDate, end: Temporal.PlainDate);
+    shiftDays(days: number): TemporalPlainDateInterval;
+    shiftMonths(months: number): TemporalPlainDateInterval;
+    shiftYears(years: number): TemporalPlainDateInterval;
+    toString(): string;
+    getDuration(): Temporal.Duration;
+    getDurationInDays(): number;
+    getDurationInWeeks(): number;
+    getDurationInMonths(): number;
+    getDurationInYears(): number;
+}

package/lib/common/time/temporal-util.d.ts

@@ -0,0 +1,34 @@
+import { Temporal } from '@js-temporal/polyfill';
+import { TemporalPlainDateInterval } from './temporal-plain-date-interval';
+export declare class TemporalUtil {
+    static getJSDateFromPlainDateTime(date: Temporal.PlainDate | Temporal.PlainDateTime): Date;
+    static getPlainDateTimeFromJSDate(date: Date): Temporal.PlainDateTime;
+    static getPlainDateTimeFromPlainDateAndPlainTime(date: Temporal.PlainDate, time: Temporal.PlainTime): Temporal.PlainDateTime;
+    static isFirstDayOfWeek(date: Temporal.PlainDate | Temporal.PlainDateTime): boolean;
+    static getPlainDateFromJSDate(date: Date): Temporal.PlainDate;
+    static getPlainTimeFromJSDate(date: Date): Temporal.PlainTime;
+    static getPlainDateTimeFromString(dateString: string): Temporal.PlainDateTime;
+    static getHtmlTimeStringFromPlainTime(time: Temporal.PlainTime | Temporal.PlainDateTime): string;
+    static getQuarterForDate(date?: Temporal.PlainDate): number;
+    static getCurrentDay(referenceDate?: Temporal.PlainDate): TemporalPlainDateInterval;
+    static getYesterday(referenceDate?: Temporal.PlainDate): TemporalPlainDateInterval;
+    static getLastSevenDays(referenceDate?: Temporal.PlainDate): TemporalPlainDateInterval;
+    static getLastThirtyDays(referenceDate?: Temporal.PlainDate): TemporalPlainDateInterval;
+    static getCurrentWeek(referenceDate?: Temporal.PlainDate): TemporalPlainDateInterval;
+    static getCurrentMonth(referenceDate?: Temporal.PlainDate): TemporalPlainDateInterval;
+    static getCurrentQuarter(referenceDate?: Temporal.PlainDate): TemporalPlainDateInterval;
+    static getPreviousQuarter(referenceDate?: Temporal.PlainDate): TemporalPlainDateInterval;
+    static getCurrentYear(referenceDate?: Temporal.PlainDate): TemporalPlainDateInterval;
+    static getPreviousYear(referenceDate?: Temporal.PlainDate): TemporalPlainDateInterval;
+    static getNextYear(referenceDate?: Temporal.PlainDate): TemporalPlainDateInterval;
+    static getLast365Days(referenceDate?: Temporal.PlainDate): TemporalPlainDateInterval;
+    static getLast90Days(referenceDate?: Temporal.PlainDate): TemporalPlainDateInterval;
+    static getPreviousMonth(referenceDate?: Temporal.PlainDate): TemporalPlainDateInterval;
+    static getNextMonth(referenceDate?: Temporal.PlainDate): TemporalPlainDateInterval;
+    static getPreviousWeek(referenceDate?: Temporal.PlainDate): TemporalPlainDateInterval;
+    static getDateTodayLocalized(): Temporal.PlainDate;
+    static createTemporalLocalizedDateFromTimestamp(timestamp: number): Temporal.PlainDate;
+    static getHtmlDateString(date: Temporal.PlainDate | Temporal.PlainDateTime): string;
+    static getPlainDateFromHtmlDateString(dateString: string): Temporal.PlainDate;
+    static getPlainTimeFromHtmlTimeString(timeString: string): Temporal.PlainTime;
+}

package/lib/components/forms/search/search-box/elder-search-box.component.d.ts

@@ -1,32 +1,23 @@
-import { AfterContentInit, ElementRef, OnDestroy } from '@angular/core';
+import { ElementRef } from '@angular/core';
 import { ElderSearchContextDirective } from '../elder-search-context.directive';
 import { ElderSearchPanelComponent } from './elder-search-panel.component';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { Observable } from 'rxjs';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { MatFormFieldAppearance } from '@angular/material/form-field';
+import { ElderOverlayComponent } from '../../../overlays/elder-overlay.component';
 import { SearchInputState } from '../domain/input/search-input-state';
 import * as i0 from "@angular/core";
-export declare class OverlayState {
-    hasOverlay: boolean;
-    constructor(hasOverlay: boolean);
-}
-export declare class ElderSearchBoxComponent implements OnDestroy, AfterContentInit {
+export declare class ElderSearchBoxComponent {
     readonly searchContextDirective: ElderSearchContextDirective;
     /***************************************************************************
      *                                                                         *
      * Fields                                                                  *
      *                                                                         *
      **************************************************************************/
-    private readonly logger;
-    private readonly unsubscribe$;
-    search: ElementRef<HTMLInputElement>;
-    advancedSearch: ElderSearchPanelComponent;
-    readonly overlayState$: BehaviorSubject<OverlayState>;
-    /***************************************************************************
-     *                                                                         *
-     * Public API Fields                                                       *
-     *                                                                         *
-     **************************************************************************/
+    private readonly log;
+    search: import("@angular/core").Signal<ElementRef<HTMLInputElement>>;
+    readonly overlayComponent: import("@angular/core").Signal<ElderOverlayComponent>;
+    readonly customSearchPanel: import("@angular/core").Signal<ElderSearchPanelComponent>;
     /**
      * Display the search panel immediately when the user enters the search box.
      */
@@ -46,13 +37,6 @@ export declare class ElderSearchBoxComponent implements OnDestroy, AfterContentI
      *                                                                         *
      **************************************************************************/
     constructor(searchContextDirective: ElderSearchContextDirective);
-    /***************************************************************************
-     *                                                                         *
-     * Life Cycle                                                              *
-     *                                                                         *
-     **************************************************************************/
-    ngAfterContentInit(): void;
-    ngOnDestroy(): void;
     /***************************************************************************
      *                                                                         *
      * Properties                                                              *
@@ -71,5 +55,5 @@ export declare class ElderSearchBoxComponent implements OnDestroy, AfterContentI
      */
     clearSearch(event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderSearchBoxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ElderSearchBoxComponent, "elder-search-box", ["elderSearchBox"], { "autoPanel": { "alias": "autoPanel"; "required": false; }; "name": { "alias": "name"; "required": false; }; "queryKey": { "alias": "queryKey"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "label": { "alias": "label"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "dense": { "alias": "dense"; "required": false; }; }, {}, ["advancedSearch"], ["elder-search-panel"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderSearchBoxComponent, "elder-search-box", ["elderSearchBox"], { "autoPanel": { "alias": "autoPanel"; "required": false; }; "name": { "alias": "name"; "required": false; }; "queryKey": { "alias": "queryKey"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "label": { "alias": "label"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "dense": { "alias": "dense"; "required": false; }; }, {}, ["customSearchPanel"], ["elder-search-panel"], true, never>;
 }

package/lib/components/forms/search/search-box/elder-search-panel.component.d.ts

@@ -1,5 +1,9 @@
+import { ElderOverlayComponent } from '../../../overlays/elder-overlay.component';
+import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
 export declare class ElderSearchPanelComponent {
+    readonly overlay: import("@angular/core").WritableSignal<ElderOverlayComponent>;
+    readonly open$: Observable<boolean>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderSearchPanelComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ElderSearchPanelComponent, "elder-search-panel", never, {}, {}, never, ["*"], true, never>;

package/lib/components/time/elder-interval-input/elder-interval-input.component.d.ts

@@ -40,6 +40,7 @@ export declare class ElderIntervalInputComponent extends ElderFormFieldControlBa
      **************************************************************************/
     private readonly logger;
     private _mode;
+    private _isDefaultDatePickerDisabled;
     zone: ZoneId;
     readonly endTime$: Observable<LocalTime>;
     readonly startLocalDate$: Observable<LocalDate>;
@@ -64,6 +65,8 @@ export declare class ElderIntervalInputComponent extends ElderFormFieldControlBa
     get valueAsIsoStr(): boolean;
     set mode(mode: IntervalInputMode);
     get mode(): IntervalInputMode;
+    set isDefaultDatePickerDisabled(hide: BooleanInput);
+    get isDefaultDatePickerDisabled(): boolean;
     get isoValueChange(): Observable<IsoIntervalStr | null>;
     set isoValue(value: IsoIntervalStr | null);
     get shouldLabelFloat(): boolean;
@@ -97,5 +100,5 @@ export declare class ElderIntervalInputComponent extends ElderFormFieldControlBa
     private mapIgnoreErrorObservable;
     private coerceValue;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderIntervalInputComponent, [null, null, null, null, { optional: true; self: true; }, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ElderIntervalInputComponent, "elder-interval-input", never, { "zone": { "alias": "zone"; "required": false; }; "valueAsIsoStr": { "alias": "valueAsIsoStr"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "isoValue": { "alias": "isoValue"; "required": false; }; }, { "isoValueChange": "isoValueChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderIntervalInputComponent, "elder-interval-input", never, { "zone": { "alias": "zone"; "required": false; }; "valueAsIsoStr": { "alias": "valueAsIsoStr"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "isDefaultDatePickerDisabled": { "alias": "isDefaultDatePickerDisabled"; "required": false; }; "isoValue": { "alias": "isoValue"; "required": false; }; }, { "isoValueChange": "isoValueChange"; }, never, never, true, never>;
 }

package/lib/components/time/elder-interval-picker/elder-interval-picker-binding.directive.d.ts

@@ -0,0 +1,30 @@
+import { ChangeDetectorRef, ElementRef, ViewContainerRef } from '@angular/core';
+import { ElderIntervalInputComponent } from '../../../components/time/elder-interval-input/elder-interval-input.component';
+import { ElderIntervalPickerToggleComponent } from './elder-interval-picker-toggle/elder-interval-picker-toggle.component';
+import * as i0 from "@angular/core";
+export declare class ElderIntervalPickerBindingDirective {
+    elementRef: ElementRef<HTMLElement>;
+    ref: ChangeDetectorRef;
+    viewContainerRef: ViewContainerRef;
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    intervalInputComponent: ElderIntervalInputComponent;
+    intervalPickerToggleComponent: ElderIntervalPickerToggleComponent;
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(elementRef: ElementRef<HTMLElement>, ref: ChangeDetectorRef, viewContainerRef: ViewContainerRef);
+    /***************************************************************************
+     *                                                                         *
+     * Life Cycle                                                              *
+     *                                                                         *
+     **************************************************************************/
+    ngAfterContentInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderIntervalPickerBindingDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderIntervalPickerBindingDirective, "[elderIntervalPickerBinding]", never, {}, {}, ["intervalInputComponent", "intervalPickerToggleComponent"], never, true, never>;
+}

package/lib/components/time/elder-interval-picker/elder-interval-picker-toggle/elder-interval-picker-toggle.component.d.ts

@@ -0,0 +1,48 @@
+import { Subscription } from 'rxjs';
+import { Interval } from '../../../../common/time/interval';
+import { ElderIntervalInputComponent, IntervalInputMode } from '../../../../components/time/elder-interval-input/elder-interval-input.component';
+import { ElderIntervalPickerComponent } from '../elder-interval-picker.component';
+import * as i0 from "@angular/core";
+export declare class ElderIntervalPickerToggleComponent {
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    private readonly log;
+    connectedIntervalPicker: ElderIntervalPickerComponent;
+    intervalInputElement?: ElderIntervalInputComponent;
+    isEmittingOnChange: boolean;
+    showAnchor: boolean;
+    isAnchorReadOnly: boolean;
+    isDisabledInput: boolean;
+    isResultTextVisible: boolean;
+    isHelpTextsVisible: boolean;
+    isOverlayCenteredToScreen: boolean;
+    readonly inputAnchorDateTime: import("@angular/core").InputSignal<Date>;
+    inputInterval: Interval;
+    anchorDateTime: Date;
+    intervalInputMode: IntervalInputMode;
+    isButtonDisabled: boolean;
+    inputIntervalElSubscription: Subscription;
+    /***************************************************************************
+     *                                                                         *
+     * Life Cycle                                                              *
+     *                                                                         *
+     **************************************************************************/
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    ngAfterViewInit(): void;
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    handleOverlayAttachedChange(attached: boolean): void;
+    updateIntervalInputElement(interval: Interval): void;
+    pullIntervalData(): void;
+    handleIntervalPickerDateChange(interval: Interval): void;
+    registerInputComponent(inputComponent: ElderIntervalInputComponent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderIntervalPickerToggleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderIntervalPickerToggleComponent, "elder-interval-picker-toggle", never, { "intervalInputElement": { "alias": "intervalInputElement"; "required": false; }; "isEmittingOnChange": { "alias": "isEmittingOnChange"; "required": false; }; "showAnchor": { "alias": "showAnchor"; "required": false; }; "isAnchorReadOnly": { "alias": "isAnchorReadOnly"; "required": false; }; "isDisabledInput": { "alias": "isDisabledInput"; "required": false; }; "isResultTextVisible": { "alias": "isResultTextVisible"; "required": false; }; "isHelpTextsVisible": { "alias": "isHelpTextsVisible"; "required": false; }; "isOverlayCenteredToScreen": { "alias": "isOverlayCenteredToScreen"; "required": false; }; "inputAnchorDateTime": { "alias": "inputAnchorDateTime"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/components/time/elder-interval-picker/elder-interval-picker.component.d.ts

@@ -0,0 +1,73 @@
+import { ElementRef, EventEmitter } from '@angular/core';
+import { MatCalendar, MatCalendarCellClassFunction } from '@angular/material/datepicker';
+import { Interval } from '../../../common/time/interval';
+import { IntervalInputMode } from '../../../components/time/elder-interval-input/elder-interval-input.component';
+import { ElderIntervalPickerService } from './elder-interval-picker.service';
+import * as i0 from "@angular/core";
+export declare class ElderIntervalPickerComponent {
+    svc: ElderIntervalPickerService;
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    private readonly log;
+    readonly calendarAnchorDateCssClassFn: MatCalendarCellClassFunction<Date>;
+    calendarStart: MatCalendar<Date>;
+    calendarEnd: MatCalendar<Date>;
+    calendarStartElRef: ElementRef;
+    calendarEndElRef: ElementRef;
+    startDateInput: ElementRef;
+    endDateInput: ElementRef;
+    isEmittingOnChange: boolean;
+    intervalInputMode: IntervalInputMode;
+    showAnchor: boolean;
+    isAnchorReadOnly: boolean;
+    isResultTextVisible: boolean;
+    isHelpTextsVisible: boolean;
+    dateChange: EventEmitter<Interval>;
+    inputInterval: import("@angular/core").InputSignal<Interval>;
+    inputAnchorDateTime: import("@angular/core").InputSignal<Date>;
+    private calendarElFocusEventHandler;
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(svc: ElderIntervalPickerService);
+    /***************************************************************************
+     *                                                                         *
+     * Life Cycle                                                              *
+     *                                                                         *
+     **************************************************************************/
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    setupDateInputCalendarFocusPrevention(): void;
+    clearStartDateTime(): void;
+    clearEndDateTime(): void;
+    clearStartAndEndDateTimes(): void;
+    handleStartCalendarChange(changedDate: Date): void;
+    handleEndCalendarChange(changedDate: Date): void;
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    private removeEventListeners;
+    private calendarAnchorDateCssClassFnBody;
+    /***************************************************************************
+     *                                                                         *
+     * Effects                                                                 *
+     *                                                                         *
+     **************************************************************************/
+    private readonly _updateMatCalendarElAnchorCssClassEffect;
+    private readonly _updateMatCalendarElSelectionEffect;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderIntervalPickerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderIntervalPickerComponent, "elder-interval-picker", never, { "isEmittingOnChange": { "alias": "isEmittingOnChange"; "required": false; }; "intervalInputMode": { "alias": "intervalInputMode"; "required": false; }; "showAnchor": { "alias": "showAnchor"; "required": false; }; "isAnchorReadOnly": { "alias": "isAnchorReadOnly"; "required": false; }; "isResultTextVisible": { "alias": "isResultTextVisible"; "required": false; }; "isHelpTextsVisible": { "alias": "isHelpTextsVisible"; "required": false; }; "inputInterval": { "alias": "inputInterval"; "required": false; "isSignal": true; }; "inputAnchorDateTime": { "alias": "inputAnchorDateTime"; "required": false; "isSignal": true; }; }, { "dateChange": "dateChange"; }, never, never, true, never>;
+}

package/lib/components/time/elder-interval-picker/elder-interval-picker.service.d.ts

@@ -0,0 +1,130 @@
+import { EventEmitter, Signal } from '@angular/core';
+import { DateRange } from '@angular/material/datepicker';
+import { LocalDate } from '@js-joda/core';
+import { Temporal } from '@js-temporal/polyfill';
+import { Interval } from '../../../common/time/interval';
+import { TemporalPlainDateInterval } from '../../../common/time/temporal-plain-date-interval';
+import * as i0 from "@angular/core";
+type calendarMode = 'days' | 'weeks' | 'months' | 'quarters' | 'years';
+export declare class ElderIntervalPickerService {
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    private readonly log;
+    private _dateChangeEmitter;
+    readonly calendarMode: import("@angular/core").WritableSignal<calendarMode>;
+    readonly startDate: import("@angular/core").WritableSignal<Temporal.PlainDate>;
+    readonly endDate: import("@angular/core").WritableSignal<Temporal.PlainDate>;
+    readonly baseReferenceDate: import("@angular/core").WritableSignal<Temporal.PlainDate>;
+    readonly baseReferenceTime: import("@angular/core").WritableSignal<Temporal.PlainTime>;
+    readonly fixedAnchorDate: import("@angular/core").WritableSignal<Temporal.PlainDate>;
+    readonly fixedAnchorTime: import("@angular/core").WritableSignal<Temporal.PlainTime>;
+    readonly startTime: import("@angular/core").WritableSignal<Temporal.PlainTime>;
+    readonly endTime: import("@angular/core").WritableSignal<Temporal.PlainTime>;
+    private _inputInterval;
+    private _inputAnchorDateTime;
+    readonly isEmittingOnChange: import("@angular/core").WritableSignal<boolean>;
+    readonly isUpdatingIntervalOnAnchorChange: import("@angular/core").WritableSignal<boolean>;
+    readonly isFixedAnchorDateSet: Signal<boolean>;
+    readonly anchorDate: Signal<Temporal.PlainDate>;
+    readonly anchorTime: Signal<Temporal.PlainTime>;
+    readonly anchorDateTime: Signal<Temporal.PlainDateTime>;
+    readonly dateRange: Signal<TemporalPlainDateInterval>;
+    readonly dateRangeForCalendar: Signal<DateRange<Date>>;
+    readonly dateRangeInDays: Signal<number>;
+    readonly isStartAndEndDatesEmpty: Signal<boolean>;
+    readonly isStartAndEndDatesSet: Signal<boolean>;
+    readonly isRangeNotSet: Signal<boolean>;
+    readonly startDateTime: Signal<Temporal.PlainDateTime | Temporal.PlainDate>;
+    readonly endDateTime: Signal<Temporal.PlainDateTime | Temporal.PlainDate>;
+    readonly startDateAsJSDate: Signal<Date>;
+    readonly endDateAsJSDate: Signal<Date>;
+    readonly startDateTimeAsJSDate: Signal<Date>;
+    readonly endDateTimeAsJSDate: Signal<Date>;
+    readonly getCalendarWeek: Signal<number>;
+    readonly isFullCalenderWeekSelected: Signal<number | boolean>;
+    readonly viewIntervalMessage: Signal<string>;
+    readonly deltaAsTemporalDuration: Signal<Temporal.Duration>;
+    readonly deltaHumanReadable: Signal<string>;
+    readonly getStartTimeString: Signal<string>;
+    readonly getEndTimeString: Signal<string>;
+    readonly getAnchorTimeString: Signal<string>;
+    readonly getAnchorPointAsLocaleDate: Signal<LocalDate>;
+    readonly startDateHtmlString: Signal<string>;
+    readonly endDateHtmlString: Signal<string>;
+    readonly isStartTimeSetAndNotMidnight: Signal<boolean>;
+    readonly isEndTimeSetAndNotMidnight: Signal<boolean>;
+    readonly isFixedAnchorTimeSetAndNotMidnight: Signal<boolean>;
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    setStartDateFromHtmlString(htmlString: string): void;
+    setEndDateFromHtmlString(htmlString: string): void;
+    setupInputInterval(s: Signal<Interval>): void;
+    setupInputAnchorDateTime(s: Signal<Date>): void;
+    setupEventEmitter(e: EventEmitter<Interval>): void;
+    setStartTimeFromString(timeStr: string, formControl?: any): void;
+    setEndTimeFromString(timeStr: string, formControl?: any): void;
+    resetCalendarMode(): void;
+    pullInputInterval(): void;
+    pullInputAnchorDateTime(): void;
+    setDateTimesFromElderInterval(interval: Interval): void;
+    setAnchorDateTimeFromJsDate(dateTime: Date): void;
+    setFixedAnchorPointToStartDateTime(): void;
+    setFixedAnchorPointToEndDateTime(): void;
+    resetFixedAnchorPoint(): void;
+    setAnchorDateFromForm(dateArg: LocalDate): void;
+    clearStartDateTime(): void;
+    clearEndDateTime(): void;
+    clearStartTime(): void;
+    clearEndTime(): void;
+    resetFixedAnchorTime(): void;
+    setAnchorTimeFromForm(htmlString: string): void;
+    emitMainDates(): void;
+    shiftDay(days: number): void;
+    shiftMonth(months: number, staticMode?: boolean): void;
+    shiftYear(years: number, staticMode?: boolean): void;
+    shiftTime(amount: number, unit: 'hours' | 'minutes'): void;
+    smartShift(direction?: number): void;
+    selectLastHour(): void;
+    selectLast24Hours(): void;
+    selectLastFiveMinutes(): void;
+    selectCurrentDay(): void;
+    selectYesterday(): void;
+    selectCurrentWeek(): void;
+    selectPreviousWeek(): void;
+    selectLastSevenDays(): void;
+    selectCurrentMonth(): void;
+    selectPreviousMonth(): void;
+    selectLastThirtyDays(): void;
+    selectCurrentYear(): void;
+    selectPreviousYear(): void;
+    selectLast365Days(): void;
+    selectCurrentQuarter(): void;
+    selectPreviousQuarter(): void;
+    private shiftSelectionToAnchorDate;
+    private shiftSelectionToAnchorTime;
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    private createElderInterval;
+    private setDatesFromRange;
+    private refreshBaseReferenceDateTime;
+    private resetTimeRange;
+    private shiftRangeEndToToday;
+    /***************************************************************************
+     *                                                                         *
+     * Effects                                                                 *
+     *                                                                         *
+     **************************************************************************/
+    private readonly _autoEmitOnDateTimesChangeEffect;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderIntervalPickerService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ElderIntervalPickerService>;
+}
+export {};

package/lib/components/time/elder-time.module.d.ts

@@ -16,7 +16,10 @@ import * as i14 from "./elder-local-time-input/elder-local-time-input.component"
 import * as i15 from "./elder-local-date-input/elder-local-date-input.component";
 import * as i16 from "./duration/elder-duration-input/elder-duration-input.component";
 import * as i17 from "./period/elder-period-input/elder-period-input.component";
-import * as i18 from "./pipes/to-iso-date-string.pipe";
+import * as i18 from "./elder-interval-picker/elder-interval-picker.component";
+import * as i19 from "./elder-interval-picker/elder-interval-picker-toggle/elder-interval-picker-toggle.component";
+import * as i20 from "./elder-interval-picker/elder-interval-picker-binding.directive";
+import * as i21 from "./pipes/to-iso-date-string.pipe";
 export { ElderDateSwitcherComponent } from './elder-date-switcher/elder-date-switcher.component';
 export { ElderIntervalInputComponent } from './elder-interval-input/elder-interval-input.component';
 export { ElderDateTimeInputComponent } from './elder-date-time-input/elder-date-time-input.component';
@@ -24,9 +27,12 @@ export { ElderLocalTimeInputComponent } from './elder-local-time-input/elder-loc
 export { ElderLocalDateInputComponent } from './elder-local-date-input/elder-local-date-input.component';
 export { ElderDurationInputComponent } from './duration/elder-duration-input/elder-duration-input.component';
 export { ElderPeriodInputComponent } from './period/elder-period-input/elder-period-input.component';
+export { ElderIntervalPickerComponent } from './elder-interval-picker/elder-interval-picker.component';
+export { ElderIntervalPickerToggleComponent } from './elder-interval-picker/elder-interval-picker-toggle/elder-interval-picker-toggle.component';
+export { ElderIntervalPickerBindingDirective } from './elder-interval-picker/elder-interval-picker-binding.directive';
 export { ToIsoDateStringPipe } from './pipes/to-iso-date-string.pipe';
 export declare class ElderTimeModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderTimeModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderTimeModule, never, [typeof i1.CommonModule, typeof i2.MatNativeDateModule, typeof i3.FormsModule, typeof i4.MatInputModule, typeof i5.MatDatepickerModule, typeof i6.MatButtonModule, typeof i7.MatIconModule, typeof i8.MatTooltipModule, typeof i9.TranslateModule, typeof i10.ElderFormsDirectivesModule, typeof i11.ElderDateSwitcherComponent, typeof i12.ElderIntervalInputComponent, typeof i13.ElderDateTimeInputComponent, typeof i14.ElderLocalTimeInputComponent, typeof i15.ElderLocalDateInputComponent, typeof i16.ElderDurationInputComponent, typeof i17.ElderPeriodInputComponent, typeof i18.ToIsoDateStringPipe], [typeof i11.ElderDateSwitcherComponent, typeof i13.ElderDateTimeInputComponent, typeof i12.ElderIntervalInputComponent, typeof i14.ElderLocalTimeInputComponent, typeof i15.ElderLocalDateInputComponent, typeof i16.ElderDurationInputComponent, typeof i17.ElderPeriodInputComponent, typeof i18.ToIsoDateStringPipe]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderTimeModule, never, [typeof i1.CommonModule, typeof i2.MatNativeDateModule, typeof i3.FormsModule, typeof i4.MatInputModule, typeof i5.MatDatepickerModule, typeof i6.MatButtonModule, typeof i7.MatIconModule, typeof i8.MatTooltipModule, typeof i9.TranslateModule, typeof i10.ElderFormsDirectivesModule, typeof i11.ElderDateSwitcherComponent, typeof i12.ElderIntervalInputComponent, typeof i13.ElderDateTimeInputComponent, typeof i14.ElderLocalTimeInputComponent, typeof i15.ElderLocalDateInputComponent, typeof i16.ElderDurationInputComponent, typeof i17.ElderPeriodInputComponent, typeof i18.ElderIntervalPickerComponent, typeof i19.ElderIntervalPickerToggleComponent, typeof i20.ElderIntervalPickerBindingDirective, typeof i21.ToIsoDateStringPipe], [typeof i11.ElderDateSwitcherComponent, typeof i13.ElderDateTimeInputComponent, typeof i12.ElderIntervalInputComponent, typeof i14.ElderLocalTimeInputComponent, typeof i15.ElderLocalDateInputComponent, typeof i16.ElderDurationInputComponent, typeof i17.ElderPeriodInputComponent, typeof i18.ElderIntervalPickerComponent, typeof i19.ElderIntervalPickerToggleComponent, typeof i20.ElderIntervalPickerBindingDirective, typeof i21.ToIsoDateStringPipe]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ElderTimeModule>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elderbyte/ngx-starter",
-  "version": "18.8.2",
+  "version": "18.10.0",
   "peerDependencies": {
     "@angular/core": "^17.0.0 || ^18.0.0",
     "@angular/common": "^17.0.0 || ^18.0.0",
@@ -9,7 +9,8 @@
     "rxjs": "^6.5.3 || ^7.5.0",
     "@elderbyte/ts-logger": "^0.1.0",
     "@elderbyte/ngx-simple-webstorage": "^17.0.0 || ^18.0.0",
-    "@js-joda/core": "^5.5.3"
+    "@js-joda/core": "^5.5.3",
+    "@js-temporal/polyfill": "^0.4.4"
   },
   "exports": {
     ".": {

package/src/lib/components/time/elder-interval-picker/elder-interval-picker.component.scss

@@ -0,0 +1,36 @@
+.interval-picker-component {
+  min-width: 840px; // necessary for main comnponent intial overlay sizing somehow
+  max-width: 100%;
+}
+
+.fixed-shifts-container {
+  max-width: 160px;
+}
+
+// Limit the width of the input fields
+.input-control-container {
+  width: 192px;
+  max-width: 100%;
+}
+.input-control-container-short {
+  width: 140px;
+  max-width: 100%;
+}
+
+// prevent text in buttons from wrapping
+.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 {
+  // custom styles for the material calendar to highlight the active anchor date.
+  // We only apply those styles encapsulated insde our component root class "interval-picker-component".
+  border-radius: 50%;
+  background-color: #ddeeff;
+  background-color: rgba(180, 210, 235, 0.75);
+}