@siemens/element-ng 47.3.0 → 47.4.0

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

package/datepicker/si-datepicker-overlay.component.d.ts

@@ -0,0 +1,82 @@
+import { AfterViewInit, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { Cell } from './components/si-calendar-body.component';
+import { SiDatepickerComponent } from './si-datepicker.component';
+import { DatepickerConfig, DateRange } from './si-datepicker.model';
+import * as i0 from "@angular/core";
+export declare class SiDatepickerOverlayComponent implements OnChanges, OnInit, AfterViewInit, OnDestroy {
+    protected readonly minMonth: import("@angular/core").WritableSignal<Date | undefined>;
+    protected readonly maxMonth: import("@angular/core").WritableSignal<Date | undefined>;
+    protected readonly datepicker: import("@angular/core").Signal<SiDatepickerComponent>;
+    /**
+     * {@inheritDoc SiDatepickerComponent#initialFocus}
+     * @defaultValue false
+     */
+    readonly initialFocus: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * {@inheritDoc SiDatepickerComponent#config}
+     * @defaultValue
+     * ```
+     * {}
+     * ```
+     */
+    readonly config: import("@angular/core").InputSignal<DatepickerConfig>;
+    /**
+     * {@inheritDoc SiDatepickerComponent#date}
+     */
+    readonly date: import("@angular/core").ModelSignal<Date | undefined>;
+    /**
+     * {@inheritDoc SiDatepickerComponent#dateRange}
+     */
+    readonly dateRange: import("@angular/core").ModelSignal<DateRange | undefined>;
+    /**
+     * {@inheritDoc SiDatepickerComponent#rangeType}
+     */
+    readonly rangeType: import("@angular/core").ModelSignal<"START" | "END" | undefined>;
+    /**
+     * {@inheritDoc SiDatepickerComponent#time12h}
+     * @defaultValue false
+     */
+    readonly time12h: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * 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 disabledTimeChange: import("@angular/core").OutputEmitterRef<boolean>;
+    /**
+     * @deprecated Property provides internal information that should not be used.
+     *
+     * @defaultValue false
+     */
+    isFocused: boolean;
+    private readonly document;
+    private readonly elementRef;
+    private readonly focusMonitor;
+    private readonly focusTrapFactory;
+    private focusTrap;
+    private previousActiveElement?;
+    protected disableTime: boolean;
+    protected activeHover?: Cell;
+    protected readonly isTwoMonthDateRange: import("@angular/core").Signal<boolean>;
+    protected readonly firstDatepickerConfig: import("@angular/core").WritableSignal<DatepickerConfig>;
+    protected readonly secondDatepickerConfig: import("@angular/core").WritableSignal<DatepickerConfig>;
+    /**
+     * Indicate that the overlay is opened in small screen.
+     * A modal dialog animation display when true and a wrapped two month calendar layout is displayed.
+     *
+     * @defaultValue false
+     */
+    readonly isMobile: import("@angular/core").InputSignal<boolean>;
+    protected readonly completeAnimation: import("@angular/core").WritableSignal<boolean>;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Focus active cell in the current datepicker view.
+     */
+    focusActiveCell(): void;
+    protected firstDatepickerFocusDateChange(newFocusedDate?: Date): void;
+    protected secondDatepickerFocusDateChange(newFocusedDate?: Date): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiDatepickerOverlayComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiDatepickerOverlayComponent, "si-datepicker-overlay", never, { "initialFocus": { "alias": "initialFocus"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; "date": { "alias": "date"; "required": false; "isSignal": true; }; "dateRange": { "alias": "dateRange"; "required": false; "isSignal": true; }; "rangeType": { "alias": "rangeType"; "required": false; "isSignal": true; }; "time12h": { "alias": "time12h"; "required": false; "isSignal": true; }; "isMobile": { "alias": "isMobile"; "required": false; "isSignal": true; }; }, { "date": "dateChange"; "dateRange": "dateRangeChange"; "rangeType": "rangeTypeChange"; "disabledTimeChange": "disabledTimeChange"; }, never, never, true, never>;
+}

package/datepicker/si-datepicker-overlay.directive.d.ts

@@ -0,0 +1,104 @@
+import { ConnectionPositionPair } from '@angular/cdk/overlay';
+import { ComponentRef, OnDestroy } from '@angular/core';
+import { SiDatepickerOverlayComponent } from './si-datepicker-overlay.component';
+import { DatepickerConfig, DateRange } from './si-datepicker.model';
+import * as i0 from "@angular/core";
+export declare enum CloseCause {
+    Backdrop = "backdrop",
+    Detach = "detach",
+    Escape = "escape",
+    Select = "select"
+}
+export type DatepickerInput = {
+    config: DatepickerConfig;
+    date: Date;
+    dateRange: DateRange;
+    rangeType: 'START' | 'END';
+    time12h: boolean;
+    showTime: true;
+};
+/** Partial datepicker inputs */
+export type DatepickerInputPartial = Partial<DatepickerInput>;
+/**
+ * Directive with the responsibility to open/close datepicker overlay.
+ */
+export declare class SiDatepickerOverlayDirective implements OnDestroy {
+    /**
+     * Position of the datepicker overlay. Accepts an array of positions or a single position.
+     * The position will be chosen based on the first position that fits into the viewport.
+     * The input is necessary since the positions between the siDatepicker directive and si-date-range
+     * component are different.
+     * @internal
+     */
+    readonly placement: import("@angular/core").WritableSignal<"auto" | "top" | "start" | "end" | "bottom" | ConnectionPositionPair[]>;
+    /**
+     * Output event on closing datepicker e.g. by clicking backdrop or escape key.
+     */
+    readonly siDatepickerClose: import("@angular/core").OutputEmitterRef<CloseCause>;
+    private overlayRef?;
+    private datepickerRef?;
+    private autoCloseSelection;
+    /** Guard for siDatepickerClose event emitter to make sure the cause is emitter just once */
+    private ignoreClose;
+    private readonly overlay;
+    private readonly triggerElementRef;
+    private readonly mediaMatcher;
+    private readonly breakpointObserver;
+    private readonly destroyRef;
+    /**
+     * When the media query matches on open the overlay is displayed like a modal dialog.
+     * In case, users change the screen size to the matching media query we close the overlay
+     * if it is open with a connected overlay strategy.
+     */
+    private readonly smallScreenQuery;
+    ngOnDestroy(): void;
+    /**
+     * Toggle open/close overlay.
+     * @param focus - move focus to the datepicker.
+     * @param inputs - for datepicker.
+     * @returns create datepicker overlay instance or undefined
+     *
+     * @deprecated Use {@link showOverlay} or {@link closeOverlay} instead.
+     */
+    toggleOverlay(focus: boolean, inputs?: DatepickerInputPartial): ComponentRef<SiDatepickerOverlayComponent> | undefined;
+    /**
+     * Show datepicker overlay.
+     * @param focus - move focus to the datepicker.
+     * @returns create datepicker overlay instance
+     */
+    showOverlay(focus?: boolean, inputs?: DatepickerInputPartial): ComponentRef<SiDatepickerOverlayComponent>;
+    /**
+     * Close datepicker.
+     */
+    closeOverlay(): undefined;
+    /**
+     * Focus active cell in datepicker.
+     * @param focus - show transfer focus.
+     * @returns current instance.
+     */
+    focus(focus?: boolean): this;
+    /** @deprecated Property provides internal information that should not be used. */
+    isFocused(): boolean;
+    /**
+     * Indicate the datepicker is visible.
+     * @returns is visible.
+     */
+    isShown(): ComponentRef<SiDatepickerOverlayComponent> | undefined;
+    /** Set datepicker inputs */
+    setInputs(inputs?: DatepickerInputPartial): this;
+    /** Close overlay with cause select, which will recover the focus */
+    closeAfterSelection(): void;
+    /** Indicate whether the HTML element is a child of the datepicker overlay. */
+    contains(element: HTMLElement): boolean;
+    private showDatepicker;
+    protected createMobileOverlay(): void;
+    protected createDesktopOverlay(): void;
+    /**
+     * Merge events which shall close the overlay
+     * @param overlayRef - source for backdrop, detach or escape events.
+     * @returns merged observable
+     */
+    private closeStream;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiDatepickerOverlayDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SiDatepickerOverlayDirective, "[siDatepickerOverlay]", ["siDatepickerOverlay"], {}, { "siDatepickerClose": "siDatepickerClose"; }, never, never, true, never>;
+}