@uplynk/lynk-design 1.20.0 → 1.20.1

package/dist/chunks/chunk.UIKY2DY7.js

@@ -0,0 +1,920 @@
+import {
+  date_time_picker_styles_default
+} from "./chunk.NC6Q25NU.js";
+import {
+  LynkDropdown
+} from "./chunk.HTCBT7DF.js";
+import {
+  LynkFormField
+} from "./chunk.UN7SNVBP.js";
+import {
+  defaultValue
+} from "./chunk.GI7VDIWX.js";
+import {
+  LynkClock
+} from "./chunk.XMB5MXO7.js";
+import {
+  LynkCalendar
+} from "./chunk.IPKDB647.js";
+import {
+  LynkButton
+} from "./chunk.2RKPNVO2.js";
+import {
+  FormControlController
+} from "./chunk.5AIQMNFQ.js";
+import {
+  LynkIconButton
+} from "./chunk.LGNGEYXY.js";
+import {
+  LynkIcon
+} from "./chunk.TP5QR3DZ.js";
+import {
+  HasSlotController
+} from "./chunk.OW5NIGGX.js";
+import {
+  watch
+} from "./chunk.SPANRPKG.js";
+import {
+  LynkElement
+} from "./chunk.3KMQBZOQ.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.O6LH3WX2.js";
+
+// src/components/date-time-picker/date-time-picker.component.ts
+import { html, nothing } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+var LynkDateTimePicker = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "help-text",
+      "help-tip",
+      "label",
+      "label-end",
+      "help-text-end"
+    );
+    this.isOpen = false;
+    this.pendingValue = "";
+    this.originalValue = "";
+    this.name = "";
+    this._value = "";
+    this.defaultValue = "";
+    this.label = "";
+    this.placeholder = "";
+    this.helpText = "";
+    this.labelEnd = "";
+    this.helpTextEnd = "";
+    this.helpTip = "";
+    this.disabled = false;
+    this.readonly = false;
+    this.required = false;
+    this.optional = false;
+    this.dirty = false;
+    this.inline = false;
+    this.size = "medium";
+    this.seconds = false;
+    this.format = "locale";
+    this.minuteInterval = 1;
+    this.defaultTime = "start";
+    this.hoist = false;
+    this.placement = "bottom-start";
+    this.distance = 0;
+    this.skidding = 0;
+    this.inlinePickers = false;
+    this.clearable = false;
+    this.normalizeMode = "none";
+    this.handleDropdownShow = () => {
+      this.isOpen = true;
+      this.originalValue = this._value;
+      requestAnimationFrame(() => {
+        var _a;
+        this.updatePickersFromValue();
+        if ((_a = this.clock) == null ? void 0 : _a.value) {
+          this.clock.scrollToCurrentTime(true);
+        }
+      });
+    };
+    this.handleDropdownHide = () => {
+      this.isOpen = false;
+    };
+    this.handleKeyDown = (event) => {
+      const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+      if (event.key === "Enter" && !event.isComposing && !hasModifier) {
+        if (this.isOpen) {
+          event.preventDefault();
+          this.hide();
+        } else {
+          setTimeout(() => {
+            if (!event.defaultPrevented) {
+              this.emit("ev-change");
+            }
+          });
+        }
+      }
+      if (event.key === "Escape" && this.isOpen) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.handleCancel(event);
+      }
+    };
+  }
+  /** Whether to use the 24-hour number inputs instead of native time input */
+  get use24HourInput() {
+    return this.format === "24h";
+  }
+  get value() {
+    return this._value;
+  }
+  set value(val) {
+    this._value = this.normalizeValue(val);
+  }
+  /** Gets the validity state object */
+  get validity() {
+    var _a;
+    return (_a = this.dateInput) == null ? void 0 : _a.validity;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    var _a;
+    return ((_a = this.dateInput) == null ? void 0 : _a.validationMessage) || "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("keydown", this.handleKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("keydown", this.handleKeyDown);
+  }
+  firstUpdated() {
+    if (!this.inlinePickers) {
+      this.formControlController.updateValidity();
+    }
+    if (this.inlinePickers) {
+      this.updatePickersFromValue();
+    } else {
+      this.updateInputsFromValue();
+      this.dropdown.addEventListener("ev-show", this.handleDropdownShow);
+      this.dropdown.addEventListener("ev-hide", this.handleDropdownHide);
+    }
+  }
+  handleDateInput() {
+    this.updateValueFromInputs();
+    this.updatePickersFromInputs();
+    this.emit("ev-input");
+  }
+  handleTimeInput() {
+    this.updateValueFromInputs();
+    this.updatePickersFromInputs();
+    this.emit("ev-input");
+  }
+  handleDateChange() {
+    this.updateValueFromInputs();
+    this.updatePickersFromInputs();
+    this.emit("ev-change");
+  }
+  handleTimeChange() {
+    this.updateValueFromInputs();
+    this.updatePickersFromInputs();
+    this.emit("ev-change");
+  }
+  /** Pad a number to 2 digits */
+  pad(n) {
+    return String(n).padStart(2, "0");
+  }
+  /** Build HH:mm or HH:mm:ss from the 24h number inputs */
+  buildTimeFrom24HourInputs() {
+    var _a, _b, _c;
+    const h = (_a = this.hourInput) == null ? void 0 : _a.value;
+    const m = (_b = this.minuteInput) == null ? void 0 : _b.value;
+    const s = (_c = this.secondInput) == null ? void 0 : _c.value;
+    if (h === "" || m === "") return "";
+    const hh = this.pad(parseInt(h));
+    const mm = this.pad(parseInt(m));
+    if (this.seconds) {
+      const ss = this.pad(s !== "" && s !== null && s !== void 0 ? parseInt(s) : 0);
+      return `${hh}:${mm}:${ss}`;
+    }
+    return `${hh}:${mm}`;
+  }
+  handle24HourTimeInput() {
+    this.updateValueFromInputs();
+    this.updatePickersFromInputs();
+    this.emit("ev-input");
+  }
+  handle24HourTimeChange() {
+    this.updateValueFromInputs();
+    this.updatePickersFromInputs();
+    this.emit("ev-change");
+  }
+  /** Handle arrow keys to increment/decrement values in 24h inputs */
+  handle24HourKeyDown(event) {
+    const target = event.target;
+    if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+      event.preventDefault();
+      const current = parseInt(target.value) || 0;
+      const max = parseInt(target.max);
+      const delta = event.key === "ArrowUp" ? 1 : -1;
+      let next = current + delta;
+      if (next < 0) next = max;
+      if (next > max) next = 0;
+      target.value = this.pad(next);
+      this.handle24HourTimeInput();
+      target.select();
+    }
+  }
+  handleDateInputClick(event) {
+    event.preventDefault();
+  }
+  handleTimeInputClick(event) {
+    event.preventDefault();
+  }
+  handleCalendarChange() {
+    if (this.calendar.value) {
+      if (!this.clock.value) {
+        this.clock.value = this.defaultTime === "end" ? "23:59" : "00:00";
+        this.clock.scrollToCurrentTime(false);
+      }
+      if (this.inlinePickers) {
+        this.updateInlineValue();
+      } else {
+        this.updatePendingValue();
+        this.applyPendingValue();
+      }
+    }
+  }
+  handleClockChange() {
+    if (this.clock.value) {
+      if (this.inlinePickers) {
+        this.updateInlineValue();
+      } else {
+        this.updatePendingValue();
+        this.applyPendingValue();
+      }
+    }
+  }
+  applyPendingValue() {
+    if (this.pendingValue && this.canApply) {
+      this._value = this.pendingValue;
+      this.updateInputsFromValue();
+      this.emit("ev-change");
+    }
+  }
+  updateInlineValue() {
+    var _a, _b;
+    const date = ((_a = this.calendar) == null ? void 0 : _a.value) || "";
+    const time = ((_b = this.clock) == null ? void 0 : _b.value) || "";
+    if (date && time) {
+      const timeWithSeconds = time.length === 5 ? `${time}:00` : time;
+      const originalOffset = this.getTimezoneOffset(this._value);
+      this._value = originalOffset ? `${date}T${timeWithSeconds}${originalOffset}` : `${date}T${timeWithSeconds}`;
+      this.emit("ev-change");
+    }
+  }
+  handleCancel(event) {
+    event.stopPropagation();
+    this._value = this.originalValue;
+    this.updateInputsFromValue();
+    this.updatePickersFromValue();
+    this.hide();
+  }
+  handleClear(event) {
+    var _a;
+    event.preventDefault();
+    event.stopPropagation();
+    if (this._value !== "") {
+      this._value = "";
+      this.pendingValue = "";
+      this.updateInputsFromValue();
+      this.updatePickersFromValue();
+      this.emit("ev-clear");
+      this.emit("ev-input");
+      this.emit("ev-change");
+    }
+    if (this.isOpen) {
+      this.hide();
+    } else {
+      void ((_a = this.dateInput) == null ? void 0 : _a.focus());
+    }
+  }
+  handleTriggerClick(event) {
+    event.stopPropagation();
+    if (this.disabled || this.readonly) return;
+    this.dropdown.handleTriggerClick();
+  }
+  updateValueFromInputs() {
+    const date = this.dateInput.value;
+    const time = this.use24HourInput ? this.buildTimeFrom24HourInputs() : this.timeInput.value;
+    if (date && time) {
+      const originalOffset = this.getTimezoneOffset(this._value);
+      const timeWithSeconds = this.seconds ? time : `${time}:00`;
+      this._value = originalOffset ? `${date}T${timeWithSeconds}${originalOffset}` : `${date}T${timeWithSeconds}`;
+    } else if (date) {
+      const existingValue = this._value ? new Date(this._value) : null;
+      const existingTime = existingValue && !isNaN(existingValue.getTime()) ? existingValue.toTimeString().split(" ")[0] : "00:00:00";
+      const originalOffset = this.getTimezoneOffset(this._value);
+      this._value = originalOffset ? `${date}T${existingTime}${originalOffset}` : `${date}T${existingTime}`;
+    } else if (time) {
+      const existingDate = this._value ? this._value.split("T")[0] : "";
+      if (existingDate) {
+        const originalOffset = this.getTimezoneOffset(this._value);
+        const timeWithSeconds = this.seconds ? time : `${time}:00`;
+        this._value = originalOffset ? `${existingDate}T${timeWithSeconds}${originalOffset}` : `${existingDate}T${timeWithSeconds}`;
+      }
+    } else {
+      this._value = "";
+    }
+    if (!this.inlinePickers) {
+      this.formControlController.updateValidity();
+    }
+  }
+  normalizeValue(val) {
+    if (!val) return "";
+    const numVal = typeof val === "number" ? val : Number(val);
+    if (!isNaN(numVal) && numVal > 0) {
+      const timestamp = numVal < 1e12 ? numVal * 1e3 : numVal;
+      if (this.normalizeMode === "local") {
+        return this.toLocalISOString(new Date(timestamp));
+      }
+      const d = new Date(timestamp);
+      return d.toISOString().replace(/\.\d{3}Z$/, "Z");
+    }
+    const strVal = String(val);
+    if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/.test(strVal)) {
+      const testDate = new Date(strVal);
+      if (!isNaN(testDate.getTime())) {
+        if (/([+-]\d{2}:?\d{2}|Z)$/.test(strVal) || /\.\d{3}([+-]\d{2}:?\d{2}|Z)$/.test(strVal)) {
+          if (this.normalizeMode === "local") {
+            return this.toLocalISOString(testDate);
+          }
+          return strVal;
+        }
+        return strVal;
+      }
+    }
+    if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(strVal)) {
+      return strVal.replace(" ", "T");
+    }
+    const parsed = new Date(strVal);
+    if (!isNaN(parsed.getTime())) {
+      if (this.normalizeMode === "local") {
+        return this.toLocalISOString(parsed);
+      }
+      return parsed.toISOString().replace(/\.\d{3}Z$/, "Z");
+    }
+    return strVal;
+  }
+  /** Converts a Date to a local ISO string with timezone offset (e.g. 2024-01-15T16:30:00-06:00) */
+  toLocalISOString(date) {
+    const offsetMinutes = date.getTimezoneOffset();
+    const localDate = new Date(date.getTime() - offsetMinutes * 6e4);
+    const iso = localDate.toISOString().replace("Z", "");
+    const withoutMs = iso.replace(/\.\d{3}$/, "");
+    const sign = offsetMinutes <= 0 ? "+" : "-";
+    const absOffset = Math.abs(offsetMinutes);
+    const hours = String(Math.floor(absOffset / 60)).padStart(2, "0");
+    const minutes = String(absOffset % 60).padStart(2, "0");
+    return `${withoutMs}${sign}${hours}:${minutes}`;
+  }
+  getTimezoneOffset(isoString) {
+    if (!isoString) return "";
+    const match = isoString.match(/(\.\d{3})?([+-]\d{2}:?\d{2}|Z)$/);
+    return match ? match[0] : "";
+  }
+  updateInputsFromValue() {
+    var _a, _b;
+    if (this._value) {
+      const [date, timeWithOffset] = this._value.split("T");
+      const time = ((_a = timeWithOffset == null ? void 0 : timeWithOffset.match(/^\d{2}:\d{2}:\d{2}/)) == null ? void 0 : _a[0]) || ((_b = timeWithOffset == null ? void 0 : timeWithOffset.match(/^\d{2}:\d{2}/)) == null ? void 0 : _b[0]) || "";
+      if (this.dateInput) this.dateInput.value = date || "";
+      if (this.use24HourInput) {
+        const displayTime = this.seconds ? time : time.substring(0, 5);
+        const parts = displayTime.split(":");
+        if (this.hourInput) this.hourInput.value = parts[0] || "";
+        if (this.minuteInput) this.minuteInput.value = parts[1] || "";
+        if (this.secondInput && this.seconds) this.secondInput.value = parts[2] || "00";
+      } else {
+        if (this.timeInput) this.timeInput.value = this.seconds ? time : time.substring(0, 5);
+      }
+    } else {
+      if (this.dateInput) this.dateInput.value = "";
+      if (this.use24HourInput) {
+        if (this.hourInput) this.hourInput.value = "";
+        if (this.minuteInput) this.minuteInput.value = "";
+        if (this.secondInput) this.secondInput.value = "";
+      } else {
+        if (this.timeInput) this.timeInput.value = "";
+      }
+    }
+  }
+  updatePickersFromValue() {
+    var _a, _b;
+    if (this._value) {
+      const [date, timeWithOffset] = this._value.split("T");
+      const time = ((_a = timeWithOffset == null ? void 0 : timeWithOffset.match(/^\d{2}:\d{2}:\d{2}/)) == null ? void 0 : _a[0]) || ((_b = timeWithOffset == null ? void 0 : timeWithOffset.match(/^\d{2}:\d{2}/)) == null ? void 0 : _b[0]) || "";
+      if (this.calendar) {
+        this.calendar.value = date || "";
+      }
+      if (this.clock) {
+        this.clock.value = this.seconds ? time : time.substring(0, 5);
+      }
+    } else {
+      if (this.calendar) this.calendar.value = "";
+      if (this.clock) this.clock.value = "";
+    }
+    this.pendingValue = this._value;
+  }
+  updatePickersFromInputs() {
+    var _a, _b;
+    const date = ((_a = this.dateInput) == null ? void 0 : _a.value) || "";
+    const time = this.use24HourInput ? this.buildTimeFrom24HourInputs() : ((_b = this.timeInput) == null ? void 0 : _b.value) || "";
+    if (this.calendar) this.calendar.value = date;
+    if (this.clock) this.clock.value = time;
+    this.updatePendingValue();
+  }
+  updatePendingValue() {
+    var _a, _b;
+    const date = ((_a = this.calendar) == null ? void 0 : _a.value) || "";
+    const time = ((_b = this.clock) == null ? void 0 : _b.value) || "";
+    if (date && time) {
+      const timeWithSeconds = time.length === 5 ? `${time}:00` : time;
+      const originalOffset = this.getTimezoneOffset(this._value);
+      this.pendingValue = originalOffset ? `${date}T${timeWithSeconds}${originalOffset}` : `${date}T${timeWithSeconds}`;
+    } else if (date) {
+      const originalOffset = this.getTimezoneOffset(this._value);
+      this.pendingValue = originalOffset ? `${date}T00:00:00${originalOffset}` : `${date}T00:00:00`;
+    } else {
+      this.pendingValue = "";
+    }
+  }
+  get canClear() {
+    return !!this._value;
+  }
+  get canApply() {
+    var _a, _b;
+    const date = ((_a = this.calendar) == null ? void 0 : _a.value) || "";
+    const time = ((_b = this.clock) == null ? void 0 : _b.value) || "";
+    return !!(date && time);
+  }
+  /** Shows the dropdown. */
+  show() {
+    if (this.isOpen || this.disabled || this.readonly) return;
+    this.dropdown.show();
+  }
+  /** Hides the dropdown. */
+  hide() {
+    if (!this.isOpen) return;
+    this.dropdown.hide();
+  }
+  /** Sets focus on the date input. */
+  focus(options) {
+    var _a;
+    (_a = this.dateInput) == null ? void 0 : _a.focus(options);
+  }
+  /** Removes focus from the input. */
+  blur() {
+    var _a, _b;
+    (_a = this.dateInput) == null ? void 0 : _a.blur();
+    (_b = this.timeInput) == null ? void 0 : _b.blur();
+  }
+  /** Checks for validity but does not show a validation message. */
+  checkValidity() {
+    if (this.inlinePickers) return true;
+    if (this.use24HourInput) return this.dateInput.checkValidity();
+    return this.dateInput.checkValidity() && this.timeInput.checkValidity();
+  }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Checks for validity and shows the browser's validation message if invalid. */
+  reportValidity() {
+    if (this.inlinePickers) return true;
+    if (this.use24HourInput) return this.dateInput.reportValidity();
+    return this.dateInput.reportValidity() && this.timeInput.reportValidity();
+  }
+  /** Sets a custom validation message. */
+  setCustomValidity(message) {
+    var _a;
+    (_a = this.dateInput) == null ? void 0 : _a.setCustomValidity(message);
+    if (!this.inlinePickers) {
+      this.formControlController.updateValidity();
+    }
+  }
+  async handleValueChange() {
+    if (this.inlinePickers) {
+      await this.updateComplete;
+      this.updatePickersFromValue();
+    } else {
+      this.updateInputsFromValue();
+      this.updatePickersFromValue();
+    }
+  }
+  handleNormalizeModeChange() {
+    if (this._value) {
+      this._value = this.normalizeValue(this._value);
+      if (this.inlinePickers) {
+        this.updatePickersFromValue();
+      } else {
+        this.updateInputsFromValue();
+        this.updatePickersFromValue();
+      }
+    }
+  }
+  handleDisabledChange() {
+    if (!this.inlinePickers) {
+      this.formControlController.setValidity(this.disabled ? true : this.checkValidity());
+    }
+  }
+  render() {
+    const calendarPickerTemplate = html`
+      <lynk-calendar
+        part="calendar"
+        class="date-time-picker__calendar"
+        .min=${this.min}
+        .max=${this.max}
+        .value=${this._value ? new Date(this._value).toISOString().split("T")[0] : ""}
+        @ev-change=${this.handleCalendarChange}
+      ></lynk-calendar>
+    `;
+    const timePickerTemplate = html`
+      <lynk-clock
+        part="clock"
+        class="date-time-picker__clock"
+        .format=${this.format}
+        ?seconds=${this.seconds}
+        .minuteInterval=${this.minuteInterval}
+        .value=${this._value ? (() => {
+      var _a, _b;
+      const [, timeWithOffset] = this._value.split("T");
+      const time = ((_a = timeWithOffset == null ? void 0 : timeWithOffset.match(/^\d{2}:\d{2}:\d{2}/)) == null ? void 0 : _a[0]) || ((_b = timeWithOffset == null ? void 0 : timeWithOffset.match(/^\d{2}:\d{2}/)) == null ? void 0 : _b[0]) || "";
+      return this.seconds ? time : time.substring(0, 5);
+    })() : ""}
+        @ev-change=${this.handleClockChange}
+      ></lynk-clock>
+    `;
+    if (this.inlinePickers) {
+      return html`
+        <lynk-form-field
+          .size=${this.size}
+          .label=${this.hasSlotController.test("label") ? "" : this.label}
+          .helpText=${this.hasSlotController.test("help-text") ? "" : this.helpText}
+          .helpTip=${this.hasSlotController.test("help-tip") ? "" : this.helpTip}
+          .labelEnd=${this.hasSlotController.test("label-end") ? "" : this.labelEnd}
+          .helpTextEnd=${this.hasSlotController.test("help-text-end") ? "" : this.helpTextEnd}
+          .required=${this.required}
+          .optional=${this.optional}
+          .readonly=${this.readonly}
+          .dirty=${this.dirty}
+          .inline=${this.inline}
+        >
+          ${this.hasSlotController.test("label") ? html`<slot name="label" slot="label"></slot>` : ""}
+          ${this.hasSlotController.test("help-text") ? html`<slot name="help-text" slot="help-text"></slot>` : ""}
+          ${this.hasSlotController.test("help-tip") ? html`<slot name="help-tip" slot="help-tip"></slot>` : ""}
+          ${this.hasSlotController.test("label-end") ? html`<slot name="label-end" slot="label-end"></slot>` : ""}
+          ${this.hasSlotController.test("help-text-end") ? html`<slot name="help-text-end" slot="help-text-end"></slot>` : ""}
+          <div class="date-time-picker__panel-body">${calendarPickerTemplate} ${timePickerTemplate}</div>
+        </lynk-form-field>
+      `;
+    }
+    return html`
+      <lynk-form-field
+        .size=${this.size}
+        .label=${this.hasSlotController.test("label") ? "" : this.label}
+        .helpText=${this.hasSlotController.test("help-text") ? "" : this.helpText}
+        .helpTip=${this.hasSlotController.test("help-tip") ? "" : this.helpTip}
+        .labelEnd=${this.hasSlotController.test("label-end") ? "" : this.labelEnd}
+        .helpTextEnd=${this.hasSlotController.test("help-text-end") ? "" : this.helpTextEnd}
+        .required=${this.required}
+        .optional=${this.optional}
+        .readonly=${this.readonly}
+        .dirty=${this.dirty}
+        .inline=${this.inline}
+      >
+        ${this.hasSlotController.test("label") ? html`<slot name="label" slot="label"></slot>` : ""}
+        ${this.hasSlotController.test("help-text") ? html`<slot name="help-text" slot="help-text"></slot>` : ""}
+        ${this.hasSlotController.test("help-tip") ? html`<slot name="help-tip" slot="help-tip"></slot>` : ""}
+        ${this.hasSlotController.test("label-end") ? html`<slot name="label-end" slot="label-end"></slot>` : ""}
+        ${this.hasSlotController.test("help-text-end") ? html`<slot name="help-text-end" slot="help-text-end"></slot>` : ""}
+        <lynk-dropdown
+          class="date-time-picker__dropdown"
+          part="dropdown"
+          ?disabled=${this.disabled || this.readonly}
+          .open=${this.isOpen}
+          placement="bottom-start"
+          placement=${this.placement}
+          distance=${this.distance}
+          skidding=${this.skidding}
+          .hoist=${this.hoist}
+        >
+          <div
+            slot="trigger"
+            part="input-group"
+            role="group"
+            class=${classMap({
+      "date-time-picker__input-group": true,
+      "date-time-picker__input-group--small": this.size === "small",
+      "date-time-picker__input-group--medium": this.size === "medium",
+      "date-time-picker__input-group--large": this.size === "large",
+      "date-time-picker__input-group--disabled": this.disabled,
+      "date-time-picker__input-group--readonly": this.readonly
+    })}
+          >
+            ${this.placeholder && !this._value ? html`<div part="placeholder" class="date-time-picker__placeholder">${this.placeholder}</div>` : ""}
+            <input
+              part="date-input"
+              class="date-time-picker__date-input"
+              type="date"
+              role="combobox"
+              aria-label=${this.label ? `${this.label} - Date` : "Date"}
+              aria-readonly=${this.readonly ? "true" : "false"}
+              aria-haspopup="dialog"
+              aria-expanded=${this.isOpen ? "true" : "false"}
+              ?disabled=${this.disabled}
+              ?readonly=${this.readonly}
+              ?required=${this.required}
+              ?hidden=${this.placeholder && !this._value}
+              min=${ifDefined(this.min)}
+              max=${ifDefined(this.max)}
+              @click=${this.handleDateInputClick}
+              @input=${this.handleDateInput}
+              @change=${this.handleDateChange}
+            />
+            ${this.use24HourInput ? this.render24HourTimeInputs(!!(this.placeholder && !this._value)) : html`
+                    <input
+                      part="time-input"
+                      class="date-time-picker__time-input"
+                      type="time"
+                      aria-label=${this.label ? `${this.label} - Time` : "Time"}
+                      step=${this.seconds ? "1" : void 0}
+                      ?disabled=${this.disabled}
+                      ?readonly=${this.readonly}
+                      ?required=${this.required}
+                      ?hidden=${this.placeholder && !this._value}
+                      @click=${this.handleTimeInputClick}
+                      @input=${this.handleTimeInput}
+                      @change=${this.handleTimeChange}
+                    />
+                  `}
+            ${this.clearable && !this.disabled && !this.readonly && this._value ? html`
+                    <button
+                      part="clear-button"
+                      class="date-time-picker__clear"
+                      type="button"
+                      aria-label="Clear entry"
+                      @click=${this.handleClear}
+                      tabindex="-1"
+                    >
+                      <slot name="clear-icon">
+                        <lynk-icon name="x-circle-fill" library="system"></lynk-icon>
+                      </slot>
+                    </button>
+                  ` : ""}
+
+            <lynk-icon-button
+              part="trigger"
+              class="date-time-picker__trigger"
+              name="calendar"
+              library="system"
+              label="Open date time picker"
+              ?disabled=${this.disabled}
+              @click=${this.handleTriggerClick}
+            ></lynk-icon-button>
+          </div>
+
+          <div class="date-time-picker__panel" id="date-time-panel">
+            <div class="date-time-picker__panel-body">${calendarPickerTemplate} ${timePickerTemplate}</div>
+
+            <div part="footer" class="date-time-picker__footer">
+              <lynk-button size="small" color="danger" stealth ?disabled=${!this.canClear} @click=${this.handleClear}>
+                Clear
+              </lynk-button>
+              <lynk-button size="small" color="neutral" stealth @click=${this.handleCancel}> Cancel </lynk-button>
+            </div>
+          </div>
+        </lynk-dropdown>
+      </lynk-form-field>
+    `;
+  }
+  render24HourTimeInputs(isHidden) {
+    var _a, _b, _c;
+    const time = this._value ? (() => {
+      var _a2, _b2;
+      const [, timeWithOffset] = this._value.split("T");
+      const t = ((_a2 = timeWithOffset == null ? void 0 : timeWithOffset.match(/^\d{2}:\d{2}:\d{2}/)) == null ? void 0 : _a2[0]) || ((_b2 = timeWithOffset == null ? void 0 : timeWithOffset.match(/^\d{2}:\d{2}/)) == null ? void 0 : _b2[0]) || "";
+      return this.seconds ? t : t.substring(0, 5);
+    })() : "";
+    const parts = time ? time.split(":") : [];
+    const hours = (_a = parts[0]) != null ? _a : "";
+    const minutes = (_b = parts[1]) != null ? _b : "";
+    const secs = (_c = parts[2]) != null ? _c : "";
+    return html`
+      <div
+        part="time-input"
+        class=${classMap({
+      "date-time-picker__24h-group": true,
+      "date-time-picker__24h-group--hidden": isHidden
+    })}
+        aria-label=${this.label ? `${this.label} - Time` : "Time"}
+      >
+        <input
+          class="date-time-picker__hour-input date-time-picker__segment-input"
+          part="hour-input"
+          type="number"
+          min="0"
+          max="23"
+          placeholder="--"
+          .value=${hours}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          aria-label="Hours"
+          @input=${this.handle24HourTimeInput}
+          @change=${this.handle24HourTimeChange}
+          @keydown=${this.handle24HourKeyDown}
+          @focus=${(e) => e.target.select()}
+        /><span class="date-time-picker__separator" aria-hidden="true">:</span
+        ><input
+          class="date-time-picker__minute-input date-time-picker__segment-input"
+          part="minute-input"
+          type="number"
+          min="0"
+          max="59"
+          step=${ifDefined(this.minuteInterval > 1 ? this.minuteInterval : void 0)}
+          placeholder="--"
+          .value=${minutes}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          aria-label="Minutes"
+          @input=${this.handle24HourTimeInput}
+          @change=${this.handle24HourTimeChange}
+          @keydown=${this.handle24HourKeyDown}
+          @focus=${(e) => e.target.select()}
+        />${this.seconds ? html`<span class="date-time-picker__separator" aria-hidden="true">:</span
+                ><input
+                  class="date-time-picker__second-input date-time-picker__segment-input"
+                  part="second-input"
+                  type="number"
+                  min="0"
+                  max="59"
+                  placeholder="--"
+                  .value=${secs}
+                  ?disabled=${this.disabled}
+                  ?readonly=${this.readonly}
+                  aria-label="Seconds"
+                  @input=${this.handle24HourTimeInput}
+                  @change=${this.handle24HourTimeChange}
+                  @keydown=${this.handle24HourKeyDown}
+                  @focus=${(e) => e.target.select()}
+                />` : nothing}
+      </div>
+    `;
+  }
+};
+LynkDateTimePicker.styles = [component_styles_default, date_time_picker_styles_default];
+LynkDateTimePicker.dependencies = {
+  "lynk-button": LynkButton,
+  "lynk-calendar": LynkCalendar,
+  "lynk-clock": LynkClock,
+  "lynk-dropdown": LynkDropdown,
+  "lynk-form-field": LynkFormField,
+  "lynk-icon": LynkIcon,
+  "lynk-icon-button": LynkIconButton
+};
+__decorateClass([
+  query(".date-time-picker__dropdown")
+], LynkDateTimePicker.prototype, "dropdown", 2);
+__decorateClass([
+  query(".date-time-picker__calendar")
+], LynkDateTimePicker.prototype, "calendar", 2);
+__decorateClass([
+  query(".date-time-picker__clock")
+], LynkDateTimePicker.prototype, "clock", 2);
+__decorateClass([
+  query(".date-time-picker__date-input")
+], LynkDateTimePicker.prototype, "dateInput", 2);
+__decorateClass([
+  query(".date-time-picker__time-input")
+], LynkDateTimePicker.prototype, "timeInput", 2);
+__decorateClass([
+  query(".date-time-picker__hour-input")
+], LynkDateTimePicker.prototype, "hourInput", 2);
+__decorateClass([
+  query(".date-time-picker__minute-input")
+], LynkDateTimePicker.prototype, "minuteInput", 2);
+__decorateClass([
+  query(".date-time-picker__second-input")
+], LynkDateTimePicker.prototype, "secondInput", 2);
+__decorateClass([
+  state()
+], LynkDateTimePicker.prototype, "isOpen", 2);
+__decorateClass([
+  state()
+], LynkDateTimePicker.prototype, "pendingValue", 2);
+__decorateClass([
+  property()
+], LynkDateTimePicker.prototype, "name", 2);
+__decorateClass([
+  property()
+], LynkDateTimePicker.prototype, "value", 1);
+__decorateClass([
+  defaultValue()
+], LynkDateTimePicker.prototype, "defaultValue", 2);
+__decorateClass([
+  property()
+], LynkDateTimePicker.prototype, "label", 2);
+__decorateClass([
+  property()
+], LynkDateTimePicker.prototype, "placeholder", 2);
+__decorateClass([
+  property({ attribute: "help-text" })
+], LynkDateTimePicker.prototype, "helpText", 2);
+__decorateClass([
+  property({ attribute: "label-end" })
+], LynkDateTimePicker.prototype, "labelEnd", 2);
+__decorateClass([
+  property({ attribute: "help-text-end" })
+], LynkDateTimePicker.prototype, "helpTextEnd", 2);
+__decorateClass([
+  property({ attribute: "help-tip" })
+], LynkDateTimePicker.prototype, "helpTip", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkDateTimePicker.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkDateTimePicker.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkDateTimePicker.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkDateTimePicker.prototype, "optional", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkDateTimePicker.prototype, "dirty", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkDateTimePicker.prototype, "inline", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkDateTimePicker.prototype, "size", 2);
+__decorateClass([
+  property()
+], LynkDateTimePicker.prototype, "min", 2);
+__decorateClass([
+  property()
+], LynkDateTimePicker.prototype, "max", 2);
+__decorateClass([
+  property({ type: Boolean })
+], LynkDateTimePicker.prototype, "seconds", 2);
+__decorateClass([
+  property()
+], LynkDateTimePicker.prototype, "format", 2);
+__decorateClass([
+  property({ type: Number, attribute: "minute-interval" })
+], LynkDateTimePicker.prototype, "minuteInterval", 2);
+__decorateClass([
+  property({ attribute: "default-time" })
+], LynkDateTimePicker.prototype, "defaultTime", 2);
+__decorateClass([
+  property({ type: Boolean })
+], LynkDateTimePicker.prototype, "hoist", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkDateTimePicker.prototype, "placement", 2);
+__decorateClass([
+  property({ type: Number })
+], LynkDateTimePicker.prototype, "distance", 2);
+__decorateClass([
+  property({ type: Number })
+], LynkDateTimePicker.prototype, "skidding", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "inline-pickers" })
+], LynkDateTimePicker.prototype, "inlinePickers", 2);
+__decorateClass([
+  property({ type: Boolean })
+], LynkDateTimePicker.prototype, "clearable", 2);
+__decorateClass([
+  property({ attribute: "normalize" })
+], LynkDateTimePicker.prototype, "normalizeMode", 2);
+__decorateClass([
+  watch("value", { waitUntilFirstUpdate: true })
+], LynkDateTimePicker.prototype, "handleValueChange", 1);
+__decorateClass([
+  watch("normalizeMode")
+], LynkDateTimePicker.prototype, "handleNormalizeModeChange", 1);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], LynkDateTimePicker.prototype, "handleDisabledChange", 1);
+
+export {
+  LynkDateTimePicker
+};