@luzmo/lucero 1.0.1-alpha.9 → 1.0.2

package/components/date-range-picker-BdRQep--.js

@@ -0,0 +1,626 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { t as e } from "./decorate-aGxJUVxg.js";
+import { n as t, t as n } from "./sized-mixin-DaBoZkVS.js";
+import { t as r } from "./focusable-BmS8IzhH.js";
+import "./icon-CwBAE1eU.js";
+import "./overlay-CwR_36OV.js";
+import "./popover/index.js";
+import "./calendar-CKr5T_zV.js";
+import { t as i } from "./manage-help-text-CF0xBh0F.js";
+import { t as a } from "./text-field.module-Btsve-VN.js";
+import "./picker-button-BLbeT3Yu.js";
+import { a as o, c as s, f as c, i as l, l as u, n as d, o as f, p, r as m, s as h, t as g, u as _ } from "./segments-factory-D0IveW-q.js";
+import { html as v, nothing as y, unsafeCSS as b } from "lit";
+import { property as x, query as S, state as C } from "lit/decorators.js";
+import { luzmoAlert as w, luzmoCalendar as T } from "@luzmo/icons";
+import { when as E } from "lit/directives/when.js";
+import { ifDefined as D } from "lit/directives/if-defined.js";
+import { classMap as O } from "lit/directives/class-map.js";
+import { DateFormatter as k, getLocalTimeZone as A, isSameMonth as j, now as M, parseDate as N, parseDateTime as P, startOfMonth as F, toCalendarDate as I, today as L } from "@internationalized/date";
+import { NumberParser as R } from "@internationalized/number";
+//#region src/components/date-range-picker/date-range-picker.module.scss?inline
+var z = ":host{font-family:var(--luzmo-font-family);--date-range-picker-border-radius:var(--luzmo-date-range-picker-border-radius,var(--luzmo-border-radius));--date-range-picker-border-width:var(--luzmo-border-width);--date-range-picker-button-border-color:var(--luzmo-date-range-picker-pickerbutton-border-color,var(--luzmo-border-color));--date-range-picker-button-border-color-focus:var(--luzmo-date-range-picker-pickerbutton-border-color-focus,var(--luzmo-primary));--date-range-picker-button-border-color-invalid:var(--luzmo-date-range-picker-pickerbutton-border-color-invalid,var(--luzmo-negative-color));--date-range-picker-dash-color:var(--luzmo-date-range-picker-dash-color,var(--luzmo-font-color));--date-range-picker-dash-font-size:var(--luzmo-date-range-picker-dash-font-size,var(--luzmo-font-size));--date-range-picker-focus-ring-color:var(--luzmo-date-range-picker-focus-ring-color,var(--luzmo-indicator-color));--date-range-picker-focus-ring-gap:var(--luzmo-date-range-picker-focus-ring-gap,0px);--date-range-picker-focus-ring-width:var(--luzmo-date-range-picker-focus-ring-width,var(--luzmo-border-width));--date-range-picker-focus-animation:var(--luzmo-date-range-picker-focus-animation,var(--luzmo-animation-duration));--date-range-picker-calendar-padding:var(--luzmo-date-range-picker-calendar-padding,var(--luzmo-spacing-4));border-radius:var(--date-range-picker-border-radius);flex-flow:row;display:inline-flex;position:relative}:host([disabled]) luzmo-picker-button{cursor:default}:host([disabled]){--luzmo-date-range-picker-dash-color:var(--luzmo-date-range-picker-dash-color-disabled,var(--luzmo-font-color-disabled))}:host([disabled]) .luzmo-DatePicker-rangeDash{background-color:var(--luzmo-text-field-background-color-disabled,var(--luzmo-background-color-disabled));border-block-color:#0000}:host([readonly]) .luzmo-DatePicker-rangeDash{background-color:initial;border-block-color:#0000}:host([invalid]:not([quiet])) .range-wrapper:after{border-color:var(--date-range-picker-button-border-color-invalid)}:host([invalid]:not([quiet])) .range-wrapper .input,:host([invalid]:not([quiet])) .range-wrapper .input:read-only{border-color:#0000}:host([invalid]:not([quiet])) .luzmo-DatePicker-rangeDash{background-color:#0000;border-block-color:#0000}:host(:not([quiet],[disabled])){--luzmo-picker-button-border-color:var(--date-range-picker-button-border-color)}:host([focused]),:host([focused]:not([quiet],[disabled])){--luzmo-picker-button-border-color:var(--date-range-picker-button-border-color-focus)}:host([invalid]:not([quiet],[disabled])){--luzmo-picker-button-border-color:var(--date-range-picker-button-border-color-invalid)}.range-wrapper{border-radius:var(--date-range-picker-border-radius);flex-flow:row;flex:1;align-items:stretch;display:inline-flex;position:relative}.range-wrapper:after{pointer-events:none;content:\"\";border:var(--date-range-picker-focus-ring-width) solid transparent;border-radius:var(--date-range-picker-border-radius);transition:border-color var(--date-range-picker-focus-animation) ease-in-out;position:absolute;inset:0}:host([focused]) .range-wrapper:not(.luzmo-DatePicker--quiet):after{border-color:var(--date-range-picker-focus-ring-color)}:host([focused]) .range-wrapper:not(.luzmo-DatePicker--quiet) #text-field:after{display:none}:host([focused]) .range-wrapper .input,:host([focused]) .range-wrapper .input:read-only,:host([focused]) .range-wrapper #text-field .input,:host([focused]) .range-wrapper #text-field:hover .input{border-color:var(--date-range-picker-focus-ring-color);outline:none}:host([focused]) .range-wrapper .luzmo-DatePicker-rangeDash{border-block-color:var(--date-range-picker-focus-ring-color)}:host .input:read-only{border-color:var(--luzmo-date-range-picker-border-color,var(--luzmo-border-color))}.input.luzmo-DatePicker-startField{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.input.luzmo-DatePicker-endField{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.luzmo-DatePicker-rangeDash{color:var(--date-range-picker-dash-color);font-size:var(--date-range-picker-dash-font-size);flex:initial;z-index:1;background-color:var(--luzmo-background-color,#fff);border-block:var(--date-range-picker-border-width) solid var(--luzmo-border-color,#ccc);transition:border-block-color var(--luzmo-text-field-animation-duration,var(--luzmo-animation-duration)) ease-in-out;align-items:center;display:flex}.luzmo-DatePicker-rangeDash:before{content:\"→\";margin-inline:var(--luzmo-spacing-2,4px);text-align:center;display:inline-block}luzmo-picker-button{cursor:pointer;z-index:2;position:absolute;inset-inline-end:0}:host([quiet]) .luzmo-DatePicker-rangeDash{background-color:#0000;border-block-start-width:0;border-inline-width:0;border-radius:0}:host([quiet]) .range-wrapper:after{display:none}:host([quiet][focused]) .range-wrapper:after{border-color:#0000;border-block-end-color:var(--date-range-picker-focus-ring-color);border-radius:0;display:block;inset-block-end:0}:host([quiet]) luzmo-picker-button{inline-size:auto}:host([quiet]) luzmo-picker-button:not(:disabled,.is-open){--luzmo-picker-button-background-color:transparent}@media (hover:hover){:host(:hover:not([focused],[disabled],[invalid],[readonly])){--luzmo-picker-button-border-color:var(--highcontrast-text-field-border-color-hover,var(--luzmo-text-field-border-color-hover,rgba(var(--luzmo-primary-rgb), .3)))}:host(:hover:not([focused],[disabled],[invalid],[readonly])) .range-wrapper #text-field .input{border-color:var(--highcontrast-text-field-border-color-hover,var(--luzmo-text-field-border-color-hover,rgba(var(--luzmo-primary-rgb), .3)))}:host(:hover:not([focused],[disabled],[invalid],[readonly])) .luzmo-DatePicker-rangeDash{border-block-color:var(--highcontrast-text-field-border-color-hover,var(--luzmo-text-field-border-color-hover,rgba(var(--luzmo-primary-rgb), .3)))}:host([focused]:hover:not([disabled],[invalid],[readonly])) .luzmo-DatePicker-rangeDash{border-block-color:var(--highcontrast-text-field-border-color-focus-hover,var(--luzmo-text-field-border-color-focus-hover,var(--luzmo-primary)))}}@media (forced-colors:active){:host{--date-range-picker-dash-color:CanvasText;--date-range-picker-focus-ring-color:Highlight}:host([disabled]){--date-range-picker-dash-color:GrayText}}:host{--date-range-picker-calendar-padding:var(--luzmo-spacing-4);--date-range-picker-icon-size:18px;--date-range-picker-dash-font-size:var(--luzmo-font-size);--text-field-focus-indicator-color:var(--luzmo-background-color-highlight)}:host([size=s]){--date-range-picker-calendar-padding:var(--luzmo-spacing-3);--date-range-picker-icon-size:16px;--date-range-picker-dash-font-size:var(--luzmo-font-size-s)}:host([size=m]){--date-range-picker-calendar-padding:var(--luzmo-spacing-4);--date-range-picker-icon-size:18px;--date-range-picker-dash-font-size:var(--luzmo-font-size-m)}:host([size=l]){--date-range-picker-calendar-padding:var(--luzmo-spacing-5);--date-range-picker-icon-size:20px;--date-range-picker-dash-font-size:var(--luzmo-font-size-l)}:host([size=xl]){--date-range-picker-calendar-padding:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--date-range-picker-icon-size:22px;--date-range-picker-dash-font-size:var(--luzmo-font-size-xl)}:host{--picker-button-size:var(--luzmo-text-field-height,var(--text-field-height));--input-spacing:var(--luzmo-text-field-spacing-inline,var(--text-field-spacing-inline));--input-border-width:var(--luzmo-text-field-border-width,var(--luzmo-border-width));--status-icon-size:var(--luzmo-text-field-icon-size-invalid,var(--text-field-icon-size-invalid));flex-wrap:wrap}:host #text-field{flex:1;display:inline-block}:host #text-field .input,:host([quiet]) #text-field .input,:host([invalid]) #text-field .input{inline-size:100%}:host #text-field:last-of-type .input{padding-inline-end:calc(var(--picker-button-size) + var(--input-spacing) - var(--input-border-width))}:host([invalid]) .input.luzmo-DatePicker-startField{padding-inline-end:calc(var(--input-spacing) - var(--input-border-width))}:host([invalid]) #text-field:last-of-type .input{padding-inline-end:calc(var(--picker-button-size) + var(--status-icon-size) + 2 * var(--luzmo-text-field-icon-spacing-inline-end-invalid,var(--text-field-icon-spacing-inline-end-invalid)))}:host([invalid]) .range-wrapper .icon{z-index:3;pointer-events:none;font-size:var(--luzmo-text-field-icon-size-invalid,var(--text-field-icon-size-invalid));color:var(--luzmo-negative-color);justify-content:center;align-items:center;display:flex;position:absolute;inset-block-start:var(--luzmo-text-field-icon-spacing-block-invalid,var(--text-field-icon-spacing-block-invalid));inset-block-end:var(--luzmo-text-field-icon-spacing-block-invalid,var(--text-field-icon-spacing-block-invalid));inset-inline-end:calc(var(--picker-button-size) + var(--luzmo-text-field-icon-spacing-inline-end-invalid,var(--text-field-icon-spacing-inline-end-invalid)))}luzmo-picker-button:focus-visible{outline:none}luzmo-popover{overflow-y:auto}luzmo-popover .popover-content{padding:var(--luzmo-date-range-picker-calendar-padding,var(--date-range-picker-calendar-padding))}.input-content{scrollbar-width:none;align-items:center;height:100%;line-height:normal;display:flex;overflow:auto hidden}.input-content::-webkit-scrollbar{width:0;height:0;display:none}.literal-segment,.editable-segment{color:var(--luzmo-date-range-picker-font-color-default,var(--luzmo-font-color));display:inline-block}.editable-segment{font-variant-numeric:tabular-nums;text-align:end;white-space:nowrap;caret-color:#0000;outline:none;padding:0 .15em}[dir=ltr] .editable-segment{text-align:start}.literal-segment{white-space:pre;-webkit-user-select:none;user-select:none}.is-placeholder,.is-placeholder+.literal-segment{color:var(--luzmo-font-color-disabled)}.editable-segment:focus-visible{color:var(--luzmo-date-range-picker-segment-text-color-focus,var(--luzmo-font-color));background-color:var(--highcontrast-text-field-focus-indicator-color,var(--luzmo-text-field-focus-indicator-color,var(--text-field-focus-indicator-color)))}.editable-segment::selection{background-color:#0000}.calendar-layout,.calendar-layout--dual .calendars-row{gap:var(--luzmo-spacing-4,16px);flex-direction:row;display:flex}.calendar-container{flex-shrink:0}.defined-ranges{gap:var(--luzmo-spacing-1,2px);border-inline-start:var(--luzmo-border-width,1px) solid var(--luzmo-border-color,#e0e0e0);flex-direction:column;min-inline-size:120px;padding-inline-start:var(--luzmo-spacing-4,16px);display:flex}.defined-range-item{inline-size:100%;padding:var(--luzmo-spacing-2,4px) var(--luzmo-spacing-3,8px);border-radius:var(--luzmo-border-radius,4px);color:var(--luzmo-font-color,inherit);font-family:var(--luzmo-font-family,inherit);font-size:var(--luzmo-font-size,inherit);text-align:start;cursor:pointer;transition:background-color var(--luzmo-animation-duration,.13s) ease;white-space:nowrap;background:0 0;border:none;display:block}.defined-range-item:hover{background-color:var(--luzmo-background-color-hover,#0000000d)}.defined-range-item:focus-visible{outline:var(--luzmo-indicator-width,2px) solid var(--luzmo-indicator-color,var(--luzmo-primary));outline-offset:var(--luzmo-indicator-gap,2px)}.defined-range-item[aria-selected=true]{background-color:var(--luzmo-background-color-highlight,#00000014);font-weight:var(--bold-font-weight,bold)}";
+//#endregion
+//#region src/components/date-range-picker/date-range-picker.ts
+function B() {
+	let e = /* @__PURE__ */ new Date();
+	e.setHours(0, 0, 0, 0);
+	let t = new Date(e);
+	t.setDate(t.getDate() - 1);
+	let n = new Date(e), r = n.getDay();
+	n.setDate(n.getDate() - r);
+	let i = new Date(n);
+	i.setDate(i.getDate() + 6);
+	let a = new Date(n);
+	a.setDate(a.getDate() - 7);
+	let o = new Date(n);
+	o.setDate(o.getDate() - 1);
+	let s = new Date(e.getFullYear(), e.getMonth(), 1), c = new Date(e.getFullYear(), e.getMonth() + 1, 0), l = new Date(e.getFullYear(), e.getMonth() - 1, 1), u = new Date(e.getFullYear(), e.getMonth(), 0);
+	return [
+		{
+			label: "Today",
+			startDate: e,
+			endDate: e
+		},
+		{
+			label: "Yesterday",
+			startDate: t,
+			endDate: t
+		},
+		{
+			label: "This Week",
+			startDate: n,
+			endDate: i
+		},
+		{
+			label: "Last Week",
+			startDate: a,
+			endDate: o
+		},
+		{
+			label: "This Month",
+			startDate: s,
+			endDate: c
+		},
+		{
+			label: "Last Month",
+			startDate: l,
+			endDate: u
+		}
+	];
+}
+function V(e) {
+	return `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
+}
+var H = class extends i(t(r, { validSizes: Object.values(n) })) {
+	static get styles() {
+		return [b(z), b(a)];
+	}
+	get _language() {
+		try {
+			return this.language ? new Intl.Locale(this.language).language : "en";
+		} catch {
+			return "en";
+		}
+	}
+	get focusElement() {
+		return this.firstEditableSegment;
+	}
+	clear() {
+		this._startDate = void 0, this._endDate = void 0, this.startDate = void 0, this.endDate = void 0, this.setStartSegments(), this.setEndSegments();
+	}
+	constructor() {
+		super(), this.precision = c.Day, this.calendars = 1, this.showDefinedRanges = !1, this.definedRanges = B(), this.invalid = !1, this.readonly = !1, this.quiet = !1, this.placement = "bottom", this.language = "en", this.labels = {
+			previous: "Previous",
+			next: "Next",
+			today: "Today",
+			selected: "Selected",
+			empty: "Empty",
+			calendar: "Calendar",
+			startDate: "Start date",
+			endDate: "End date"
+		}, this.focused = !1, this.startSegments = new f([]), this.endSegments = new f([]), this.isCalendarOpen = !1, this._timeZone = this.timeZone ?? A(), this._skipMonthSync = !1, this.handleFocusIn = () => {
+			this.focused = !this.readonly;
+		}, this.handleFocusOut = () => {
+			this.focused = !1;
+		}, this.setNumberParser(), this.setDateFormatter(), this.setAriaDateFormatter(), this.addEventListener("focusin", this.handleFocusIn), this.addEventListener("focusout", this.handleFocusOut);
+	}
+	willUpdate(e) {
+		let t = e.has("startDate"), n = e.has("endDate"), r = e.has("min"), i = e.has("max"), a = e.has("language"), o = e.has("dateFormat"), s = e.has("dateSeparator"), c = e.has("precision"), l = e.has("disabled");
+		e.has("timeZone") && (this._timeZone = this.timeZone ?? A()), a && this.setNumberParser(), (a || c) && (this.setDateFormatter(), this.setAriaDateFormatter()), (t || n || r || i) && this.parseAllDates(), (t || a || c || o || s) && this.setStartSegments(), (n || a || c || o || s) && this.setEndSegments(), l && this.isCalendarOpen && (this.isCalendarOpen = !1);
+		let u = e.has("isCalendarOpen") && this.isCalendarOpen;
+		(t || n) && (this._skipMonthSync || this.syncCalendarMonths(), this._skipMonthSync = !1), u && this.calendars === 2 && this.syncCalendarMonths(), this.updateAriaLabel();
+	}
+	initCalendarMonths() {
+		let e = this._startDate ?? I(L(this._timeZone)), t = F(e);
+		this._leftMonth = t.toString(), this._endDate && !j(e, this._endDate) ? this._rightMonth = F(this._endDate).toString() : this._rightMonth = t.add({ months: 1 }).toString();
+	}
+	syncCalendarMonths() {
+		if (this.calendars !== 2) return;
+		let e = this._startDate ?? I(L(this._timeZone)), t = F(e);
+		this._endDate && !j(e, this._endDate) ? (this._leftMonth = t.toString(), this._rightMonth = F(this._endDate).toString()) : (this._leftMonth = t.toString(), this._rightMonth = t.add({ months: 1 }).toString());
+	}
+	parseDateValue(e) {
+		return e ? e.includes("T") ? P(e).set({ era: "AD" }) : I(N(e)).set({ era: "AD" }) : void 0;
+	}
+	parseAllDates() {
+		this._startDate = this.parseDateValue(this.startDate), this._endDate = this.parseDateValue(this.endDate);
+	}
+	updateAriaLabel() {
+		if (this._startDate && this._endDate) {
+			let e = this.ariaDateFormatter.format(h(this._startDate)), t = this.ariaDateFormatter.format(h(this._endDate));
+			this.setAttribute("aria-label", `${this.labels.selected}: ${e} – ${t}`);
+		} else this.setAttribute("aria-label", this.labels.empty);
+	}
+	render() {
+		return v`
+      <div class="luzmo-DatePicker--range range-wrapper">
+        <div id="text-field">
+          ${this.renderStartInput()}
+        </div>
+        <div class="luzmo-DatePicker-rangeDash"></div>
+        <div id="text-field">
+          ${this.renderEndInput()}
+        </div>
+        ${this.renderStateIcons()}
+        ${this.renderPicker()}
+      </div>
+      ${this.renderHelpText(this.invalid)}
+    `;
+	}
+	renderStateIcons() {
+		return this.invalid ? v`
+        <luzmo-icon
+          .icon=${w}
+          .size=${this.size}
+          id="invalid"
+          class="icon"
+        ></luzmo-icon>
+      ` : y;
+	}
+	renderPicker() {
+		return this.readonly ? y : v`
+      <luzmo-picker-button
+        ?open=${this.isCalendarOpen}
+        ?quiet=${this.quiet}
+        ?invalid=${this.invalid}
+        ?disabled=${this.disabled}
+        .size=${this.size}
+        @click=${() => this.isCalendarOpen = !0}
+        label=${this.labels.calendar}
+      >
+        <slot name="calendar-icon" slot="icon">
+          <luzmo-icon
+            .icon=${T}
+            .size=${this.size}
+            block
+          ></luzmo-icon>
+        </slot>
+      </luzmo-picker-button>
+
+      <luzmo-overlay
+        .triggerElement=${this.rangeWrapper}
+        type="modal"
+        placement=${this.placement ?? "bottom"}
+        offset="0"
+        ?open=${this.isCalendarOpen}
+        @luzmo-closed=${() => this.isCalendarOpen = !1}
+      >
+        <luzmo-popover>
+          <div class="popover-content">
+            ${this.renderPopoverContent()}
+          </div>
+        </luzmo-popover>
+      </luzmo-overlay>
+    `;
+	}
+	renderPopoverContent() {
+		return this.calendars === 2 ? this.renderDualCalendar() : this.renderSingleCalendar();
+	}
+	renderSingleCalendar() {
+		return v`
+      <div class="calendar-layout">
+        <div class="calendar-container">
+          <luzmo-calendar
+            selection-mode="range"
+            .startDate=${this.startDate}
+            .endDate=${this.endDate}
+            .min=${this.min}
+            .max=${this.max}
+            .labels=${this.labels}
+            .size=${this.size}
+            .language=${this.language}
+            @range-select=${this.handleRangeSelect}
+          ></luzmo-calendar>
+        </div>
+        ${this.renderDefinedRanges()}
+      </div>
+    `;
+	}
+	renderDualCalendar() {
+		return (!this._leftMonth || !this._rightMonth) && this.initCalendarMonths(), v`
+      <div class="calendar-layout calendar-layout--dual">
+        <div class="calendars-row">
+          <div class="calendar-container">
+            <luzmo-calendar
+              selection-mode="range"
+              .startDate=${this.startDate}
+              .endDate=${this.endDate}
+              .value=${this._leftMonth}
+              .min=${this.min}
+              .max=${this.max}
+              .labels=${this.labels}
+              .size=${this.size}
+              .language=${this.language}
+              @range-select=${this.handleRangeSelect}
+              @hover-date=${this.handleHoverDateLeft}
+              @month-change=${this.handleLeftMonthChange}
+            ></luzmo-calendar>
+          </div>
+          <div class="calendar-container">
+            <luzmo-calendar
+              selection-mode="range"
+              .startDate=${this.startDate}
+              .endDate=${this.endDate}
+              .value=${this._rightMonth}
+              .min=${this.min}
+              .max=${this.max}
+              .labels=${this.labels}
+              .size=${this.size}
+              .language=${this.language}
+              @range-select=${this.handleRangeSelect}
+              @hover-date=${this.handleHoverDateRight}
+              @month-change=${this.handleRightMonthChange}
+            ></luzmo-calendar>
+          </div>
+        </div>
+        ${this.renderDefinedRanges()}
+      </div>
+    `;
+	}
+	renderDefinedRanges() {
+		return !this.showDefinedRanges || !this.definedRanges || this.definedRanges.length === 0 ? y : v`
+      <div
+        class="defined-ranges"
+        role="listbox"
+        aria-label="Predefined date ranges"
+      >
+        ${this.definedRanges.map((e) => v`
+            <button
+              class="defined-range-item"
+              role="option"
+              aria-selected=${this.isDefinedRangeSelected(e)}
+              @click=${() => this.selectDefinedRange(e)}
+            >
+              ${e.label}
+            </button>
+          `)}
+      </div>
+    `;
+	}
+	isDefinedRangeSelected(e) {
+		return !this.startDate || !this.endDate ? !1 : this.startDate === V(e.startDate) && this.endDate === V(e.endDate);
+	}
+	selectDefinedRange(e) {
+		this.startDate = V(e.startDate), this.endDate = V(e.endDate), this.isCalendarOpen = !1, this.dispatchChange();
+	}
+	handleRangeSelect(e) {
+		e.stopPropagation();
+		let { startDate: t, endDate: n } = e.detail;
+		this._skipMonthSync = !0, this.startDate = t, this.endDate = n ?? void 0, t && n && (this.isCalendarOpen = !1, this.dispatchChange());
+	}
+	handleHoverDateLeft(e) {
+		let t = this.shadowRoot?.querySelectorAll("luzmo-calendar")[1];
+		t && (t.hoveredDate = N(e.detail.date));
+	}
+	handleHoverDateRight(e) {
+		let t = this.shadowRoot?.querySelectorAll("luzmo-calendar")[0];
+		t && (t.hoveredDate = N(e.detail.date));
+	}
+	renderStartInput() {
+		return v`
+      <div class="input luzmo-DatePicker-startField">
+        <span
+          class="input-content"
+          aria-label=${this.labels.startDate}
+          @keydown=${(e) => this.handleKeydown(e, "start")}
+          @input=${(e) => this.handleInput(e, "start")}
+        >
+          ${this.renderSegmentsFor(this.startSegments)}
+        </span>
+      </div>
+    `;
+	}
+	renderEndInput() {
+		return v`
+      <div class="input luzmo-DatePicker-endField">
+        <span
+          class="input-content"
+          aria-label=${this.labels.endDate}
+          @keydown=${(e) => this.handleKeydown(e, "end")}
+          @input=${(e) => this.handleInput(e, "end")}
+        >
+          ${this.renderSegmentsFor(this.endSegments)}
+        </span>
+      </div>
+    `;
+	}
+	renderSegmentsFor(e) {
+		return e.all.map((e) => E(e.type === p.Literal, () => this.renderLiteralSegment(e), () => this.renderEditableSegment(e)));
+	}
+	renderLiteralSegment(e) {
+		return v`
+        <span
+            class="literal-segment"
+            data-test-id=${e.type}
+            aria-hidden="true"
+        >${e.formatted}</span>
+    `;
+	}
+	renderEditableSegment(e) {
+		let t = !this.disabled && !this.readonly, n = {
+			"editable-segment": !0,
+			"is-placeholder": e.value === void 0
+		}, r = e.type !== p.Year && String(e.maxValue).length > 0;
+		return v`
+      <div
+        role="spinbutton"
+        aria-valuenow=${D(e.value)}
+        aria-valuemin=${e.minValue}
+        aria-valuemax=${e.maxValue}
+        aria-label=${e.label}
+        aria-valuetext=${D(e.value === void 0 ? this.labels.empty : e.formatted)}
+        contenteditable=${D(t ? !0 : void 0)}
+        inputmode=${D(t ? "numeric" : void 0)}
+        tabindex=${D(t ? "0" : void 0)}
+        class=${O(n)}
+        style=${r ? `min-width: ${r}ch` : ""}
+        data-type=${e.type}
+        .innerText=${e.value === void 0 ? e.placeholder ?? "" : e.formatted ?? ""}
+      ></div>
+    `;
+	}
+	getSegments(e) {
+		return e === "start" ? this.startSegments : this.endSegments;
+	}
+	setSegmentsForField(e, t) {
+		e === "start" ? this.startSegments = t : this.endSegments = t;
+	}
+	getModifierParams(e) {
+		return {
+			dateFormatter: this.dateFormatter,
+			segments: this.getSegments(e),
+			currentDate: M(this._timeZone)
+		};
+	}
+	handleKeydown(e, t) {
+		let n = e.target, r = n.dataset.type;
+		if (r) switch (e.code) {
+			case "ArrowUp": {
+				let e = new m(this.getModifierParams(t));
+				this.setSegmentsForField(t, e.modify(r)), this.updateValueFromSegments(t), this.dispatchInputEvent();
+				break;
+			}
+			case "ArrowDown": {
+				let e = new l(this.getModifierParams(t));
+				this.setSegmentsForField(t, e.modify(r)), this.updateValueFromSegments(t), this.dispatchInputEvent();
+				break;
+			}
+			case "ArrowRight":
+				this.focusSegment(n, "next");
+				break;
+			case "ArrowLeft":
+				this.focusSegment(n, "previous");
+				break;
+			case "Enter":
+			case "Space":
+				this.commitValue();
+				break;
+			case "Backspace":
+			case "Delete":
+				if (e.preventDefault(), this.getSegments(t).getByType(r)?.value === void 0) this.focusSegment(n, "previous");
+				else {
+					let e = new o(this.getModifierParams(t));
+					this.setSegmentsForField(t, e.modify(r)), this.updateValueFromSegments(t), this.dispatchInputEvent();
+				}
+				break;
+		}
+	}
+	handleInput(e, t) {
+		e.stopPropagation();
+		let n = e.target.dataset.type, r = this.getSegments(t).editableValues, i = new d({
+			...this.getModifierParams(t),
+			eventData: e.data,
+			numberParser: this.numberParser
+		}).modify(n);
+		this.setSegmentsForField(t, i);
+		let a = i.getByType(n), o = e.target;
+		o.textContent = a.value === void 0 ? a.placeholder : a.formatted, this.updateValueFromSegments(t);
+		let c = i.editableValues;
+		s(r, c) || this.dispatchInputEvent();
+	}
+	focusSegment(e, t) {
+		let n = e;
+		for (;;) {
+			let e = t === "previous" ? n.previousElementSibling : n.nextElementSibling;
+			if (!e) break;
+			if (e.getAttribute("contenteditable")) {
+				e.focus();
+				return;
+			}
+			n = e;
+		}
+	}
+	updateValueFromSegments(e) {
+		let t = this.getSegments(e).getFormattedDate(this.precision);
+		if (t && (u(t) || _(t))) {
+			let n = t.toString();
+			e === "start" ? (this._startDate = t, this.startDate = n) : (this._endDate = t, this.endDate = n);
+		} else e === "start" ? (this._startDate = void 0, this.startDate = void 0) : (this._endDate = void 0, this.endDate = void 0);
+	}
+	commitValue() {
+		if (this._startDate && this._endDate) {
+			if (this._startDate.compare(this._endDate) > 0) {
+				let e = this._startDate;
+				this._startDate = this._endDate, this._endDate = e, this.startDate = this._startDate.toString(), this.endDate = this._endDate.toString(), this.setStartSegments(), this.setEndSegments();
+			}
+			this.dispatchChange();
+		}
+	}
+	handleLeftMonthChange(e) {
+		let t = e.detail, n = N(t.date);
+		this._leftMonth = t.date, this._rightMonth && j(n, N(this._rightMonth)) && (this._rightMonth = F(n).add({ months: 1 }).toString());
+	}
+	handleRightMonthChange(e) {
+		let t = e.detail, n = N(t.date);
+		this._rightMonth = t.date, this._leftMonth && j(n, N(this._leftMonth)) && (this._leftMonth = F(n).subtract({ months: 1 }).toString());
+	}
+	dispatchChange() {
+		this.dispatchEvent(new CustomEvent("change", {
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0,
+			detail: {
+				startDate: this.startDate ?? "",
+				endDate: this.endDate ?? ""
+			}
+		}));
+	}
+	dispatchInputEvent() {
+		this.dispatchEvent(new CustomEvent("input", {
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0,
+			detail: {
+				startDate: this.startDate ?? "",
+				endDate: this.endDate ?? ""
+			}
+		}));
+	}
+	setStartSegments() {
+		this.startSegments = this.createSegmentsFromDate(this._startDate);
+	}
+	setEndSegments() {
+		this.endSegments = this.createSegmentsFromDate(this._endDate);
+	}
+	createSegmentsFromDate(e) {
+		let t = M(this._timeZone), n = e ? {
+			year: e.year,
+			month: e.month,
+			day: e.day
+		} : {};
+		e && _(e) && (n.hour = e.hour, n.minute = e.minute, n.second = e.second, n.millisecond = e.millisecond);
+		let r = e ? t.set(n) : t, i = new g(this.dateFormatter).createSegments(r, e !== void 0);
+		if (this.dateFormat) {
+			let e = i.all.findIndex((e) => e.type === p.Month), t = i.all.findIndex((e) => e.type === p.Day);
+			if (e !== -1 && t !== -1) {
+				if (this.dateFormat === "mmdd" && e > t) {
+					let n = i.all[e];
+					i.all[e] = i.all[t], i.all[t] = n;
+				} else if (this.dateFormat === "ddmm" && t > e) {
+					let n = i.all[t];
+					i.all[t] = i.all[e], i.all[e] = n;
+				}
+			}
+		}
+		return typeof this.dateSeparator == "string" && this.dateSeparator && (i.all?.[1]?.type === p.Literal && (i.all[1].formatted = this.dateSeparator), i.all?.[3]?.type === p.Literal && (i.all[3].formatted = this.dateSeparator)), this.precision === c.Day ? new f(i.all.filter((e) => {
+			let t = e.type;
+			return t === p.Year || t === p.Month || t === p.Day || t === p.Literal;
+		})) : i;
+	}
+	setNumberParser() {
+		this.numberParser = new R(this._language, { maximumFractionDigits: 0 });
+	}
+	setDateFormatter() {
+		this.dateFormatter = new k(this._language, {
+			day: "2-digit",
+			month: "2-digit",
+			year: "numeric",
+			...this.getTimeOptions("2-digit")
+		});
+	}
+	setAriaDateFormatter() {
+		this.ariaDateFormatter = new k(this._language, {
+			day: "numeric",
+			month: "long",
+			year: "numeric",
+			...this.getTimeOptions("numeric")
+		});
+	}
+	getTimeOptions(e) {
+		switch (this.precision) {
+			case c.Millisecond: return {
+				hour: e,
+				minute: e,
+				second: e,
+				fractionalSecondDigits: 3
+			};
+			case c.Second: return {
+				hour: e,
+				minute: e,
+				second: e
+			};
+			case c.Minute: return {
+				hour: e,
+				minute: e
+			};
+			case c.Hour: return { hour: e };
+			default: return {};
+		}
+	}
+};
+//#endregion
+//#region src/components/date-range-picker/index.ts
+e([x({
+	type: String,
+	attribute: "start-date",
+	reflect: !0
+})], H.prototype, "startDate", void 0), e([x({
+	type: String,
+	attribute: "end-date",
+	reflect: !0
+})], H.prototype, "endDate", void 0), e([x({
+	type: String,
+	reflect: !0
+})], H.prototype, "min", void 0), e([x({
+	type: String,
+	reflect: !0
+})], H.prototype, "max", void 0), e([x({
+	type: String,
+	attribute: "date-format",
+	reflect: !0
+})], H.prototype, "dateFormat", void 0), e([x({
+	type: String,
+	attribute: "date-separator",
+	reflect: !0
+})], H.prototype, "dateSeparator", void 0), e([x({
+	type: String,
+	reflect: !0
+})], H.prototype, "precision", void 0), e([x({
+	type: Number,
+	reflect: !0
+})], H.prototype, "calendars", void 0), e([x({
+	type: Boolean,
+	attribute: "show-defined-ranges",
+	reflect: !0
+})], H.prototype, "showDefinedRanges", void 0), e([x({ attribute: !1 })], H.prototype, "definedRanges", void 0), e([x({
+	type: Boolean,
+	reflect: !0
+})], H.prototype, "invalid", void 0), e([x({
+	type: Boolean,
+	reflect: !0
+})], H.prototype, "readonly", void 0), e([x({
+	type: Boolean,
+	reflect: !0
+})], H.prototype, "quiet", void 0), e([x({
+	type: String,
+	reflect: !0
+})], H.prototype, "placement", void 0), e([x({
+	type: String,
+	attribute: "time-zone",
+	reflect: !0
+})], H.prototype, "timeZone", void 0), e([x({
+	type: String,
+	reflect: !0
+})], H.prototype, "language", void 0), e([x({ attribute: !1 })], H.prototype, "labels", void 0), e([x({
+	type: Boolean,
+	reflect: !0
+})], H.prototype, "focused", void 0), e([C()], H.prototype, "_startDate", void 0), e([C()], H.prototype, "_endDate", void 0), e([C()], H.prototype, "startSegments", void 0), e([C()], H.prototype, "endSegments", void 0), e([C()], H.prototype, "isCalendarOpen", void 0), e([C()], H.prototype, "_leftMonth", void 0), e([C()], H.prototype, "_rightMonth", void 0), e([S(".editable-segment")], H.prototype, "firstEditableSegment", void 0), e([S(".range-wrapper")], H.prototype, "rangeWrapper", void 0), customElements.get("luzmo-date-range-picker") || customElements.define("luzmo-date-range-picker", H);
+//#endregion
+export { H as t };