@siemens/element-ng 47.2.0 → 47.4.0

package/datepicker/date-time-helper.d.ts

@@ -0,0 +1,302 @@
+import { WeekStart } from './si-datepicker.model';
+export interface DayOfWeek {
+    id: string;
+    index: number;
+    offset: number;
+    isWeekend: boolean;
+}
+export declare const WEEK_START_OFFSET: {
+    monday: number;
+    saturday: number;
+    sunday: number;
+};
+export declare const getDaysOfWeek: (weekStart: WeekStart) => DayOfWeek[];
+/**
+ * Get local specific months using DateTimeFormat.
+ * @param locale - current locale
+ */
+export declare const getLocaleMonthNames: (locale: string) => string[];
+/**
+ * Get local specific weekdays as string using DateTimeFormat.
+ * @param locale - current local
+ * @param weekStart - start of the week
+ * @param format - display format
+ * @returns array of week days.
+ */
+export declare const getDayStrings: (locale: string, weekStart?: WeekStart, format?: "narrow" | "short" | "long") => string[];
+/**
+ * Gets the first day in the specified month.
+ * Expects the month as a value between 1 and 12.
+ * The year is required to handle leap years.
+ *
+ * @returns The first day of the month as a Date.
+ */
+export declare const getFirstDayInMonth: (year: number, month: number) => Date;
+/**
+ * Gets the week number of the specified date.
+ * Week number according to the ISO-8601 standard, weeks starting on Monday.
+ * The first week of a year is the week that contains the first Thursday of the year (='First 4-day week').
+ * The highest week number in a year is either 52 or 53.
+ *
+ * @param date -The JavaScript date object.
+ * @param weekStart -Name of the first day of the week
+ * @returns The number of the Week
+ */
+export declare const getWeekOfYear: (date: Date, weekStart: WeekStart) => number;
+export declare const getWeekDayOffset: (date: Date, weekStart: WeekStart) => number;
+/** returns the date string in format YYYY-MM-DD for given date */
+export declare const getStringforDate: (date: Date) => string;
+/**
+ * Creates a new date object on from a date with or without time.
+ * @param value - The date from with the year, month and day is taken.
+ * @param hours - Optional numeric value of the hours, otherwise 0.
+ * @param minutes - Optional numeric value of the minutes, otherwise 0.
+ * @param seconds - Optional numeric value of the seconds, otherwise 0.
+ * @param milliseconds - Optional numeric value of the milliseconds, otherwise 0.
+ * @returns
+ */
+export declare const createDate: (value: Date, hours?: number, minutes?: number, seconds?: number, milliseconds?: number) => Date;
+/**
+ * @param input - String containing a date or dateTime value (Ex. "05/15/2020"
+ * @param format - Format of the input value (Ex. "M/d/YYYY")
+ * @param locale - Locale of the input value
+ * @returns A JS Date in accordance of the three parameters
+ */
+export declare const parseDate: (input: string, format: string, locale: string) => Date | undefined;
+export declare const getNamedFormat: (locale: string, format: string) => string;
+export declare const getDateWithoutTime: (date: Date) => Date;
+/**
+ * Get today
+ * @returns date of today
+ */
+export declare const today: () => Date;
+/**
+ * Calculate a new date based on the offset while considering the min and max date.
+ * @param current - input date.
+ * @param daysOffset - numeric offset of days.
+ * @returns new date if the range is valid or original date
+ */
+export declare const addDaysInRange: (current: Date, daysOffset: number, minDate?: Date, maxDate?: Date) => Date;
+/**
+ * Get date delta based on the offset.
+ * @param date - source date object.
+ * @param days - numeric offset of days.
+ * @returns new date.
+ */
+export declare const addDays: (date: Date, days: number) => Date;
+/**
+ * Update date/day of give date without changing the month.
+ * In case the day exceed the number of days in the current month the last day in month will be assigned.
+ * @param date - the date object to update the day.
+ * @param day - the day which shall be set.
+ * @returns the updated date object.
+ */
+export declare const changeDay: (date: Date, day: number) => Date;
+/**
+ * Get date delta specifically for months based on the offset.
+ * @param current - starting date.
+ * @param monthsOffset - numeric offset of months.
+ * @param minDate - optional minimum allowed date.
+ * @param maxDate - optional maximum allowed date.
+ * @returns a new date object with the updated month.
+ */
+export declare const addMonthsInRange: (current: Date, monthsOffset: number, minDate?: Date, maxDate?: Date) => Date;
+/**
+ * Get date delta specifically for years based on the offset.
+ * @param current - starting date.
+ * @param yearsOffset - numeric offset of years.
+ * @param minDate - optional minimum allowed date.
+ * @param maxDate - optional maximum allowed date.
+ * @returns a new date object with the updated year.
+ */
+export declare const addYearsInRange: (current: Date, yearsOffset: number, minDate?: Date, maxDate?: Date) => Date;
+/**
+ * Get number of days for the given month and year.
+ * @param month - month as number (0..11).
+ * @param year - year as number.
+ * @returns the number of days for the given month.
+ */
+export declare const daysInMonth: (month: number, year: number) => number;
+/**
+ * Get the first date of the week based on the input date.
+ * @param current - a date object from where the last date of a week is derived.
+ * @param weekStartDay - optional when a week shall start.
+ * @returns a new date object which is the start of the current week.
+ */
+export declare const getWeekStartDate: (current: Date, weekStartDay?: WeekStart) => Date;
+/**
+ * Get the last date of the week based on the input date.
+ * @param current - a date object from where the last date of a week is derived.
+ * @param weekStartDay - optional when a week shall start.
+ * @returns the last date within the week.
+ */
+export declare const getWeekEndDate: (current: Date, weekStartDay?: WeekStart) => Date;
+/**
+ * Get the beginning of the month.
+ * @param current - a date object from where the first date in a month is derived.
+ * @returns a new date object which starts a the first.
+ */
+export declare const getFirstDateInMonth: (current: Date) => Date;
+/**
+ * Get the last date of the month.
+ * @param current - a date object from where we derive the last date in a month.
+ * @returns a new date object which is the last day in the current month.
+ */
+export declare const getLastDateInMonth: (current: Date) => Date;
+/**
+ * Get the beginning of the year.
+ * @param current - a date object from where the first date in a year is derived.
+ * @returns a new date object which starts a the first.
+ */
+export declare const getFirstDateInYear: (current: Date) => Date;
+/**
+ * Are the two dates identical without considering time.
+ */
+export declare const isSameDate: (current: Date, compareTo?: Date) => boolean;
+/**
+ * Are the two months identical without considering time.
+ */
+export declare const isSameMonth: (current: Date, compareTo?: Date) => boolean;
+/**
+ * Are the two years identical.
+ */
+export declare const isSameYear: (current: Date, compareTo?: Date) => boolean;
+/**
+ * Compares two dates.
+ * @param first - The first date to compare.
+ * @param second - The second date to compare.
+ * @returns 0 if the dates are equal, a number less than 0 if the first date is earlier,
+ * a number greater than 0 if the first date is later.
+ */
+export declare const compareDate: (first: Date, second: Date) => number;
+/**
+ * Compares two months.
+ * @param first - The first month to compare.
+ * @param second - The second month to compare.
+ * @returns 0 if the months are equal, a number less than 0 if the first month is earlier,
+ * a number greater than 0 if the first month is later.
+ */
+export declare const compareMonth: (first: Date, second: Date) => number;
+/**
+ * Compares two years.
+ * @param first - The first year to compare.
+ * @param second - The second year to compare.
+ * @returns 0 if the years are equal, a number less than 0 if the first year is earlier,
+ * a number greater than 0 if the first year is later.
+ */
+export declare const compareYear: (first: Date, second: Date) => number;
+/**
+ * Compare the current date is the same date or between start and end date.
+ * @param current - the date object.
+ * @param from - optional min date, if no value is provided we assume true for the min value.
+ * @param to - optional max date, if no value is provided we assume true for the max value.
+ * @returns true if the date is in the provided range.
+ */
+export declare const isSameOrBetween: (current: Date, from?: Date, to?: Date) => boolean;
+/**
+ * Compare the current month is the same month or between start and end month.
+ * @param current - the month object.
+ * @param from - optional min month, if no value is provided we assume true for the min value.
+ * @param to - optional max month, if no value is provided we assume true for the max value.
+ * @returns true if the date is in the provided range.
+ */
+export declare const isSameOrBetweenMonth: (current: Date, from?: Date, to?: Date) => boolean;
+/**
+ * Compare the current year is the same year or between start and end year.
+ * @param current - the year object.
+ * @param from - optional min year, if no value is provided we assume true for the min value.
+ * @param to - optional max year, if no value is provided we assume true for the max value.
+ * @returns true if the date is in the provided range.
+ */
+export declare const isSameOrBetweenYears: (current: Date, from?: Date, to?: Date) => boolean;
+/**
+ * Compare the current date is between start and end date.
+ * from \< current \< to
+ */
+export declare const isBetween: (current: Date, from?: Date, to?: Date) => boolean;
+/**
+ * Compare the current month is between start and end month.
+ * from \< current \< to
+ */
+export declare const isBetweenMonth: (current: Date, from?: Date, to?: Date) => boolean;
+/**
+ * Compare the current year is between start and end year.
+ * from \< current \< to
+ */
+export declare const isBetweenYears: (current: Date, from?: Date, to?: Date) => boolean;
+/**
+ * Is first date after the second date (without considering the time).
+ * current \> compareTo
+ */
+export declare const isAfter: (current: Date, compareTo: Date) => boolean;
+/**
+ * Is first month after the second month (without considering the time).
+ * current \> compareTo
+ */
+export declare const isAfterMonth: (current: Date, compareTo: Date) => boolean;
+/**
+ * Is first year after the second year.
+ * current \> compareTo
+ */
+export declare const isAfterYear: (current: Date, compareTo: Date) => boolean;
+/**
+ * Is first date equal or before the second date (without considering the time).
+ * current \>= compareTo
+ */
+export declare const isSameOrBefore: (current: Date, compareTo: Date) => boolean;
+/**
+ * Is first month equal or before the second month.
+ * current \>= compareTo
+ */
+export declare const isSameOrBeforeMonth: (current: Date, compareTo: Date) => boolean;
+/**
+ * Is first year equal or before the second year.
+ * current \>= compareTo
+ */
+export declare const isSameOrBeforeYear: (current: Date, compareTo: Date) => boolean;
+/**
+ * Are the two dates in different months.
+ */
+export declare const isAnotherMonth: (current: Date, compareTo: Date) => boolean;
+/**
+ * Are the two dates in different years.
+ */
+export declare const isAnotherYear: (current: Date, compareTo: Date) => boolean;
+/**
+ * Are the two dates either in different months or years.
+ */
+export declare const isAnotherMonthOrYear: (current: Date, compareTo: Date) => boolean;
+/**
+ * Get a date which is in within the range and the close to current.
+ */
+export declare const getDateSameOrBetween: (current: Date, minDate?: Date, maxDate?: Date) => Date;
+/**
+ * Get date or absolute min date.
+ * @param date - input date.
+ * @returns date or date of 1.1.1900
+ */
+export declare const getMinDate: (date?: Date) => Date;
+/**
+ * Get date or absolute max date.
+ * @param date - input date.
+ * @returns date or date of 31.12.2154
+ */
+export declare const getMaxDate: (date?: Date) => Date;
+/**
+ * Is valid date object.
+ */
+export declare const isValid: (date?: Date) => date is NonNullable<Date>;
+/**
+ * Returns the next months of the given date.
+ * @param date - The date for which the next month is returned.
+ * @returns A date of the first day of the following month of the given day.
+ */
+export declare const nextMonth: (date: Date) => Date;
+/**
+ * Returns the last day of the previous month of the given date object.
+ * @param date - The date for which the previous month is returned.
+ * @returns A date of the last day of the previous month of the given day.
+ */
+export declare const previousMonth: (date: Date) => Date;
+export declare const minDate: (first?: Date, second?: Date) => Date | undefined;
+export declare const maxDate: (first?: Date, second?: Date) => Date | undefined;

package/datepicker/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+export * from './si-datepicker.model';
+export * from './si-date-input.directive';
+export * from './si-datepicker.directive';
+export * from './si-datepicker.component';
+export * from './si-datepicker-overlay.directive';
+export * from './si-timepicker.component';
+export * from './si-date-range.component';
+export * from './si-datepicker-overlay.component';
+export * from './si-calendar-button.component';
+export * from './si-datepicker.module';
+export * from './date-time-helper';

package/datepicker/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../fesm2022/siemens-element-ng-datepicker.mjs"
+}

package/datepicker/si-calendar-button.component.d.ts

@@ -0,0 +1,49 @@
+import { AfterContentInit, DoCheck, ElementRef, OnInit } from '@angular/core';
+import { NgControl } from '@angular/forms';
+import { SiDatepickerOverlayDirective } from './si-datepicker-overlay.directive';
+import { SiDatepickerDirective } from './si-datepicker.directive';
+import * as i0 from "@angular/core";
+/**
+ * Calendar toggle button used in combination with a datepicker directive.
+ *
+ * @example
+ * ```
+ * <si-calendar-button class="w-100">
+ *   <input
+ *     class="form-control"
+ *     type="text"
+ *     siDatepicker
+ *     [siDatepickerConfig]="config"
+ *   />
+ * </si-calendar-button>
+ * ```
+ */
+export declare class SiCalendarButtonComponent implements OnInit, AfterContentInit, DoCheck {
+    /**
+     * Aria label for the calendar toggle button.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATEPICKER.CALENDAR_TOGGLE_BUTTON:Open calendar`
+     * ```
+     */
+    readonly ariaLabel: import("@angular/core").InputSignal<import("@siemens/element-translate-ng/translate").TranslatableString>;
+    protected readonly button: import("@angular/core").Signal<ElementRef<HTMLButtonElement>>;
+    /** Datepicker input directive instance used to watch for state changes and required to open the calendar. */
+    protected readonly datepicker: import("@angular/core").Signal<SiDatepickerDirective>;
+    protected readonly datepickerOverlay: import("@angular/core").Signal<SiDatepickerOverlayDirective>;
+    protected readonly ngControl: import("@angular/core").Signal<NgControl | undefined>;
+    protected readonly disabled: import("@angular/core").WritableSignal<boolean>;
+    protected readonly icons: Record<"elementCalendar", string>;
+    private readonly destroyerRef;
+    private readonly focusMonitor;
+    private readonly elementRef;
+    private readonly showValidationMessages;
+    ngOnInit(): void;
+    ngDoCheck(): void;
+    ngAfterContentInit(): void;
+    protected show(): void;
+    private updateState;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiCalendarButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiCalendarButtonComponent, "si-calendar-button", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, ["datepicker", "datepickerOverlay", "ngControl"], ["*"], true, never>;
+}

package/datepicker/si-date-input.directive.d.ts

@@ -0,0 +1,114 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
+import { SiFormItemControl } from '@siemens/element-ng/form';
+import { DatepickerInputConfig } from './si-datepicker.model';
+import * as i0 from "@angular/core";
+/**
+ * Base directive for date input fields.
+ */
+export declare class SiDateInputDirective implements ControlValueAccessor, OnChanges, Validator, SiFormItemControl {
+    private static idCounter;
+    /**
+     * @defaultValue
+     * ```
+     * `si-date-input-${SiDateInputDirective.idCounter++}`
+     * ```
+     */
+    readonly id: import("@angular/core").InputSignal<string>;
+    /**
+     * Configuration object for the datepicker.
+     *
+     * @defaultValue
+     * ```
+     * {}
+     * ```
+     */
+    readonly siDatepickerConfig: import("@angular/core").ModelSignal<DatepickerInputConfig | undefined>;
+    /**
+     * @deprecated Property has no effect and will be removed without a replacement.
+     *
+     * @defaultValue 200
+     */
+    readonly dateInputDebounceTime: import("@angular/core").InputSignal<number>;
+    /**
+     * Emits an event to notify about disabling the time from the datepicker.
+     * When time is disable, we construct a pure date object in UTC 00:00:00 time.
+     */
+    readonly siDatepickerDisabledTime: import("@angular/core").OutputEmitterRef<boolean>;
+    /**
+     * Emits an event on state changes e.g. readonly, disable, ... .
+     */
+    readonly stateChange: import("@angular/core").OutputEmitterRef<void>;
+    /**
+     * Whether the date range input is disabled.
+     * @defaultValue false
+     */
+    readonly disabledInput: import("@angular/core").InputSignal<boolean>;
+    /**
+     * Whether the date range input is readonly.
+     * @defaultValue false
+     */
+    readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Overrides the value of aria-describedby
+     *
+     * @defaultValue
+     * ```
+     * `${this.id()}-errormessage`
+     * ```
+     */
+    readonly errormessageId: import("@angular/core").InputSignal<string>;
+    /** @internal */
+    validatorOnChange: () => void;
+    /**
+     * Date form input validator function, validating text format, min and max value.
+     */
+    protected validator: import("@angular/forms").ValidatorFn;
+    protected date?: Date;
+    /**
+     * Emits a new `date` value on input field value changes.
+     */
+    protected readonly dateChange: import("@angular/core").OutputEmitterRef<Date | undefined>;
+    /** @internal */
+    readonly disabled: import("@angular/core").Signal<boolean>;
+    protected onTouched: () => void;
+    protected onModelChange: (value: any) => void;
+    protected readonly dateString: import("@angular/core").WritableSignal<string>;
+    private readonly disabledNgControl;
+    protected readonly locale: string;
+    private format;
+    ngOnChanges(changes: SimpleChanges): void;
+    validate(c: AbstractControl): ValidationErrors | null;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: () => void): void;
+    registerOnValidatorChange(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    writeValue(value?: Date | string): void;
+    private updateNativeValue;
+    /**
+     * Handles `input` events on the input element.
+     * @param value - current input value.
+     */
+    protected onInput(value: string): void;
+    protected onBlur(event: FocusEvent): void;
+    private getFormat;
+    /**
+     * Callback when the datepicker changes his value.
+     * @param date - updated date
+     */
+    protected onDateChanged(date?: Date): void;
+    /**
+     * Datepicker consider time / ignore time changed.
+     * @param disabledTime - disable time
+     * @internal
+     */
+    onDisabledTime(disabledTime: boolean): void;
+    /** The form control validator for date format */
+    private formatValidator;
+    /** The form control validator for the min date. */
+    private minValidator;
+    /** The form control validator for the min date. */
+    private maxValidator;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiDateInputDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SiDateInputDirective, "[siDateInput]", ["siDateInput"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "siDatepickerConfig": { "alias": "siDatepickerConfig"; "required": false; "isSignal": true; }; "dateInputDebounceTime": { "alias": "dateInputDebounceTime"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "errormessageId": { "alias": "errormessageId"; "required": false; "isSignal": true; }; }, { "siDatepickerConfig": "siDatepickerConfigChange"; "siDatepickerDisabledTime": "siDatepickerDisabledTime"; "stateChange": "stateChange"; "dateChange": "dateChange"; }, never, never, true, never>;
+}

package/datepicker/si-date-range.component.d.ts

@@ -0,0 +1,150 @@
+import { AfterViewInit, OnChanges, SimpleChanges } from '@angular/core';
+import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
+import { SiFormItemControl } from '@siemens/element-ng/form';
+import { TranslatableString } from '@siemens/element-translate-ng/translate';
+import { DatepickerInputConfig, DateRange } from './si-datepicker.model';
+import * as i0 from "@angular/core";
+import * as i1 from "./si-datepicker-overlay.directive";
+export declare class SiDateRangeComponent implements ControlValueAccessor, Validator, AfterViewInit, OnChanges, SiFormItemControl {
+    private static idCounter;
+    private readonly inputDirectives;
+    private readonly startInput;
+    private readonly endInput;
+    private readonly button;
+    /**
+     * @defaultValue
+     * ```
+     * `__si-date-range-${SiDateRangeComponent.idCounter++}`
+     * ```
+     */
+    readonly id: import("@angular/core").InputSignal<string>;
+    readonly labelledby: string;
+    /**
+     * Date range component configuration.
+     *
+     * @defaultValue
+     * ```
+     * { enableDateRange: true }
+     * ```
+     */
+    readonly siDatepickerConfig: import("@angular/core").ModelSignal<DatepickerInputConfig>;
+    /**
+     * Placeholder of the start date input.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATEPICKER.START_DATE_PLACEHOLDER:Start date`
+     * ```
+     */
+    readonly startDatePlaceholder: import("@angular/core").InputSignal<TranslatableString>;
+    /**
+     * Placeholder of the end date input.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATEPICKER.END_DATE_PLACEHOLDER:End date`
+     * ```
+     */
+    readonly endDatePlaceholder: import("@angular/core").InputSignal<TranslatableString>;
+    /**
+     * Aria label of the date-range calendar toggle button.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATEPICKER.CALENDAR_TOGGLE_BUTTON:Open calendar`
+     * ```
+     */
+    readonly ariaLabelCalendarButton: import("@angular/core").InputSignal<TranslatableString>;
+    /**
+     * Form label of the start timepicker.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATEPICKER.START_TIME_LABEL:from`
+     * ```
+     */
+    readonly startTimeLabel: import("@angular/core").InputSignal<TranslatableString>;
+    /**
+     * Form label of the start timepicker.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATEPICKER.END_TIME_LABEL:to`
+     * ```
+     */
+    readonly endTimeLabel: import("@angular/core").InputSignal<TranslatableString>;
+    /**
+     * @deprecated Property has no effect and will be removed without a replacement.
+     *
+     * @defaultValue 200
+     */
+    readonly debounceTime: import("@angular/core").InputSignal<number>;
+    /**
+     * Automatically close overlay on date selection.
+     *
+     * @defaultValue false
+     */
+    readonly autoClose: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Emits on the date range value changes. */
+    readonly siDatepickerRangeChange: import("@angular/core").OutputEmitterRef<DateRange | undefined>;
+    /**
+     * Emits an event to notify about disabling the time from the range picker.
+     * When time is disable, we construct a pure date objects in UTC 00:00:00 time.
+     */
+    readonly disabledTimeChange: import("@angular/core").OutputEmitterRef<boolean>;
+    /**
+     * Whether the date range input is disabled.
+     *
+     * @defaultValue false
+     */
+    readonly disabledInput: import("@angular/core").InputSignal<boolean>;
+    /**
+     * Whether the date range input is readonly.
+     *
+     * @defaultValue false
+     */
+    readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Set the date-range object displayed in the control.
+     * The input can be used if the control is used outside Angular forms.
+     */
+    readonly value: import("@angular/core").ModelSignal<DateRange | undefined>;
+    /** @internal */
+    readonly errormessageId: string;
+    private validator;
+    private onChange;
+    private onTouch;
+    protected readonly icons: Record<"elementCalendar", string>;
+    protected readonly disabled: import("@angular/core").Signal<boolean>;
+    private readonly disabledNgControl;
+    private readonly cdRef;
+    private readonly overlayToggle;
+    private readonly elementRef;
+    private readonly defaultPlacement;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    writeValue(dateRange: DateRange): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    validate(c: AbstractControl): ValidationErrors | null;
+    /**
+     * Focus out shall close the datepicker except we are moving the focus to the datepicker or one of the input elements.
+     * @param event - focus out event with the related target
+     */
+    protected onFocusOut(event: FocusEvent): void;
+    /** Forward date range input changes to datepicker overlay */
+    protected onInputChanged(dateRange: DateRange): void;
+    protected show(): void;
+    private subscribeRangeChanges;
+    private onRangeChanged;
+    /** Run validators on the start/end inputs. */
+    private validateChildren;
+    /** The form control validator for the end date is greater equal start date. */
+    private endAfterStartValidator;
+    private readonly childValidation;
+    private readErrorsFromInnerControl;
+    private updateValue;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiDateRangeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiDateRangeComponent, "si-date-range", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "siDatepickerConfig": { "alias": "siDatepickerConfig"; "required": false; "isSignal": true; }; "startDatePlaceholder": { "alias": "startDatePlaceholder"; "required": false; "isSignal": true; }; "endDatePlaceholder": { "alias": "endDatePlaceholder"; "required": false; "isSignal": true; }; "ariaLabelCalendarButton": { "alias": "ariaLabelCalendarButton"; "required": false; "isSignal": true; }; "startTimeLabel": { "alias": "startTimeLabel"; "required": false; "isSignal": true; }; "endTimeLabel": { "alias": "endTimeLabel"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; "autoClose": { "alias": "autoClose"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "siDatepickerConfig": "siDatepickerConfigChange"; "siDatepickerRangeChange": "siDatepickerRangeChange"; "disabledTimeChange": "disabledTimeChange"; "value": "valueChange"; }, never, never, true, [{ directive: typeof i1.SiDatepickerOverlayDirective; inputs: {}; outputs: { "siDatepickerClose": "siDatepickerClose"; }; }]>;
+}