@siemens/element-ng 47.3.0 → 47.4.0

package/datepicker/components/si-initial-focus.component.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+import { AfterViewInit } from '@angular/core';
+import { Cell, SiCalendarBodyComponent } from './si-calendar-body.component';
+import * as i0 from "@angular/core";
+/**
+ * Helper directive to set the initial focus to the calendar body cell.
+ */
+export declare class SiInitialFocusComponent implements AfterViewInit {
+    /** The cell which has the mouse hover. */
+    readonly activeHover: import("@angular/core").ModelSignal<Cell | undefined>;
+    /** The date which is displayed as selected. */
+    readonly startDate: import("@angular/core").InputSignal<Date | undefined>;
+    /** The date which is displayed as selected end. The value is only considered with enableRangeSelection. */
+    readonly endDate: import("@angular/core").InputSignal<Date | undefined>;
+    /**
+     * Guard to set the focus during ngAfterViewInit, we just set the focus after we first initialized the view
+     *
+     * @defaultValue true
+     */
+    readonly initialFocus: import("@angular/core").InputSignal<boolean>;
+    /** The minimum selectable date. */
+    readonly minDate: import("@angular/core").InputSignal<Date | undefined>;
+    /** The maximum selectable date. */
+    readonly maxDate: import("@angular/core").InputSignal<Date | undefined>;
+    /**
+     * Optional input to control the minimum month the datepicker can show and the user can navigate.
+     * The `minMonth` can be larger than the `minDate` This option enables the usage of multiple
+     * datepickers next to each other while the more left calendar always
+     * shows an earlier month the more right one.
+     */
+    readonly minMonth: import("@angular/core").InputSignal<Date | undefined>;
+    /**
+     * Optional input to control the maximum month the datepicker can show and the user can navigate.
+     * The `maxMonth` can be smaller than the `maxDate` This option enables the usage of multiple
+     * datepickers next to each other while the more left calendar always
+     * shows an earlier month the more right one.
+     */
+    readonly maxMonth: import("@angular/core").InputSignal<Date | undefined>;
+    /** Aria label for the next button. Needed for a11y. */
+    readonly previousLabel: import("@angular/core").InputSignal<string>;
+    /**  Aria label for the next button. Needed for a11y. */
+    readonly nextLabel: import("@angular/core").InputSignal<string>;
+    /**
+     * Is range selection enabled, when enabled it shows a preview between the startDate and the focused date.
+     *
+     * @defaultValue false
+     */
+    readonly isRangeSelection: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Indicate whether a range preview shall be displayed.
+     * When enabled a preview is visible between startDate and focusedDate.
+     *
+     * @defaultValue true
+     */
+    readonly previewRange: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Emits when a new value is selected. In case where the value is null to
+     * user aborted the selection by Escape.
+     */
+    readonly selectedValueChange: import("@angular/core").OutputEmitterRef<Date | null>;
+    /** The body of calendar table */
+    protected readonly calendarBody: import("@angular/core").Signal<SiCalendarBodyComponent>;
+    ngAfterViewInit(): void;
+    /**
+     * Focus calendar cell which is marked as active cell.
+     */
+    focusActiveCell(): void;
+    protected onActiveHoverChange(event?: Cell): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiInitialFocusComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiInitialFocusComponent, "ng-component", never, { "activeHover": { "alias": "activeHover"; "required": false; "isSignal": true; }; "startDate": { "alias": "startDate"; "required": false; "isSignal": true; }; "endDate": { "alias": "endDate"; "required": false; "isSignal": true; }; "initialFocus": { "alias": "initialFocus"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "minMonth": { "alias": "minMonth"; "required": false; "isSignal": true; }; "maxMonth": { "alias": "maxMonth"; "required": false; "isSignal": true; }; "previousLabel": { "alias": "previousLabel"; "required": true; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": true; "isSignal": true; }; "isRangeSelection": { "alias": "isRangeSelection"; "required": false; "isSignal": true; }; "previewRange": { "alias": "previewRange"; "required": false; "isSignal": true; }; }, { "activeHover": "activeHoverChange"; "selectedValueChange": "selectedValueChange"; }, never, never, true, never>;
+}

package/datepicker/components/si-month-selection.component.d.ts

@@ -0,0 +1,62 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import { Cell } from './si-calendar-body.component';
+import { MonthCompareAdapter } from './si-compare-adapter';
+import { SiInitialFocusComponent } from './si-initial-focus.component';
+import * as i0 from "@angular/core";
+/**
+ * Show months of a single year as table and handles the keyboard interactions.
+ * The focus and focusedDate is handled according the keyboard interactions.
+ */
+export declare class SiMonthSelectionComponent extends SiInitialFocusComponent implements OnChanges {
+    /**
+     * The translated list of months.
+     *
+     * @defaultValue []
+     */
+    readonly months: import("@angular/core").InputSignal<string[]>;
+    /**
+     * The active date, the cell which will receive the focus.
+     */
+    readonly focusedDate: import("@angular/core").ModelSignal<Date>;
+    /** Emits when the active focused date is changed to another month / year, typically during keyboard navigation. */
+    readonly activeMonthChange: import("@angular/core").OutputEmitterRef<Date>;
+    /** Emits when the user requests a different to show a different view. */
+    readonly viewChange: import("@angular/core").OutputEmitterRef<"year">;
+    /** Listen Escape event to switch view back */
+    triggerEsc(event: KeyboardEvent): void;
+    /**
+     * The current visible list of calendar months.
+     * Every time the focusedDate changes to another year the list will update.
+     */
+    protected monthCells: Cell[][];
+    protected compareAdapter: MonthCompareAdapter;
+    /** Number of column before the row is wrapped */
+    private readonly columnCount;
+    /**
+     * Indicate the previous button shall be disabled.
+     * This happens when the focusedDate is equal or before the minDate.
+     */
+    protected readonly isPreviousButtonDisabled: import("@angular/core").Signal<boolean | undefined>;
+    /**
+     * Indicate the next button shall be disabled.
+     * This happens when the focusedDate is equal or after the maxDate.
+     */
+    protected readonly isNextButtonDisabled: import("@angular/core").Signal<boolean | undefined>;
+    ngOnChanges(changes: SimpleChanges): void;
+    protected calendarBodyKeyDown(event: KeyboardEvent): void;
+    protected updateFocusedDate(offset: number): void;
+    /**
+     * Add offset to year and update focusedDate.
+     */
+    protected setYearOffset(offset: number): void;
+    protected emitSelectedValue(selected: Date): void;
+    protected emitFocusedDate(focused: Date): void;
+    protected emitActiveMonthChange(focus: Date, prevFocus: Date): void;
+    protected emitViewChange(): void;
+    /**
+     * Initialize view based on the focusedDate.
+     */
+    private initView;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiMonthSelectionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiMonthSelectionComponent, "si-month-selection", never, { "months": { "alias": "months"; "required": false; "isSignal": true; }; "focusedDate": { "alias": "focusedDate"; "required": true; "isSignal": true; }; }, { "focusedDate": "focusedDateChange"; "activeMonthChange": "activeMonthChange"; "viewChange": "viewChange"; }, never, never, true, never>;
+}

package/datepicker/components/si-year-selection.component.d.ts

@@ -0,0 +1,65 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import { Cell } from './si-calendar-body.component';
+import { YearCompareAdapter } from './si-compare-adapter';
+import { SiInitialFocusComponent } from './si-initial-focus.component';
+import * as i0 from "@angular/core";
+/**
+ * Show months of a single year as table and handles the keyboard interactions.
+ * The focus and focusedDate is handled according the keyboard interactions.
+ */
+export declare class SiYearSelectionComponent extends SiInitialFocusComponent implements OnChanges {
+    /**
+     * The active date, the cell which will receive the focus.
+     */
+    readonly focusedDate: import("@angular/core").ModelSignal<Date>;
+    /** Emits when the active focused date changed to another month / year, typically during keyboard navigation. */
+    readonly yearRangeChange: import("@angular/core").OutputEmitterRef<Date[]>;
+    /** Listen Escape event to switch view back */
+    triggerEsc(event: KeyboardEvent): void;
+    /** Number of column before the row is wrapped */
+    private readonly columnCount;
+    /** The number of years which shall be displayed, this number should be even and dividable by columnCount */
+    private readonly yearsToDisplay;
+    /** Lower windows bound for displayed year range */
+    protected readonly fromYear: import("@angular/core").WritableSignal<Date | undefined>;
+    /** Upper windows bound for displayed year range */
+    protected readonly toYear: import("@angular/core").WritableSignal<Date | undefined>;
+    /**
+     * The current visible list of calendar years.
+     * Every time the focusedDate changes to another year the list will be rebuilt.
+     */
+    protected yearCells: Cell[][];
+    protected compareAdapter: YearCompareAdapter;
+    /** Is previous button disabled based on the minDate. */
+    protected readonly isPreviousButtonDisabled: import("@angular/core").Signal<boolean>;
+    /** Is next button  disabled  based on the maxDate */
+    protected readonly isNextButtonDisabled: import("@angular/core").Signal<boolean>;
+    ngOnChanges(changes: SimpleChanges): void;
+    protected calendarBodyKeyDown(event: KeyboardEvent): void;
+    /**
+     * Change the active date and the range of displayed years.
+     * The windowOffset control the amount of ranges the view shall move forward or backward.
+     * The number of displayed years ia controlled by yearsToDisplay.
+     */
+    protected changeVisibleYearRange(windowOffset: number): void;
+    protected emitSelectedValue(selected: Date): void;
+    /**
+     * Determine the year range start and end year.
+     * - Based on the active date this function will find the start and
+     * ending year of the current displayed range.
+     * - In case the focusedDate is either before or after the current range the
+     * start and end year will move the entire window (yearsToDisplay)
+     */
+    private initYearRange;
+    /**
+     * Initialize view based on the focusedDate.
+     */
+    private initView;
+    /**
+     * Add offset to year and update focusedDate.
+     * If the new year is outside min/max date the year will set to the closest year in range.
+     */
+    private setYearOffset;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiYearSelectionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiYearSelectionComponent, "si-year-selection", never, { "focusedDate": { "alias": "focusedDate"; "required": true; "isSignal": true; }; }, { "focusedDate": "focusedDateChange"; "yearRangeChange": "yearRangeChange"; }, never, never, true, never>;
+}

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>;
+}