@uplynk/lynk-design 1.19.2 → 1.20.0

package/dist/chunks/chunk.RKODCJAI.js

@@ -1,920 +0,0 @@
-import {
-  date_time_picker_styles_default
-} from "./chunk.YG7OTIDV.js";
-import {
-  LynkDropdown
-} from "./chunk.HKHQ4ZOP.js";
-import {
-  LynkFormField
-} from "./chunk.XSSZIJ3T.js";
-import {
-  defaultValue
-} from "./chunk.GI7VDIWX.js";
-import {
-  LynkClock
-} from "./chunk.VHJTXB5K.js";
-import {
-  LynkCalendar
-} from "./chunk.P3L4QBEF.js";
-import {
-  LynkButton
-} from "./chunk.PGYUPEDU.js";
-import {
-  FormControlController
-} from "./chunk.5AIQMNFQ.js";
-import {
-  LynkIconButton
-} from "./chunk.DPLL6LMN.js";
-import {
-  LynkIcon
-} from "./chunk.335GLGJ2.js";
-import {
-  HasSlotController
-} from "./chunk.OW5NIGGX.js";
-import {
-  watch
-} from "./chunk.SPANRPKG.js";
-import {
-  LynkElement
-} from "./chunk.QEGXVYYA.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
-};