@odx/angular 12.26.1 → 13.0.1

package/components/datepicker/index.d.ts

@@ -1,6 +1,216 @@
-export * from './lib/datepicker.component';
-export * from './lib/datepicker.config';
-export * from './lib/datepicker.module';
-export * from './lib/directives';
-export * from './lib/validators/filter.validator';
-export * from './lib/validators/minmax.validator';
+import * as i0 from '@angular/core';
+import { EventEmitter, AfterViewInit, ElementRef } from '@angular/core';
+import * as rxjs from 'rxjs';
+import { InputControlDirective, CustomFormControl } from '@odx/angular/cdk/custom-form-control';
+import { DateFilter } from '@odx/angular/components/calendar';
+import { DropdownDirective } from '@odx/angular/components/dropdown';
+import { Position } from '@odx/angular/utils';
+import * as i1 from '@odx/angular';
+import { ReadonlyController } from '@odx/angular';
+import * as i2 from 'ngx-mask';
+import { NgxMaskDirective } from 'ngx-mask';
+import { Validator, AbstractControl, ValidationErrors } from '@angular/forms';
+
+/**
+ * A directive to enhance an input element as part of a datepicker control. It applies date input formatting,
+ * mask handling, and emits focus events. This directive integrates with ngx-mask to handle input masking and
+ * ensures that the input complies with the date format specified in the datepicker configuration.
+ * Extends the `InputControlDirective` to provide input control functionality.
+ * Has host directive `WithTabIndex` to manage the tabindex attribute of the input element.
+ *
+ * @see {InputControlDirective}
+ * @see {WithTabIndex}
+ */
+declare class DatepickerInputControlDirective extends InputControlDirective {
+    protected readonly readonlyController: ReadonlyController | null;
+    protected readonly config: {
+        inputDateOrder: string;
+        inputDateSeparator: string;
+    };
+    readonly ngxMaskDirective: NgxMaskDirective;
+    /**
+     * Emits an event when the input field receives focus or loses focus, indicating the focus state.
+     *
+     * @emits {boolean} - Indicates whether the input field is focused.
+     */
+    focused: EventEmitter<boolean>;
+    /**
+     * Gets the current value of the input field as a `Date` object, based on the date format from the datepicker
+     * configuration.
+     *
+     * @returns {Date | null} - The current value of the input field as a `Date` object, or `null` if the value is invalid.
+     */
+    get valueAsDate(): Date | null;
+    /**
+     * Computes the placeholder text for the input based on the date format from
+     * the datepicker configuration.
+     *
+     * @returns {string} - The placeholder text, typically the date format in uppercase.
+     */
+    get placeholder(): string;
+    protected handleFocusIn(): void;
+    protected handleFocusOut(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DatepickerInputControlDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DatepickerInputControlDirective, "input[odxDatepickerControl]", never, {}, { "focused": "focused"; }, never, never, true, [{ directive: typeof i1.WithTabIndex; inputs: {}; outputs: {}; }, { directive: typeof i2.NgxMaskDirective; inputs: {}; outputs: {}; }]>;
+}
+
+/**
+ * Represents a datepicker component for selecting a date.
+ * Extends the `CustomFormControl` class and implements the `AfterViewInit` interface.
+ *
+ * @see {CustomFormControl}
+ */
+declare class DatepickerComponent extends CustomFormControl<Date | null> implements AfterViewInit {
+    protected readonly takeUntilDestroyed: <T>() => rxjs.MonoTypeOperatorFunction<T>;
+    protected readonly config: {
+        inputDateOrder: string;
+        inputDateSeparator: string;
+    };
+    readonly element: ElementRef<HTMLElement>;
+    /**
+     * Gets a value indicating whether the datepicker is currently open.
+     *
+     * @returns {boolean}
+     */
+    get isOpen(): boolean;
+    /**
+     * Represents the current date.
+     *
+     * @type {Date}
+     */
+    today: Date;
+    /**
+     * The filter function used to determine if a date should be included or excluded in the datepicker.
+     * If set to `null`, no filtering will be applied.
+     *
+     * @type {DateFilter | null}
+     * @default null
+     *
+     * @example
+     * ```ts
+     * // Excludes mondays from the datepicker.
+     * const filterFn: DateFilter = (date) => date.getDay() !== 1;
+     * ```
+     */
+    filterFn: DateFilter | null;
+    /**
+     * The minimum selectable date for the datepicker.
+     * If set to null, there is no minimum date restriction.
+     *
+     * @type {Date | null}
+     * @default null
+     */
+    minDate: Date | null;
+    /**
+     * The maximum selectable date for the datepicker.
+     * If set to null, there is no maximum date restriction.
+     *
+     * @type {Date | null}
+     * @default null
+     */
+    maxDate: Date | null;
+    /**
+     * The position of the dropdown relative to the input field.
+     *
+     * @type {Position}
+     * @default Position.BOTTOM
+     */
+    dropdownPosition: Position;
+    /**
+     * When set to true, the select will display a reset button.
+     *
+     * @type {boolean}
+     * @default false
+     */
+    clearable: i0.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Emits the selected date when it changes.
+     *
+     * @emits {Date}
+     */
+    selectedChange: EventEmitter<Date>;
+    /**
+     * The dropdown directive used in the datepicker component.
+     *
+     * @type {DropdownDirective}
+     */
+    dropdown: DropdownDirective;
+    /**
+     * The dropdown trigger element used in the datepicker component.
+     *
+     * @type {ElementRef<HTMLElement>}
+     */
+    dropdownTriggerElement: ElementRef<HTMLElement>;
+    /**
+     * The date field input control directive used in the datepicker component.
+     *
+     * @type {DatepickerInputControlDirective | undefined}
+     */
+    dateField?: DatepickerInputControlDirective;
+    constructor();
+    ngAfterViewInit(): void;
+    /**
+     * Selects a date.
+     *
+     * @param {Date | null} value - The date value to be selected.
+     */
+    selectDate(value: Date | null): void;
+    /**
+     * Resets the datepicker's value to null.
+     */
+    reset(): void;
+    /**
+     * @internal
+     * Writes a new value to the element.
+     * Part of the ControlValueAccessor interface.
+     * @param {Date | null} value - The new value.
+     */
+    writeValue(value: Date | null): void;
+    /**
+     * Opens the datepicker dropdown.
+     *
+     * @param {KeyboardEvent} event
+     */
+    openDatepicker(event?: KeyboardEvent): void;
+    protected updateInternalValue(value: Date | null): void;
+    protected handleDateFieldChanges(): void;
+    protected handleDateFieldFocus(): void;
+    private updateDateField;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DatepickerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DatepickerComponent, "odx-datepicker", never, { "filterFn": { "alias": "filterFn"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dropdownPosition": { "alias": "dropdownPosition"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; }, { "selectedChange": "selectedChange"; }, ["dateField"], ["input[odxDatepickerControl]", "[odxButton]"], true, never>;
+}
+
+/**
+ * A validation directive to be used with date picker controls that have minimum and maximum date constraints.
+ */
+declare class DatepickerMinMaxValidator implements Validator {
+    private onChange?;
+    minDate: i0.InputSignal<Date | null>;
+    maxDate: i0.InputSignal<Date | null>;
+    constructor();
+    registerOnValidatorChange(fn: () => void): void;
+    validate(control: AbstractControl): ValidationErrors | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DatepickerMinMaxValidator, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DatepickerMinMaxValidator, "odx-datepicker[minDate], odx-datepicker[maxDate]", never, { "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * A validation directive to be used with date picker controls that have filtering capabilities.
+ */
+declare class DatepickerFilterValidator implements Validator {
+    private onChange?;
+    filterFn: i0.InputSignal<DateFilter | null>;
+    constructor();
+    registerOnValidatorChange(fn: () => void): void;
+    validate(control: AbstractControl): ValidationErrors | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DatepickerFilterValidator, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DatepickerFilterValidator, "odx-datepicker[filterFn]", never, { "filterFn": { "alias": "filterFn"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class DatepickerModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DatepickerModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DatepickerModule, never, [typeof DatepickerComponent, typeof DatepickerInputControlDirective, typeof DatepickerMinMaxValidator, typeof DatepickerFilterValidator], [typeof i1.CoreModule, typeof DatepickerComponent, typeof DatepickerInputControlDirective, typeof DatepickerMinMaxValidator, typeof DatepickerFilterValidator]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DatepickerModule>;
+}
+
+export { DatepickerComponent, DatepickerFilterValidator, DatepickerInputControlDirective, DatepickerMinMaxValidator, DatepickerModule };

package/components/daterangepicker/index.d.ts

@@ -1,6 +1,257 @@
-export * from './lib/daterangepicker.component';
-export * from './lib/daterangepicker.config';
-export * from './lib/daterangepicker.module';
-export * from './lib/directives';
-export * from './lib/range.validator';
-export * from './lib/required.validator';
+import * as i0 from '@angular/core';
+import { EventEmitter, AfterViewInit, ElementRef, QueryList } from '@angular/core';
+import * as rxjs from 'rxjs';
+import { InputControlDirective, CustomFormControl } from '@odx/angular/cdk/custom-form-control';
+import { DateRange, DateFilter } from '@odx/angular/components/calendar';
+import { DropdownDirective } from '@odx/angular/components/dropdown';
+import { Position } from '@odx/angular/utils';
+import * as i1 from '@odx/angular';
+import { ReadonlyController } from '@odx/angular';
+import * as i2 from 'ngx-mask';
+import { NgxMaskDirective } from 'ngx-mask';
+import { FormControl } from '@angular/forms';
+
+/**
+ * Enhances an input element to support date range picking, applying an input mask for date formatting
+ * and managing focus events. This directive is typically used within a date range picker to provide
+ * consistent and configurable input behavior. Extends the `InputControlDirective` to provide form control.
+ * Has host directive `WithTabIndex` to manage the tab index attribute of the input element.
+ *
+ * @see {InputControlDirective}
+ */
+declare class DaterangepickerInputControlDirective extends InputControlDirective {
+    protected readonly readonlyController: ReadonlyController | null;
+    protected readonly config: {
+        inputDateOrder: string;
+        inputDateSeparator: string;
+    };
+    readonly ngxMaskDirective: NgxMaskDirective;
+    /**
+     * Emits an event when the input gains or loses focus, facilitating external event handling.
+     *
+     * @emits {boolean} - Indicates whether the input is focused.
+     */
+    focused: EventEmitter<boolean>;
+    /**
+     * Converts the current input value to a Date object based on the configuration's date format.
+     *
+     * @returns {Date | null} The parsed date object or null if the input does not represent a valid date.
+     */
+    get valueAsDate(): Date | null;
+    /**
+     * Provides the placeholder text for the input, typically the date format in uppercase.
+     *
+     * @returns {string} The placeholder text for the input.
+     */
+    get placeholder(): string;
+    protected handleFocusIn(): void;
+    protected handleFocusOut(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaterangepickerInputControlDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaterangepickerInputControlDirective, "input[odxDaterangepickerControl],input[odxDaterangepickerStartDateControl], input[odxDaterangepickerEndDateControl]", never, {}, { "focused": "focused"; }, never, never, true, [{ directive: typeof i1.WithTabIndex; inputs: {}; outputs: {}; }, { directive: typeof i2.NgxMaskDirective; inputs: {}; outputs: {}; }]>;
+}
+
+/**
+ * A component for selecting a date range, integrated with dropdowns and input fields for start and end dates.
+ * It supports custom configurations for minimum, maximum dates, and date filters. The component also handles
+ * the dropdown's behavior for date selection and applies date formats automatically based on configuration.
+ * The component extends the `CustomFormControl` class to provide form control functionality.
+ *
+ * @see {CustomFormControl}
+ */
+declare class DaterangepickerComponent extends CustomFormControl<DateRange | null> implements AfterViewInit {
+    protected readonly takeUntilDestroyed: <T>() => rxjs.MonoTypeOperatorFunction<T>;
+    protected readonly config: {
+        inputDateOrder: string;
+        inputDateSeparator: string;
+    };
+    readonly element: ElementRef<HTMLElement>;
+    /**
+     * Indicates whether the dropdown part of the date range picker is open.
+     *
+     * @type {boolean}
+     */
+    get isOpen(): boolean;
+    /**
+     * Represents today's date, used for default selections and validations.
+     *
+     * @type {Date}
+     */
+    today: Date;
+    /**
+     * A function that defines additional rules for disabled dates within the picker.
+     *
+     * @type {DateFilter | null}
+     * @default null
+     *
+     * @example
+     * ```ts
+     * // Disables all Wednesdays in the picker.
+     * const filterFn: DateFilter = (date: Date) => date.getDay() !== 3;
+     * ```
+     */
+    filterFn: DateFilter | null;
+    /**
+     * The earliest date that can be selected in the picker.
+     *
+     * @type {Date | null}
+     * @default null
+     */
+    minDate: Date | null;
+    /**
+     * The latest date that can be selected in the picker.
+     *
+     * @type {Date | null}
+     * @default null
+     */
+    maxDate: Date | null;
+    /**
+     * Position of the dropdown relative to the input fields.
+     *
+     * @type {Position}
+     * @default Position.BOTTOM
+     */
+    dropdownPosition: Position;
+    /**
+     * When set to true, the select will display a reset button.
+     *
+     * @type {boolean}
+     * @default false
+     */
+    clearable: i0.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Emits the selected date range when it changes.
+     *
+     * @emits {DateRange}
+     */
+    selectedChange: EventEmitter<DateRange>;
+    /**
+     * Directive managing the dropdown functionality.
+     *
+     * @type {DropdownDirective}
+     */
+    dropdown: DropdownDirective;
+    /**
+     * Reference to the element triggering the dropdown.
+     *
+     * @type {ElementRef<HTMLElement>}
+     */
+    dropdownTriggerElement: ElementRef<HTMLElement>;
+    /**
+     * Query list of the input controls within the date range picker.
+     *
+     * @type {QueryList<DaterangepickerInputControlDirective>}
+     */
+    dateFields: QueryList<DaterangepickerInputControlDirective>;
+    /**
+     * Reference to the element mirroring the start date input field.
+     *
+     * @type {ElementRef<HTMLElement>}
+     */
+    startDateMirror: ElementRef<HTMLElement>;
+    /**
+     * Reference to the element mirroring the end date input field.
+     *
+     * @type {ElementRef<HTMLElement>}
+     */
+    endDateMirror: ElementRef<HTMLElement>;
+    /**
+     * The input control for the start date.
+     *
+     * @type {DaterangepickerInputControlDirective | undefined}
+     */
+    get startDateField(): DaterangepickerInputControlDirective | undefined;
+    /**
+     * The input control for the end date.
+     *
+     * @type {DaterangepickerInputControlDirective | undefined}
+     */
+    get endDateField(): DaterangepickerInputControlDirective | undefined;
+    constructor();
+    ngAfterViewInit(): void;
+    /**
+     * Selects a date range, updates the form value, and emits the selected range.
+     *
+     * @param {DateRange | null} value - The date range to select.
+     */
+    selectDateRange(value: DateRange | null): void;
+    /**
+     * Resets the daterangepicker's value to an empty date range (both start and end as null).
+     */
+    reset(): void;
+    /**
+     * @internal
+     * Writes a new value to the element.
+     * Part of the ControlValueAccessor interface.
+     * @param {DateRange | null} value - The new date range value.
+     */
+    writeValue(value: DateRange | null): void;
+    /**
+     * Opens the date range picker dropdown.
+     *
+     * @param {KeyboardEvent} event
+     */
+    openDaterangepicker(event?: KeyboardEvent): void;
+    protected isEmpty(value: DateRange | null): boolean;
+    protected updateInternalValue(value: DateRange): void;
+    protected handleDateFieldChanges(): void;
+    protected updateWidth(target: DaterangepickerInputControlDirective | undefined, source: ElementRef<HTMLElement>, value?: string): void;
+    protected handleDateFieldFocus(): void;
+    private updateStartDateField;
+    private updateEndDateField;
+    private updateInputFields;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaterangepickerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaterangepickerComponent, "odx-daterangepicker", never, { "filterFn": { "alias": "filterFn"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dropdownPosition": { "alias": "dropdownPosition"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; }, { "selectedChange": "selectedChange"; }, ["dateFields"], ["input[odxDaterangepickerStartDateControl]", "input[odxDaterangepickerEndDateControl]", "[odxButton]"], true, never>;
+}
+
+/**
+ * A validation directive to be used with date range picker controls. This validator ensures that the date range
+ * selected is valid, meaning the start date must occur on or before the end date. If the date range is invalid,
+ * this validator will provide a validation error that can be used to display an appropriate message or to style
+ * the form control.
+ *
+ * The validator is designed to be used with form controls that manage `DateRange` objects in Angular forms.
+ */
+declare class DaterangepickerRangeValidator {
+    /**
+     * Performs the validation check on the form control's value.
+     *
+     * @param {FormControl<DateRange | null>} control - The form control instance associated with the date range input.
+     * @returns {ValidationErrors | null} An object expressing validation errors if the range is invalid,
+     * or null if the range is valid. The object returned in case of a validation error is `{ invalidRange: true }`.
+     */
+    validate({ value }: FormControl<DateRange | null>): false | {
+        invalidRange: boolean;
+    } | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaterangepickerRangeValidator, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaterangepickerRangeValidator, "odx-daterangepicker[formControlName], odx-daterangepicker[formControl], odx-daterangepicker[ngModel]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * A validation directive to ensure that both start and end dates are provided for a date range picker.
+ * This validator is essential for forms where the date range is a required field. It checks that both the
+ * start and end date values exist in the date range object. If one or both dates are missing, it flags the
+ * form control as having a validation error.
+ */
+declare class DaterangepickerRequiredValidator {
+    /**
+     * Validates the form control associated with the date range input.
+     * Checks if both start and end dates are present. If either is missing, it returns a validation error.
+     *
+     * @param {FormControl<DateRange | null>} control - The form control instance that contains the date range value.
+     * @returns {ValidationErrors | null} An object expressing validation errors if the range is incomplete,
+     * or null if the range is fully specified. If validation fails, the object returned is `{ required: true }`.
+     */
+    validate({ value }: FormControl<DateRange | null>): false | {
+        required: boolean;
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaterangepickerRequiredValidator, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaterangepickerRequiredValidator, "odx-daterangepicker[required][formControlName], odx-daterangepicker[required][formControl], odx-daterangepicker[required][ngModel]", never, {}, {}, never, never, true, never>;
+}
+
+declare class DaterangepickerModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaterangepickerModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaterangepickerModule, never, [typeof DaterangepickerComponent, typeof DaterangepickerInputControlDirective, typeof DaterangepickerRangeValidator, typeof DaterangepickerRequiredValidator], [typeof i1.CoreModule, typeof DaterangepickerComponent, typeof DaterangepickerInputControlDirective, typeof DaterangepickerRangeValidator, typeof DaterangepickerRequiredValidator]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DaterangepickerModule>;
+}
+
+export { DaterangepickerComponent, DaterangepickerInputControlDirective, DaterangepickerModule, DaterangepickerRangeValidator, DaterangepickerRequiredValidator };