@daikin-oss/design-system-web-components 1.1.0 → 1.3.0-next.2

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

@@ -0,0 +1,578 @@
+import { cva } from "class-variance-authority";
+import { unsafeCSS, css, html } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { DDSFormElement } from "../../base/dds-form-element.js";
+import tailwindStyles from "../../tailwind.css.js";
+import "../dropdown-item/daikin-dropdown-item.js";
+import "../dropdown/daikin-dropdown.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+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;
+  }
+  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;
+  if (hour12 === 0) hour12 = 12;
+  return {
+    time: `${hour12.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`,
+    meridiem
+  };
+}
+function isValidValueTime(str) {
+  return VALUE_TIME_REGEX.test(str);
+}
+function isTimeOutOfRange(time, min, max) {
+  const toMinutes = (s) => {
+    const [h, m] = s.split(":").map(Number);
+    return h * 60 + m;
+  };
+  const v = toMinutes(time);
+  const vMin = toMinutes(min);
+  const vMax = toMinutes(max);
+  return v < vMin || v > vMax;
+}
+const TIME_ITEMS = [
+  {
+    type: "hour",
+    range: [0, 2]
+    // 0-2 exclusive, selects "hh"
+  },
+  {
+    type: "minute",
+    range: [3, 5]
+    // 3-5 exclusive, selects "mm"
+  }
+];
+const PLACEHOLDER_HOUR = "hh";
+const PLACEHOLDER_MINUTE = "mm";
+const PLACEHOLDER_ALL = formatPartsForUI({
+  hour: PLACEHOLDER_HOUR,
+  minute: PLACEHOLDER_MINUTE
+});
+function formatPartsForUI({
+  hour,
+  minute
+}) {
+  return `${hour}:${minute}`;
+}
+function parsePartsFromUIValue(value) {
+  const [hour, minute] = value.split(":");
+  return { hour: hour || "hh", minute: minute || "mm" };
+}
+function tryParseTimeFromUIValue(value) {
+  const { hour, minute } = parsePartsFromUIValue(value);
+  if (!/^(0\d|1\d|2[0-3])$/.test(hour) || !/^[0-5]\d$/.test(minute)) {
+    return null;
+  }
+  const formattedHour = hour !== "hh" ? hour.padStart(2, "0") : "hh";
+  const formattedMinute = minute !== "mm" ? minute.padStart(2, "0") : "mm";
+  const timeString = `${formattedHour}:${formattedMinute}`;
+  return timeString;
+}
+function formatTimeForUI(timeString) {
+  const [hour, minute] = timeString.split(":");
+  return formatPartsForUI({
+    hour: hour.padStart(2, "0"),
+    minute: minute.padStart(2, "0")
+  });
+}
+function getTimeItemInSelection(selectionStart, selectionEnd) {
+  for (const { type, range } of TIME_ITEMS) {
+    if (selectionStart >= range[0] && selectionStart <= range[1] && selectionEnd >= range[0] && selectionEnd <= range[1]) {
+      return type;
+    }
+  }
+  return null;
+}
+function calcDigitInput(parts, item, digit, hourDigitIndex) {
+  if (!/^\d$/.test(digit)) {
+    return null;
+  }
+  switch (item) {
+    case "hour": {
+      if (parts.hour === "01" && ["0", "1", "2"].includes(digit)) {
+        return {
+          parts: { ...parts, hour: `1${digit}` },
+          done: true
+        };
+      }
+      if (parts.hour === "00") {
+        return {
+          parts: { ...parts, hour: `0${digit}` },
+          done: hourDigitIndex === 1
+        };
+      }
+      return {
+        parts: { ...parts, hour: `0${digit}` },
+        done: digit > "1"
+      };
+    }
+    case "minute": {
+      if (["01", "02", "03", "04", "05"].includes(parts.minute)) {
+        return {
+          parts: { ...parts, minute: `${parts.minute[1]}${digit}` },
+          done: true
+        };
+      }
+      return {
+        parts: { ...parts, minute: `0${digit}` },
+        done: digit > "5"
+      };
+    }
+  }
+}
+const cvaField = cva(
+  [
+    "flex",
+    "items-center",
+    "size-full",
+    "w-[94px]",
+    "bg-ddt-color-common-background-default",
+    "p-3",
+    "rounded",
+    "overflow-hidden",
+    "outline",
+    "outline-[--color-border]",
+    "outline-0",
+    "-outline-offset-2",
+    "placeholder:text-ddt-color-common-text-secondary",
+    "define-[--color-state-focus,--color-base]/color-border",
+    "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:var-color-ddt-color-common-disabled/color-base",
+    "disabled:text-ddt-color-common-disabled",
+    "disabled:bg-ddt-color-common-background-default",
+    "disabled:placeholder:text-ddt-color-common-disabled"
+  ],
+  {
+    variants: {
+      error: {
+        false: [
+          "enabled:var-color-ddt-color-common-neutral-default/color-base",
+          "focus-visible:var-color-ddt-color-common-border-focus/color-state-focus"
+        ],
+        true: ["enabled:var-color-ddt-color-common-danger-default/color-base"]
+      }
+    }
+  }
+);
+let DaikinTimePicker = class extends DDSFormElement {
+  constructor() {
+    super(...arguments);
+    this.placeholder = "hh:mm";
+    this.min = DEFAULT_MIN_TIME;
+    this.max = DEFAULT_MAX_TIME;
+    this.disabled = false;
+    this.required = false;
+    this.error = false;
+    this.minutesStep = "1";
+    this._label = null;
+    this._inputValue = "";
+    this._currentSelection = "hour";
+    this._meridiem = "";
+    this._timeInputElement = createRef();
+    this._hourDigitIndex = 0;
+  }
+  /**
+   * Returns the value to display in the input field (from _inputValue state).
+   */
+  get _timeValue() {
+    return this._inputValue;
+  }
+  /**
+   * Syncs the AM/PM value with the current value (24-hour) if value changes externally.
+   */
+  _syncMeridiemWithValue() {
+    if (this.value) {
+      const { meridiem } = from24HourFormat(this.value);
+      this._meridiem = meridiem;
+    }
+  }
+  get _min() {
+    return this.min || DEFAULT_MIN_TIME;
+  }
+  get _max() {
+    return this.max || DEFAULT_MAX_TIME;
+  }
+  _convertZeroHourToTwelve() {
+    const minutes = this._inputValue.split(":")[1];
+    this._inputValue = `12:${minutes}`;
+    if (this._timeInputElement.value) {
+      this._timeInputElement.value.value = this._inputValue;
+    }
+  }
+  _handleFocusIn(event) {
+    const target = event.target;
+    this._updateInputSelection(target);
+    if (!this._inputValue) {
+      this._inputValue = PLACEHOLDER_ALL;
+    }
+  }
+  _handleFocusOut(event) {
+    const target = event.target;
+    if (target.value === PLACEHOLDER_ALL) {
+      this._inputValue = "";
+      target.value = "";
+    }
+    if (target.value.startsWith("00")) {
+      this._convertZeroHourToTwelve();
+    }
+    this._hourDigitIndex = 0;
+  }
+  _handleChange(event) {
+    const target = event.target;
+    this._inputValue = target.value;
+    this._updateValue(event);
+  }
+  _handleMouseUp(event) {
+    var _a, _b;
+    event.preventDefault();
+    const selectionStart = ((_a = this._timeInputElement.value) == null ? void 0 : _a.selectionStart) ?? 0;
+    const selectionEnd = ((_b = this._timeInputElement.value) == null ? void 0 : _b.selectionEnd) ?? 0;
+    const timeItemInSelection = getTimeItemInSelection(
+      selectionStart,
+      selectionEnd
+    );
+    if (event.target.value === PLACEHOLDER_ALL && !timeItemInSelection) {
+      this._updateSelection("hour");
+      return;
+    }
+    if (timeItemInSelection) {
+      this._updateSelection(timeItemInSelection);
+    }
+  }
+  _handleDigitInput(parts, item, digit, hourDigitIndex) {
+    if (this._currentSelection === "hour") {
+      if (hourDigitIndex === 1) {
+        this._hourDigitIndex = 0;
+      } else {
+        this._hourDigitIndex = 1;
+      }
+    }
+    return calcDigitInput(parts, item, digit, hourDigitIndex);
+  }
+  _handleKeyDown(event) {
+    const target = event.target;
+    const key = event.key;
+    const parts = parsePartsFromUIValue(target.value);
+    if (key === "Backspace") {
+      event.preventDefault();
+      const itemToRemove = this._currentSelection;
+      const placeholder = {
+        hour: PLACEHOLDER_HOUR,
+        minute: PLACEHOLDER_MINUTE
+      }[itemToRemove];
+      if (parts[itemToRemove] !== placeholder) {
+        const newVal = formatPartsForUI({
+          ...parts,
+          [itemToRemove]: placeholder
+        });
+        this._inputValue = newVal;
+        target.value = newVal;
+        this._updateSelection(itemToRemove);
+      }
+      this._updateValue(event);
+      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);
+      return;
+    }
+    const moveOffset = {
+      ArrowLeft: -1,
+      ArrowRight: 1
+    }[key];
+    if (moveOffset) {
+      event.preventDefault();
+      const currentIndex = TIME_ITEMS.findIndex(
+        ({ type }) => type === this._currentSelection
+      );
+      const newIndex = currentIndex >= 0 ? Math.min(
+        Math.max(currentIndex + moveOffset, 0),
+        TIME_ITEMS.length - 1
+      ) : 0;
+      this._updateSelection(TIME_ITEMS[newIndex].type);
+      return;
+    }
+    const countOffset = {
+      ArrowUp: 1,
+      ArrowDown: -1
+    }[key];
+    if (countOffset) {
+      event.preventDefault();
+      this._updateSelection(this._currentSelection);
+      this._updateTimeByOffset(countOffset);
+      return;
+    }
+    if (key.length <= 1) {
+      event.preventDefault();
+      return;
+    }
+  }
+  _updateTimeByOffset(offset) {
+    const target = this._timeInputElement.value;
+    if (!target) return;
+    const currentTime = target.value;
+    if (!currentTime) return;
+    const [hourStr, minuteStr] = currentTime.split(":");
+    let hour = parseInt(hourStr, 10);
+    let minute = parseInt(minuteStr, 10);
+    if (this._currentSelection === "hour") {
+      if (isNaN(hour)) hour = 0;
+      hour = (hour + offset + 11) % 12 + 1;
+    } else {
+      if (isNaN(minute)) minute = 0;
+      minute = (minute + offset * Number(this.minutesStep) + 60) % 60;
+    }
+    const newTime = `${isNaN(hour) ? "hh" : String(hour).padStart(2, "0")}:${isNaN(minute) ? "mm" : String(minute).padStart(2, "0")}`;
+    this._inputValue = formatTimeForUI(newTime);
+    target.value = this._inputValue;
+    this._updateSelection(this._currentSelection);
+    this._updateValue();
+  }
+  _handleBeforeInput(event) {
+    event.preventDefault();
+    this._updateInputSelection(event.target);
+  }
+  /**
+   * Updates the value in 24-hour format if the input is valid, keeps UI in 12-hour format.
+   */
+  _updateValue(event) {
+    const target = (event == null ? void 0 : event.target) || this._timeInputElement.value;
+    if (!target) return;
+    this._inputValue = target.value;
+    if (target.value === PLACEHOLDER_ALL) {
+      this.error = false;
+      return;
+    }
+    if (this._meridiem === "") {
+      this.error = true;
+      return;
+    }
+    const newTime = tryParseTimeFromUIValue(target.value);
+    const newValue = newTime != null ? to24HourFormat(newTime, this._meridiem) : "";
+    this.error = !newValue || isTimeOutOfRange(newValue, this._min, this._max);
+    const changed = newValue !== this.value;
+    this.value = newValue;
+    if (changed) {
+      if (newValue) {
+        this.dispatchEvent(
+          new Event("input", {
+            bubbles: true,
+            composed: true
+          })
+        );
+      }
+      this.dispatchEvent(
+        new Event("change", {
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+  }
+  _updateInputSelection(target) {
+    var _a;
+    if (target.value === "") {
+      target.value = PLACEHOLDER_ALL;
+    }
+    const itemInfo = TIME_ITEMS[0];
+    (_a = this._timeInputElement.value) == null ? void 0 : _a.setSelectionRange(
+      itemInfo.range[0],
+      itemInfo.range[1]
+    );
+    this._currentSelection = itemInfo.type;
+  }
+  _updateSelection(timeItem) {
+    var _a;
+    const selection = window.getSelection();
+    if (!selection) {
+      return;
+    }
+    const itemInfo = TIME_ITEMS.find(({ type }) => type === timeItem);
+    if (itemInfo) {
+      if (itemInfo.type === "minute") {
+        if (this._inputValue.startsWith("00")) {
+          this._convertZeroHourToTwelve();
+        }
+        this._hourDigitIndex = 0;
+      }
+      (_a = this._timeInputElement.value) == null ? void 0 : _a.setSelectionRange(
+        itemInfo.range[0],
+        itemInfo.range[1]
+      );
+      this._currentSelection = itemInfo.type;
+    }
+  }
+  _handleDropdownChange(event) {
+    const target = event.target;
+    this._meridiem = target.value;
+    const input = this._timeInputElement.value;
+    if (input && input.value && tryParseTimeFromUIValue(input.value)) {
+      this._updateValue();
+    }
+  }
+  render() {
+    return html`<div
+      role="group"
+      aria-label=${ifDefined(this._label ?? void 0)}
+      class="flex flex-row h-full gap-2 font-daikinSerif"
+    >
+      <input
+        ${ref(this._timeInputElement)}
+        class=${cvaField({ error: this.error })}
+        type="text"
+        placeholder=${ifDefined(this.placeholder ?? void 0)}
+        name=${this.name}
+        .value=${this._timeValue}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+        @change=${this._handleChange}
+        @focusin=${this._handleFocusIn}
+        @focusout=${this._handleFocusOut}
+        @keydown=${this._handleKeyDown}
+        @beforeinput=${this._handleBeforeInput}
+        @mouseup=${this._handleMouseUp}
+      />
+      <daikin-dropdown
+        class="w-[88px]"
+        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>
+    </div>`;
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("value")) {
+      this._syncMeridiemWithValue();
+      if (this.value) {
+        const { time } = from24HourFormat(this.value);
+        this._inputValue = time;
+      }
+    }
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("value")) {
+      this.setFormValue(this.value);
+    }
+  }
+  /**
+   * This method is used by `daikin-input-group` to reflect it's attributes to this component.
+   * @private
+   */
+  reflectInputGroup(inputGroup) {
+    const isError = !inputGroup.disabled && !!inputGroup.error;
+    this.disabled = !!inputGroup.disabled;
+    this.required = !!inputGroup.required;
+    this.error = isError;
+    this._label = inputGroup.label ?? null;
+  }
+};
+DaikinTimePicker.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: flex;
+      align-items: center;
+      height: 3rem;
+    }
+  `;
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinTimePicker.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinTimePicker.prototype, "min", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinTimePicker.prototype, "max", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTimePicker.prototype, "disabled", 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: "minutes-step" })
+], DaikinTimePicker.prototype, "minutesStep", 2);
+__decorateClass([
+  state()
+], DaikinTimePicker.prototype, "_label", 2);
+__decorateClass([
+  state()
+], DaikinTimePicker.prototype, "_inputValue", 2);
+__decorateClass([
+  state()
+], DaikinTimePicker.prototype, "_currentSelection", 2);
+__decorateClass([
+  state()
+], DaikinTimePicker.prototype, "_meridiem", 2);
+DaikinTimePicker = __decorateClass([
+  customElement("daikin-time-picker")
+], DaikinTimePicker);
+export {
+  DaikinTimePicker,
+  calcDigitInput,
+  formatPartsForUI,
+  formatTimeForUI,
+  from24HourFormat,
+  getTimeItemInSelection,
+  isTimeOutOfRange,
+  isValidValueTime,
+  parsePartsFromUIValue,
+  to24HourFormat,
+  tryParseTimeFromUIValue
+};

package/dist/es/components/time-picker/index.d.ts

@@ -0,0 +1 @@
+export * from "./daikin-time-picker.js";

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

@@ -0,0 +1,14 @@
+import { DaikinTimePicker, calcDigitInput, formatPartsForUI, formatTimeForUI, from24HourFormat, getTimeItemInSelection, isTimeOutOfRange, isValidValueTime, parsePartsFromUIValue, to24HourFormat, tryParseTimeFromUIValue } from "./daikin-time-picker.js";
+export {
+  DaikinTimePicker,
+  calcDigitInput,
+  formatPartsForUI,
+  formatTimeForUI,
+  from24HourFormat,
+  getTimeItemInSelection,
+  isTimeOutOfRange,
+  isValidValueTime,
+  parsePartsFromUIValue,
+  to24HourFormat,
+  tryParseTimeFromUIValue
+};

package/dist/es/components/toast-notification/daikin-toast-notification.d.ts

@@ -11,6 +11,8 @@ export type ToastNotificationVariantProps = MergeVariantProps<typeof cvaContaine
  * Hierarchy:
  * - `daikin-toast-notification-manager` > `daikin-toast-notification`
  *
+ * @tokenImports ../../utils/notification-common.ts
+ *
  * @fires close - A custom event emitted when a user clicks the close button.
  *
  * @slot A slot for the toast notification description content.

package/dist/es/components/toast-notification/daikin-toast-notification.js

@@ -1,4 +1,4 @@
-import { css, unsafeCSS, html, nothing } from "lit";
+import { unsafeCSS, css, nothing, html } from "lit";
 import { property } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";
@@ -39,10 +39,7 @@ let DaikinToastNotification = class extends DDSElement {
     >
       <div class=${cvaContent({ layout: this.layout })}>
         <slot class=${cvaTitle({ layout: this.layout })} name="title"></slot>
-        <slot
-          class=${cvaDescription({ layout: this.layout })}
-          name="description"
-        ></slot>
+        <slot class=${cvaDescription({ layout: this.layout })}></slot>
         ${this.timestamp ? html`<span class=${cvaTimestamp({ layout: this.layout })}
               >${formatDate(this.timestamp)}</span
             >` : nothing}
@@ -54,7 +51,7 @@ let DaikinToastNotification = class extends DDSElement {
             @click=${this._handleClickClose}
           >
             <span
-              class="flex size-6 text-ddt-color-common-text-secondary relative i-daikin-cross"
+              class="flex size-6 text-ddt-color-common-text-secondary relative i-daikin-close"
             ></span>
           </daikin-icon-button>` : nothing}
     </div>`;
@@ -65,18 +62,24 @@ DaikinToastNotification.styles = css`
 
     :host {
       display: block;
+      width: fit-content;
+      max-width: 100%;
 
       --ddc-toast-animation-duration: ${unsafeCSS(TOAST_ANIMATION_DURATION)}ms;
     }
+
+    :host([layout="horizontal"]) {
+      height: 4rem;
+    }
   `;
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinToastNotification.prototype, "name", 2);
 __decorateClass([
-  property({ type: String })
+  property({ type: String, reflect: true })
 ], DaikinToastNotification.prototype, "status", 2);
 __decorateClass([
-  property({ type: String })
+  property({ type: String, reflect: true })
 ], DaikinToastNotification.prototype, "layout", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })

package/dist/es/components/toast-notification-manager/daikin-toast-notification-manager.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property, queryAssignedElements } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { DDSElement } from "../../base/dds-element.js";
@@ -26,7 +26,7 @@ const cvaContainer = cva(
   [
     "flex",
     "gap-2",
-    "w-max",
+    "w-[calc(100vw_-_2rem)]",
     "fixed",
     "transition-transform",
     "translate-y-[var(--container-move-offset-y,0)]",