@carbon/web-components 2.60.0 → 2.61.0

package/es/components/date-picker/next/components/date-picker.d.ts

@@ -0,0 +1,329 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { LitElement } from 'lit';
+declare const CDSDatePicker_base: {
+    new (...args: any[]): {
+        _handles: Set<import("../../../../globals/internal/handle").default>;
+        connectedCallback(): void;
+        disconnectedCallback(): void;
+    };
+    _hostListeners: {
+        [listenerName: string]: {
+            [type: string]: {
+                options?: boolean | AddEventListenerOptions;
+            };
+        };
+    };
+} & (new (...args: any[]) => {
+    _hFormdata: import("../../../../globals/internal/handle").default | null;
+    _handleFormdata(event: Event): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}) & typeof LitElement;
+/**
+ * Date picker.
+ *
+ * @element cds-preview-date-picker
+ * @fires cds-preview-date-picker-changed - The custom event fired when the date selection changes.
+ * @fires cds-preview-date-picker-error - The custom event fired when an error occurs.
+ */
+declare class CDSDatePicker extends CDSDatePicker_base {
+    /**
+     * The slotted `<cds-date-input kind="from">`.
+     */
+    private _dateInteractNode;
+    /**
+     * The internal placeholder for the `value` property.
+     */
+    private _value;
+    /**
+     * The adapter for Web Component integration.
+     */
+    private _adapter;
+    /**
+     * Click outside handler for closing calendar
+     */
+    private _clickOutsideHandler;
+    /**
+     * Pending input target for post-render focus restoration
+     */
+    private _pendingRestoreFocusTo;
+    /**
+     * Timestamp of when calendar was last closed via Tab key
+     */
+    private _lastTabCloseTime;
+    /**
+     * True while programmatic focus restoration is in progress after date
+     * selection. Prevents the INPUT_FOCUS handler from auto-reopening the calendar.
+     */
+    private _restoringFocus;
+    /**
+     * @returns The effective date picker mode, determined by the child `<cds-preview-date-picker-input>`.
+     */
+    private get _mode();
+    /**
+     * Handles `${prefix}-preview-date-picker-changed` event on this element.
+     *
+     * @param {CustomEvent} root0 - The event object
+     * @param {object} root0.detail - The event detail
+     */
+    private _handleChange;
+    /**
+     * Handles calendar icon click event from date-picker-input
+     */
+    private _handleIconClick;
+    /**
+     * Handles input focus event from date-picker-input
+     *
+     * @param {CustomEvent} event - The focus event
+     */
+    private _handleInputFocus;
+    /**
+     * Handles input click event from date-picker-input.
+     * When the input already has focus, clicking it does not fire a new focus
+     * event.  This handler ensures the calendar reopens on click even when focus
+     * is already on the input.
+     *
+     * @param {CustomEvent} event - The click event
+     */
+    private _handleInputClick;
+    /**
+     * Handles input blur event from date-picker-input
+     *
+     * @param {CustomEvent} event - The blur event
+     */
+    private _handleInputBlur;
+    /**
+     * Handles form data event
+     *
+     * @param {FormDataEvent} event - The form data event
+     */
+    _handleFormdata(event: FormDataEvent): void;
+    /**
+     * Handles `slotchange` event in the `<slot>`.
+     *
+     * @param {Event} root0 - The event object
+     * @param {EventTarget} root0.target - The event target
+     */
+    private _handleSlotChange;
+    /**
+     * Handles state machine state changes
+     *
+     * @param {StateTransition} transition - The state transition
+     * @param {DatePickerState} transition.from - Previous state
+     * @param {DatePickerState} transition.to - New state
+     * @param {DatePickerContext} transition.context - Current context
+     */
+    private _handleStateChange;
+    /**
+     * Handles calendar date selection
+     *
+     * @param {CustomEvent} event - The date select event
+     */
+    private _handleCalendarDateSelect;
+    /**
+     * Handles calendar month change
+     *
+     * @param {CustomEvent} event - The month change event
+     */
+    private _handleCalendarMonthChange;
+    /**
+     * Show the calendar popover using Popover API
+     */
+    private _showCalendarPopover;
+    /**
+     * Hide the calendar popover using Popover API
+     */
+    private _hideCalendarPopover;
+    /**
+     * Initializes the date picker with a state machine.
+     */
+    private _initializeDatePicker;
+    /**
+     * Releases the date picker state machine.
+     */
+    private _releaseDatePicker;
+    /**
+     * Allows the user to enter a date directly into the input field
+     */
+    allowInput: boolean;
+    /**
+     * Controls whether the calendar dropdown closes upon selection.
+     */
+    closeOnSelect: boolean;
+    /**
+     * The date format.
+     */
+    dateFormat: string;
+    /**
+     * BCP 47 locale tag used to localize the calendar's month and weekday labels.
+     */
+    locale: string;
+    /**
+     * Controls the disabled state of the input
+     */
+    disabled: boolean;
+    /**
+     * The maximum date that a user can start picking from.
+     */
+    maxDate: string;
+    /**
+     * The minimum date that a user can start picking from.
+     */
+    minDate: string;
+    /**
+     * Name for the input in the `FormData`
+     */
+    name: string;
+    /**
+     * `true` if the date picker should be open.
+     */
+    open: boolean;
+    /**
+     * Specify if the component should be read-only
+     */
+    readonly: boolean;
+    /**
+     * The date(s) in ISO8601 format (date portion only), for range mode, '/' is used for separate start/end dates.
+     */
+    get value(): string;
+    /**
+     * Sets the value
+     *
+     * @param {string} value - The new value
+     */
+    set value(value: string);
+    /**
+     * Handle clicks outside the date picker to close the calendar
+     *
+     * @param {MouseEvent} event - The click event
+     */
+    /**
+     * Handle keyboard events for calendar navigation
+     *
+     * @param {KeyboardEvent} event - The keyboard event
+     */
+    private _handleKeyDown;
+    /**
+     * A ref to the exit sentinel element rendered at the bottom of the shadow root.
+     * It sits just after the calendar container in DOM order.  Normally it has
+     * tabindex="-1" so it is invisible to Tab.  When the user presses Tab from
+     * inside the calendar, _activateExitSentinel() sets it to tabindex="0" so
+     * the browser delivers the Tab keystroke to it naturally — no DOM scan needed.
+     * The focus handler then closes the calendar and restores tabindex="-1".
+     *
+     * Uses a CSS class rather than an id to avoid any document-level id concerns
+     * (shadow-DOM ids are already scoped, but a class is more conventional for
+     * internal Lit @query targets and matches the cds-- naming pattern used
+     * throughout this file).
+     *
+     * TODO (carbon monorepo migration): replace this hand-rolled sentinel with the
+     * upstream Carbon wrapFocus utility, which implements the same start/end sentinel
+     * pattern for focus trapping and exit.
+     * Upstream location: packages/react/src/internal/wrapFocus.ts (wrapFocus /
+     * wrapFocusWithoutSentinels exports).  Note that wrapFocus is designed to trap
+     * focus inside a container (modal pattern) rather than release it; the exit-only
+     * direction we need maps to the endTrapNode path in that utility.
+     */
+    private _exitSentinelNode;
+    /**
+     * Temporarily make the exit sentinel tabbable so the browser's native Tab
+     * handling delivers focus to it after the calendar.
+     */
+    private _activateExitSentinel;
+    /**
+     * Handle focus arriving on the exit sentinel.
+     * Close the calendar, then immediately remove the sentinel from the tab order
+     * so that a subsequent Tab from outside the date picker skips it entirely.
+     */
+    private _handleExitSentinelFocus;
+    /**
+     * Lifecycle callback when element is connected
+     */
+    connectedCallback(): void;
+    /**
+     * Lifecycle callback when element is disconnected
+     */
+    disconnectedCallback(): void;
+    /**
+     * Lifecycle callback when properties change
+     *
+     * @param {Map<string, unknown>} changedProperties - Map of changed properties
+     */
+    updated(changedProperties: Map<string, unknown>): void;
+    /**
+     * Renders the component
+     */
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * The CSS class for the calendar dropdown.
+     */
+    static get classCalendarContainer(): string;
+    /**
+     * The CSS class for the month navigator.
+     */
+    static get classMonth(): string;
+    /**
+     * The CSS class for the container of the weekdays.
+     */
+    static get classWeekdays(): string;
+    /**
+     * The CSS class for the container of the days.
+     */
+    static get classDays(): string;
+    /**
+     * The CSS class applied to each weekdays.
+     */
+    static get classWeekday(): string;
+    /**
+     * The CSS class applied to each days.
+     */
+    static get classDay(): string;
+    /**
+     * The CSS class applied to the "today" highlight if there are any dates selected.
+     */
+    static classNoBorder: string;
+    /**
+     * The default date format.
+     */
+    static defaultDateFormat: string;
+    /**
+     * A selector that will return the `<input>` to enter starting date.
+     */
+    static get selectorInputFrom(): string;
+    /**
+     * A selector that will return the `<input>` to enter end date.
+     */
+    static get selectorInputTo(): string;
+    /**
+     * The name of the custom event when an error occurs.
+     */
+    static get eventError(): string;
+    /**
+     * The name of the custom event fired when the date selection changes.
+     */
+    static get eventChange(): string;
+    /**
+     * The name of the custom event fired when the calendar icon is clicked.
+     */
+    static get eventIconClick(): string;
+    /**
+     * The name of the custom event fired when an input receives focus.
+     */
+    static get eventInputFocus(): string;
+    /**
+     * The name of the custom event fired when an input loses focus.
+     */
+    static get eventInputBlur(): string;
+    /**
+     * The name of the custom event fired when an input is clicked.
+     */
+    static get eventInputClick(): string;
+    static styles: any;
+}
+export default CDSDatePicker;
+//# sourceMappingURL=date-picker.d.ts.map

package/es/components/date-picker/next/components/date-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../../../src/components/date-picker/next/components/date-picker.ts"],"names":[],"mappings":"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"}