Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
require("../../_virtual/_rolldown/runtime.cjs");
const require_safe_custom_element = require("../../shared/safe-custom-element.cjs");
const require_index = require("../../shared/tailwind-element/index.cjs");
const require_decorate = require("../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.cjs");
require("../lukso-icon/index.cjs");
require("../lukso-form-description/index.cjs");
require("../lukso-form-error/index.cjs");
require("../lukso-form-label/index.cjs");
const require_uniq_id = require("../../shared/tools/uniq-id.cjs");
require("../lukso-dropdown/index.cjs");
require("../lukso-dropdown-option/index.cjs");
require("../lukso-date-picker/index.cjs");
const require_style = require("./style.css.cjs");
let lit = require("lit");
let lit_decorators_js = require("lit/decorators.js");
let tailwind_variants = require("tailwind-variants");
//#region src/components/lukso-input-date-picker/index.ts
var LuksoInputDatePicker = class LuksoInputDatePicker extends require_index.TailwindStyledElement(require_style.default) {
	constructor(..._args) {
		super(..._args);
		this.locale = typeof navigator !== "undefined" ? navigator.language : "en-US";
		this.size = "large";
		this.placeholder = "";
		this.showTime = true;
		this.dateFormat = "short";
		this.timeFormat = "auto";
		this.weekStartDay = "monday";
		this.isDisabled = false;
		this.isReadonly = false;
		this.isFullWidth = false;
		this.borderless = false;
		this.position = "auto";
		this.variant = "default";
		this._isOpen = false;
		this._presetsParsed = [];
		this._activePreset = null;
		this._isPresetOpen = false;
		this._pendingPreset = null;
		this._inputId = require_uniq_id.uniqId();
		this.wrapperStyles = (0, tailwind_variants.tv)({
			base: "group",
			variants: {
				isFullWidth: {
					true: "w-full",
					false: "w-[350px]"
				},
				size: {
					small: "",
					medium: "",
					large: "",
					"x-large": ""
				}
			},
			compoundVariants: [{
				isFullWidth: false,
				size: "small",
				class: "w-[190px]"
			}]
		});
		this.inputStyles = (0, tailwind_variants.tv)({
			base: `border border-solid select-none
      outline-none transition-all duration-150 text-neutral-20 cursor-pointer
      border-neutral-90 group-hover:border-neutral-35 flex items-center w-full`,
			variants: {
				isDisabled: { true: "cursor-not-allowed text-neutral-60 group-hover:border-neutral-90" },
				hasError: { true: "border-red-85 group-hover:border-red-65" },
				borderless: { true: "border-0" },
				size: {
					small: "h-7 px-3 py-2 pr-8 paragraph-inter-12-regular rounded-8",
					medium: "h-10 px-3 py-3 pr-11 paragraph-inter-14-regular rounded-10",
					large: "h-12 px-4 py-3 pr-11 paragraph-inter-14-regular rounded-12",
					"x-large": "h-17 px-5 py-5 pr-14 paragraph-inter-16-regular rounded-[14px]"
				},
				variant: {
					default: "bg-neutral-100",
					subtle: "bg-neutral-97"
				}
			}
		});
		this.iconStyles = (0, tailwind_variants.tv)({
			base: "absolute right-0 transition cursor-pointer",
			variants: {
				isDisabled: { true: "opacity-60 cursor-not-allowed" },
				isOpen: { true: "rotate-180" },
				size: {
					small: "mr-2",
					medium: "mr-3",
					large: "mr-3",
					"x-large": "mr-4"
				}
			}
		});
	}
	connectedCallback() {
		super.connectedCallback();
		this._boundOutsideClick = this._handleOutsideClick.bind(this);
		window.addEventListener("click", this._boundOutsideClick);
	}
	disconnectedCallback() {
		super.disconnectedCallback();
		if (this._boundOutsideClick) window.removeEventListener("click", this._boundOutsideClick);
	}
	willUpdate(changed) {
		if (changed.has("presets")) try {
			const parsed = this.presets ? JSON.parse(this.presets) : [];
			this._presetsParsed = Array.isArray(parsed) ? parsed : [];
			if (!Array.isArray(parsed)) console.warn("[lukso-input-date-picker] `presets` must be a JSON array");
		} catch {
			console.warn("[lukso-input-date-picker] Invalid JSON in `presets` prop");
			this._presetsParsed = [];
		}
		if (changed.has("value") || changed.has("presets")) {
			if (!changed.has("presets") && this._activePreset && this.value === this._internalValue) return;
			const parsedValue = this.value?.startsWith("{") ? (() => {
				try {
					return JSON.parse(this.value);
				} catch {
					return null;
				}
			})() : null;
			const matchedPreset = this._presetsParsed.find((preset) => {
				if (typeof preset.time === "string") return preset.time === this.value;
				if (parsedValue !== null && typeof parsedValue === "object" && typeof parsedValue.amount === "number" && typeof parsedValue.unit === "string") return this._presetTimesMatch(preset.time, parsedValue);
				return false;
			});
			if (matchedPreset) {
				this._activePreset = matchedPreset;
				this._internalValue = matchedPreset.time !== "pick" ? this._resolvePresetTime(matchedPreset.time) : this._internalValue;
			} else {
				this._activePreset = null;
				this._internalValue = this.value;
			}
		}
	}
	/**
	* Compares two preset time values for structural equality.
	* For object presets, compares amount and unit rather than stringified form
	* so that key-insertion order in persisted JSON does not cause mismatches.
	*/
	_presetTimesMatch(a, b) {
		if (typeof a === "string" || typeof b === "string") return a === b;
		return a.amount === b.amount && a.unit === b.unit;
	}
	/**
	* Converts a preset time value into an ISO 8601 local-time string.
	* Uses local time (not UTC) to match lukso-date-picker's internal _buildIsoValue().
	*/
	_resolvePresetTime(time) {
		const now = /* @__PURE__ */ new Date();
		const toLocalISO = (date) => {
			const pad = (number) => String(number).padStart(2, "0");
			return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
		};
		if (time === "now") return toLocalISO(now);
		if (time === "forever") return "";
		if (time === "pick") return this._internalValue ?? "";
		const date = new Date(now);
		const { amount, unit } = time;
		switch (unit) {
			case "minute":
				date.setMinutes(date.getMinutes() + amount);
				break;
			case "hour":
				date.setHours(date.getHours() + amount);
				break;
			case "day":
				date.setDate(date.getDate() + amount);
				break;
			case "week":
				date.setDate(date.getDate() + amount * 7);
				break;
			case "month":
				date.setMonth(date.getMonth() + amount);
				break;
			case "year":
				date.setFullYear(date.getFullYear() + amount);
				break;
			default:
				console.warn(`[lukso-input-date-picker] Unknown preset unit "${time.unit}" — returning current time`);
				return toLocalISO(now);
		}
		return toLocalISO(date);
	}
	_formatDisplayValue() {
		if (this._activePreset && (this._activePreset.time === "now" || this._activePreset.time === "forever")) return this._activePreset.label;
		if (!this._internalValue) return "";
		try {
			const d = new Date(this._internalValue);
			if (isNaN(d.getTime())) return "";
			const dateOpts = this.dateFormat === "long" ? {
				month: "long",
				day: "numeric",
				year: "numeric"
			} : {
				month: "short",
				day: "numeric",
				year: "numeric"
			};
			const dateStr = new Intl.DateTimeFormat(this.locale, dateOpts).format(d);
			if (!this.showTime) return dateStr;
			let hour12;
			if (this.timeFormat === "12h") hour12 = true;
			else if (this.timeFormat === "24h") hour12 = false;
			else hour12 = new Intl.DateTimeFormat(this.locale, { hour: "numeric" }).resolvedOptions().hour12;
			return `${dateStr} ${new Intl.DateTimeFormat(this.locale, {
				hour: "2-digit",
				minute: "2-digit",
				hour12
			}).format(d)}`;
		} catch {
			return this._internalValue ?? "";
		}
	}
	_stopDropdownChange(event) {
		event.stopPropagation();
	}
	/**
	* Closes open dropdowns when the user clicks outside this component.
	*
	* When a relative preset is pending (calendar open after preset selection),
	* clicking outside always commits the resolved date — the preset pre-fills
	* the date immediately, so outside click means "confirm as-is".
	*/
	_handleOutsideClick(event) {
		if (!event.composedPath().includes(this)) {
			this._isOpen = false;
			this._isPresetOpen = false;
			if (this._pendingPreset) {
				const committedPreset = this._pendingPreset;
				this._activePreset = committedPreset;
				this._pendingPreset = null;
				this.dispatchEvent(new CustomEvent("on-change", {
					detail: {
						value: this._internalValue ?? "",
						preset: committedPreset.time,
						event
					},
					bubbles: true,
					composed: true
				}));
			}
		}
	}
	_handleInputClick() {
		if (this.isDisabled || this.isReadonly) return;
		if (this._presetsParsed.length > 0) {
			this._isPresetOpen = !this._isPresetOpen;
			this._isOpen = false;
		} else this._isOpen = !this._isOpen;
	}
	/**
	* Handles preset selection from the dropdown.
	*
	* - `now` / `forever`: emit immediately without opening the calendar.
	* - `pick`: open blank calendar (existing behaviour).
	* - Relative object presets: open the calendar pre-navigated to the resolved
	*   date so the user can adjust before confirming. The preset is stored in
	*   `_pendingPreset` and adopted into `_activePreset` once the user picks a
	*   date from the calendar or clicks outside (which commits the pre-filled date).
	*/
	_handlePresetSelect(preset, event) {
		this._isPresetOpen = false;
		if (preset.time === "now" || preset.time === "forever") {
			this._activePreset = preset;
			this._pendingPreset = null;
			const resolvedDate = this._resolvePresetTime(preset.time);
			this._internalValue = resolvedDate;
			this.dispatchEvent(new CustomEvent("on-change", {
				detail: {
					value: resolvedDate,
					preset: preset.time,
					event
				},
				bubbles: true,
				composed: true
			}));
			return;
		}
		if (preset.time === "pick") {
			this._activePreset = preset;
			this._pendingPreset = null;
			this._isOpen = true;
			return;
		}
		this._pendingPreset = preset;
		this._activePreset = null;
		this._internalValue = this._resolvePresetTime(preset.time);
		this._isOpen = true;
	}
	/**
	* Handles date selection from the calendar.
	*
	* When a `_pendingPreset` exists (i.e. the calendar was opened via a relative
	* preset), it is adopted into `_activePreset` on close so the round-trip guard
	* in `willUpdate` keeps the preset state stable.
	*/
	_handleDatePickerChange(e) {
		this._internalValue = e.detail.value;
		if (!this.showTime || e.detail.event instanceof MouseEvent && e.detail.event.type === "click") {
			this._isOpen = false;
			if (this._pendingPreset) {
				this._activePreset = this._pendingPreset;
				this._pendingPreset = null;
			}
		}
		this.dispatchEvent(new CustomEvent("on-change", {
			detail: {
				value: this._internalValue,
				preset: (this._pendingPreset ?? this._activePreset)?.time,
				event: e.detail.event
			},
			bubbles: true,
			composed: true
		}));
	}
	_renderStandardTrigger(displayValue, inputClass, iconClass) {
		return lit.html`
      <div class="flex relative items-center w-full">
        <div
          id=${this._inputId}
          class=${inputClass}
          @click=${this._handleInputClick}
          aria-haspopup="true"
          aria-expanded=${this._isOpen ? "true" : "false"}
          role="combobox"
        >
          ${displayValue ? displayValue : this.placeholder ? lit.html`<span class="text-neutral-70">${this.placeholder}</span>` : lit.nothing}
        </div>
        <lukso-icon
          name="arrow-down-sm"
          class=${iconClass}
          @click=${this._handleInputClick}
        ></lukso-icon>
      </div>

      <!-- Date picker dropdown: always in DOM to preserve internal date state -->
      <lukso-dropdown
        ?is-open=${this._isOpen}
        @on-change=${this._stopDropdownChange}
        is-open-on-outside-click
        position=${this.position}
        ?is-full-width=${this.isFullWidth}
        size="large"
        custom-class="min-w-[300px] min-h-[390px]"
        max-height="500"
      >
        <lukso-date-picker
          value=${this._internalValue ?? lit.nothing}
          min=${this.min ?? lit.nothing}
          max=${this.max ?? lit.nothing}
          locale=${this.locale}
          size="large"
          ?show-time=${this.showTime}
          ?show-summary=${this.showTime}
          date-format=${this.dateFormat}
          time-format=${this.timeFormat}
          week-start-day=${this.weekStartDay}
          ?is-disabled=${this.isDisabled}
          ?is-full-width=${this.isFullWidth}
          selected-bg-color=${this.selectedBgColor ?? lit.nothing}
          selected-text-color=${this.selectedTextColor ?? lit.nothing}
          @on-change=${this._handleDatePickerChange}
        ></lukso-date-picker>
      </lukso-dropdown>
    `;
	}
	_renderPresetTrigger(displayValue, inputClass, iconClass) {
		return lit.html`
      <div class="flex relative items-center w-full">
        <div
          id=${this._inputId}
          class=${inputClass}
          @click=${this._handleInputClick}
          aria-haspopup="listbox"
          aria-expanded=${this._isPresetOpen ? "true" : "false"}
          role="combobox"
        >
          ${displayValue ? displayValue : this.placeholder ? lit.html`<span class="text-neutral-70">${this.placeholder}</span>` : lit.nothing}
        </div>
        <lukso-icon
          name="arrow-down-sm"
          class=${iconClass}
          @click=${this._handleInputClick}
        ></lukso-icon>
      </div>

      <!-- Preset options list -->
      <lukso-dropdown
        ?is-open=${this._isPresetOpen}
        @on-change=${this._stopDropdownChange}
        is-open-on-outside-click
        position=${this.position}
        ?is-full-width=${this.isFullWidth}
        size=${this.size}
      >
        ${this._presetsParsed.map((preset) => lit.html`
            <lukso-dropdown-option
              ?is-selected=${this._activePreset != null && this._presetTimesMatch(this._activePreset.time, preset.time)}
              size=${this.size}
              ?is-disabled=${this.isDisabled}
              ?is-readonly=${this.isReadonly}
              @click=${(event) => this._handlePresetSelect(preset, event)}
            >
              ${preset.label}
            </lukso-dropdown-option>
          `)}
      </lukso-dropdown>

      <!-- Calendar: rendered for 'pick' preset or while a relative preset is pending user confirmation -->
      ${this._activePreset?.time === "pick" || this._pendingPreset != null ? lit.html`
            <lukso-dropdown
              ?is-open=${this._isOpen}
              @on-change=${this._stopDropdownChange}
              is-open-on-outside-click
              position=${this.position}
              ?is-full-width=${this.isFullWidth}
              size="large"
              custom-class="min-w-[300px] min-h-[390px]"
              max-height="500"
            >
              <lukso-date-picker
                value=${this._internalValue ?? lit.nothing}
                min=${this.min ?? lit.nothing}
                max=${this.max ?? lit.nothing}
                locale=${this.locale}
                size="large"
                ?show-time=${this.showTime}
                ?show-summary=${this.showTime}
                date-format=${this.dateFormat}
                time-format=${this.timeFormat}
                week-start-day=${this.weekStartDay}
                ?is-disabled=${this.isDisabled}
                ?is-full-width=${this.isFullWidth}
                selected-bg-color=${this.selectedBgColor ?? lit.nothing}
                selected-text-color=${this.selectedTextColor ?? lit.nothing}
                @on-change=${this._handleDatePickerChange}
              ></lukso-date-picker>
            </lukso-dropdown>
          ` : lit.nothing}
    `;
	}
	render() {
		const displayValue = this._formatDisplayValue();
		const wrapperClass = this.wrapperStyles({
			isFullWidth: this.isFullWidth,
			size: this.size
		});
		const inputClass = this.inputStyles({
			isDisabled: this.isDisabled,
			hasError: !!this.error,
			borderless: this.borderless,
			size: this.size,
			variant: this.variant
		});
		const iconClass = this.iconStyles({
			isDisabled: this.isDisabled,
			isOpen: this._presetsParsed.length > 0 ? this._isPresetOpen : this._isOpen,
			size: this.size
		});
		return lit.html`
      <div class="relative w-[inherit]">
        <lukso-form-label label=${this.label ?? lit.nothing}></lukso-form-label>
        <lukso-form-description
          description=${this.description ?? lit.nothing}
        ></lukso-form-description>

        <div class=${wrapperClass}>
          ${this._presetsParsed.length > 0 ? this._renderPresetTrigger(displayValue, inputClass, iconClass) : this._renderStandardTrigger(displayValue, inputClass, iconClass)}
        </div>

        <lukso-form-error error=${this.error ?? lit.nothing}></lukso-form-error>
      </div>
    `;
	}
};
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoInputDatePicker.prototype, "value", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoInputDatePicker.prototype, "min", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoInputDatePicker.prototype, "max", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoInputDatePicker.prototype, "locale", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoInputDatePicker.prototype, "size", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoInputDatePicker.prototype, "placeholder", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoInputDatePicker.prototype, "label", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoInputDatePicker.prototype, "description", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoInputDatePicker.prototype, "error", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Boolean,
	attribute: "show-time"
})], LuksoInputDatePicker.prototype, "showTime", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: String,
	attribute: "date-format"
})], LuksoInputDatePicker.prototype, "dateFormat", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: String,
	attribute: "time-format"
})], LuksoInputDatePicker.prototype, "timeFormat", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: String,
	attribute: "week-start-day"
})], LuksoInputDatePicker.prototype, "weekStartDay", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Boolean,
	attribute: "is-disabled"
})], LuksoInputDatePicker.prototype, "isDisabled", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Boolean,
	attribute: "is-readonly"
})], LuksoInputDatePicker.prototype, "isReadonly", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Boolean,
	attribute: "is-full-width"
})], LuksoInputDatePicker.prototype, "isFullWidth", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: Boolean })], LuksoInputDatePicker.prototype, "borderless", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: String,
	attribute: "selected-bg-color"
})], LuksoInputDatePicker.prototype, "selectedBgColor", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: String,
	attribute: "selected-text-color"
})], LuksoInputDatePicker.prototype, "selectedTextColor", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoInputDatePicker.prototype, "position", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoInputDatePicker.prototype, "presets", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoInputDatePicker.prototype, "variant", void 0);
require_decorate.__decorate([(0, lit_decorators_js.state)()], LuksoInputDatePicker.prototype, "_isOpen", void 0);
require_decorate.__decorate([(0, lit_decorators_js.state)()], LuksoInputDatePicker.prototype, "_internalValue", void 0);
require_decorate.__decorate([(0, lit_decorators_js.state)()], LuksoInputDatePicker.prototype, "_presetsParsed", void 0);
require_decorate.__decorate([(0, lit_decorators_js.state)()], LuksoInputDatePicker.prototype, "_activePreset", void 0);
require_decorate.__decorate([(0, lit_decorators_js.state)()], LuksoInputDatePicker.prototype, "_isPresetOpen", void 0);
require_decorate.__decorate([(0, lit_decorators_js.state)()], LuksoInputDatePicker.prototype, "_pendingPreset", void 0);
LuksoInputDatePicker = require_decorate.__decorate([require_safe_custom_element.safeCustomElement("lukso-input-date-picker")], LuksoInputDatePicker);
//#endregion
Object.defineProperty(exports, "LuksoInputDatePicker", {
	enumerable: true,
	get: function() {
		return LuksoInputDatePicker;
	}
});
