@helixui/library 3.3.1 → 3.4.0-next.121

package/dist/shared/hx-time-picker-BoEIZwzv.js

@@ -1,688 +0,0 @@
-import { css as C, nothing as _, html as x } from "lit";
-import { property as h, state as p, query as w, customElement as E } from "lit/decorators.js";
-import { F as L } from "./FormMixin-B8PXk5RQ.js";
-import { classMap as I } from "lit/directives/class-map.js";
-import { ifDefined as v } from "lit/directives/if-defined.js";
-import { live as D } from "lit/directives/live.js";
-import { repeat as M } from "lit/directives/repeat.js";
-import { b as H } from "./forced-colors-CTEDFRGa.js";
-import { H as O } from "./helix-element-BNEYeiys.js";
-import { c as V } from "./id-counter-DuX8vsui.js";
-const A = C`
-  :host {
-    display: block;
-    position: relative;
-  }
-  :host([disabled]) {
-    opacity: var(--hx-opacity-disabled, 0.5);
-    pointer-events: none;
-  }
-  * {
-    box-sizing: border-box;
-  }
-  .field {
-    display: flex;
-    flex-direction: column;
-    gap: var(--hx-space-1, 0.25rem);
-    font-family: var(--hx-time-picker-font-family, var(--hx-font-family-sans, sans-serif));
-  }
-  .field__label {
-    display: flex;
-    align-items: baseline;
-    gap: var(--hx-space-1, 0.25rem);
-    font-size: var(--hx-font-size-sm, 0.875rem);
-    font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-time-picker-label-color, var(--hx-color-text-strong, #202b39));
-    line-height: var(--hx-line-height-normal, 1.5);
-  }
-  .field__required-marker {
-    color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #c92a2a));
-    font-weight: var(--hx-font-weight-bold, 700);
-  }
-  .field__combobox {
-    position: relative;
-    display: flex;
-    align-items: center;
-    border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-time-picker-border-color, var(--hx-color-border-strong, #66787b));
-    border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-time-picker-bg, var(--hx-color-surface-default, #ffffff));
-    transition:
-      border-color var(--hx-transition-fast, 150ms ease),
-      box-shadow var(--hx-transition-fast, 150ms ease);
-    overflow: visible;
-  }
-  .field__combobox:focus-within {
-    border-color: var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color));
-    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
-      color-mix(
-        in srgb,
-        var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color))
-          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
-        transparent
-      );
-  }
-  .field--error .field__combobox {
-    border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500, #e5493e));
-  }
-  .field--error .field__combobox:focus-within {
-    border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500, #e5493e));
-    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
-      color-mix(
-        in srgb,
-        var(--hx-time-picker-error-color, var(--hx-color-error-500, #e5493e))
-          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
-        transparent
-      );
-  }
-  .field__input {
-    flex: 1;
-    border: none;
-    outline: none;
-    background: transparent;
-    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
-    font-family: inherit;
-    font-size: var(--hx-font-size-md, 1rem);
-    color: var(--hx-time-picker-color, var(--hx-color-text-strong, #202b39));
-    line-height: var(--hx-line-height-normal, 1.5);
-    min-height: var(--hx-size-10, 2.5rem);
-    width: 100%;
-    cursor: text;
-  }
-  .field__input::placeholder {
-    color: var(--hx-color-text-placeholder, #66787b);
-  }
-  .field__input:disabled {
-    cursor: not-allowed;
-  }
-  .field__toggle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    background: transparent;
-    padding: 0 var(--hx-space-3, 0.75rem);
-    color: var(--hx-time-picker-chevron-color, var(--hx-color-text-muted, #4a5362));
-    cursor: pointer;
-    height: 100%;
-    min-height: var(--hx-size-10, 2.5rem);
-    flex-shrink: 0;
-    border-inline-start: var(--hx-border-width-thin, 1px) solid
-      var(--hx-time-picker-border-color, var(--hx-color-border-strong, #66787b));
-  }
-  .field__toggle:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color));
-    outline-offset: -2px;
-    border-radius: 0 var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
-  }
-  .field__listbox {
-    position: absolute;
-    top: calc(100% + var(--hx-space-1, 0.25rem));
-    inset-inline-start: 0;
-    inset-inline-end: 0;
-    z-index: var(--hx-z-index-dropdown, 1000);
-    background-color: var(--hx-time-picker-listbox-bg, var(--hx-color-surface-default, #ffffff));
-    border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-time-picker-border-color, var(--hx-color-border-strong, #66787b));
-    border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
-    box-shadow: var(
-      --hx-time-picker-listbox-shadow,
-      0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900) 12%, transparent)
-    );
-    max-height: var(--hx-time-picker-listbox-max-height, 16rem);
-    overflow-y: auto;
-    padding: var(--hx-space-1, 0.25rem) 0;
-    list-style: none;
-    margin: 0;
-  }
-  @media (prefers-reduced-motion: no-preference) {
-    .field__listbox {
-      animation: hx-listbox-enter var(--hx-transition-fast, 150ms ease) forwards;
-    }
-  }
-  @keyframes hx-listbox-enter {
-    0% {
-      opacity: 0;
-      transform: translateY(-0.25rem);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-  .field__option {
-    display: flex;
-    align-items: center;
-    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
-    font-size: var(--hx-font-size-md, 1rem);
-    font-family: inherit;
-    color: var(--hx-time-picker-option-color, var(--hx-color-text-strong, #202b39));
-    cursor: pointer;
-    transition: background-color var(--hx-transition-fast, 150ms ease);
-    line-height: var(--hx-line-height-normal, 1.5);
-  }
-  .field__option:hover,
-  .field__option--active {
-    background-color: var(--hx-time-picker-option-hover-bg, var(--hx-color-primary-50, #ebf8f8));
-    color: var(--hx-time-picker-option-hover-color, var(--hx-color-primary-700, #0f6363));
-  }
-  .field__option--selected {
-    background-color: var(
-      --hx-time-picker-option-selected-bg,
-      var(--hx-color-primary-100, #dbf0f0)
-    );
-    color: var(--hx-time-picker-option-selected-color, var(--hx-color-primary-800, #07494a));
-    font-weight: var(--hx-font-weight-medium, 500);
-  }
-  .field__option--selected.field__option--active {
-    background-color: var(
-      --hx-time-picker-option-selected-bg,
-      var(--hx-color-primary-100, #dbf0f0)
-    );
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .field__combobox,
-    .field__option {
-      transition: none;
-    }
-  }
-  .field__help-text,
-  .field__error {
-    font-size: var(--hx-font-size-xs, 0.75rem);
-    line-height: var(--hx-line-height-normal, 1.5);
-  }
-  .field__help-text {
-    color: var(--hx-color-text-muted, #4a5362);
-  }
-  .field__error {
-    color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #c92a2a));
-  }
-  @media (forced-colors: active) {
-    .field__combobox {
-      border-color: ButtonText;
-      background-color: Canvas;
-    }
-    .field__combobox:focus-within {
-      outline: 3px solid Highlight;
-      outline-offset: 0;
-      box-shadow: none;
-    }
-    .field--error .field__combobox {
-      border-color: LinkText;
-    }
-    .field--error .field__combobox:focus-within {
-      outline-color: Highlight;
-      box-shadow: none;
-    }
-    .field__toggle:focus-visible {
-      outline: 3px solid Highlight;
-      outline-offset: 0;
-    }
-    .field__listbox {
-      border-color: ButtonText;
-      background-color: Canvas;
-      box-shadow: none;
-    }
-    .field__option:hover,
-    .field__option--active {
-      background-color: Highlight;
-      color: HighlightText;
-      forced-color-adjust: none;
-    }
-    .field__option--selected {
-      background-color: Highlight;
-      color: HighlightText;
-      forced-color-adjust: none;
-    }
-    .field__error {
-      color: LinkText;
-    }
-  }
-`;
-var T = Object.defineProperty, P = Object.getOwnPropertyDescriptor, l = (e, t, o, i) => {
-  for (var r = i > 1 ? void 0 : i ? P(t, o) : t, a = e.length - 1, n; a >= 0; a--)
-    (n = e[a]) && (r = (i ? n(t, o, r) : n(r)) || r);
-  return i && r && T(t, o, r), r;
-};
-function d(e) {
-  const t = /^(\d{1,2}):(\d{2})$/.exec(e.trim());
-  if (!t) return null;
-  const o = parseInt(t[1] ?? "0", 10), i = parseInt(t[2] ?? "0", 10);
-  return o < 0 || o > 23 || i < 0 || i > 59 ? null : { hours: o, minutes: i };
-}
-function f(e, t) {
-  return `${String(e).padStart(2, "0")}:${String(t).padStart(2, "0")}`;
-}
-function k(e) {
-  const t = d(e);
-  if (!t) return e;
-  const { hours: o, minutes: i } = t, r = o < 12 ? "AM" : "PM", a = o % 12 === 0 ? 12 : o % 12;
-  return `${String(a).padStart(2, "0")}:${String(i).padStart(2, "0")} ${r}`;
-}
-function q(e, t, o, i) {
-  const r = d(e) ?? { hours: 0, minutes: 0 }, a = d(t) ?? { hours: 23, minutes: 59 }, n = r.hours * 60 + r.minutes, c = a.hours * 60 + a.minutes, u = Math.max(1, Math.round(o)), m = [];
-  for (let b = n; b <= c; b += u) {
-    const $ = Math.floor(b / 60) % 24, S = b % 60, g = f($, S);
-    m.push({
-      value: g,
-      label: i === "12h" ? k(g) : g
-    });
-  }
-  return m;
-}
-function y(e, t, o) {
-  if (!e) return "";
-  const i = d(e);
-  if (!i) return "";
-  const r = i.hours * 60 + i.minutes, a = d(t) ?? { hours: 0, minutes: 0 }, n = d(o) ?? { hours: 23, minutes: 59 }, c = a.hours * 60 + a.minutes, u = n.hours * 60 + n.minutes;
-  return r < c ? f(a.hours, a.minutes) : r > u ? f(n.hours, n.minutes) : f(i.hours, i.minutes);
-}
-function z(e) {
-  const t = e.trim().toUpperCase(), o = d(t);
-  if (o) return f(o.hours, o.minutes);
-  const i = /^(\d{1,2})(?::(\d{2}))?\s*(AM|PM)$/.exec(t) ?? /^(\d{1,2})(\d{2})\s*(AM|PM)$/.exec(t);
-  if (i) {
-    let r = parseInt(i[1] ?? "0", 10);
-    const a = i[2] !== void 0 ? parseInt(i[2], 10) : 0, n = i[3] ?? "";
-    return r < 1 || r > 12 || a < 0 || a > 59 ? null : (n === "AM" ? r = r === 12 ? 0 : r : r = r === 12 ? 12 : r + 12, f(r, a));
-  }
-  return null;
-}
-const F = V("hx-time-picker");
-let s = class extends L(O) {
-  constructor() {
-    super(...arguments), this.name = "", this.value = "", this.min = "00:00", this.max = "23:59", this.step = 30, this.label = "", this.required = !1, this.disabled = !1, this.error = "", this.format = "12h", this._open = !1, this._activeIndex = -1, this._inputDisplayValue = "", this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._hasHelpSlot = !1, this._slottedLabelId = "", this._id = F(), this._listboxId = `${this._id}-listbox`, this._errorId = `${this._id}-error`, this._helpId = `${this._id}-help`, this._cachedSlots = null, this._slotsKey = "", this._handleOutsideClick = (e) => {
-      var t;
-      this.isConnected && !this.contains(e.target) && !((t = this.shadowRoot) != null && t.contains(e.target)) && this._closeListbox();
-    };
-  }
-  /**
-   * Lazily generates and caches the list of time slots based on current min, max, step, and format.
-   * @internal
-   */
-  get _slots() {
-    const e = `${this.min}|${this.max}|${this.step}|${this.format}`;
-    return (this._cachedSlots === null || e !== this._slotsKey) && (this._slotsKey = e, this._cachedSlots = q(this.min, this.max, this.step, this.format)), this._cachedSlots;
-  }
-  // ─── Lifecycle ───
-  connectedCallback() {
-    super.connectedCallback(), document.addEventListener("click", this._handleOutsideClick);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick);
-  }
-  willUpdate(e) {
-    (e.has("value") || e.has("format")) && (this._inputDisplayValue = this.value ? this.format === "12h" ? k(this.value) : this.value : "");
-  }
-  updated(e) {
-    var t;
-    if (super.updated(e), e.has("value") && this._internals.setFormValue(this.value || null), e.has("_open") && this._open && this._scrollActiveOptionIntoView(), e.has("error") && this.error) {
-      const o = (t = this.shadowRoot) == null ? void 0 : t.querySelector('[role="alert"]');
-      if (o) {
-        const i = this.error;
-        requestAnimationFrame(() => {
-          o.textContent = "", requestAnimationFrame(() => {
-            o.textContent = i;
-          });
-        });
-      }
-    }
-  }
-  // ─── Form Integration ───
-  /** @internal */
-  _updateValidity() {
-    this.required && !this.value ? this._internals.setValidity(
-      { valueMissing: !0 },
-      this.error || "Please select a time.",
-      this._inputEl ?? void 0
-    ) : this._internals.setValidity({});
-  }
-  /** @internal */
-  _onFormReset() {
-    this.value = "", this._inputDisplayValue = "", this._internals.setFormValue(null), this._closeListbox(), this._resetInteractionState();
-  }
-  /** @internal */
-  _onFormStateRestore(e, t) {
-    if (typeof e != "string") return;
-    const o = y(e, this.min, this.max);
-    this.value = o;
-  }
-  /** @internal */
-  _onFormDisabled(e) {
-    this.disabled = e;
-  }
-  // ─── Listbox helpers ───
-  /** @internal */
-  _openListbox() {
-    if (this._open) return;
-    const e = this._slots.findIndex((t) => t.value === this.value);
-    this._activeIndex = e >= 0 ? e : 0, this._open = !0;
-  }
-  /** @internal */
-  _closeListbox() {
-    this._open && (this._open = !1, this._activeIndex = -1, this._handleInteractionBlur());
-  }
-  /** @internal */
-  _scrollActiveOptionIntoView() {
-    if (!this._listboxEl) return;
-    const e = this._listboxEl.querySelector(".field__option--active");
-    e == null || e.scrollIntoView({ block: "nearest" });
-  }
-  /** @internal */
-  _selectSlot(e) {
-    const t = y(e.value, this.min, this.max);
-    this.value = t, this._handleInteractionInput(), this._closeListbox(), this._dispatchChange(t);
-  }
-  // ─── Slot tracking ───
-  /** @internal */
-  _handleLabelSlotChange(e) {
-    const o = e.target.assignedNodes({ flatten: !0 });
-    if (this._hasLabelSlot = o.length > 0, this._hasLabelSlot) {
-      const i = o.find((r) => r.nodeType === Node.ELEMENT_NODE);
-      i && (i.id || (i.id = `${this._id}-slotted-label`), this._slottedLabelId = i.id);
-    } else
-      this._slottedLabelId = "";
-  }
-  /** @internal */
-  _handleErrorSlotChange(e) {
-    const t = e.target;
-    this._hasErrorSlot = t.assignedNodes({ flatten: !0 }).length > 0;
-  }
-  /** @internal */
-  _handleHelpSlotChange(e) {
-    const t = e.target;
-    this._hasHelpSlot = t.assignedNodes({ flatten: !0 }).length > 0;
-  }
-  // ─── Event Dispatch ───
-  /** @internal */
-  _dispatchChange(e) {
-    this.dispatchEvent(
-      new CustomEvent("hx-change", {
-        bubbles: !0,
-        composed: !0,
-        detail: { value: e }
-      })
-    );
-  }
-  // ─── Input Handlers ───
-  /** @internal */
-  _handleInputClick() {
-    this.disabled || this._openListbox();
-  }
-  /** @internal */
-  _handleToggleClick(e) {
-    var t;
-    e.stopPropagation(), !this.disabled && (this._open ? this._closeListbox() : (this._openListbox(), (t = this._inputEl) == null || t.focus()));
-  }
-  /** @internal */
-  _handleInputInput(e) {
-    const t = e.target;
-    this._inputDisplayValue = t.value, this._open || this._openListbox();
-  }
-  /** @internal */
-  _handleInputChange(e) {
-    const o = e.target.value.trim();
-    if (!o) {
-      this.value = "", this._handleInteractionInput(), this._handleInteractionBlur(), this._internals.setFormValue(null), this._dispatchChange("");
-      return;
-    }
-    const i = z(o);
-    if (i) {
-      const r = y(i, this.min, this.max);
-      this.value = r, this._handleInteractionInput(), this._handleInteractionBlur(), this._dispatchChange(r);
-    } else
-      this._inputDisplayValue = this.value ? this.format === "12h" ? k(this.value) : this.value : "";
-  }
-  /** @internal */
-  _handleInputKeyDown(e) {
-    switch (e.key) {
-      case "ArrowDown":
-        e.preventDefault(), this._open ? (this._activeIndex = Math.min(this._activeIndex + 1, this._slots.length - 1), this._scrollActiveOptionIntoView()) : this._openListbox();
-        break;
-      case "ArrowUp":
-        e.preventDefault(), this._open && (this._activeIndex = Math.max(this._activeIndex - 1, 0), this._scrollActiveOptionIntoView());
-        break;
-      case "Enter":
-        if (this._open && this._activeIndex >= 0) {
-          e.preventDefault();
-          const t = this._slots[this._activeIndex];
-          t && this._selectSlot(t);
-        }
-        break;
-      case "Escape":
-        e.preventDefault(), this._closeListbox();
-        break;
-      case "Home":
-        this._open && (e.preventDefault(), this._activeIndex = 0, this._scrollActiveOptionIntoView());
-        break;
-      case "End":
-        this._open && (e.preventDefault(), this._activeIndex = this._slots.length - 1, this._scrollActiveOptionIntoView());
-        break;
-      case "Tab":
-        this._closeListbox();
-        break;
-    }
-  }
-  /** @internal */
-  _handleOptionPointerDown(e) {
-    e.preventDefault();
-  }
-  /** @internal */
-  _handleOptionClick(e) {
-    var t;
-    this._selectSlot(e), (t = this._inputEl) == null || t.focus();
-  }
-  /** @internal */
-  _handleOptionMouseEnter(e) {
-    this._activeIndex = e;
-  }
-  // ─── Public API ───
-  /** Moves focus to the time input element. */
-  focus(e) {
-    var t;
-    (t = this._inputEl) == null || t.focus(e);
-  }
-  // ─── Render ───
-  render() {
-    const e = !!this.error || this._hasErrorSlot, t = this._slots, o = {
-      field: !0,
-      "field--error": e,
-      "field--disabled": this.disabled,
-      "field--required": this.required
-    }, i = this._open && this._activeIndex >= 0 ? `${this._listboxId}-option-${this._activeIndex}` : void 0, r = this.format === "12h" ? "hh:mm AM" : "hh:mm", a = [e ? this._errorId : null, this._helpId].filter(Boolean).join(" ") || void 0;
-    return x`
-      <div part="field" class=${I(o)}>
-        <!-- Label -->
-        <slot name="label" @slotchange=${this._handleLabelSlotChange}>
-          ${this.label ? x`
-                <label part="label" class="field__label" for=${this._id}>
-                  ${this.label}
-                  ${this.required ? x`<span class="field__required-marker" aria-hidden="true">*</span>` : _}
-                </label>
-              ` : _}
-        </slot>
-
-        <!-- Combobox wrapper; role="combobox" lives on the input per ARIA 1.2 -->
-        <div class="field__combobox">
-          <input
-            part="input"
-            class="field__input"
-            id=${this._id}
-            type="text"
-            inputmode="text"
-            autocomplete="off"
-            spellcheck="false"
-            role="combobox"
-            aria-expanded=${this._open ? "true" : "false"}
-            aria-haspopup="listbox"
-            .value=${D(this._inputDisplayValue)}
-            placeholder=${r}
-            ?required=${this.required}
-            ?disabled=${this.disabled}
-            name=${v(this.name || void 0)}
-            aria-autocomplete="list"
-            aria-controls=${this._listboxId}
-            aria-activedescendant=${v(i)}
-            aria-invalid=${e ? "true" : _}
-            aria-describedby=${v(a)}
-            aria-required=${this.required ? "true" : _}
-            aria-labelledby=${v(
-      this._hasLabelSlot && this._slottedLabelId ? this._slottedLabelId : void 0
-    )}
-            @click=${this._handleInputClick}
-            @input=${this._handleInputInput}
-            @change=${this._handleInputChange}
-            @keydown=${this._handleInputKeyDown}
-          />
-
-          <!-- Toggle button -->
-          <button
-            part="toggle"
-            type="button"
-            class="field__toggle"
-            tabindex="-1"
-            aria-label=${this._open ? "Close time picker" : "Open time picker"}
-            ?disabled=${this.disabled}
-            @click=${this._handleToggleClick}
-          >
-            <!-- Clock icon -->
-            <svg
-              width="16"
-              height="16"
-              viewBox="0 0 16 16"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-            >
-              <circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.25" />
-              <path
-                d="M8 4.5V8L10.5 10"
-                stroke="currentColor"
-                stroke-width="1.25"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </svg>
-          </button>
-
-          <!-- Dropdown listbox: always in DOM so aria-controls is never a dangling reference (WCAG 4.1.2). Hidden via the boolean hidden attribute when closed. -->
-          <ul
-            part="listbox"
-            class="field__listbox"
-            id=${this._listboxId}
-            role="listbox"
-            aria-label=${this.label || "Time options"}
-            ?hidden=${!this._open}
-          >
-            ${this._open ? M(
-      t,
-      (n) => n.value,
-      (n, c) => {
-        const u = n.value === this.value, m = c === this._activeIndex;
-        return x`
-                      <li
-                        part="option"
-                        class=${I({
-          field__option: !0,
-          "field__option--selected": u,
-          "field__option--active": m
-        })}
-                        id="${this._listboxId}-option-${c}"
-                        role="option"
-                        aria-selected=${u ? "true" : "false"}
-                        @pointerdown=${this._handleOptionPointerDown}
-                        @click=${() => this._handleOptionClick(n)}
-                        @mouseenter=${() => this._handleOptionMouseEnter(c)}
-                      >
-                        ${n.label}
-                      </li>
-                    `;
-      }
-    ) : _}
-          </ul>
-        </div>
-
-        <!-- Error slot / property -->
-        <slot name="error" @slotchange=${this._handleErrorSlotChange}>
-          ${this.error ? x`
-                <div part="error" class="field__error" id=${this._errorId} role="alert">
-                  ${this.error}
-                </div>
-              ` : _}
-        </slot>
-
-        <!-- Help slot -->
-        <div part="help-text" class="field__help-text" id=${this._helpId}>
-          <slot name="help-text" @slotchange=${this._handleHelpSlotChange}></slot>
-        </div>
-      </div>
-    `;
-  }
-};
-s.styles = [A, H];
-s.formAssociated = !0;
-l([
-  h({ type: String, reflect: !0 })
-], s.prototype, "name", 2);
-l([
-  h({ type: String, reflect: !0 })
-], s.prototype, "value", 2);
-l([
-  h({ type: String })
-], s.prototype, "min", 2);
-l([
-  h({ type: String })
-], s.prototype, "max", 2);
-l([
-  h({ type: Number })
-], s.prototype, "step", 2);
-l([
-  h({ type: String })
-], s.prototype, "label", 2);
-l([
-  h({ type: Boolean, reflect: !0 })
-], s.prototype, "required", 2);
-l([
-  h({ type: Boolean, reflect: !0 })
-], s.prototype, "disabled", 2);
-l([
-  h({ type: String })
-], s.prototype, "error", 2);
-l([
-  h({ type: String, reflect: !0 })
-], s.prototype, "format", 2);
-l([
-  p()
-], s.prototype, "_open", 2);
-l([
-  p()
-], s.prototype, "_activeIndex", 2);
-l([
-  p()
-], s.prototype, "_inputDisplayValue", 2);
-l([
-  p()
-], s.prototype, "_hasLabelSlot", 2);
-l([
-  p()
-], s.prototype, "_hasErrorSlot", 2);
-l([
-  p()
-], s.prototype, "_hasHelpSlot", 2);
-l([
-  p()
-], s.prototype, "_slottedLabelId", 2);
-l([
-  w(".field__input")
-], s.prototype, "_inputEl", 2);
-l([
-  w(".field__listbox")
-], s.prototype, "_listboxEl", 2);
-s = l([
-  E("hx-time-picker")
-], s);
-export {
-  s as H
-};
-//# sourceMappingURL=hx-time-picker-BoEIZwzv.js.map