dap-design-system 0.60.2 → 0.61.0

package/dist/components/timepicker/timepicker.component.js

@@ -0,0 +1,528 @@
+var D = Object.defineProperty;
+var T = Object.getOwnPropertySymbols;
+var w = Object.prototype.hasOwnProperty, C = Object.prototype.propertyIsEnumerable;
+var S = (h, e, t) => e in h ? D(h, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : h[e] = t, v = (h, e) => {
+  for (var t in e || (e = {}))
+    w.call(e, t) && S(h, t, e[t]);
+  if (T)
+    for (var t of T(e))
+      C.call(e, t) && S(h, t, e[t]);
+  return h;
+};
+var g = (h, e, t) => new Promise((i, o) => {
+  var d = (u) => {
+    try {
+      c(t.next(u));
+    } catch (f) {
+      o(f);
+    }
+  }, p = (u) => {
+    try {
+      c(t.throw(u));
+    } catch (f) {
+      o(f);
+    }
+  }, c = (u) => u.done ? i(u.value) : Promise.resolve(u.value).then(d, p);
+  c((t = t.apply(h, e)).next());
+});
+import { clsx as y } from "../../node_modules/clsx/dist/clsx.js";
+import n from "../../_virtual/dayjs.min.js";
+import "../../node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as $ } from "../../node_modules/lit-html/lit-html.js";
+import "../../node_modules/lit-element/lit-element.js";
+import { property as l } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { state as G } from "../../node_modules/@lit/reactive-element/decorators/state.js";
+import { query as k } from "../../node_modules/@lit/reactive-element/decorators/query.js";
+import { ifDefined as m } from "../../node_modules/lit-html/directives/if-defined.js";
+import { html as b } from "../../node_modules/lit-html/static.js";
+import { getValidityStateObject as x } from "../../common/utils.js";
+import { GenericFormElement as B } from "../../internal/mixin/genericFormElement.js";
+import "../../localization/localization.js";
+import z from "../feedback/feedback.component.js";
+import A from "../form/form-label/form-label.component.js";
+import L from "../icon/icon.component.js";
+import q from "../icon-button/icon-button.component.js";
+import F from "../icons/system/system-loading-spinner/system-loading-spinner.component.js";
+import H from "../icons/system/system-time-line/system-time-line.component.js";
+import M from "../popup/popup.component.js";
+import O from "../tooltip/tooltip.component.js";
+import E from "../typography/typography.component.js";
+import P from "./time-grid.component.js";
+import U from "./timepicker.scss.js";
+import V, { t as j } from "../../node_modules/i18next/dist/esm/i18next.js";
+import { unsafeCSS as R } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var N = Object.defineProperty, a = (h, e, t, i) => {
+  for (var o = void 0, d = h.length - 1, p; d >= 0; d--)
+    (p = h[d]) && (o = p(e, t, o) || o);
+  return o && N(e, t, o), o;
+}, r;
+const s = (r = class extends B {
+  constructor() {
+    super(), this.minTime = "00:00", this.maxTime = "23:59", this.step = 5, this.placement = "bottom-start", this.opened = !1, this.openTimeOnInput = !1, this.sendEmptyEventOnInput = !1, this.loading = !1, this.format = "HH:mm", this.clearButton = "true", this.clearButtonTestId = "timepicker-clear-button", this.timeButtonTestId = "timepicker-time-button", this.floatingStrategy = "fixed", this.disableViewportAutoClose = !1, this.locale = n.locale(), this.closeOnSelection = !1, this.showSeconds = !1, this.secondsStep = 1, this.hideDisabledTimes = !1, this.setValueState = !0, this.languageChangeHandler = () => {
+      if (!this.hasAttribute("locale")) {
+        const t = V.language || n.locale();
+        this.locale !== t && (this.locale = t, n.locale(t), this.requestUpdate());
+      }
+    }, this.handleDocumentMouseDown = (t) => {
+      const i = t.composedPath();
+      this && !i.includes(this) && this.hideTimePicker();
+    }, this.handlePopupAutoClose = () => {
+      this.hideTimePicker({ skipFocus: !0 });
+    }, this.handleInput = (t) => {
+      const i = t.target;
+      if (!i.value)
+        this.setValue(void 0, !1, !0);
+      else if (this.isInputValid()) {
+        const o = n(`2000-01-01 ${i.value}`);
+        this.setValue(o, !1), this.emit("dds-valid-time", {
+          value: i.value,
+          type: "valid",
+          minute: o.minute(),
+          hour: o.hour()
+        });
+      } else
+        this.setValue(void 0, !1, this.sendEmptyEventOnInput), this.emit("dds-invalid-time", {
+          value: i.value,
+          type: "invalid",
+          hour: i.value.split(":")[0],
+          minute: i.value.split(":")[1]
+        });
+      this.openTimeOnInput && !this.opened && this.showTimePicker(), this.emit("dds-input", { value: i.value });
+    }, this.handleKeyDown = (t) => g(this, null, function* () {
+      t.key !== "Tab" && (t.key === "Enter" || t.key === "ArrowDown" || t.key === "ArrowUp") && (t.preventDefault(), t.stopPropagation(), this.opened ? this.hideTimePicker() : this.showTimePicker());
+    }), this.handleClick = () => {
+      this.opened ? this.hideTimePicker() : this.showTimePicker();
+    }, this.handleClearClick = () => {
+      this.disabled || (this.clearSelection(), this.triggerInput.focus(), this.setValidity(), this.hideTimePicker(), this.emit("dds-clear"));
+    }, this.handleTimeChange = (t) => {
+      const { hour: i, minute: o, second: d } = t.detail, p = n().hour(i).minute(o).second(d != null ? d : 0).millisecond(0);
+      this.setValue(p, !0, !0);
+    }, this.handleFocus = () => {
+      this.emit("dds-focus");
+    }, this.handleBlur = () => {
+      this.emit("dds-blur");
+    }, this.handlePopupOpened = () => {
+      this.timeGrid && requestAnimationFrame(() => {
+        this.timeGrid.scrollToSelectedTime();
+      });
+    }, r.nextId++;
+    const e = typeof crypto != "undefined" && crypto.randomUUID ? crypto.randomUUID().slice(0, 8) : Date.now().toString(36);
+    this.inputId = `input-${r.nextId}-${e}`, this.labelId = `label-${r.nextId}-${e}`, this.descriptionId = `description-${r.nextId}-${e}`, this.feedbackId = `feedback-${r.nextId}-${e}`;
+  }
+  // The selected time value (Dayjs object) - internal use only
+  get timeValue() {
+    return this._timeValue;
+  }
+  set timeValue(e) {
+    this._timeValue = e;
+  }
+  connectedCallback() {
+    if (super.connectedCallback(), V.on("languageChanged", this.languageChangeHandler), !this.hasAttribute("locale")) {
+      const e = V.language || n.locale();
+      this.locale !== e && (this.locale = e, n.locale(e));
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), V.off("languageChanged", this.languageChangeHandler);
+  }
+  firstUpdated(e) {
+    super.firstUpdated(e), this.syncTimeValue(), this.timeValue && (this.triggerInput.value = this.getFormattedValue(), this.updateTimeGridSelection());
+  }
+  // Override attributeChangedCallback to sync internal state when value changes
+  attributeChangedCallback(e, t, i) {
+    super.attributeChangedCallback(e, t, i), e === "value" && i !== t && (this.syncTimeValue(), this.requestUpdate());
+  }
+  /**
+   * Normalizes a time value to a Dayjs object.
+   * Handles Dayjs objects, Date objects, strings (HH:mm or HH:mm:ss format, or date strings), and undefined/null.
+   */
+  normalizeTime(e) {
+    if (e != null) {
+      if (n.isDayjs(e))
+        return e;
+      if (e instanceof Date)
+        return n(e);
+      if (typeof e == "number")
+        return n(e);
+      if (typeof e == "string") {
+        const t = e.trim();
+        if (/^([0-1]?[0-9]|2[0-3]):[0-5][0-9](:[0-5][0-9])?$/.test(t))
+          return n(`2000-01-01 ${t}`);
+        if (/^\d+$/.test(t)) {
+          const d = Number(t);
+          if (d > 0 && d < 1e10)
+            return n(d * 1e3);
+          if (d >= 0 && d <= 41024448e5)
+            return n(d);
+        }
+        const o = n(t);
+        return o.isValid() ? o : void 0;
+      }
+    }
+  }
+  // Sync internal _timeValue with public value property
+  syncTimeValue() {
+    const e = this.normalizeTime(this.value);
+    this._timeValue = e, e ? (!n.isDayjs(this.value) || !e.isSame(this.value, "minute")) && (this.value = e) : this.value !== void 0 && this.value !== null && (this.value = void 0);
+  }
+  updated(e) {
+    if (super.updated(e), e.has("value")) {
+      const t = this.normalizeTime(this.value);
+      t ? (this._timeValue = t, (!n.isDayjs(this.value) || !t.isSame(this.value)) && (this.value = t)) : (this._timeValue = void 0, this.value !== void 0 && this.value !== null && (this.value = void 0)), this.setValueState && (this.triggerInput.value = this.getFormattedValue(), this.updateTimeGridSelection()), this.setValidity();
+    }
+    e.has("step") && this.timeGrid && (this.timeGrid.step = this.step), e.has("minTime") && this.timeGrid && (this.timeGrid.minTime = this.minTime), e.has("maxTime") && this.timeGrid && (this.timeGrid.maxTime = this.maxTime), e.has("locale") && this.timeGrid && (this.timeGrid.locale = this.locale), e.has("showSeconds") && this.timeGrid && (this.timeGrid.showSeconds = this.showSeconds), e.has("secondsStep") && this.timeGrid && (this.timeGrid.secondsStep = this.secondsStep), e.has("disabledTime") && this.timeGrid && (this.timeGrid.disabledTime = this.disabledTime), e.has("hideDisabledTimes") && this.timeGrid && (this.timeGrid.hideDisabledTimes = this.hideDisabledTimes), e.has("presets") && this.timeGrid && (this.timeGrid.presets = this.presets);
+  }
+  updateTimeGridSelection() {
+    this.timeValue && this.timeGrid && (this.timeGrid.selectedHour = this.timeValue.hour(), this.timeGrid.selectedMinute = this.timeValue.minute(), this.showSeconds && (this.timeGrid.selectedSecond = this.timeValue.second()));
+  }
+  getHourValue() {
+    return this.timeValue ? this.timeValue.hour() : 12;
+  }
+  getMinuteValue() {
+    return this.timeValue ? this.timeValue.minute() : 0;
+  }
+  getSecondValue() {
+    return this.timeValue ? this.timeValue.second() : 0;
+  }
+  getFormattedValue() {
+    return this.timeValue ? n(this.timeValue).format(this.format) : "";
+  }
+  isValidTime(e) {
+    if (!e || !(this.showSeconds ? /^([0-1]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/ : /^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/).test(e))
+      return !1;
+    const i = n(`2000-01-01 ${e}`), o = n(`2000-01-01 ${this.minTime}`), d = n(`2000-01-01 ${this.maxTime}`);
+    if (!(i.isSame(o) || i.isAfter(o) && i.isBefore(d) || i.isSame(d)))
+      return !1;
+    if (this.disabledTime) {
+      const c = i.hour(), u = i.minute(), f = this.showSeconds ? i.second() : void 0;
+      return !this.disabledTime(c, u, f);
+    }
+    return !0;
+  }
+  isValueValid() {
+    return this.timeValue ? this.isInputValid() : !0;
+  }
+  isInputValid() {
+    return this.isValidTime(this.triggerInput.value);
+  }
+  setValue(e, t = !0, i = !0) {
+    var o, d, p, c, u, f;
+    if (this._timeValue = e, this.value = e, t ? (this.setValueState = !0, this.triggerInput.value = this.getFormattedValue(), this.updateTimeGridSelection()) : this.setValueState = !1, this.internals && this.internals.setFormValue(
+      this.value ? this.showSeconds ? this.value.format("HH:mm:ss") : this.value.format("HH:mm") : this.defaultValue
+    ), this.setValidity(), this.closeOnSelection && this.hideTimePicker(), i) {
+      const I = v({
+        value: this.timeValue,
+        hour: (o = this.timeValue) == null ? void 0 : o.hour(),
+        minute: (d = this.timeValue) == null ? void 0 : d.minute()
+      }, this.showSeconds && { second: (p = this.timeValue) == null ? void 0 : p.second() });
+      this.emit("dds-change", I), this.emit("dds-valid-time", v({
+        value: this.triggerInput.value,
+        hour: (c = this.timeValue) == null ? void 0 : c.hour(),
+        minute: (u = this.timeValue) == null ? void 0 : u.minute()
+      }, this.showSeconds && { second: (f = this.timeValue) == null ? void 0 : f.second() }));
+    }
+  }
+  clearSelection() {
+    return g(this, null, function* () {
+      this.setValue(void 0, !0, !0);
+    });
+  }
+  get focusElement() {
+    return this.triggerInput;
+  }
+  showTimePicker() {
+    return g(this, null, function* () {
+      this.disabled || this.readonly || this.opened || (this.opened = !0, document.addEventListener("mousedown", this.handleDocumentMouseDown));
+    });
+  }
+  hideTimePicker(e) {
+    return g(this, null, function* () {
+      this.opened && (this.opened = !1, document.removeEventListener("mousedown", this.handleDocumentMouseDown), yield this.updateComplete, e != null && e.skipFocus || this.focus());
+    });
+  }
+  // custom validation
+  getValidity() {
+    return !!this.value;
+  }
+  get validity() {
+    return this.internals.validity ? this.internals.validity : x({
+      valueMissing: this.required && !this.getValidity(),
+      patternMismatch: !this.isValueValid()
+    });
+  }
+  checkValidity() {
+    return this.required && this.getValidity() && this.isValueValid();
+  }
+  reportValidity() {
+    return this.required && this.getValidity() && this.isValueValid();
+  }
+  setValidity() {
+    this.checkValidity() ? this.internals.setValidity({}) : this.internals.setValidity(
+      {
+        valueMissing: this.required && !this.getValidity(),
+        patternMismatch: !this.isValueValid()
+      },
+      this.validationMessage,
+      this.triggerInput
+    );
+  }
+  handleInvalid(e) {
+    e.preventDefault();
+  }
+  render() {
+    var e, t;
+    return b` <div class="label-container">
+        ${this.label && b`<dap-ds-form-label
+          part="label"
+          id=${this.labelId}
+          .size=${this.size}
+          .required=${this.required}
+          .requiredLabel=${this.requiredLabel}
+          .optional=${this.optional}
+          .optionalLabel=${this.optionalLabel}
+          .disabled=${this.disabled}
+          class=${y("label")}
+          .noMargin=${!!this.description}
+          for=${this.inputId}
+          .hideLabel=${this.hideLabel}
+          label=${m(this.label)}>
+        </dap-ds-form-label>`}
+        ${this.tooltip && b` <dap-ds-tooltip
+          part="tooltip"
+          content=${this.tooltip}
+          mode="toggle"
+          placement=${this.tooltipPlacement}>
+          <dap-ds-icon-button
+            slot="trigger"
+            size=${this.size}
+            iconSize=${this.size === "xs" ? "16" : "22"}
+            clean>
+            <dap-ds-icon
+              name="information-line"
+              aria-label=${this.tooltipAriaLabel}
+              class="info-button"></dap-ds-icon>
+          </dap-ds-icon-button>
+        </dap-ds-tooltip>`}
+      </div>
+      ${this.description && b`
+        <dap-ds-typography
+          part="description"
+          variant="description"
+          class=${y("input-description")}
+          size=${m(this.size)}
+          id=${this.descriptionId}>
+          ${this.description}
+        </dap-ds-typography>
+      `}
+      <div>
+        <dap-ds-popup
+          part="base"
+          class="select-popup"
+          overflow
+          ?opened=${this.opened}
+          ?hasArrow=${!1}
+          placement=${this.placement}
+          floatingStrategy=${this.floatingStrategy}
+          maxHeight="auto"
+          offset="4"
+          ?disableViewportAutoClose=${this.disableViewportAutoClose}
+          @dds-close=${this.handlePopupAutoClose}
+          @dds-opened=${this.handlePopupOpened}>
+          <div
+            slot="trigger"
+            part="trigger"
+            class="${y("select", `select--${this.size}`, {
+      "select--disabled": this.disabled,
+      "select--readonly": this.readonly,
+      "select--opened": this.opened,
+      "select--loading": this.loading,
+      "select--success": this.status === "success",
+      "select--error": this.status === "error"
+    })}">
+            <input
+              part="input"
+              role="combobox"
+              class="${y("combobox__input", "input", `input--${this.size}`, {
+      "input--disabled": this.disabled,
+      "input--readonly": this.readonly
+    })}"
+              id=${this.inputId}
+              value=${this.getFormattedValue()}
+              aria-expanded=${this.opened}
+              aria-haspopup="dialog"
+              aria-labelledby=${m(this.label ? this.labelId : $)}
+              aria-describedby="${m(
+      this.description ? this.descriptionId : $
+    )} ${m(this.feedback ? this.feedbackId : $)}"
+              aria-disabled=${this.disabled}
+              aria-controls="time-grid"
+              aria-autocomplete="none"
+              ?required=${this.required}
+              ?readonly=${this.readonly}
+              ?autofocus=${this.autofocus}
+              ?disabled=${this.disabled}
+              autocomplete=${this.autocomplete}
+              placeholder=${m((e = this.placeholder) != null ? e : "")}
+              @blur=${this.handleBlur}
+              @focus=${this.handleFocus}
+              @input=${this.handleInput}
+              @keydown=${this.handleKeyDown}
+              @invalid=${this.handleInvalid}
+              @click=${this.handleClick} />
+            <div
+              class="${y("select-action", `select-action--${this.size}`, {
+      "select-action--disabled": this.disabled,
+      "select-action--readonly": this.readonly,
+      "select-action--opened": this.opened
+    })}">
+              ${this.clearButton === "true" && !this.readonly ? b`<div class="${y("clear-icon")}">
+                    <dap-ds-icon-button
+                      icon="close-line"
+                      part="clear-button"
+                      data-testid=${this.clearButtonTestId}
+                      aria-label=${m(
+      (t = this.clearButtonAriaLabel) != null ? t : j("clear", { lng: this.locale })
+    )}
+                      ?disabled=${this.disabled}
+                      @click=${this.handleClearClick}></dap-ds-icon-button>
+                  </div>` : $}
+              <div
+                class="${y("indicator-icon", {
+      "indicator-icon--loading": this.loading
+    })}">
+                ${this.loading ? b`<dap-ds-icon-loading-spinner></dap-ds-icon-loading-spinner>` : b`<dap-ds-icon-time-line
+                      aria-hidden="true"
+                      part="time-button"
+                      data-testid=${this.timeButtonTestId}
+                      class=${y("time-icon")}
+                      @click=${this.handleClick}></dap-ds-icon-time-line>`}
+              </div>
+            </div>
+          </div>
+          <dap-ds-time-grid
+            id="time-grid"
+            part="time-grid"
+            .selectedHour=${this.getHourValue()}
+            .selectedMinute=${this.getMinuteValue()}
+            .selectedSecond=${this.getSecondValue()}
+            .minTime=${this.minTime}
+            .maxTime=${this.maxTime}
+            .step=${this.step}
+            .locale=${this.locale}
+            .showSeconds=${this.showSeconds}
+            .secondsStep=${this.secondsStep}
+            .disabledTime=${this.disabledTime}
+            .hideDisabledTimes=${this.hideDisabledTimes}
+            .presets=${this.presets}
+            @dds-change=${(i) => {
+      i.stopPropagation(), i.preventDefault(), this.handleTimeChange(i);
+    }}>
+          </dap-ds-time-grid>
+        </dap-ds-popup>
+        ${this.feedback && b`<dap-ds-feedback
+          part="feedback"
+          feedbackType=${m(this.feedbackType)}
+          feedbackSize="${m(this.size)}"
+          id="feedback">
+          ${this.feedback}
+        </dap-ds-feedback>`}
+      </div>`;
+  }
+}, r.tagName = "dap-ds-timepicker", r.dependencies = {
+  "dap-ds-form-label": A,
+  "dap-ds-tooltip": O,
+  "dap-ds-icon-button": q,
+  "dap-ds-icon": L,
+  "dap-ds-typography": E,
+  "dap-ds-popup": M,
+  "dap-ds-icon-loading-spinner": F,
+  "dap-ds-icon-time-line": H,
+  "dap-ds-time-grid": P,
+  "dap-ds-feedback": z
+}, r.nextId = 0, r.styles = R(U), r);
+a([
+  k(".combobox__input")
+], s.prototype, "triggerInput");
+a([
+  k("#time-grid")
+], s.prototype, "timeGrid");
+a([
+  l({ attribute: !0 })
+], s.prototype, "value");
+a([
+  l({ type: String })
+], s.prototype, "minTime");
+a([
+  l({ type: String })
+], s.prototype, "maxTime");
+a([
+  l({ type: Number })
+], s.prototype, "step");
+a([
+  l({ reflect: !0 })
+], s.prototype, "placement");
+a([
+  l({ type: Boolean, reflect: !0 })
+], s.prototype, "opened");
+a([
+  l({ type: Boolean })
+], s.prototype, "openTimeOnInput");
+a([
+  l({ type: Boolean })
+], s.prototype, "sendEmptyEventOnInput");
+a([
+  l()
+], s.prototype, "placeholder");
+a([
+  l({ type: Boolean })
+], s.prototype, "loading");
+a([
+  l({ type: String })
+], s.prototype, "format");
+a([
+  l({ type: String })
+], s.prototype, "clearButton");
+a([
+  l({ type: String })
+], s.prototype, "clearButtonAriaLabel");
+a([
+  l()
+], s.prototype, "clearButtonTestId");
+a([
+  l()
+], s.prototype, "timeButtonTestId");
+a([
+  l({ type: String })
+], s.prototype, "floatingStrategy");
+a([
+  l({ type: Boolean })
+], s.prototype, "disableViewportAutoClose");
+a([
+  l({ type: String })
+], s.prototype, "locale");
+a([
+  l({ type: Boolean })
+], s.prototype, "closeOnSelection");
+a([
+  l({ type: Boolean })
+], s.prototype, "showSeconds");
+a([
+  l({ type: Number })
+], s.prototype, "secondsStep");
+a([
+  l({ attribute: !1 })
+], s.prototype, "disabledTime");
+a([
+  l({ type: Boolean })
+], s.prototype, "hideDisabledTimes");
+a([
+  l({ type: Array, attribute: !1 })
+], s.prototype, "presets");
+a([
+  G()
+], s.prototype, "setValueState");
+let $e = s;
+export {
+  $e as default
+};
+//# sourceMappingURL=timepicker.component.js.map

package/dist/components/timepicker/timepicker.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timepicker.component.js","sources":["../../../src/components/timepicker/timepicker.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport dayjs, { Dayjs } from 'dayjs'\nimport { nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport {\n  CommonFormElementSize,\n  FloatingStrategy,\n  PopupPlacement,\n  TimePreset,\n  TimeSelection,\n} from '@/common/types'\nimport { getValidityStateObject } from '@/common/utils'\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\nimport { i18next, t } from '@/localization/localization'\n\nimport DapDSFeedback from '../feedback/feedback.component'\nimport DapDSFormLabel from '../form/form-label/form-label.component'\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport SystemLoadingSpinner from '../icons/system/system-loading-spinner/system-loading-spinner.component'\nimport SystemTimeLine from '../icons/system/system-time-line/system-time-line.component'\nimport DapDSPopup from '../popup/popup.component'\nimport DapDSTooltip from '../tooltip/tooltip.component'\nimport DapDSTypography from '../typography/typography.component'\nimport DapDSTimeGrid from './time-grid.component'\nimport styles from './timepicker.scss?inline'\n\n/**\n * `dap-ds-timepicker`\n * @summary A timepicker is a graphical user interface widget that allows the user to select a time from a time range.\n * @element dap-ds-timepicker\n * @title - Timepicker\n *\n * @property {Dayjs | string} value - The value of the timepicker. Can be a Dayjs object or a string in 'HH:mm' format.\n * @property {string} label - The label of the timepicker.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} description - The description of the timepicker.\n * @property {'xs' | 'sm' | 'lg'} size - The size of the timepicker.\n * @property {boolean} disabled - The disabled state of the timepicker.\n * @property {boolean} required - The required state of the timepicker.\n * @property {boolean} readonly - The readonly state of the timepicker.\n * @property {boolean} autofocus - The autofocus state of the timepicker.\n * @property {string} tooltip - The tooltip of the timepicker.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the timepicker.\n * @property {string} feedback - The feedback of the timepicker.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the timepicker.\n * @property {boolean} optional - The optional state of the timepicker.\n * @property {string} optionalLabel - The optional label of the timepicker.\n * @property {string} requiredLabel - The required indicator of the timepicker. (default: '*')\n * @property {boolean} subtle - The weight of the label. Default is `false`\n * @property {string} autocomplete - The autocomplete of the timepicker.\n * @property {string} placeholder - The placeholder of the timepicker.\n * @property {boolean} loading - The loading state of the timepicker.\n * @property {string} format - The format of the timepicker. Defaults to 'HH:mm'.\n * @property {string} minTime - The minimum time of the timepicker. Format: 'HH:mm'.\n * @property {string} maxTime - The maximum time of the timepicker. Format: 'HH:mm'.\n * @property {number} step - The step interval in minutes. Defaults to 15.\n * @property {boolean} openTimeOnInput - Whether the time picker should open on typing.\n * @property {boolean} sendEmptyEventOnInput - Whether the time picker should send an empty event on typing.\n * @property {string} clearButton - Whether the clear button should be shown. Defaults to 'true'.\n * @property {string} clearButtonAriaLabel - The aria label of the clear button.\n * @property {string} placement - The placement of the dropdown of the timepicker.\n * @property {FloatingStrategy} floatingStrategy - The floating strategy of the timepicker.\n * @property {string} locale - The locale of the timepicker.\n * @property {boolean} closeOnSelection - Whether the dropdown should close when a time is selected.\n * @property {boolean} showSeconds - Whether to show the seconds column in the time picker.\n * @property {number} secondsStep - The step interval in seconds. Defaults to 1.\n * @property {function} disabledTime - Callback to determine if a time should be disabled.\n * @property {boolean} hideDisabledTimes - Whether to hide disabled times or show them as disabled.\n * @property {TimePreset[]} presets - Array of preset time slots for quick selection.\n *\n * @event {{ value: Dayjs | string, hour: number, minute: number, second?: number }} dds-change - Fired when the timepicker value changes.\n * @event {{ value: string }} dds-input - Fired when the timepicker input value changes.\n * @event {{ value: Dayjs | string, hour: number, minute: number, second?: number }} dds-valid-time - Fired when the timepicker input value is valid. Happens on manual input typing.\n * @event {{ value: Dayjs | string, hour: number, minute: number, second?: number, type: 'invalid' | 'out-of-range' }} dds-invalid-time - Fired when the timepicker input value is invalid. Happens on manual input typing.\n * @event {{ void }} dds-clear - Fired when the timepicker is cleared.\n * @event {{ void }} dds-focus - Emitted when the timepicker gains focus.\n * @event {{ void }} dds-blur - Emitted when the timepicker loses focus.\n *\n * @csspart base - The main timepicker container.\n * @csspart trigger - The trigger button of the timepicker.\n * @csspart label - The label of the timepicker.\n * @csspart description - The description of the timepicker.\n * @csspart feedback - The feedback of the timepicker.\n * @csspart tooltip - The tooltip of the timepicker.\n * @csspart input - The input of the timepicker.\n * @csspart clear-button - The clear button of the timepicker.\n *\n * @cssproperty --dds-timepicker-background - The background color of the timepicker. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-timepicker-border-color - The border color of the timepicker. (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-timepicker-border-width - The border width of the timepicker. (default: var(--dds-border-width-base, 1px))\n * @cssproperty --dds-timepicker-border-radius - The border radius of the timepicker. (default: var(--dds-radius-base))\n * @cssproperty --dds-timepicker-text-color - The text color of the timepicker. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-timepicker-placeholder-color - The placeholder text color. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-timepicker-disabled-background - The background color when disabled. (default: var(--dds-background-neutral-stronger))\n * @cssproperty --dds-timepicker-disabled-text - The text color when disabled. (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-timepicker-error-border - The border color for error state. (default: var(--dds-border-negative-base))\n * @cssproperty --dds-timepicker-success-border - The border color for success state. (default: var(--dds-border-positive-base))\n * @cssproperty --dds-timepicker-icon-color - The color of the icons. (default: var(--dds-text-icon-neutral-subtle))\n * @cssproperty --dds-timepicker-clear-icon-color - The color of the clear icon. (default: var(--dds-button-subtle-icon-neutral-enabled))\n * @cssproperty --dds-timepicker-popup-background - The background color of the popup. (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-timepicker-popup-shadow - The box shadow of the popup. (default: 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -1px rgb(0 0 0 / 6%))\n *\n * @cssproperty --dds-timepicker-padding-xs - The padding for extra small size. (default: var(--dds-spacing-200))\n * @cssproperty --dds-timepicker-padding-sm - The padding for small size. (default: var(--dds-spacing-200))\n * @cssproperty --dds-timepicker-padding-lg - The padding for large size. (default: var(--dds-spacing-300))\n * @cssproperty --dds-timepicker-padding-horizontal - The horizontal padding. (default: var(--dds-spacing-300))\n * @cssproperty --dds-timepicker-padding-vertical - The vertical padding. (default: var(--dds-spacing-200))\n * @cssproperty --dds-timepicker-gap - The gap between elements. (default: var(--dds-spacing-100))\n * @cssproperty --dds-timepicker-icon-gap - The gap between icons. (default: var(--dds-spacing-200))\n * @cssproperty --dds-timepicker-action-gap - The gap between action elements. (default: var(--dds-spacing-200))\n * @cssproperty --dds-timepicker-action-padding - The padding for action elements. (default: var(--dds-spacing-300))\n * @cssproperty --dds-timepicker-clear-icon-width - The width of the clear icon. (default: var(--dds-spacing-800))\n * @cssproperty --dds-timepicker-dropdown-icon-right - The right position of the dropdown icon. (default: var(--dds-spacing-600))\n * @cssproperty --dds-timepicker-min-width - The minimum width of the timepicker. (default: 7.5rem)\n *\n */\nexport default class DapDSTimePicker extends GenericFormElement {\n  static tagName = 'dap-ds-timepicker'\n\n  static dependencies = {\n    'dap-ds-form-label': DapDSFormLabel,\n    'dap-ds-tooltip': DapDSTooltip,\n    'dap-ds-icon-button': DapDSIconButton,\n    'dap-ds-icon': DapDSIcon,\n    'dap-ds-typography': DapDSTypography,\n    'dap-ds-popup': DapDSPopup,\n    'dap-ds-icon-loading-spinner': SystemLoadingSpinner,\n    'dap-ds-icon-time-line': SystemTimeLine,\n    'dap-ds-time-grid': DapDSTimeGrid,\n    'dap-ds-feedback': DapDSFeedback,\n  }\n\n  private static nextId = 0\n\n  private readonly inputId: string\n  private readonly labelId: string\n  private readonly descriptionId: string\n\n  @query('.combobox__input') private readonly triggerInput!: HTMLInputElement\n  @query('#time-grid') private readonly timeGrid!: DapDSTimeGrid\n\n  /** The value of the timepicker (selected time).\n   * @type {Dayjs | string | Date | number}\n   */\n  @property({ attribute: true })\n  override value?: Dayjs | string | Date | number\n\n  // Internal storage for the Dayjs time value\n  private _timeValue?: Dayjs\n\n  // The selected time value (Dayjs object) - internal use only\n  private get timeValue(): Dayjs | undefined {\n    return this._timeValue\n  }\n\n  private set timeValue(value: Dayjs | undefined) {\n    this._timeValue = value\n  }\n\n  /** The minimum time of the timepicker. This time will be the minimum selectable time.\n   * @type {string}\n   * @default '00:00'\n   */\n  @property({ type: String }) minTime = '00:00'\n\n  /** The maximum time of the timepicker. This time will be the maximum selectable time.\n   * @type {string}\n   * @default '23:59'\n   */\n  @property({ type: String }) maxTime = '23:59'\n\n  /** The step interval in minutes for the time input.\n   * @type {number}\n   * @default 5\n   */\n  @property({ type: Number }) step = 5\n\n  /** The placement of the dropdown of the timepicker.\n   * @type {'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end'}\n   */\n  @property({ reflect: true }) placement: PopupPlacement = 'bottom-start'\n\n  /** The open state of the timepicker. */\n  @property({ type: Boolean, reflect: true }) opened = false\n\n  /** Whether the time picker should open on typing. */\n  @property({ type: Boolean }) openTimeOnInput = false\n\n  /** Whether the time picker should send an empty event on typing. */\n  @property({ type: Boolean }) sendEmptyEventOnInput = false\n\n  /** The placeholder of the timepicker. */\n  @property() placeholder: string | null\n\n  /** The loading state of the timepicker. */\n  @property({ type: Boolean }) loading?: boolean = false\n\n  /** The format of the timepicker. This is the time format used for display and validation.\n   * @type {string}\n   * @default 'HH:mm'\n   */\n  @property({ type: String }) format = 'HH:mm'\n\n  /** Whether the clear button should be shown. */\n  @property({ type: String }) clearButton?: string = 'true'\n\n  /** The aria label of the clear button. */\n  @property({ type: String }) clearButtonAriaLabel?: string\n\n  /** `data-testid` for the clear button. */\n  @property() clearButtonTestId = 'timepicker-clear-button'\n\n  /** `data-testid` for the time indicator button that opens the grid. */\n  @property() timeButtonTestId = 'timepicker-time-button'\n\n  /** The floating strategy of the timepicker. */\n  @property({ type: String }) floatingStrategy: FloatingStrategy = 'fixed'\n\n  /** Whether to keep popup open when trigger leaves viewport. */\n  @property({ type: Boolean }) disableViewportAutoClose: boolean = false\n\n  /** The locale of the timepicker. By default it uses the global locale from dayjs.\n   * @type {'hu' | 'en' | 'de'}\n   */\n  @property({ type: String }) locale: string = dayjs.locale()\n\n  /** Whether the dropdown should close when a time is selected. */\n  @property({ type: Boolean }) closeOnSelection = false\n\n  /** Whether to show the seconds column in the time picker. */\n  @property({ type: Boolean }) showSeconds = false\n\n  /** The step interval in seconds for the time input.\n   * @type {number}\n   * @default 1\n   */\n  @property({ type: Number }) secondsStep = 1\n\n  /** Callback function to determine if a specific time should be disabled.\n   * @param {number} hour - The hour to check (0-23)\n   * @param {number} minute - The minute to check (0-59)\n   * @param {number} second - The second to check (0-59, optional)\n   * @returns {boolean} True if the time should be disabled\n   */\n  @property({ attribute: false }) disabledTime?: (\n    hour: number,\n    minute: number,\n    second?: number,\n  ) => boolean\n\n  /** Whether to hide disabled times from the grid or show them as disabled.\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean }) hideDisabledTimes = false\n\n  /** Array of preset time slots for quick selection.\n   * @type {TimePreset[]}\n   */\n  @property({ type: Array, attribute: false }) presets?: TimePreset[]\n\n  @state() private setValueState: boolean = true\n\n  static readonly styles = unsafeCSS(styles)\n\n  private languageChangeHandler = () => {\n    // Update locale when language changes, but only if locale wasn't explicitly set via attribute\n    if (!this.hasAttribute('locale')) {\n      const newLocale = i18next.language || dayjs.locale()\n      if (this.locale !== newLocale) {\n        this.locale = newLocale\n        dayjs.locale(newLocale)\n        this.requestUpdate()\n      }\n    }\n  }\n\n  constructor() {\n    super()\n    DapDSTimePicker.nextId++\n    const uniqueSuffix =\n      typeof crypto !== 'undefined' && crypto.randomUUID\n        ? crypto.randomUUID().slice(0, 8)\n        : Date.now().toString(36)\n    this.inputId = `input-${DapDSTimePicker.nextId}-${uniqueSuffix}`\n    this.labelId = `label-${DapDSTimePicker.nextId}-${uniqueSuffix}`\n    this.descriptionId = `description-${DapDSTimePicker.nextId}-${uniqueSuffix}`\n    // Initialize the feedbackId from FeedbackMixin\n    this.feedbackId = `feedback-${DapDSTimePicker.nextId}-${uniqueSuffix}`\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    // Listen for language changes to update the locale\n    i18next.on('languageChanged', this.languageChangeHandler)\n    // Initialize locale from current i18next language if not explicitly set via attribute\n    if (!this.hasAttribute('locale')) {\n      const currentLang = i18next.language || dayjs.locale()\n      if (this.locale !== currentLang) {\n        this.locale = currentLang\n        dayjs.locale(currentLang)\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    // Clean up language change listener\n    i18next.off('languageChanged', this.languageChangeHandler)\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n\n    // Sync internal timeValue with public value\n    this.syncTimeValue()\n\n    if (this.timeValue) {\n      this.triggerInput.value = this.getFormattedValue()\n      this.updateTimeGridSelection()\n    }\n  }\n\n  // Override attributeChangedCallback to sync internal state when value changes\n  attributeChangedCallback(name: string, oldValue: any, newValue: any) {\n    super.attributeChangedCallback(name, oldValue, newValue)\n\n    if (name === 'value' && newValue !== oldValue) {\n      this.syncTimeValue()\n      this.requestUpdate()\n    }\n  }\n\n  /**\n   * Normalizes a time value to a Dayjs object.\n   * Handles Dayjs objects, Date objects, strings (HH:mm or HH:mm:ss format, or date strings), and undefined/null.\n   */\n  private normalizeTime(\n    value: Dayjs | string | Date | number | undefined | null,\n  ): Dayjs | undefined {\n    if (value === undefined || value === null) {\n      return undefined\n    }\n\n    // If it's already a Dayjs object, return it\n    if (dayjs.isDayjs(value)) {\n      return value\n    }\n\n    // If it's a Date object, convert it to Dayjs\n    if (value instanceof Date) {\n      return dayjs(value)\n    }\n\n    // If it's a number (timestamp), convert it\n    if (typeof value === 'number') {\n      return dayjs(value)\n    }\n\n    // If it's a string, try to parse it\n    if (typeof value === 'string') {\n      const trimmed = value.trim()\n\n      // First, check if it's a time format (HH:mm or HH:mm:ss)\n      const timeRegex = /^([0-1]?[0-9]|2[0-3]):[0-5][0-9](:[0-5][0-9])?$/\n      if (timeRegex.test(trimmed)) {\n        // It's a time string, parse it with a dummy date\n        return dayjs(`2000-01-01 ${trimmed}`)\n      }\n\n      // Check if it's a numeric timestamp string\n      if (/^\\d+$/.test(trimmed)) {\n        const numValue = Number(trimmed)\n        // Check if it's seconds (typically 10 digits, less than 10000000000)\n        if (numValue > 0 && numValue < 10000000000) {\n          return dayjs(numValue * 1000)\n        }\n        // Check if it's a valid timestamp (milliseconds since epoch)\n        if (numValue >= 0 && numValue <= 4102444800000) {\n          return dayjs(numValue)\n        }\n      }\n\n      // Try to parse it as a date string (dayjs will handle various formats)\n      const parsed = dayjs(trimmed)\n      if (parsed.isValid()) {\n        return parsed\n      }\n\n      // If all else fails, return undefined\n      return undefined\n    }\n\n    return undefined\n  }\n\n  // Sync internal _timeValue with public value property\n  private syncTimeValue() {\n    const normalized = this.normalizeTime(this.value)\n    this._timeValue = normalized\n    // Update the value to be a Dayjs object if it was normalized from a string/Date/number\n    // This ensures the value is always in the correct format\n    if (normalized) {\n      // Only update if the current value is not already the same Dayjs object\n      if (\n        !dayjs.isDayjs(this.value) ||\n        !normalized.isSame(this.value, 'minute')\n      ) {\n        this.value = normalized\n      }\n    } else if (this.value !== undefined && this.value !== null) {\n      // Clear the value if normalization failed\n      this.value = undefined\n    }\n  }\n\n  protected updated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(_changedProperties)\n\n    if (_changedProperties.has('value')) {\n      const normalized = this.normalizeTime(this.value)\n      if (normalized) {\n        this._timeValue = normalized\n        // Update the internal value to be a Dayjs object\n        // Only update if it's different to prevent unnecessary updates\n        if (!dayjs.isDayjs(this.value) || !normalized.isSame(this.value)) {\n          this.value = normalized\n        }\n      } else {\n        this._timeValue = undefined\n        // Only clear if there's actually a value to clear\n        if (this.value !== undefined && this.value !== null) {\n          this.value = undefined\n        }\n      }\n      if (this.setValueState) {\n        this.triggerInput.value = this.getFormattedValue()\n        this.updateTimeGridSelection()\n      }\n      this.setValidity()\n    }\n\n    if (_changedProperties.has('step') && this.timeGrid) {\n      this.timeGrid.step = this.step\n    }\n\n    if (_changedProperties.has('minTime') && this.timeGrid) {\n      this.timeGrid.minTime = this.minTime\n    }\n\n    if (_changedProperties.has('maxTime') && this.timeGrid) {\n      this.timeGrid.maxTime = this.maxTime\n    }\n\n    if (_changedProperties.has('locale') && this.timeGrid) {\n      this.timeGrid.locale = this.locale\n    }\n\n    if (_changedProperties.has('showSeconds') && this.timeGrid) {\n      this.timeGrid.showSeconds = this.showSeconds\n    }\n\n    if (_changedProperties.has('secondsStep') && this.timeGrid) {\n      this.timeGrid.secondsStep = this.secondsStep\n    }\n\n    if (_changedProperties.has('disabledTime') && this.timeGrid) {\n      this.timeGrid.disabledTime = this.disabledTime\n    }\n\n    if (_changedProperties.has('hideDisabledTimes') && this.timeGrid) {\n      this.timeGrid.hideDisabledTimes = this.hideDisabledTimes\n    }\n\n    if (_changedProperties.has('presets') && this.timeGrid) {\n      this.timeGrid.presets = this.presets\n    }\n  }\n\n  private updateTimeGridSelection() {\n    if (this.timeValue && this.timeGrid) {\n      this.timeGrid.selectedHour = this.timeValue.hour()\n      this.timeGrid.selectedMinute = this.timeValue.minute()\n      if (this.showSeconds) {\n        this.timeGrid.selectedSecond = this.timeValue.second()\n      }\n    }\n  }\n\n  private getHourValue(): number {\n    return this.timeValue ? this.timeValue.hour() : 12\n  }\n\n  private getMinuteValue(): number {\n    return this.timeValue ? this.timeValue.minute() : 0\n  }\n\n  private getSecondValue(): number {\n    return this.timeValue ? this.timeValue.second() : 0\n  }\n\n  getFormattedValue() {\n    if (!this.timeValue) {\n      return ''\n    }\n\n    return dayjs(this.timeValue).format(this.format)\n  }\n\n  isValidTime(value: string) {\n    if (!value) {\n      return false\n    }\n\n    // Check if the time format is valid (supports both HH:mm and HH:mm:ss)\n    const timeRegex = this.showSeconds\n      ? /^([0-1]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/\n      : /^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/\n\n    if (!timeRegex.test(value)) {\n      return false\n    }\n\n    // Check if time is within min/max range\n    const inputTime = dayjs(`2000-01-01 ${value}`)\n    const minTime = dayjs(`2000-01-01 ${this.minTime}`)\n    const maxTime = dayjs(`2000-01-01 ${this.maxTime}`)\n\n    const isInRange =\n      inputTime.isSame(minTime) ||\n      (inputTime.isAfter(minTime) && inputTime.isBefore(maxTime)) ||\n      inputTime.isSame(maxTime)\n\n    if (!isInRange) {\n      return false\n    }\n\n    // Check if time is disabled via callback\n    if (this.disabledTime) {\n      const hour = inputTime.hour()\n      const minute = inputTime.minute()\n      const second = this.showSeconds ? inputTime.second() : undefined\n      return !this.disabledTime(hour, minute, second)\n    }\n\n    return true\n  }\n\n  isValueValid() {\n    if (!this.timeValue) {\n      return true\n    }\n\n    return this.isInputValid()\n  }\n\n  isInputValid() {\n    return this.isValidTime(this.triggerInput.value)\n  }\n\n  setValue(\n    value?: Dayjs,\n    setInputValue: boolean = true,\n    sendEmptyEventOnInput: boolean = true,\n  ) {\n    this._timeValue = value\n    this.value = value\n\n    if (setInputValue) {\n      this.setValueState = true\n      this.triggerInput.value = this.getFormattedValue()\n      this.updateTimeGridSelection()\n    } else {\n      this.setValueState = false\n    }\n\n    // Update form value for form participation\n    if (this.internals) {\n      this.internals.setFormValue(\n        this.value\n          ? this.showSeconds\n            ? this.value.format('HH:mm:ss')\n            : this.value.format('HH:mm')\n          : this.defaultValue,\n      )\n    }\n\n    this.setValidity()\n\n    if (this.closeOnSelection) {\n      this.hideTimePicker()\n    }\n\n    if (sendEmptyEventOnInput) {\n      const eventData = {\n        value: this.timeValue,\n        hour: this.timeValue?.hour(),\n        minute: this.timeValue?.minute(),\n        ...(this.showSeconds && { second: this.timeValue?.second() }),\n      }\n\n      this.emit('dds-change', eventData)\n      this.emit('dds-valid-time', {\n        value: this.triggerInput.value,\n        hour: this.timeValue?.hour(),\n        minute: this.timeValue?.minute(),\n        ...(this.showSeconds && { second: this.timeValue?.second() }),\n      })\n    }\n  }\n\n  async clearSelection() {\n    this.setValue(undefined, true, true)\n  }\n\n  private readonly handleDocumentMouseDown = (event: MouseEvent) => {\n    const path = event.composedPath()\n    if (this && !path.includes(this)) {\n      this.hideTimePicker()\n    }\n  }\n\n  private readonly handlePopupAutoClose = () => {\n    this.hideTimePicker({ skipFocus: true })\n  }\n\n  private readonly handleInput = (event: InputEvent) => {\n    const input = event.target as HTMLInputElement\n\n    if (!input.value) {\n      this.setValue(undefined, false, true)\n    } else {\n      if (this.isInputValid()) {\n        const time = dayjs(`2000-01-01 ${input.value}`)\n        this.setValue(time, false)\n        this.emit('dds-valid-time', {\n          value: input.value,\n          type: 'valid',\n          minute: time.minute(),\n          hour: time.hour(),\n        })\n      } else {\n        this.setValue(undefined, false, this.sendEmptyEventOnInput)\n        this.emit('dds-invalid-time', {\n          value: input.value,\n          type: 'invalid',\n          hour: input.value.split(':')[0],\n          minute: input.value.split(':')[1],\n        })\n      }\n    }\n\n    if (this.openTimeOnInput && !this.opened) {\n      this.showTimePicker()\n    }\n\n    this.emit('dds-input', { value: input.value })\n  }\n\n  private readonly handleKeyDown = async (event: KeyboardEvent) => {\n    if (event.key === 'Tab') {\n      return\n    }\n\n    if (\n      event.key === 'Enter' ||\n      event.key === 'ArrowDown' ||\n      event.key === 'ArrowUp'\n    ) {\n      event.preventDefault()\n      event.stopPropagation()\n\n      if (!this.opened) {\n        this.showTimePicker()\n      } else {\n        this.hideTimePicker()\n      }\n    }\n  }\n\n  public get focusElement() {\n    return this.triggerInput\n  }\n\n  private readonly handleClick = () => {\n    if (!this.opened) {\n      this.showTimePicker()\n    } else {\n      this.hideTimePicker()\n    }\n  }\n\n  private readonly handleClearClick = () => {\n    if (!this.disabled) {\n      this.clearSelection()\n\n      this.triggerInput.focus()\n      this.setValidity()\n\n      this.hideTimePicker()\n\n      this.emit('dds-clear')\n    }\n  }\n\n  private readonly handleTimeChange = (event: CustomEvent<TimeSelection>) => {\n    const { hour, minute, second } = event.detail\n    const time = dayjs()\n      .hour(hour)\n      .minute(minute)\n      .second(second ?? 0)\n      .millisecond(0)\n    this.setValue(time, true, true)\n  }\n\n  async showTimePicker() {\n    if (this.disabled || this.readonly || this.opened) {\n      return\n    }\n\n    this.opened = true\n\n    document.addEventListener('mousedown', this.handleDocumentMouseDown)\n  }\n\n  async hideTimePicker(options?: { skipFocus?: boolean }) {\n    if (!this.opened) {\n      return\n    }\n\n    this.opened = false\n\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown)\n\n    await this.updateComplete\n    if (!options?.skipFocus) {\n      this.focus()\n    }\n  }\n\n  private readonly handleFocus = () => {\n    this.emit('dds-focus')\n  }\n\n  private readonly handleBlur = () => {\n    this.emit('dds-blur')\n  }\n\n  private readonly handlePopupOpened = () => {\n    // When popup opens, scroll to selected time in the grid\n    if (this.timeGrid) {\n      // Use requestAnimationFrame to ensure the popup is fully visible\n      requestAnimationFrame(() => {\n        this.timeGrid.scrollToSelectedTime()\n      })\n    }\n  }\n\n  // custom validation\n  getValidity() {\n    return !!this.value\n  }\n\n  get validity(): ValidityState {\n    if (this.internals.validity) {\n      return this.internals.validity\n    } else {\n      return getValidityStateObject({\n        valueMissing: this.required && !this.getValidity(),\n        patternMismatch: !this.isValueValid(),\n      })\n    }\n  }\n\n  checkValidity() {\n    return this.required && this.getValidity() && this.isValueValid()\n  }\n\n  reportValidity() {\n    return this.required && this.getValidity() && this.isValueValid()\n  }\n\n  setValidity() {\n    if (!this.checkValidity()) {\n      this.internals.setValidity(\n        {\n          valueMissing: this.required && !this.getValidity(),\n          patternMismatch: !this.isValueValid(),\n        },\n        this.validationMessage,\n        this.triggerInput,\n      )\n    } else {\n      this.internals.setValidity({})\n    }\n  }\n\n  handleInvalid(event: Event) {\n    event.preventDefault()\n  }\n\n  render() {\n    return html` <div class=\"label-container\">\n        ${this.label &&\n        html`<dap-ds-form-label\n          part=\"label\"\n          id=${this.labelId}\n          .size=${this.size}\n          .required=${this.required}\n          .requiredLabel=${this.requiredLabel}\n          .optional=${this.optional}\n          .optionalLabel=${this.optionalLabel}\n          .disabled=${this.disabled}\n          class=${clsx('label')}\n          .noMargin=${!!this.description}\n          for=${this.inputId}\n          .hideLabel=${this.hideLabel}\n          label=${ifDefined(this.label)}>\n        </dap-ds-form-label>`}\n        ${this.tooltip &&\n        html` <dap-ds-tooltip\n          part=\"tooltip\"\n          content=${this.tooltip}\n          mode=\"toggle\"\n          placement=${this.tooltipPlacement}>\n          <dap-ds-icon-button\n            slot=\"trigger\"\n            size=${this.size as 'xs' | 'sm' | 'md' | 'lg'}\n            iconSize=${this.size === 'xs' ? '16' : '22'}\n            clean>\n            <dap-ds-icon\n              name=\"information-line\"\n              aria-label=${this.tooltipAriaLabel}\n              class=\"info-button\"></dap-ds-icon>\n          </dap-ds-icon-button>\n        </dap-ds-tooltip>`}\n      </div>\n      ${this.description &&\n      html`\n        <dap-ds-typography\n          part=\"description\"\n          variant=\"description\"\n          class=${clsx('input-description')}\n          size=${ifDefined(this.size as CommonFormElementSize)}\n          id=${this.descriptionId}>\n          ${this.description}\n        </dap-ds-typography>\n      `}\n      <div>\n        <dap-ds-popup\n          part=\"base\"\n          class=\"select-popup\"\n          overflow\n          ?opened=${this.opened}\n          ?hasArrow=${false}\n          placement=${this.placement}\n          floatingStrategy=${this.floatingStrategy}\n          maxHeight=\"auto\"\n          offset=\"4\"\n          ?disableViewportAutoClose=${this.disableViewportAutoClose}\n          @dds-close=${this.handlePopupAutoClose}\n          @dds-opened=${this.handlePopupOpened}>\n          <div\n            slot=\"trigger\"\n            part=\"trigger\"\n            class=\"${clsx('select', `select--${this.size}`, {\n              'select--disabled': this.disabled,\n              'select--readonly': this.readonly,\n              'select--opened': this.opened,\n              'select--loading': this.loading,\n              'select--success': this.status === 'success',\n              'select--error': this.status === 'error',\n            })}\">\n            <input\n              part=\"input\"\n              role=\"combobox\"\n              class=\"${clsx('combobox__input', 'input', `input--${this.size}`, {\n                'input--disabled': this.disabled,\n                'input--readonly': this.readonly,\n              })}\"\n              id=${this.inputId}\n              value=${this.getFormattedValue()}\n              aria-expanded=${this.opened}\n              aria-haspopup=\"dialog\"\n              aria-labelledby=${ifDefined(this.label ? this.labelId : nothing)}\n              aria-describedby=\"${ifDefined(\n                this.description ? this.descriptionId : nothing,\n              )} ${ifDefined(this.feedback ? this.feedbackId : nothing)}\"\n              aria-disabled=${this.disabled}\n              aria-controls=\"time-grid\"\n              aria-autocomplete=\"none\"\n              ?required=${this.required}\n              ?readonly=${this.readonly}\n              ?autofocus=${this.autofocus}\n              ?disabled=${this.disabled}\n              autocomplete=${this.autocomplete as any}\n              placeholder=${ifDefined(this.placeholder ?? '')}\n              @blur=${this.handleBlur}\n              @focus=${this.handleFocus}\n              @input=${this.handleInput}\n              @keydown=${this.handleKeyDown}\n              @invalid=${this.handleInvalid}\n              @click=${this.handleClick} />\n            <div\n              class=\"${clsx('select-action', `select-action--${this.size}`, {\n                'select-action--disabled': this.disabled,\n                'select-action--readonly': this.readonly,\n                'select-action--opened': this.opened,\n              })}\">\n              ${this.clearButton === 'true' && !this.readonly\n                ? html`<div class=\"${clsx('clear-icon')}\">\n                    <dap-ds-icon-button\n                      icon=\"close-line\"\n                      part=\"clear-button\"\n                      data-testid=${this.clearButtonTestId}\n                      aria-label=${ifDefined(\n                        this.clearButtonAriaLabel ??\n                          t('clear', { lng: this.locale }),\n                      )}\n                      ?disabled=${this.disabled}\n                      @click=${this.handleClearClick}></dap-ds-icon-button>\n                  </div>`\n                : nothing}\n              <div\n                class=\"${clsx('indicator-icon', {\n                  'indicator-icon--loading': this.loading,\n                })}\">\n                ${this.loading\n                  ? html`<dap-ds-icon-loading-spinner></dap-ds-icon-loading-spinner>`\n                  : html`<dap-ds-icon-time-line\n                      aria-hidden=\"true\"\n                      part=\"time-button\"\n                      data-testid=${this.timeButtonTestId}\n                      class=${clsx('time-icon')}\n                      @click=${this.handleClick}></dap-ds-icon-time-line>`}\n              </div>\n            </div>\n          </div>\n          <dap-ds-time-grid\n            id=\"time-grid\"\n            part=\"time-grid\"\n            .selectedHour=${this.getHourValue()}\n            .selectedMinute=${this.getMinuteValue()}\n            .selectedSecond=${this.getSecondValue()}\n            .minTime=${this.minTime}\n            .maxTime=${this.maxTime}\n            .step=${this.step}\n            .locale=${this.locale}\n            .showSeconds=${this.showSeconds}\n            .secondsStep=${this.secondsStep}\n            .disabledTime=${this.disabledTime}\n            .hideDisabledTimes=${this.hideDisabledTimes}\n            .presets=${this.presets}\n            @dds-change=${(event: CustomEvent<TimeSelection>) => {\n              event.stopPropagation()\n              event.preventDefault()\n              this.handleTimeChange(event)\n            }}>\n          </dap-ds-time-grid>\n        </dap-ds-popup>\n        ${this.feedback &&\n        html`<dap-ds-feedback\n          part=\"feedback\"\n          feedbackType=${ifDefined(this.feedbackType)}\n          feedbackSize=\"${ifDefined(this.size as 'lg' | 'sm' | 'xs')}\"\n          id=\"feedback\">\n          ${this.feedback}\n        </dap-ds-feedback>`}\n      </div>`\n  }\n}\n"],"names":["_DapDSTimePicker","_a","GenericFormElement","dayjs","newLocale","i18next","event","path","input","time","__async","hour","minute","second","uniqueSuffix","value","currentLang","_changedProperties","name","oldValue","newValue","trimmed","numValue","parsed","normalized","inputTime","minTime","maxTime","setInputValue","sendEmptyEventOnInput","eventData","__spreadValues","_b","_c","_d","_e","_f","options","getValidityStateObject","html","clsx","ifDefined","nothing","t","DapDSFormLabel","DapDSTooltip","DapDSIconButton","DapDSIcon","DapDSTypography","DapDSPopup","SystemLoadingSpinner","SystemTimeLine","DapDSTimeGrid","DapDSFeedback","unsafeCSS","styles","__decorateClass","query","property","state","DapDSTimePicker"],"mappings":"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"}

package/dist/components/timepicker/timepicker.d.ts

@@ -1,11 +1,8 @@
-import { default as DapDSTimeGrid } from './time-grid.component.js';
-import { default as DapDSTimePicker } from './timepicker.component.js';
-export * from './time-grid.component.js';
-export * from './timepicker.component.js';
+import { default as DapDSTimePicker } from './timepicker.component';
+export * from './timepicker.component';
 export default DapDSTimePicker;
 declare global {
     interface HTMLElementTagNameMap {
         'dap-ds-timepicker': DapDSTimePicker;
-        'dap-ds-time-grid': DapDSTimeGrid;
     }
 }