@carbon/web-components 2.60.0 → 2.61.0

package/es/components/date-picker/next/components/date-picker.js

@@ -0,0 +1,621 @@
+/**
+ * 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 "../../../../globals/settings.js";
+import { carbonElement } from "../../../../globals/decorators/carbon-element.js";
+import __decorate from "../../../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import HostListener from "../../../../globals/decorators/host-listener.js";
+import HostListenerMixin from "../../../../globals/mixins/host-listener.js";
+import FormMixin from "../../../../globals/mixins/form.js";
+import { WebComponentAdapter } from "../adapters/web-component-adapter.js";
+import date_picker_default$1 from "./date-picker.scss.js";
+import { LitElement, html } from "lit";
+import { property, query } from "lit/decorators.js";
+import { ClickOutsideHandler, DatePickerEvent, DatePickerState, formatPlainDate, mapKeyboardToStateMachineEvent, parseDateToPlainDate, parseISOToPlainDate } from "@carbon/utilities/date-picker";
+//#region src/components/date-picker/next/components/date-picker.ts
+/**
+* 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.
+*/
+/**
+* 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.
+*/
+let CDSDatePicker = class CDSDatePicker extends HostListenerMixin(FormMixin(LitElement)) {
+	constructor(..._args) {
+		super(..._args);
+		this._dateInteractNode = null;
+		this._adapter = null;
+		this._clickOutsideHandler = null;
+		this._pendingRestoreFocusTo = null;
+		this._lastTabCloseTime = 0;
+		this._restoringFocus = false;
+		this._handleChange = ({ detail }) => {
+			const { selectedDates } = detail;
+			if (selectedDates && Array.isArray(selectedDates)) this._value = selectedDates.filter((date) => date != null).map((date) => {
+				if (typeof date === "string") return date;
+				return date.toString();
+			}).join("/");
+		};
+		this._handleIconClick = () => {
+			if (this._adapter && !this.disabled && !this.readonly) this._adapter.send(DatePickerEvent.CALENDAR_ICON_CLICK);
+		};
+		this._handleInputFocus = (event) => {
+			if (this._adapter && !this.disabled && !this.readonly) {
+				const { inputType } = event.detail || {};
+				this._adapter.send(DatePickerEvent.INPUT_FOCUS, { inputType });
+				const timeSinceTabClose = Date.now() - this._lastTabCloseTime;
+				if (!this._restoringFocus && timeSinceTabClose >= 100) this._adapter.send(DatePickerEvent.CALENDAR_OPEN);
+			}
+		};
+		this._handleInputClick = (event) => {
+			if (this._adapter && !this.disabled && !this.readonly && !this.open) {
+				const { inputType } = event.detail || {};
+				this._adapter.send(DatePickerEvent.INPUT_FOCUS, { inputType });
+				this._adapter.send(DatePickerEvent.CALENDAR_OPEN);
+			}
+		};
+		this._handleInputBlur = (event) => {
+			if (this._adapter) {
+				const { inputType } = event.detail || {};
+				this._adapter.send(DatePickerEvent.INPUT_BLUR, { inputType });
+			}
+		};
+		this._handleStateChange = (transition) => {
+			const { to, from, context } = transition;
+			const newState = to;
+			if (newState === DatePickerState.CALENDAR_OPEN) {
+				this.open = true;
+				if (from === DatePickerState.CALENDAR_OPEN) this.requestUpdate();
+			} else if (newState === DatePickerState.SELECTING_END) {
+				this.open = true;
+				if (from === DatePickerState.SELECTING_END) this.requestUpdate();
+			} else if (newState === DatePickerState.IDLE) this.open = false;
+			else if (newState === DatePickerState.FOCUSED) if (from !== DatePickerState.CALENDAR_OPEN && from !== DatePickerState.SELECTING_END) this.open = false;
+			else this.open = context.isOpen ?? false;
+			else if (newState === DatePickerState.DATE_SELECTED) {
+				this.open = context.isOpen ?? false;
+				this.requestUpdate();
+			}
+			if (newState === DatePickerState.DATE_SELECTED || newState === DatePickerState.SELECTING_END || newState === DatePickerState.FOCUSED && from === DatePickerState.CALENDAR_OPEN && context.startDate) {
+				const selectedDates = context.endDate ? [context.startDate, context.endDate].filter((date) => date != null) : context.startDate ? [context.startDate] : [];
+				if (this._mode === "range") {
+					const { selectorInputFrom, selectorInputTo } = this.constructor;
+					const inputFrom = this.querySelector(selectorInputFrom);
+					const inputTo = this.querySelector(selectorInputTo);
+					if (newState === DatePickerState.DATE_SELECTED && context.startDate && context.endDate) {
+						if (inputFrom) inputFrom.value = formatPlainDate(context.startDate, context.dateFormat);
+						if (inputTo) inputTo.value = formatPlainDate(context.endDate, context.dateFormat);
+					} else if (context.lastFocusedInput === "to" && inputTo && context.endDate) inputTo.value = formatPlainDate(context.endDate, context.dateFormat);
+					else if (inputFrom && context.startDate) inputFrom.value = formatPlainDate(context.startDate, context.dateFormat);
+				} else if (this._dateInteractNode && context.startDate) this._dateInteractNode.value = formatPlainDate(context.startDate, context.dateFormat);
+				this.dispatchEvent(new CustomEvent(this.constructor.eventChange, {
+					bubbles: true,
+					composed: true,
+					detail: {
+						selectedDates,
+						value: this._value
+					}
+				}));
+			}
+			if (context.shouldRestoreFocus && context.restoreFocusTo) {
+				this._pendingRestoreFocusTo = context.restoreFocusTo;
+				this.updateComplete.then(() => {
+					const targetSelector = this._pendingRestoreFocusTo === "to" ? this.constructor.selectorInputTo : this.constructor.selectorInputFrom;
+					const targetInput = this.querySelector(targetSelector);
+					this._restoringFocus = true;
+					targetInput?.input?.focus();
+					this._restoringFocus = false;
+					this._adapter?.updateContext({
+						shouldRestoreFocus: false,
+						restoreFocusTo: null
+					});
+					this._pendingRestoreFocusTo = null;
+				});
+			}
+		};
+		this._handleCalendarDateSelect = (event) => {
+			const { date } = event.detail;
+			if (!this._adapter || !date) return;
+			const { _mode: mode } = this;
+			const context = this._adapter.getContext();
+			if (mode === "range") if (!context.startDate || context.endDate) this._adapter.send(DatePickerEvent.RANGE_START_SELECT, { date });
+			else this._adapter.send(DatePickerEvent.RANGE_END_SELECT, { date });
+			else this._adapter.send(DatePickerEvent.DATE_SELECT, { date });
+		};
+		this._handleCalendarMonthChange = (event) => {
+			const { month } = event.detail;
+			if (!this._adapter || !month) return;
+			const firstDayOfMonth = month.toPlainDate({ day: 1 });
+			this._adapter.updateContext({ viewDate: firstDayOfMonth });
+		};
+		this.allowInput = true;
+		this.closeOnSelect = true;
+		this.locale = "en";
+		this.disabled = false;
+		this.name = "";
+		this.open = false;
+		this.readonly = false;
+		this._handleKeyDown = (event) => {
+			if (!this._adapter) return;
+			const { key } = event;
+			if (key === "Tab") {
+				const composedPath = event.composedPath();
+				const target = composedPath[0];
+				const { selectorInputFrom, selectorInputTo } = this.constructor;
+				const inputFrom = this.querySelector(selectorInputFrom);
+				const inputTo = this.querySelector(selectorInputTo);
+				const isOnFirstInput = inputFrom && composedPath.includes(inputFrom);
+				const isOnSecondInput = inputTo && composedPath.includes(inputTo);
+				const calendar = this.shadowRoot?.querySelector("cds-preview-date-picker-calendar");
+				const isFocusInCalendar = target === calendar || target.closest?.("cds-preview-date-picker-calendar") !== null || composedPath.includes(calendar);
+				if (!this.open && (isOnFirstInput || isOnSecondInput) && !event.shiftKey) {
+					event.preventDefault();
+					event.stopPropagation();
+					this._lastTabCloseTime = 0;
+					this._adapter.send(DatePickerEvent.INPUT_FOCUS, { inputType: isOnSecondInput ? "to" : "from" });
+					this._adapter.send(DatePickerEvent.CALENDAR_OPEN);
+					this.requestUpdate();
+					return;
+				}
+				if (this.open && isOnFirstInput && !event.shiftKey) {
+					event.preventDefault();
+					event.stopPropagation();
+					const calendarDiv = (this.shadowRoot?.querySelector("cds-preview-date-picker-calendar"))?.shadowRoot?.querySelector(".cds--date-picker__calendar");
+					if (calendarDiv) setTimeout(() => {
+						calendarDiv.focus();
+					}, 0);
+					return;
+				}
+				if (this.open && isOnSecondInput && !event.shiftKey && this._mode === "range") {
+					event.preventDefault();
+					event.stopPropagation();
+					const calendarDiv = (this.shadowRoot?.querySelector("cds-preview-date-picker-calendar"))?.shadowRoot?.querySelector(".cds--date-picker__calendar");
+					if (calendarDiv) setTimeout(() => {
+						calendarDiv.focus();
+					}, 0);
+					return;
+				}
+				if (this.open && isFocusInCalendar && event.shiftKey) {
+					event.preventDefault();
+					if (this._mode === "range") {
+						if ((this._adapter?.getContext())?.lastFocusedInput === "to" && inputTo) inputTo.input?.focus();
+						else if (inputFrom) inputFrom.input?.focus();
+					} else if (inputFrom) inputFrom.input?.focus();
+					return;
+				}
+				if (this.open && isFocusInCalendar && !event.shiftKey) {
+					if (this._mode === "range") {
+						if ((this._adapter?.getContext())?.lastFocusedInput === "from" && inputTo) {
+							event.preventDefault();
+							inputTo.input?.focus();
+							return;
+						}
+					}
+					this._lastTabCloseTime = Date.now();
+					this._adapter.send(DatePickerEvent.TAB_KEY);
+					this._activateExitSentinel();
+					return;
+				}
+			}
+			if (!this.open) return;
+			const target = event.composedPath()[0];
+			if (target === this.shadowRoot?.querySelector("input")) return;
+			if (!(target.classList?.contains("cds--date-picker__calendar") || target.closest?.(".cds--date-picker__calendar") !== null)) return;
+			const context = this._adapter.getContext();
+			const currentState = this._adapter.getState();
+			const mappedEvent = mapKeyboardToStateMachineEvent({
+				key,
+				shiftKey: event.shiftKey,
+				mode: this._mode === "range" ? "range" : "single",
+				state: currentState,
+				focusedDate: context.focusedDate
+			});
+			if (mappedEvent) {
+				if (mappedEvent.preventDefault) event.preventDefault();
+				if (mappedEvent.eventType) this._adapter.send(mappedEvent.eventType, mappedEvent.payload);
+				if (key === "Escape") this.open = false;
+				return;
+			}
+		};
+		this._handleExitSentinelFocus = () => {
+			if (this._exitSentinelNode) this._exitSentinelNode.tabIndex = -1;
+			if (this.open) this._adapter?.send(DatePickerEvent.TAB_KEY);
+		};
+	}
+	/**
+	* @returns The effective date picker mode, determined by the child `<cds-preview-date-picker-input>`.
+	*/
+	get _mode() {
+		const { selectorInputTo } = this.constructor;
+		if (this.querySelector(selectorInputTo)) return "range";
+		if (this.querySelector(`cds-preview-date-picker-input[kind="single"]`)) return "single";
+		return "simple";
+	}
+	/**
+	* Handles form data event
+	*
+	* @param {FormDataEvent} event - The form data event
+	*/
+	_handleFormdata(event) {
+		const { formData } = event;
+		const { disabled, name, value } = this;
+		if (!disabled) formData.append(name, value);
+	}
+	/**
+	* Handles `slotchange` event in the `<slot>`.
+	*
+	* @param {Event} root0 - The event object
+	* @param {EventTarget} root0.target - The event target
+	*/
+	_handleSlotChange({ target }) {
+		const { _dateInteractNode: oldDateInteractNode } = this;
+		const dateInteractNode = target.assignedNodes().find((node) => node.nodeType === Node.ELEMENT_NODE && node.matches(this.constructor.selectorInputFrom));
+		if (oldDateInteractNode !== dateInteractNode) {
+			this._dateInteractNode = dateInteractNode;
+			this._initializeDatePicker();
+		}
+	}
+	/**
+	* Show the calendar popover using Popover API
+	*/
+	_showCalendarPopover() {
+		const popover = this.shadowRoot?.querySelector(`#cds-preview-date-picker-calendar-popover`);
+		if (popover && typeof popover.showPopover === "function") try {
+			popover.showPopover();
+		} catch (e) {
+			console.warn("Could not show popover:", e);
+		}
+	}
+	/**
+	* Hide the calendar popover using Popover API
+	*/
+	_hideCalendarPopover() {
+		const popover = this.shadowRoot?.querySelector(`#cds-preview-date-picker-calendar-popover`);
+		if (popover && typeof popover.hidePopover === "function") try {
+			popover.hidePopover();
+		} catch (e) {
+			console.warn("Could not hide popover:", e);
+		}
+	}
+	/**
+	* Initializes the date picker with a state machine.
+	*/
+	_initializeDatePicker() {
+		this._releaseDatePicker();
+		const { _dateInteractNode: dateInteractNode, _mode: mode } = this;
+		if (!dateInteractNode || !dateInteractNode.input || mode === "simple") return;
+		this._adapter = new WebComponentAdapter({
+			component: this,
+			initialContext: {
+				mode: mode === "range" ? "range" : "single",
+				dateFormat: this.dateFormat || "m/d/Y",
+				allowInput: this.allowInput,
+				closeOnSelect: this.closeOnSelect,
+				value: this.value || "",
+				startDate: null,
+				endDate: null,
+				isOpen: false,
+				isFocused: false,
+				isDisabled: this.disabled,
+				isReadonly: this.readonly,
+				isInvalid: false,
+				lastFocusedInput: null,
+				minDate: parseDateToPlainDate(this.minDate),
+				maxDate: parseDateToPlainDate(this.maxDate)
+			},
+			onStateChange: this._handleStateChange
+		});
+		if (this.value) {
+			const dates = this.value.split("/").filter(Boolean);
+			if (dates.length > 0) {
+				this._adapter.send(mode === "range" ? DatePickerEvent.RANGE_START_SELECT : DatePickerEvent.DATE_SELECT, { date: dates[0] });
+				if (mode === "range" && dates.length > 1) this._adapter.send(DatePickerEvent.RANGE_END_SELECT, { date: dates[1] });
+			}
+		}
+	}
+	/**
+	* Releases the date picker state machine.
+	*/
+	_releaseDatePicker() {
+		this._pendingRestoreFocusTo = null;
+		if (this._adapter) {
+			this._adapter.destroy();
+			this._adapter = null;
+		}
+	}
+	/**
+	* The date(s) in ISO8601 format (date portion only), for range mode, '/' is used for separate start/end dates.
+	*/
+	get value() {
+		return this._value;
+	}
+	/**
+	* Sets the value
+	*
+	* @param {string} value - The new value
+	*/
+	set value(value) {
+		const { _value: oldValue } = this;
+		this._value = value;
+		this.requestUpdate("value", oldValue);
+	}
+	/**
+	* Temporarily make the exit sentinel tabbable so the browser's native Tab
+	* handling delivers focus to it after the calendar.
+	*/
+	_activateExitSentinel() {
+		if (this._exitSentinelNode) this._exitSentinelNode.tabIndex = 0;
+	}
+	/**
+	* Lifecycle callback when element is connected
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+		this._initializeDatePicker();
+		this._clickOutsideHandler = new ClickOutsideHandler({
+			isOpen: this.open,
+			/**
+			* Check if a node is contained within the date picker
+			* @param {Node} node - The node to check
+			* @returns {boolean} True if the node is within the date picker
+			*/
+			containsNode: (node) => {
+				return node === this || this.contains(node) || (this.shadowRoot?.contains(node) ?? false);
+			},
+			/**
+			* Handle clicks outside the date picker
+			*/
+			onOutsideClick: () => {
+				if (this._adapter) this._adapter.send(DatePickerEvent.OUTSIDE_CLICK);
+			},
+			useCapture: true,
+			attachDelay: 0
+		});
+		this._clickOutsideHandler.attach();
+		document.addEventListener("keydown", this._handleKeyDown, true);
+	}
+	/**
+	* Lifecycle callback when element is disconnected
+	*/
+	disconnectedCallback() {
+		this._clickOutsideHandler?.detach();
+		this._clickOutsideHandler = null;
+		document.removeEventListener("keydown", this._handleKeyDown, true);
+		this._releaseDatePicker();
+		super.disconnectedCallback();
+	}
+	/**
+	* Lifecycle callback when properties change
+	*
+	* @param {Map<string, unknown>} changedProperties - Map of changed properties
+	*/
+	updated(changedProperties) {
+		if (changedProperties.has("open")) this._clickOutsideHandler?.updateConfig({ isOpen: this.open });
+		if (this._adapter) {
+			if (changedProperties.has("minDate") || changedProperties.has("maxDate")) this._adapter.updateContext({
+				minDate: parseDateToPlainDate(this.minDate),
+				maxDate: parseDateToPlainDate(this.maxDate)
+			});
+			if (changedProperties.has("open")) {
+				if (this.open && !this.readonly) {
+					this._adapter.send(DatePickerEvent.CALENDAR_OPEN);
+					this._showCalendarPopover();
+				} else if (!this.open) {
+					this._adapter.send(DatePickerEvent.CALENDAR_CLOSE);
+					this._hideCalendarPopover();
+				}
+			}
+			if (changedProperties.has("closeOnSelect")) this._adapter.updateContext({ closeOnSelect: this.closeOnSelect });
+			if (changedProperties.has("disabled") || changedProperties.has("readonly")) {
+				const { selectorInputFrom, selectorInputTo } = this.constructor;
+				[this.querySelector(selectorInputFrom), this.querySelector(selectorInputTo)].forEach((input) => {
+					if (input) {
+						input.disabled = this.disabled;
+						input.readonly = this.readonly;
+					}
+				});
+				this._adapter.updateContext({
+					isDisabled: this.disabled,
+					isReadonly: this.readonly
+				});
+			}
+			if (changedProperties.has("value") && this.value) {
+				const dates = this.value.split("/").filter(Boolean);
+				if (dates.length > 0) {
+					const startDate = parseISOToPlainDate(dates[0]);
+					if (startDate) {
+						this._adapter.send(this._mode === "range" ? DatePickerEvent.RANGE_START_SELECT : DatePickerEvent.DATE_SELECT, { date: startDate });
+						if (this._mode === "range" && dates.length > 1) {
+							const endDate = parseISOToPlainDate(dates[1]);
+							if (endDate) this._adapter.send(DatePickerEvent.RANGE_END_SELECT, { date: endDate });
+						}
+					}
+				}
+			}
+		}
+	}
+	/**
+	* Renders the component
+	*/
+	render() {
+		const { _handleSlotChange: handleSlotChange, _mode: mode, open } = this;
+		const context = this._adapter?.getContext();
+		const selectedDates = context?.endDate ? [context.startDate, context.endDate].filter((date) => Boolean(date)) : context?.startDate ? [context.startDate] : [];
+		return html`
+      <slot @slotchange="${handleSlotChange}"></slot>
+      <div
+        id="floating-menu-container"
+        class="${"cds"}--date-picker__calendar-container">
+        ${mode !== "simple" && open ? html`
+              <cds-preview-date-picker-calendar
+                .rangeMode="${mode === "range"}"
+                .dateFormat="${this.dateFormat || "m/d/Y"}"
+                .locale="${this.locale}"
+                .minDate="${parseDateToPlainDate(this.minDate) || void 0}"
+                .maxDate="${parseDateToPlainDate(this.maxDate) || void 0}"
+                .selectedDates="${selectedDates}"
+                .viewDate="${context?.viewDate || void 0}"
+                .focusedDate="${context?.focusedDate || null}"
+                @cds-preview-date-picker-calendar-date-select="${this._handleCalendarDateSelect}"
+                @cds-preview-date-picker-calendar-month-change="${this._handleCalendarMonthChange}">
+              </cds-preview-date-picker-calendar>
+            ` : ""}
+      </div>
+      <!--
+        Exit sentinel: sits just after the calendar container in shadow-DOM tab
+        order.  Normally tabindex="-1" (invisible to Tab).  _activateExitSentinel()
+        sets it to tabindex="0" when the user presses Tab from the calendar, so the
+        browser delivers that Tab keystroke here naturally.  The focus handler then
+        closes the calendar and restores tabindex="-1".
+      -->
+      <span
+        class="${"cds"}--date-picker__exit-sentinel"
+        tabindex="-1"
+        aria-hidden="true"
+        @focus="${this._handleExitSentinelFocus}"></span>
+    `;
+	}
+	/**
+	* The CSS class for the calendar dropdown.
+	*/
+	static get classCalendarContainer() {
+		return `cds--date-picker__calendar`;
+	}
+	/**
+	* The CSS class for the month navigator.
+	*/
+	static get classMonth() {
+		return `cds--date-picker__month`;
+	}
+	/**
+	* The CSS class for the container of the weekdays.
+	*/
+	static get classWeekdays() {
+		return `cds--date-picker__weekdays`;
+	}
+	/**
+	* The CSS class for the container of the days.
+	*/
+	static get classDays() {
+		return `cds--date-picker__days`;
+	}
+	/**
+	* The CSS class applied to each weekdays.
+	*/
+	static get classWeekday() {
+		return `cds--date-picker__weekday`;
+	}
+	/**
+	* The CSS class applied to each days.
+	*/
+	static get classDay() {
+		return `cds--date-picker__day`;
+	}
+	static {
+		this.classNoBorder = "no-border";
+	}
+	static {
+		this.defaultDateFormat = "m/d/Y";
+	}
+	/**
+	* A selector that will return the `<input>` to enter starting date.
+	*/
+	static get selectorInputFrom() {
+		return `cds-preview-date-picker-input,cds-preview-date-picker-input[kind="from"]`;
+	}
+	/**
+	* A selector that will return the `<input>` to enter end date.
+	*/
+	static get selectorInputTo() {
+		return `cds-preview-date-picker-input[kind="to"]`;
+	}
+	/**
+	* The name of the custom event when an error occurs.
+	*/
+	static get eventError() {
+		return `cds-preview-date-picker-error`;
+	}
+	/**
+	* The name of the custom event fired when the date selection changes.
+	*/
+	static get eventChange() {
+		return `cds-preview-date-picker-changed`;
+	}
+	/**
+	* The name of the custom event fired when the calendar icon is clicked.
+	*/
+	static get eventIconClick() {
+		return `cds-preview-date-picker-icon-click`;
+	}
+	/**
+	* The name of the custom event fired when an input receives focus.
+	*/
+	static get eventInputFocus() {
+		return `cds-preview-date-picker-input-focus`;
+	}
+	/**
+	* The name of the custom event fired when an input loses focus.
+	*/
+	static get eventInputBlur() {
+		return `cds-preview-date-picker-input-blur`;
+	}
+	/**
+	* The name of the custom event fired when an input is clicked.
+	*/
+	static get eventInputClick() {
+		return `cds-preview-date-picker-input-click`;
+	}
+	static {
+		this.styles = date_picker_default$1;
+	}
+};
+__decorate([HostListener("eventChange")], CDSDatePicker.prototype, "_handleChange", void 0);
+__decorate([HostListener("eventIconClick")], CDSDatePicker.prototype, "_handleIconClick", void 0);
+__decorate([HostListener("eventInputFocus")], CDSDatePicker.prototype, "_handleInputFocus", void 0);
+__decorate([HostListener("eventInputClick")], CDSDatePicker.prototype, "_handleInputClick", void 0);
+__decorate([HostListener("eventInputBlur")], CDSDatePicker.prototype, "_handleInputBlur", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "allow-input"
+})], CDSDatePicker.prototype, "allowInput", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "close-on-select"
+})], CDSDatePicker.prototype, "closeOnSelect", void 0);
+__decorate([property({ attribute: "date-format" })], CDSDatePicker.prototype, "dateFormat", void 0);
+__decorate([property({ reflect: true })], CDSDatePicker.prototype, "locale", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSDatePicker.prototype, "disabled", void 0);
+__decorate([property({ attribute: "max-date" })], CDSDatePicker.prototype, "maxDate", void 0);
+__decorate([property({ attribute: "min-date" })], CDSDatePicker.prototype, "minDate", void 0);
+__decorate([property()], CDSDatePicker.prototype, "name", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSDatePicker.prototype, "open", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSDatePicker.prototype, "readonly", void 0);
+__decorate([property()], CDSDatePicker.prototype, "value", null);
+__decorate([query(`.cds--date-picker__exit-sentinel`)], CDSDatePicker.prototype, "_exitSentinelNode", void 0);
+CDSDatePicker = __decorate([carbonElement(`cds-preview-date-picker`)], CDSDatePicker);
+var date_picker_default = CDSDatePicker;
+//#endregion
+export { date_picker_default as default };
+
+//# sourceMappingURL=date-picker.js.map