@odx/angular 12.26.1 → 13.0.1

package/components/table/index.d.ts

@@ -1,5 +1,239 @@
-export * from './lib/components';
-export * from './lib/directives';
-export * from './lib/models';
-export * from './lib/table.component';
-export * from './lib/table.module';
+import * as i0 from '@angular/core';
+import { EventEmitter, OnInit, QueryList } from '@angular/core';
+import { FormGroup, FormControl } from '@angular/forms';
+import { SortDirection } from '@odx/angular/utils';
+import * as i5 from '@odx/angular';
+
+/**
+ * CheckCellComponent provides a checkbox input within a table cell, allowing rows to be selected.
+ * It is designed to be used in conjunction with a table component that manages state and header interactions,
+ * particularly for functionalities like bulk actions.
+ */
+declare class CheckCellComponent {
+    private readonly table;
+    readonly element: i0.ElementRef<HTMLElement>;
+    /**
+     * Indicates whether the checkbox within the table cell is checked.
+     *
+     * @type {boolean}
+     * @default false
+     */
+    checked: boolean;
+    /**
+     * Event emitter that triggers when the checked state changes. It emits the new state of the checkbox.
+     *
+     * @emits {boolean}
+     */
+    checkedChange: EventEmitter<boolean>;
+    /**
+     * Updates the checked state of the checkbox and notifies the parent table component, typically to update
+     * the state of a header checkbox or other related components.
+     * @param {boolean} e - The new checked state.
+     */
+    update(e: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CheckCellComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CheckCellComponent, "td[odx-table-cell][checked]", never, { "checked": { "alias": "checked"; "required": false; }; }, { "checkedChange": "checkedChange"; }, never, never, true, never>;
+    static ngAcceptInputType_checked: unknown;
+}
+
+interface TableHeaderCell {
+    title?: string;
+    name: string;
+    filter?: boolean;
+    sortable?: boolean;
+    check?: boolean;
+    width?: string;
+}
+
+interface SortStatus {
+    column: string;
+    sortVariant?: SortDirection;
+}
+
+interface TableBodyCell {
+    [key: string]: unknown;
+}
+
+type TableVariant = typeof TableVariant[keyof typeof TableVariant];
+declare const TableVariant: {
+    readonly DEFAULT: "default";
+    readonly STRIPED: "striped";
+};
+
+/**
+ * HeaderTitleComponent provides the functionality for a table header cell, including sorting and checkbox
+ * operations if applicable. It handles changes in sort state and emits relevant events to the table component
+ * to manage sorting and selection state across the table.
+ */
+declare class HeaderTitleComponent implements OnInit {
+    private readonly table;
+    private readonly cdr;
+    private readonly takeUntilDestroyed;
+    private sortStatus;
+    /**
+     * The header cell item containing metadata like column name, sortability, and whether it should include a checkbox.
+     *
+     * @type {TableHeaderCell}
+     */
+    item: TableHeaderCell;
+    /**
+     * FormGroup to manage the checkbox state within the header.
+     *
+     * @type {FormGroup}
+     */
+    checkForm: FormGroup<{
+        check: FormControl<boolean | null>;
+    }>;
+    /**
+     * Computes and returns the current sort status of the column associated with this header.
+     *
+     * @returns {SortStatus}
+     */
+    get getSortStatus(): SortStatus;
+    /**
+     * Returns the icon name for the current sorting status (ascending, descending).
+     *
+     * @returns {string}
+     */
+    get sortIcon(): string;
+    /**
+     * Toggles the sorting status of the column and informs the table component of the change.
+     */
+    sortColumn(): void;
+    /**
+     * Resets the sort status to unsorted.
+     */
+    clearSortStatus(): void;
+    /**
+     * Returns the number of selected items in the column, used to determine checkbox state.
+     *
+     * @returns {number}
+     */
+    get selected(): number;
+    /**
+     * Updates the component view, usually after a state change.
+     */
+    check(): void;
+    /**
+     * Determines whether the checkbox should be marked as checked.
+     *
+     * @returns {boolean}
+     */
+    get checked(): boolean;
+    ngOnInit(): void;
+    private checkBoxListener;
+    get indeterminate(): boolean;
+    protected get columnWidth(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HeaderTitleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HeaderTitleComponent, "th[odxHeaderTitle]", never, { "item": { "alias": "item"; "required": false; }; }, {}, never, ["odx-form-field"], true, never>;
+}
+
+/**
+ * TableCellDirective enhances an HTML td element by providing a role attribute with a value of "cell".
+ * This directive is used to define a cell within a table.
+ */
+declare class TableCellDirective {
+    readonly element: i0.ElementRef<HTMLElement>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableCellDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TableCellDirective, "td[odx-table-cell]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * TableRowDirective enhances an HTML tr element by providing a role attribute with a value of "row".
+ * This directive is used to define a row within a table.
+ */
+declare class TableRowDirective {
+    readonly element: i0.ElementRef<HTMLElement>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableRowDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TableRowDirective, "tr[odx-table-row]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * TableComponent is a dynamic table structure built for displaying complex data sets with sorting, filtering,
+ * and checkable functionality. It provides configuration options through various inputs that allow the
+ * customization of table behavior and presentation.
+ *
+ * This component is highly modular, integrating with other components such as `HeaderTitleComponent` for header
+ * management, and using Angular forms for dynamic data filtering.
+ *
+ * @template T - The type of data that the table displays.
+ */
+declare class TableComponent<T> implements OnInit {
+    private readonly takeUntilDestroyed;
+    readonly element: i0.ElementRef<HTMLElement>;
+    /**
+     * Specifies the table variant for CSS styling.
+     *
+     * @type {TableVariant | null}
+     */
+    variant?: TableVariant | null;
+    /**
+     * Data array of type T that the table displays.
+     *
+     * @type {Signal<T[]>}
+     */
+    data: i0.InputSignal<T[]>;
+    /**
+     * Message to display when no data is available.
+     *
+     * @type {Signal<string>}
+     */
+    noDataMessage: i0.InputSignal<string>;
+    /**
+     * Configuration for table headers that controls behavior such as sorting, filtering, checkbox display, and width.
+     * Should be in the same order as the columns in the template.
+     *
+     * @type {Signal<TableHeaderCell[]>}
+     */
+    headerData: i0.InputSignal<TableHeaderCell[]>;
+    /**
+     * FormGroup to handle the dynamic filtering controls, each tied to a header cell that has filtering enabled.
+     */
+    form: FormGroup;
+    /**
+     * Event emitter for when a column's sorting status changes.
+     *
+     * @emits {SortStatus}
+     */
+    readonly sorted: EventEmitter<SortStatus>;
+    /**
+     * Event emitter for when the table's filtering conditions change.
+     *
+     * @emits {{ [key: string]: string }}
+     */
+    readonly filtered: EventEmitter<{
+        [key: string]: string;
+    }>;
+    /**
+     * Event emitter for when a checkbox column's checked state changes.
+     *
+     * @emits {{ column: string; check: boolean }}
+     */
+    readonly checked: EventEmitter<{
+        column: string;
+        check: boolean;
+    }>;
+    /**
+     * A QueryList of HeaderTitleComponent instances, each corresponding to a header cell in the table.
+     *
+     * @type {QueryList<HeaderTitleComponent>}
+     */
+    headers: QueryList<HeaderTitleComponent>;
+    ngOnInit(): void;
+    /**
+     * Clears the sorting status of all headers.
+     */
+    clearSort(): void;
+    private formListener;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TableComponent<any>, "table[odxTable]", never, { "variant": { "alias": "variant"; "required": false; }; "data": { "alias": "data"; "required": true; "isSignal": true; }; "noDataMessage": { "alias": "noDataMessage"; "required": false; "isSignal": true; }; "headerData": { "alias": "headerData"; "required": true; "isSignal": true; }; }, { "sorted": "sorted"; "filtered": "filtered"; "checked": "checked"; }, never, ["tr"], true, never>;
+}
+
+declare class TableModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TableModule, never, [typeof TableComponent, typeof TableRowDirective, typeof TableCellDirective, typeof CheckCellComponent], [typeof i5.CoreModule, typeof TableComponent, typeof TableRowDirective, typeof TableCellDirective, typeof CheckCellComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<TableModule>;
+}
+
+export { CheckCellComponent, HeaderTitleComponent, TableCellDirective, TableComponent, TableModule, TableRowDirective, TableVariant };
+export type { SortStatus, TableBodyCell, TableHeaderCell };

package/components/timepicker/index.d.ts

@@ -1,7 +1,324 @@
-export * from './lib/components/timepicker-option.component';
-export * from './lib/directives/timepicker-input-control.directive';
-export * from './lib/timepicker.component';
-export * from './lib/timepicker.module';
-export * from './lib/timepicker.service';
-export * from './lib/timepicker.token';
-export * from './lib/utils';
+import * as i0 from '@angular/core';
+import { OnInit, EventEmitter, AfterViewInit, QueryList, InjectionToken } from '@angular/core';
+import * as i1 from '@odx/angular';
+import { DisabledController } from '@odx/angular';
+import { OptionControl } from '@odx/angular/cdk/option-control';
+import { InputControlDirective, CustomFormControl } from '@odx/angular/cdk/custom-form-control';
+import * as i2 from 'ngx-mask';
+import { NgxMaskDirective } from 'ngx-mask';
+import * as rxjs from 'rxjs';
+import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
+import { DropdownDirective } from '@odx/angular/components/dropdown';
+
+/**
+ * Represents a selectable option within a timepicker component. This component allows for
+ * individual time values to be selected from a dropdown menu as part of the timepicker interface.
+ * It integrates with the timepicker's control to manage selection state and accessibility.
+ *
+ * @extends {OptionControl<string>}
+ */
+declare class TimepickerOptionComponent extends OptionControl<string> implements OnInit {
+    private readonly timepicker;
+    protected readonly disabledController: DisabledController | null;
+    /**
+     * Indicates whether this time option is currently selected.
+     * @type {boolean}
+     * @default false
+     */
+    isSelected: boolean;
+    /**
+     * Indicates whether this time option is currently active (e.g., highlighted by keyboard navigation).
+     * This is an override from the base `OptionControl`.
+     * @type {boolean}
+     * @default false
+     */
+    isActive: boolean;
+    /**
+     * Whether the option is disabled. This is used to determine whether the option should be selectable.
+     *
+     * @type {boolean}
+     */
+    get disabled(): boolean;
+    /**
+     * Emits an event when the option is selected, allowing the timepicker component to update its value
+     * and close the dropdown.
+     *
+     * @emits {TimepickerOptionComponent}
+     */
+    selected: EventEmitter<TimepickerOptionComponent>;
+    constructor();
+    ngOnInit(): void;
+    /**
+     * Sets the active styles for the option, typically indicating that it is
+     * focused or highlighted via keyboard navigation.
+     */
+    setActiveStyles(): void;
+    protected selectOption(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TimepickerOptionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TimepickerOptionComponent, "odx-timepicker-option", never, {}, { "selected": "selected"; }, never, ["*"], true, [{ directive: typeof i1.WithDisabledState; inputs: {}; outputs: {}; }]>;
+}
+
+/**
+ * Directive to enhance a standard input element for time picking, integrating mask functionality for time format.
+ * It automatically adapts to locale settings provided by the enclosing `TimepickerComponent` to display time in the appropriate format.
+ *
+ * @extends {InputControlDirective}
+ */
+declare class TimepickerInputControlDirective extends InputControlDirective {
+    private readonly timepicker;
+    private readonly timepickerService;
+    readonly ngxMaskDirective: NgxMaskDirective | null;
+    /**
+     * Returns the placeholder text for the input based on locale settings.
+     *
+     * @returns {string} The placeholder text for the input.
+     */
+    get placeholder(): string;
+    /**
+     * Determines whether the timepicker input is readonly, based on the state of the parent timepicker component.
+     *
+     * @returns {boolean} `true` if the input should be readonly; otherwise, `false`.
+     */
+    protected get isReadonly(): boolean;
+    /**
+     * Applies the time format mask to the input value, transforming and returning the masked value.
+     *
+     * @param {Event} event - The input event triggering the mask application.
+     * @returns {string} The masked input value.
+     */
+    applyMask(useLocale: boolean): void;
+    /**
+     * Updates the input value through ngx-mask directive.
+     *
+     * @param {string | null} value - The new value to set in the input.
+     */
+    setMaskedValue(value: string | null): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TimepickerInputControlDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TimepickerInputControlDirective, "input[odxTimepickerControl]", never, {}, {}, never, never, true, [{ directive: typeof i1.WithTabIndex; inputs: {}; outputs: {}; }, { directive: typeof i1.WithDisabledState; inputs: {}; outputs: {}; }, { directive: typeof i2.NgxMaskDirective; inputs: {}; outputs: {}; }]>;
+}
+
+/**
+ * Represents a time picker component allowing users to select a time from a dropdown list.
+ * This component integrates with Angular forms and supports customization for locale, time range, and step intervals.
+ *
+ * @see {CustomFormControl}
+ */
+declare class TimepickerComponent extends CustomFormControl<string | null> implements AfterViewInit {
+    private readonly timepickerService;
+    private _useLocale;
+    protected keyManager?: ActiveDescendantKeyManager<OptionControl<string>>;
+    protected readonly takeUntilDestroyed: <T>() => rxjs.MonoTypeOperatorFunction<T>;
+    protected readonly dropdown?: DropdownDirective;
+    protected options: QueryList<TimepickerOptionComponent>;
+    readonly element: i0.ElementRef<HTMLElement>;
+    /**
+     * Controls whether the timepicker should use locale-specific time formats AM/PM.
+     *
+     * @type {boolean}
+     * @default false
+     */
+    set useLocale(val: boolean);
+    /**
+     * Gets a boolean value indicating whether the locale is being used.
+     *
+     * @returns {boolean} A boolean value indicating whether the locale is being used.
+     */
+    get useLocale(): boolean;
+    /**
+     * When set to true, the select will display a reset button.
+     *
+     * @type {boolean}
+     * @default false
+     */
+    clearable: i0.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Controls the step interval between time options in minutes.
+     *
+     * @type {number}
+     * @default 30
+     */
+    step: number;
+    /**
+     * Specifies the minimum time value that can be selected ('05:00' or '05:00 AM').
+     *
+     * @type {string}
+     * @default '00:00'
+     */
+    min: string;
+    /**
+     * Specifies the maximum time value that can be selected ('22:00' or '10:00 PM').
+     *
+     * @type {string}
+     * @default '23:59'
+     */
+    max: string;
+    /**
+     * The directive for the timepicker input control.
+     *
+     * @type {TimepickerInputControlDirective | undefined}
+     */
+    dateField?: TimepickerInputControlDirective;
+    constructor();
+    ngAfterViewInit(): void;
+    /**
+     * Checks if the given time option is selected.
+     *
+     * @param {TimepickerOptionComponent} option - The time option to check.
+     * @returns {boolean} True if the option is selected, false otherwise.
+     */
+    isTimeOptionSelected(option: TimepickerOptionComponent): boolean;
+    /**
+     * Handles the selection of a time option from the dropdown, updating the input field and closing the dropdown.
+     *
+     * @param {TimepickerOptionComponent | undefined} option - The selected time option component.
+     */
+    timeSelected(option?: TimepickerOptionComponent): void;
+    /**
+     * Determines whether the specified time is within the allowed time range.
+     *
+     * @param {string} time - The time to check, in 'HH:mm' or 'HH:mm AM/PM' format.
+     * @returns {boolean} True if the time is within the range; otherwise, false.
+     */
+    inTimeRange(time: string): boolean;
+    /**
+     * Generates the list of time options based on the configured step interval and locale settings AM/PM.
+     *
+     * @returns {string[]} An array of time strings in 'HH:mm' format.
+     */
+    get timeStampsList(): string[];
+    /**
+     * @internal
+     * Writes a new value to the element.
+     * Part of the ControlValueAccessor interface.
+     * @param {string | null} value - The new value.
+     */
+    writeValue(value: string | null): void;
+    protected onOpen(): void;
+    protected handleControllerEvent(event: KeyboardEvent): void;
+    protected handleDateFieldChanges(): void;
+    protected resetValue(e: Event): void;
+    private setActiveOptionBasedOnCurrentValue;
+    private activateOption;
+    private activateNearestTimeOption;
+    private findNearestTimeOption;
+    private updateInputValue;
+    private scrollToActiveOption;
+    private setOption;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TimepickerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TimepickerComponent, "odx-timepicker", never, { "useLocale": { "alias": "useLocale"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_useLocale: unknown;
+    static ngAcceptInputType_step: unknown;
+}
+
+declare class TimepickerModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<TimepickerModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TimepickerModule, never, [typeof TimepickerComponent, typeof TimepickerInputControlDirective, typeof TimepickerOptionComponent], [typeof i1.CoreModule, typeof TimepickerComponent, typeof TimepickerInputControlDirective, typeof TimepickerOptionComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<TimepickerModule>;
+}
+
+/**
+ * Service to provide utility functions for timepicker components, including validation, placeholder generation, and finding the closest time.
+ * It also handles locale-based time formatting.
+ */
+declare class TimepickerService {
+    private readonly windowRef;
+    useLocale: i0.WritableSignal<boolean>;
+    /**
+     * Validates if the given time is less than or equal to a maximum time constraint.
+     *
+     * @param {string} time - The time to validate.
+     * @param {string} max - The maximum allowable time.
+     * @returns {boolean} True if the time is valid (i.e., not after max), false otherwise.
+     */
+    maxValidation(time: string, max: string): boolean;
+    /**
+     * Checks if the provided value is a valid time string in HH:mm or HH:mm AM/PM format.
+     * This method also acts as a type guard.
+     *
+     * @param {unknown} time - The value to validate.
+     * @returns {time is string} True if the value is a valid time string, false otherwise.
+     */
+    isValidTime(time: unknown): time is string;
+    is12HourFormat(value: string): boolean;
+    /**
+     * Validates if the given time is greater than or equal to a minimum time constraint.
+     *
+     * @param {string} time - The time to validate.
+     * @param {string} min - The minimum allowable time.
+     * @returns {boolean} True if the time is valid (i.e., not before min), false otherwise.
+     */
+    minValidation(time: string, min: string): boolean;
+    /**
+     * Finds the closest time to a target time from a list of times.
+     *
+     * @param {string[]} timeStamps - The list of time strings to search through (e.g., ["10:00", "10:30", "11:00"]).
+     * @param {string} targetTime - The target time string to find the closest match for (e.g., "10:35").
+     * @returns {string} The closest time string from the list to the target, formatted according to locale.
+     */
+    findClosestDate(timeStamps: string[], targetTime: string): string;
+    /**
+     * Formats a time string to a localized time format using Intl.DateTimeFormat.
+     *
+     * @param {unknown} time - The time string to format (e.g., "14:30").
+     * @param {boolean} [hour12=false] - Specifies if the output should use 12-hour format with AM/PM notation.
+     * @returns {string} The formatted time string, or an empty string if the input time is invalid.
+     */
+    getLocalizedTimeFormat(time: unknown, hour12?: boolean): string;
+    private convertToDates;
+    private parseTimeString;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TimepickerService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<TimepickerService>;
+}
+
+/**
+ * An InjectionToken used for injecting an instance of TimepickerComponent.
+ * This token facilitates the decoupling of the TimepickerComponent's implementation from its consumption,
+ * allowing for more flexible and maintainable code, especially in scenarios requiring custom time picker
+ * behavior or appearance.
+ */
+declare const TIMEPICKER_CONTROL: InjectionToken<TimepickerComponent>;
+
+/**
+ * Generates an array of time stamps within a 24-hour period based on the specified step interval.
+ * The time stamps can be formatted in 24-hour format or 12-hour format with AM/PM based on locale preference.
+ *
+ * @param {number} step - The interval, in minutes, between each time stamp.
+ * @param {boolean} useLocale - Determines if the time stamps should use the 12-hour format with AM/PM (`true`) or the 24-hour format (`false`).
+ * @returns {string[]} An array of formatted time stamps as strings.
+ * @example
+ * ```ts
+ * // Generate time stamps every 30 minutes using 24-hour format
+ * generateTimeStamps(30, false);
+ * // Returns ["00:00", "00:30", "01:00", ..., "23:30"]
+ *
+ * // Generate time stamps every 60 minutes using 12-hour format with AM/PM
+ * generateTimeStamps(60, true);
+ * // Returns ["12:00 AM", "01:00 AM", ..., "11:00 PM"]
+ * ```
+ */
+declare function generateTimeStamps(step: number, useLocale: boolean): string[];
+
+/**
+ * Processes and formats a time input value based on specific rules. It adjusts the input for valid time format,
+ * especially focusing on single-digit hour inputs, ensuring minute values start with 0 if the last digit is greater
+ * than 5, and appending 'M' to AM/PM indicators.
+ *
+ * @param {string} value - The current input value of the time field.
+ * @param {InputEvent} event - The input event triggered by the user's interaction with the field.
+ * @returns {string} The processed and potentially reformatted value.
+ *
+ * @example
+ * ```ts
+ * // Prepend 0 to single-digit hours greater than 1
+ * processInputValue("2", { inputType: "insertText" }); // Returns "02"
+ *
+ * // Ensure minute values are within valid ranges
+ * processInputValue("11:8", { inputType: "insertText" }); // Returns "11:08"
+ *
+ * // Append 'M' to AM/PM indicators
+ * processInputValue("2 p", { inputType: "insertText" }); // Returns "2 PM"
+ * ```
+ */
+declare function processInputValue(value: string, event: InputEvent): string;
+
+export { TIMEPICKER_CONTROL, TimepickerComponent, TimepickerInputControlDirective, TimepickerModule, TimepickerOptionComponent, TimepickerService, generateTimeStamps, processInputValue };