@nuralyui/datepicker 0.0.4 → 0.0.6

package/datepicker.component.d.ts

@@ -0,0 +1,189 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { DatePickerMode, DatePickerType, DatePickerSize, DatePickerVariant, DatePickerPlacement, INavigationDate, IDayPresentation, DatePickerState } from './datepicker.types.js';
+import { DatePickerHost } from './interfaces/base-controller.interface.js';
+import './utils/locale.helper.js';
+import { INPUT_STATE } from '../input/input.types.js';
+declare const HyDatePickerElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+/**
+ * HyDatePicker - A comprehensive date picker component
+ *
+ * @element nr-datepicker
+ *
+ * @fires nr-date-change - Fired when a date is selected
+ * @fires nr-range-change - Fired when a date range is selected
+ * @fires nr-calendar-open - Fired when calendar is opened
+ * @fires nr-calendar-close - Fired when calendar is closed
+ * @fires nr-focus - Fired when component receives focus
+ * @fires nr-blur - Fired when component loses focus
+ * @fires nr-validation - Fired when validation state changes
+ *
+ * @slot label - Label content for the input field
+ * @slot helper-text - Helper text content below the input field
+ * @slot icon - Icon content for the input field
+ *
+ * @csspart input - The input field part
+ * @csspart calendar - The calendar container part
+ * @csspart header - The calendar header part
+ * @csspart days - The days grid part
+ * @csspart day - Individual day cell part
+ * @csspart months - The months grid part
+ * @csspart years - The years grid part
+ *
+ * @example
+ * ```html
+ * <nr-datepicker
+ *   label="Select Date"
+ *   field-format="DD/MM/YYYY"
+ *   @nr-date-change="${this.handleDateChange}">
+ * </nr-datepicker>
+ * ```
+ *
+ * @example Range picker
+ * ```html
+ * <nr-datepicker
+ *   range
+ *   label="Select Date Range"
+ *   @nr-range-change="${this.handleRangeChange}">
+ * </nr-datepicker>
+ * ```
+ */
+export declare class HyDatePickerElement extends HyDatePickerElement_base implements DatePickerHost {
+    static styles: import("lit").CSSResult;
+    requiredComponents: string[];
+    private calendarController;
+    private selectionController;
+    private keyboardController;
+    private positioningController;
+    private dropdownController;
+    name: string;
+    value: string;
+    dateValue: string;
+    defaultValue: string;
+    disabled: boolean;
+    required: boolean;
+    locale: string;
+    fieldFormat: string;
+    range: boolean;
+    minDate?: string;
+    maxDate?: string;
+    disabledDates?: string[];
+    type: DatePickerType;
+    size: DatePickerSize;
+    variant: DatePickerVariant;
+    placement: DatePickerPlacement;
+    label: string;
+    helper: string;
+    state: DatePickerState | INPUT_STATE;
+    useSelectDropdowns: boolean;
+    openedCalendar: boolean;
+    mode: DatePickerMode;
+    private currentMode;
+    private monthsShort;
+    private months;
+    private days;
+    private weekdaysShort;
+    private inputFieldValue;
+    private currentYear;
+    private currentMonth;
+    private currentDay;
+    private endYear?;
+    private endMonth?;
+    private endDay?;
+    navigationDates: INavigationDate;
+    dateInput: HTMLElement;
+    calendarContainer: HTMLElement;
+    private readonly INPUT_TYPE;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(_changedProperties: PropertyValues): void;
+    private setupDropdownController;
+    willUpdate(changedProperties: PropertyValues): void;
+    /**
+     * Initialize component state
+     */
+    private initializeComponent;
+    /**
+     * Initialize range properties if range mode is enabled
+     */
+    private initializeRangeIfNeeded;
+    /**
+     * Handle property changes with proper delegation
+     */
+    private handlePropertyChanges;
+    /**
+     * Check if date-related properties have changed
+     */
+    private hasDatePropertiesChanged;
+    /**
+     * Handle date value change
+     */
+    private handleDateValueChange;
+    getCurrentDate(): Date;
+    formatDate(date: Date): string;
+    parseDate(dateString: string): Date | null;
+    /**
+     * Get currently selected date - DELEGATES to selection controller
+     */
+    getSelectedDate(): Date | null;
+    /**
+     * Select a date - DELEGATES to selection controller
+     */
+    selectDate(date: Date): void;
+    /**
+     * Clear selection - DELEGATES to selection controller
+     */
+    clearSelection(): void;
+    /**
+     * Open calendar - DELEGATES to dropdown controller for better positioning
+     */
+    openCalendar(): void;
+    /**
+     * Close calendar - DELEGATES to dropdown controller
+     */
+    closeCalendar(): void;
+    /**
+     * Toggle calendar - DELEGATES to dropdown controller
+     */
+    toggleCalendar(): void;
+    /**
+     * Handle keyboard events - DELEGATES to keyboard controller
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    private updateInputField;
+    private dispatchDateChange;
+    private updateLocale;
+    inputChanged(event: CustomEvent): void;
+    onFocus(): void;
+    handleMonthChange: (event: CustomEvent) => void;
+    handleYearChange: (event: CustomEvent) => void;
+    prevMonth: () => void;
+    nextMonth: () => void;
+    prevYear: () => void;
+    nextYear: () => void;
+    selectMonth: (month: number) => void;
+    selectYear: (year: number) => void;
+    selectDay: (dayPresentation: IDayPresentation) => void;
+    private handleMonthSelected;
+    private handleYearSelected;
+    private handleMonthSelection;
+    private handleYearSelection;
+    protected render(): TemplateResult;
+    private renderSingle;
+    private renderRange;
+    private renderMultiple;
+    private renderCalendar;
+    private get monthOptions();
+    private get yearOptions();
+    private renderCalendarHeader;
+    private renderCalendarBody;
+    private renderDays;
+    private renderMonths;
+    private renderYears;
+}
+export {};
+//# sourceMappingURL=datepicker.component.d.ts.map