@daikin-oss/design-system-web-components 1.6.0 → 2.0.0

package/dist/es/components/time-picker/daikin-time-picker.js

@@ -1,14 +1,14 @@
-import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
 import { state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import "../../base/dds-element.js";
 import { DDSFormElement } from "../../base/dds-form-element.js";
-import { property } from "../../base/dds-property.js";
+import { property, oneOf } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
+import { extractHalfWidthDigits } from "../../utils/extract-half-width-digits.js";
 import "../dropdown-item/daikin-dropdown-item.js";
 import "../dropdown/daikin-dropdown.js";
 var __defProp = Object.defineProperty;
@@ -24,23 +24,31 @@ var __decorateClass = (decorators, target, key, kind) => {
 const VALUE_TIME_REGEX = /^(?:[01][0-9]|2[0-3]):[0-5][0-9]$/;
 const DEFAULT_MIN_TIME = "00:00";
 const DEFAULT_MAX_TIME = "23:59";
-function to24HourFormat(time, meridiem) {
-  const [hourInit, minute] = time.split(":").map(Number);
-  let hour = hourInit;
-  if (meridiem === "AM") {
-    if (hour === 12) hour = 0;
-  } else {
-    if (hour !== 12) hour += 12;
+function uiToTimeValue(object) {
+  if (object.hourCycle === "h23") {
+    return formatTimeForUI(formatPartsForUI(object));
   }
+  const [hour12, minute] = formatPartsForUI(object).split(":").map(Number);
+  const hour = hour12 % 12 + (object.meridiem === "PM" ? 12 : 0);
   return `${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`;
 }
-function from24HourFormat(time) {
-  const [hour, minute] = time.split(":").map(Number);
-  const meridiem = hour >= 12 ? "PM" : "AM";
-  let hour12 = hour % 12;
+function timeValueToUI(time, hourCycle) {
+  const [hour24, minute] = time.split(":").map(Number);
+  if (hourCycle === "h23") {
+    return {
+      hourCycle: "h23",
+      hour: hour24.toString().padStart(2, "0"),
+      minute: minute.toString().padStart(2, "0"),
+      meridiem: null
+    };
+  }
+  const meridiem = hour24 >= 12 ? "PM" : "AM";
+  let hour12 = hour24 % 12;
   if (hour12 === 0) hour12 = 12;
   return {
-    time: `${hour12.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`,
+    hourCycle: "h12",
+    hour: hour12.toString().padStart(2, "0"),
+    minute: minute.toString().padStart(2, "0"),
     meridiem
   };
 }
@@ -110,12 +118,39 @@ function getTimeItemInSelection(selectionStart, selectionEnd) {
   }
   return null;
 }
-function calcDigitInput(parts, item, digit, hourDigitIndex) {
+function calcDigitInput(parts, item, digit, hourDigitIndex, hourCycle) {
   if (!/^\d$/.test(digit)) {
     return null;
   }
   switch (item) {
     case "hour": {
+      if (hourCycle === "h23") {
+        if (hourDigitIndex === 1) {
+          const firstDigit = parts.hour[1];
+          if (firstDigit === "2") {
+            if (["0", "1", "2", "3"].includes(digit)) {
+              return {
+                parts: { ...parts, hour: `2${digit}` },
+                done: true
+              };
+            }
+            return {
+              parts: { ...parts, hour: `0${digit}` },
+              done: true
+            };
+          }
+          if (firstDigit === "0" || firstDigit === "1") {
+            return {
+              parts: { ...parts, hour: `${firstDigit}${digit}` },
+              done: true
+            };
+          }
+        }
+        return {
+          parts: { ...parts, hour: `0${digit}` },
+          done: digit > "2"
+        };
+      }
       if (parts.hour === "01" && ["0", "1", "2"].includes(digit)) {
         return {
           parts: { ...parts, hour: `1${digit}` },
@@ -147,70 +182,74 @@ function calcDigitInput(parts, item, digit, hourDigitIndex) {
     }
   }
 }
-const cvaField = cva(
-  [
-    "flex",
-    "items-center",
-    "size-full",
-    "w-23.5",
-    "bg-ddt-color-common-background-default",
-    "p-3",
-    "rounded-sm",
-    "truncate",
-    "outline-solid",
-    "outline-(--color-border)",
-    "outline-0",
-    "-outline-offset-2",
-    "placeholder:text-ddt-color-common-text-secondary",
-    "[--color-border:var(--color-state-focus,var(--color-base))]",
-    "border",
-    "border-(--color-border)",
-    "enabled:text-ddt-color-common-text-primary",
-    "enabled:hover:bg-ddt-color-common-surface-hover",
-    "enabled:active:bg-ddt-color-common-surface-press",
-    "focus-visible:outline-2",
-    "disabled:[--color-border:var(--dds-color-common-disabled)]",
-    "disabled:text-ddt-color-common-disabled",
-    "disabled:bg-ddt-color-common-background-default",
-    "disabled:placeholder:text-ddt-color-common-disabled"
-  ],
-  {
-    variants: {
-      error: {
-        false: [
-          "enabled:[--color-base:var(--dds-color-common-neutral-default)]",
-          "focus-visible:[--color-state-focus:var(--dds-color-common-border-focus)]"
-        ],
-        true: ["enabled:[--color-base:var(--dds-color-common-danger-default)]"]
-      }
-    }
-  }
-);
+const fieldBaseClass = [
+  "flex",
+  "items-center",
+  "size-full",
+  "w-[calc(var(--dds-space-1600)+var(--dds-space-600)+var(--dds-space-100)+var(--dds-space-050))]",
+  "bg-ddt-color-common-background-default",
+  "px-[calc(var(--dds-padding-30)+0.25rem)]",
+  "rounded-sm",
+  "truncate",
+  "outline-solid",
+  "outline-(--color-border)",
+  "outline-0",
+  "-outline-offset-2",
+  "placeholder:text-ddt-color-common-text-secondary",
+  "[--color-border:var(--color-state-focus,var(--color-base))]",
+  "border",
+  "border-(--color-border)",
+  "enabled:text-ddt-color-common-text-primary",
+  "enabled:hover:bg-ddt-color-common-surface-hover",
+  "enabled:active:bg-ddt-color-common-surface-press",
+  "focus-visible:outline-2",
+  "disabled:[--color-border:var(--dds-color-common-disabled)]",
+  "disabled:text-ddt-color-common-disabled",
+  "disabled:bg-ddt-color-common-background-default",
+  "disabled:placeholder:text-ddt-color-common-disabled"
+].join(" ");
+function getFieldClass(error) {
+  return [
+    fieldBaseClass,
+    error ? "enabled:[--color-base:var(--dds-color-common-danger-default)]" : "enabled:[--color-base:var(--dds-color-common-neutral-default)] focus-visible:[--color-state-focus:var(--dds-color-common-border-focus)]"
+  ].join(" ");
+}
 let DaikinTimePicker = class extends DDSFormElement {
   constructor() {
     super(...arguments);
     this.disabled = false;
+    this.readonly = false;
     this.required = false;
     this.error = false;
+    this.hourCycle = "h12";
+    this.meridiemSingleOpen = true;
     this._label = null;
     this._inputValue = "";
     this._currentSelection = "hour";
     this._meridiem = "";
     this._timeInputElement = createRef();
+    this._meridiemDropdown = createRef();
     this._hourDigitIndex = 0;
+    this._preCompositionValue = "";
+    this._minuteDigitIndex = 0;
   }
   /**
    * Returns the value to be displayed in the input field.
-   * - If the main value is a valid 24-hour time, returns the 12-hour formatted string for UI display.
+   * - If the main value is a valid 24-hour time, returns a display string based on the selected hour cycle.
    * - If the current input value is not valid or meridiem is empty, returns the raw input value.
    * - Otherwise, returns null.
    */
   get _value() {
     if (isValidValueTime(this.value)) {
-      const { time } = from24HourFormat(this.value);
-      return time;
+      const ui = timeValueToUI(this.value, this.hourCycle);
+      return formatPartsForUI({ hour: ui.hour, minute: ui.minute });
     }
-    if (this._timeValue && !isValidValueTime(this._timeValue) || this._meridiem === "") {
+    const needsMeridiem = this.hourCycle === "h12";
+    if (this._timeValue && // Show the raw input value when it is not a valid 24h time OR when the
+    // UI hour is "00" (intermediate 12h entry state). Without the "00" check,
+    // "00:xx" would be treated as valid 24h and the getter would return null,
+    // causing Lit to clear the input field.
+    (!isValidValueTime(this._timeValue) || parsePartsFromUIValue(this._timeValue).hour === "00") || needsMeridiem && this._meridiem === "") {
       return this._timeValue;
     }
     return null;
@@ -226,8 +265,8 @@ let DaikinTimePicker = class extends DDSFormElement {
    */
   _syncMeridiemWithValue() {
     if (this.value) {
-      const { meridiem } = from24HourFormat(this.value);
-      this._meridiem = meridiem;
+      const ui = timeValueToUI(this.value, this.hourCycle);
+      this._meridiem = ui.meridiem ? ui.meridiem : "";
     }
   }
   get _min() {
@@ -256,10 +295,13 @@ let DaikinTimePicker = class extends DDSFormElement {
       this._inputValue = "";
       target.value = "";
     }
-    if (target.value.startsWith("00")) {
+    const allowZeroHour = this.hourCycle === "h23";
+    if (!allowZeroHour && target.value.startsWith("00")) {
       this._convertZeroHourToTwelve();
+      this._updateValue();
     }
     this._hourDigitIndex = 0;
+    this._minuteDigitIndex = 0;
   }
   _handleChange(event) {
     const target = event.target;
@@ -283,21 +325,103 @@ let DaikinTimePicker = class extends DDSFormElement {
       this._updateSelection(timeItemInSelection);
     }
   }
-  _handleDigitInput(parts, item, digit, hourDigitIndex) {
-    if (this._currentSelection === "hour") {
+  _handleDigitInput(parts, item, digit, hourDigitIndex, hourCycle) {
+    if (item === "hour") {
       if (hourDigitIndex === 1) {
         this._hourDigitIndex = 0;
       } else {
         this._hourDigitIndex = 1;
       }
+      if (hourDigitIndex === 0) {
+        return {
+          parts: { ...parts, hour: `0${digit}` },
+          done: hourCycle === "h12" ? digit > "1" : digit > "2"
+        };
+      }
+    }
+    if (item === "minute") {
+      const minuteDigitIndex = this._minuteDigitIndex;
+      if (minuteDigitIndex === 1) {
+        this._minuteDigitIndex = 0;
+      } else {
+        this._minuteDigitIndex = 1;
+      }
+      if (minuteDigitIndex === 0) {
+        return {
+          parts: { ...parts, minute: `0${digit}` },
+          done: digit > "5"
+        };
+      }
+    }
+    return calcDigitInput(parts, item, digit, hourDigitIndex, this.hourCycle);
+  }
+  // Saves the input's display value when IME composition starts so that
+  // _handleCompositionEnd can restore it if the browser inserted raw IME text.
+  _handleCompositionStart(event) {
+    this._preCompositionValue = event.target.value;
+  }
+  // Handles compositionend to support full-width and half-width digit input via IME.
+  // Full-width digits are converted to half-width, then each digit is applied as if
+  // the user had typed them one by one using the existing calcDigitInput logic.
+  _handleCompositionEnd(event) {
+    if (this.readonly) {
+      return;
+    }
+    const target = event.target;
+    const composedText = event.data;
+    target.value = this._preCompositionValue || PLACEHOLDER_ALL;
+    this._inputValue = target.value;
+    const digits = extractHalfWidthDigits(composedText);
+    if (digits.length === 0) {
+      this._updateInputSelection(target);
+      this._updateValue();
+      return;
+    }
+    this._applyDigits(target, digits);
+  }
+  // Applies a sequence of digit characters to the input starting from the currently
+  // selected time item, then commits the result to this.value.
+  // Shared by _handleKeyDown (single digit) and _handleCompositionEnd (multiple digits).
+  _applyDigits(target, digits) {
+    let parts = parsePartsFromUIValue(target.value);
+    let currentItem = this._currentSelection;
+    for (const digit of digits) {
+      const currentIndex = TIME_ITEMS.findIndex(
+        ({ type }) => type === currentItem
+      );
+      if (currentIndex < 0) break;
+      const newState = this._handleDigitInput(
+        parts,
+        currentItem,
+        digit,
+        this._hourDigitIndex,
+        this.hourCycle
+      );
+      if (newState) {
+        parts = newState.parts;
+        if (newState.done) {
+          const nextIndex = Math.min(currentIndex + 1, TIME_ITEMS.length - 1);
+          currentItem = TIME_ITEMS[nextIndex].type;
+        }
+      }
     }
-    return calcDigitInput(parts, item, digit, hourDigitIndex);
+    const newVal = formatPartsForUI(parts);
+    this._inputValue = newVal;
+    target.value = newVal;
+    this._updateSelection(currentItem);
+    this._updateValue();
   }
   _handleKeyDown(event) {
+    if (this.readonly) {
+      return;
+    }
+    if (event.isComposing || event.key === "Process" || event.keyCode === 229) {
+      return;
+    }
     const target = event.target;
     const key = event.key;
     const parts = parsePartsFromUIValue(target.value);
-    if (key === "Backspace") {
+    if (key === "Backspace" || key === "Delete") {
       event.preventDefault();
       const itemToRemove = this._currentSelection;
       const placeholder = {
@@ -313,30 +437,12 @@ let DaikinTimePicker = class extends DDSFormElement {
         target.value = newVal;
         this._updateSelection(itemToRemove);
       }
-      this._updateValue(event);
+      this._updateValue();
       return;
     }
     if (/^\d$/.test(key)) {
       event.preventDefault();
-      const newState = this._handleDigitInput(
-        parts,
-        this._currentSelection,
-        key,
-        this._hourDigitIndex
-      );
-      if (newState) {
-        const newVal = formatPartsForUI(newState.parts);
-        this._inputValue = newVal;
-        target.value = newVal;
-        const currentIndex = TIME_ITEMS.findIndex(
-          ({ type }) => type === this._currentSelection
-        );
-        const nextIndex = currentIndex >= 0 ? Math.min(currentIndex + 1, TIME_ITEMS.length - 1) : -1;
-        this._updateSelection(
-          newState.done && nextIndex >= 0 ? TIME_ITEMS[nextIndex].type : this._currentSelection
-        );
-      }
-      this._updateValue(event);
+      this._applyDigits(target, [key]);
       return;
     }
     const moveOffset = {
@@ -380,7 +486,11 @@ let DaikinTimePicker = class extends DDSFormElement {
     let minute = parseInt(minuteStr, 10);
     if (this._currentSelection === "hour") {
       if (isNaN(hour)) hour = 0;
-      hour = (hour + offset + 11) % 12 + 1;
+      if (this.hourCycle === "h23") {
+        hour = (hour + offset + 24) % 24;
+      } else {
+        hour = (hour + offset + 11) % 12 + 1;
+      }
     } else {
       if (isNaN(minute)) minute = 0;
       minute = (minute + offset * Number(this.minutesStep) + 60) % 60;
@@ -393,25 +503,47 @@ let DaikinTimePicker = class extends DDSFormElement {
   }
   _handleBeforeInput(event) {
     event.preventDefault();
-    this._updateInputSelection(event.target);
+    if (!event.isComposing) {
+      this._updateSelection(this._currentSelection);
+    }
   }
   /**
-   * Updates the value in 24-hour format if the input is valid, keeps UI in 12-hour format.
+   * Updates the value in 24-hour format if the input is valid, while preserving the selected UI hour cycle.
    */
   _updateValue(event) {
     const target = (event == null ? void 0 : event.target) || this._timeInputElement.value;
     if (!target) return;
+    const allowZeroHour = this.hourCycle === "h23";
+    const needsMeridiem = this.hourCycle === "h12";
     this._inputValue = target.value;
     if (target.value === PLACEHOLDER_ALL) {
       this.error = false;
+      this.value = "";
       return;
     }
-    if (this._meridiem === "") {
+    if (needsMeridiem && this._meridiem === "") {
       this.error = true;
+      this.value = "";
       return;
     }
     const newTime = tryParseTimeFromUIValue(target.value);
-    const newValue = newTime != null ? to24HourFormat(newTime, this._meridiem) : "";
+    const { hour: uiHour } = parsePartsFromUIValue(target.value);
+    if (!allowZeroHour && uiHour === "00") {
+      this.error = true;
+      this.value = "";
+      return;
+    }
+    const newValue = newTime != null ? uiToTimeValue(
+      this.hourCycle === "h23" ? {
+        hourCycle: "h23",
+        ...parsePartsFromUIValue(newTime),
+        meridiem: null
+      } : {
+        hourCycle: "h12",
+        ...parsePartsFromUIValue(newTime),
+        meridiem: this._meridiem
+      }
+    ) : "";
     this.error = !newValue || isTimeOutOfRange(newValue, this._min, this._max);
     const changed = newValue !== this.value;
     this.value = newValue;
@@ -450,13 +582,17 @@ let DaikinTimePicker = class extends DDSFormElement {
     if (!selection) {
       return;
     }
+    const allowZeroHour = this.hourCycle === "h23";
     const itemInfo = TIME_ITEMS.find(({ type }) => type === timeItem);
     if (itemInfo) {
       if (itemInfo.type === "minute") {
-        if (this._inputValue.startsWith("00")) {
+        if (!allowZeroHour && this._inputValue.startsWith("00")) {
           this._convertZeroHourToTwelve();
         }
         this._hourDigitIndex = 0;
+        if (this._currentSelection !== "minute") {
+          this._minuteDigitIndex = 0;
+        }
       }
       (_a = this._timeInputElement.value) == null ? void 0 : _a.setSelectionRange(
         itemInfo.range[0],
@@ -466,6 +602,9 @@ let DaikinTimePicker = class extends DDSFormElement {
     }
   }
   _handleDropdownChange(event) {
+    if (this.readonly) {
+      return;
+    }
     const target = event.target;
     this._meridiem = target.value;
     const input = this._timeInputElement.value;
@@ -473,6 +612,33 @@ let DaikinTimePicker = class extends DDSFormElement {
       this._updateValue();
     }
   }
+  _closeMeridiemDropdown() {
+    const dropdown = this._meridiemDropdown.value;
+    if (!dropdown || !dropdown.open) {
+      return;
+    }
+    dropdown.open = false;
+  }
+  _handleMeridiemDropdownToggle(event) {
+    if (!this.meridiemSingleOpen) {
+      return;
+    }
+    const toggleEvent = event;
+    if (toggleEvent.newState !== "open") {
+      return;
+    }
+    const root = this.getRootNode();
+    if (!(root instanceof Document || root instanceof ShadowRoot)) {
+      return;
+    }
+    const peerTimePickers = root.querySelectorAll("daikin-time-picker");
+    for (const peerElement of peerTimePickers) {
+      if (peerElement === this) {
+        continue;
+      }
+      peerElement._closeMeridiemDropdown();
+    }
+  }
   /**
    * Focuses on the inner time input.
    * @param options focus options
@@ -482,44 +648,61 @@ let DaikinTimePicker = class extends DDSFormElement {
     (_a = this._timeInputElement.value) == null ? void 0 : _a.focus(options);
   }
   render() {
+    const needsMeridiem = this.hourCycle === "h12";
     return html`<div
       role="group"
       aria-label=${ifDefined(this._label ?? void 0)}
-      class="flex flex-row h-full gap-2"
+      class="flex flex-row h-full gap-2 w-fit"
     >
       <input
         ${ref(this._timeInputElement)}
-        class=${cvaField({ error: this.error })}
+        class=${getFieldClass(this.error)}
         type="text"
         name=${ifDefined(this.getBackingProperty("name"))}
         placeholder=${this.placeholder}
         .value=${this._value ?? ""}
         ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
         ?required=${this.required}
         @change=${this._handleChange}
+        @compositionstart=${this._handleCompositionStart}
+        @compositionend=${this._handleCompositionEnd}
         @focusin=${this._handleFocusIn}
         @focusout=${this._handleFocusOut}
         @keydown=${this._handleKeyDown}
         @beforeinput=${this._handleBeforeInput}
         @mouseup=${this._handleMouseUp}
       />
-      <daikin-dropdown
-        class="w-22"
-        placeholder="--"
-        .error=${this.error}
-        .value=${this._meridiem}
-        ?disabled=${this.disabled}
-        @change=${this._handleDropdownChange}
-      >
-        <daikin-dropdown-item value="AM">AM</daikin-dropdown-item>
-        <daikin-dropdown-item value="PM">PM</daikin-dropdown-item>
-      </daikin-dropdown>
+      ${needsMeridiem ? html`<daikin-dropdown
+            ${ref(this._meridiemDropdown)}
+            class="w-[calc(var(--dds-space-1600)+var(--dds-space-600))]"
+            placeholder="--"
+            .error=${this.error}
+            .value=${this._meridiem}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            @change=${this._handleDropdownChange}
+            @toggle=${this._handleMeridiemDropdownToggle}
+          >
+            <daikin-dropdown-item value="AM">AM</daikin-dropdown-item>
+            <daikin-dropdown-item value="PM">PM</daikin-dropdown-item>
+          </daikin-dropdown>` : null}
     </div>`;
   }
   willUpdate(changedProperties) {
-    if (changedProperties.has("value")) {
+    if (changedProperties.has("hourCycle")) {
       if (isValidValueTime(this.value)) {
         this._syncMeridiemWithValue();
+      }
+      if (isValidValueTime(this.value)) {
+        this.error = isTimeOutOfRange(this.value, this.min, this.max);
+      }
+    }
+    if (changedProperties.has("value")) {
+      if (isValidValueTime(this.value)) {
+        if (this.hourCycle !== "h23") {
+          this._syncMeridiemWithValue();
+        }
         if (isTimeOutOfRange(this.value, this.min, this.max)) {
           this.error = true;
         } else {
@@ -540,6 +723,7 @@ let DaikinTimePicker = class extends DDSFormElement {
   reflectInputGroup(inputGroup) {
     const isError = !inputGroup.disabled && !!inputGroup.error;
     this.disabled = !!inputGroup.disabled;
+    this.readonly = !!inputGroup.readonly;
     this.required = !!inputGroup.required;
     this.error = isError;
     this._label = inputGroup.label ?? null;
@@ -549,9 +733,27 @@ DaikinTimePicker.styles = css`
     ${unsafeCSS(tailwindStyles)}
 
     :host {
-      display: flex;
+      display: inline-flex;
       align-items: center;
-      height: 3rem;
+      height: var(--dds-input-height, 3rem);
+      width: fit-content;
+    }
+
+    :host([readonly]:not([disabled])) input {
+      --color-base: var(--dds-color-common-surface-secondary);
+      background-color: var(--dds-color-common-surface-secondary);
+    }
+
+    :host([readonly]:not([disabled])) input:hover,
+    :host([readonly]:not([disabled])) input:active {
+      --color-base: var(--dds-color-common-surface-secondary);
+      background-color: var(--dds-color-common-surface-secondary);
+    }
+
+    :host([readonly][error]:not([disabled])) input,
+    :host([readonly][error]:not([disabled])) input:hover,
+    :host([readonly][error]:not([disabled])) input:active {
+      --color-base: var(--dds-color-common-danger-default);
     }
   `;
 __decorateClass([
@@ -566,12 +768,24 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinTimePicker.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTimePicker.prototype, "readonly", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinTimePicker.prototype, "required", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinTimePicker.prototype, "error", 2);
+__decorateClass([
+  property({
+    type: String,
+    reflect: true,
+    attribute: "hour-cycle",
+    fallbackValue: "h12",
+    isAllowedValue: oneOf(["h12", "h23"])
+  })
+], DaikinTimePicker.prototype, "hourCycle", 2);
 __decorateClass([
   property({
     type: String,
@@ -580,6 +794,9 @@ __decorateClass([
     fallbackValue: "1"
   })
 ], DaikinTimePicker.prototype, "minutesStep", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "meridiem-single-open" })
+], DaikinTimePicker.prototype, "meridiemSingleOpen", 2);
 __decorateClass([
   state()
 ], DaikinTimePicker.prototype, "_label", 2);
@@ -600,11 +817,11 @@ export {
   calcDigitInput,
   formatPartsForUI,
   formatTimeForUI,
-  from24HourFormat,
   getTimeItemInSelection,
   isTimeOutOfRange,
   isValidValueTime,
   parsePartsFromUIValue,
-  to24HourFormat,
-  tryParseTimeFromUIValue
+  timeValueToUI,
+  tryParseTimeFromUIValue,
+  uiToTimeValue
 };