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

package/dist/es-dev/components/date-picker/daikin-date-picker.js

@@ -0,0 +1,638 @@
+import { offset, flip, shift } from "@floating-ui/dom";
+import { cva } from "class-variance-authority";
+import { unsafeCSS, css, html } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { guard } from "lit/directives/guard.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 { FloatingUIAutoUpdateController } from "../../controllers/floating-ui-auto-update.js";
+import tailwindStyles from "../../tailwind.css.js";
+import { tryParseDateFromProperty, parseDateFromProperty, DEFAULT_MIN_DATE, DEFAULT_MAX_DATE, formatDateForProperty, isDateOutOfRange, cvaIconButton, countDaysForYearMonth } from "../../utils/calendar-common.js";
+import { reDispatch } from "../../utils/re-dispatch.js";
+import "../calendar/daikin-calendar.js";
+import "../icon-button/daikin-icon-button.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 DATE_ITEMS = [
+  {
+    type: "month",
+    range: [0, 2]
+  },
+  {
+    type: "day",
+    range: [3, 5]
+  },
+  {
+    type: "year",
+    range: [6, 10]
+  }
+];
+const PLACEHOLDER_YEAR = "YYYY";
+const PLACEHOLDER_MONTH = "MM";
+const PLACEHOLDER_DAY = "DD";
+const PLACEHOLDER_ALL = formatPartsForUI({
+  year: PLACEHOLDER_YEAR,
+  month: PLACEHOLDER_MONTH,
+  day: PLACEHOLDER_DAY
+});
+const cvaField = cva(
+  [
+    "flex",
+    "items-center",
+    "size-full",
+    "bg-ddt-color-common-background-default",
+    "pl-4",
+    "pr-10",
+    "rounded",
+    "overflow-hidden",
+    "outline",
+    "outline-[--color-border]",
+    "outline-0",
+    "-outline-offset-2",
+    "placeholder:text-ddt-color-common-text-secondary",
+    // Define `--color-border` as a CSS variable that references `--color-state-focus` and `--color-base` in that order.
+    // `--color-base` indicates the color of the border when the element is normal, hovered, or disabled.
+    "define-[--color-state-focus,--color-base]/color-border",
+    "border",
+    "border-[--color-border]",
+    // Update `--color-base` depending on the state.
+    // The default `--color-base` and `--color-state-focus` values are defined in `variants.error` because they differ depending on whether or not the input has an error state.
+    "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"]
+      }
+    }
+  }
+);
+function parsePartsFromUIValue(value) {
+  const [month, day, year] = value.split("/");
+  return { year, month, day };
+}
+function formatPartsForUI({ year, month, day }) {
+  return `${month}/${day}/${year}`;
+}
+function tryParseDateFromUIValue(value) {
+  const { year, month, day } = parsePartsFromUIValue(value);
+  if (
+    // Prevent treating incomplete year entries (such as 0202) as valid.
+    // This also means that dates less than 1000 years ago cannot be handled.
+    !/^[1-9]\d\d\d$/.test(year) || !/^\d\d$/.test(month) || !/^\d\d$/.test(day)
+  ) {
+    return null;
+  }
+  const date = parseDateFromProperty(`${year}-${month}-${day}`);
+  if (date.getUTCFullYear() !== Number(year) || date.getUTCMonth() + 1 !== Number(month) || date.getUTCDate() !== Number(day)) {
+    return null;
+  }
+  return date;
+}
+function formatDateForUI(date) {
+  return formatPartsForUI({
+    year: String(date.getUTCFullYear()).padStart(4, "0"),
+    month: String(date.getUTCMonth() + 1).padStart(2, "0"),
+    day: String(date.getUTCDate()).padStart(2, "0")
+  });
+}
+function getDateItemInSelection(selectionStart, selectionEnd) {
+  for (const { type, range } of DATE_ITEMS) {
+    if (range[0] <= selectionStart && selectionStart <= range[1] && range[0] <= selectionEnd && selectionEnd <= range[1]) {
+      return type;
+    }
+  }
+  return null;
+}
+function handleDigitInput(parts, item, digit) {
+  switch (item) {
+    case "year": {
+      if (!parts.year.startsWith("0")) {
+        return {
+          parts: { ...parts, year: `000${digit}` },
+          done: false
+        };
+      }
+      const newYear = `${parts.year.slice(1)}${digit}`;
+      return {
+        parts: { ...parts, year: newYear },
+        done: !newYear.startsWith("0")
+      };
+    }
+    case "month":
+      if (parts.month === "01" && ["0", "1", "2"].includes(digit)) {
+        return {
+          parts: { ...parts, month: `1${digit}` },
+          done: true
+        };
+      }
+      if (digit !== "0") {
+        return {
+          parts: { ...parts, month: `0${digit}` },
+          done: digit !== "1"
+        };
+      }
+      break;
+    case "day":
+      if (["01", "02"].includes(parts.day) || parts.day === "03" && ["0", "1"].includes(digit)) {
+        return {
+          parts: {
+            ...parts,
+            day: `${parts.day.slice(1)}${digit}`
+          },
+          done: true
+        };
+      }
+      if (parts.day === "03" && digit === "3" || digit === "0") {
+        break;
+      }
+      return {
+        parts: { ...parts, day: `0${digit}` },
+        done: !["1", "2", "3"].includes(digit)
+      };
+  }
+  return null;
+}
+function handleOffsetInput(parts, item, offset2, viewDate, minDate, maxDate) {
+  if (offset2 === 0) {
+    return null;
+  }
+  const year = Number(parts.year);
+  const month = Number(parts.month);
+  const maxDay = isFinite(month) ? countDaysForYearMonth(
+    isFinite(year) ? year : 2021,
+    // Assume not leap year
+    month - 1
+  ) : 31;
+  const { nanDefault, min, max, length } = {
+    year: {
+      nanDefault: viewDate == null ? void 0 : viewDate.getUTCFullYear(),
+      min: minDate.getUTCFullYear(),
+      max: maxDate.getUTCFullYear(),
+      length: 4
+    },
+    month: {
+      nanDefault: null,
+      min: 1,
+      max: 12,
+      length: 2
+    },
+    day: {
+      nanDefault: null,
+      min: 1,
+      max: maxDay,
+      length: 2
+    }
+  }[item];
+  const value = Number(parts[item]);
+  let newValue;
+  if (isFinite(value)) {
+    const withOffset = value + offset2;
+    newValue = min <= withOffset && withOffset <= max ? withOffset : (
+      // Wrap around
+      offset2 > 0 ? min : max
+    );
+  } else {
+    newValue = nanDefault ?? (offset2 > 0 ? min : max);
+  }
+  return {
+    ...parts,
+    [item]: String(Math.max(Math.min(newValue, max), min)).padStart(
+      length,
+      "0"
+    )
+  };
+}
+let DaikinDatePicker = class extends DDSFormElement {
+  constructor() {
+    super(...arguments);
+    this.placeholder = null;
+    this.min = "";
+    this.max = "";
+    this.readonly = false;
+    this.disabled = false;
+    this.required = false;
+    this.error = false;
+    this.open = false;
+    this.defaultValue = null;
+    this._label = null;
+    this._currentSelection = "month";
+    this._autoUpdateController = new FloatingUIAutoUpdateController(this);
+    this._dateInputElement = createRef();
+    this._calendarElement = createRef();
+  }
+  get _value() {
+    return tryParseDateFromProperty(this.value);
+  }
+  get _min() {
+    return tryParseDateFromProperty(this.min) ?? parseDateFromProperty(DEFAULT_MIN_DATE);
+  }
+  get _max() {
+    return tryParseDateFromProperty(this.max) ?? parseDateFromProperty(DEFAULT_MAX_DATE);
+  }
+  get _defaultValue() {
+    return tryParseDateFromProperty(this.defaultValue ?? "");
+  }
+  get _viewDate() {
+    var _a;
+    return ((_a = this._calendarElement.value) == null ? void 0 : _a.viewDate) ?? null;
+  }
+  get _open() {
+    return this.open && !this.disabled && !this.readonly;
+  }
+  _emitSelect() {
+    this.dispatchEvent(
+      new Event("select", {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _handleFocusIn(event) {
+    const target = event.target;
+    this._updateInputSelection(target);
+  }
+  _handleFocusOut(event) {
+    const target = event.target;
+    if (target.value === PLACEHOLDER_ALL) {
+      target.value = "";
+    }
+  }
+  _handleChange(event) {
+    this._updateValue(event);
+  }
+  _handleMouseUp(event) {
+    var _a, _b;
+    event.preventDefault();
+    const selectionStart = ((_a = this._dateInputElement.value) == null ? void 0 : _a.selectionStart) ?? 0;
+    const selectionEnd = ((_b = this._dateInputElement.value) == null ? void 0 : _b.selectionEnd) ?? 0;
+    const dateItemInSelection = getDateItemInSelection(
+      selectionStart,
+      selectionEnd
+    );
+    if (event.target.value === PLACEHOLDER_ALL && !dateItemInSelection) {
+      this._updateSelection("month");
+      return;
+    }
+    if (dateItemInSelection) {
+      this._updateSelection(dateItemInSelection);
+    }
+  }
+  _handleKeyDown(event) {
+    if (this.readonly) {
+      return;
+    }
+    const target = event.target;
+    const key = event.key;
+    const parts = parsePartsFromUIValue(target.value);
+    if (key === "Backspace") {
+      event.preventDefault();
+      const itemToRemove = this._currentSelection;
+      const placeholder = {
+        year: PLACEHOLDER_YEAR,
+        month: PLACEHOLDER_MONTH,
+        day: PLACEHOLDER_DAY
+      }[itemToRemove];
+      if (parts[itemToRemove] !== placeholder) {
+        target.value = formatPartsForUI({
+          ...parts,
+          [itemToRemove]: placeholder
+        });
+        this._updateSelection(itemToRemove);
+      }
+      this._updateValue(event);
+      return;
+    }
+    if (/^\d$/.test(key)) {
+      event.preventDefault();
+      const newState = handleDigitInput(parts, this._currentSelection, key);
+      if (newState) {
+        target.value = formatPartsForUI(newState.parts);
+        const currentIndex = DATE_ITEMS.findIndex(
+          ({ type }) => type === this._currentSelection
+        );
+        const nextIndex = currentIndex >= 0 ? Math.min(currentIndex + 1, DATE_ITEMS.length - 1) : -1;
+        this._updateSelection(
+          newState.done && nextIndex >= 0 ? DATE_ITEMS[nextIndex].type : this._currentSelection
+        );
+      }
+      this._updateValue(event);
+      return;
+    }
+    const moveOffset = {
+      ArrowLeft: -1,
+      ArrowRight: 1
+    }[key];
+    if (moveOffset) {
+      event.preventDefault();
+      const currentIndex = DATE_ITEMS.findIndex(
+        ({ type }) => type === this._currentSelection
+      );
+      const newIndex = currentIndex >= 0 ? Math.min(
+        Math.max(currentIndex + moveOffset, 0),
+        DATE_ITEMS.length - 1
+      ) : 0;
+      this._updateSelection(DATE_ITEMS[newIndex].type);
+      return;
+    }
+    const countOffset = {
+      ArrowUp: 1,
+      ArrowDown: -1
+    }[key];
+    if (countOffset) {
+      event.preventDefault();
+      const newParts = handleOffsetInput(
+        parts,
+        this._currentSelection,
+        countOffset,
+        this._viewDate,
+        this._min,
+        this._max
+      );
+      if (newParts) {
+        target.value = formatPartsForUI(newParts);
+        this._updateSelection(this._currentSelection);
+      }
+      this._updateValue(event);
+      return;
+    }
+    if (key.length <= 1) {
+      event.preventDefault();
+      return;
+    }
+  }
+  // Depending on the PC settings, a period may be entered when the space key is pressed repeatedly, so this is stopped.
+  // When this happens, the selection range changes, so this is also reset.
+  _handleBeforeInput(event) {
+    event.preventDefault();
+    this._updateInputSelection(event.target);
+  }
+  _handleSelect(event) {
+    event.stopPropagation();
+    const calendar = event.target;
+    if (!calendar.value) {
+      return;
+    }
+    const target = this._dateInputElement.value;
+    const value = parseDateFromProperty(calendar.value);
+    this.value = formatDateForProperty(value);
+    target.value = formatDateForUI(value);
+    this.error = false;
+    if (event.type === "select") {
+      this.open = false;
+    }
+    this._emitSelect();
+  }
+  _handlePointerUp() {
+    if (this.disabled || this.readonly) {
+      return;
+    }
+    this.open = !this.open;
+  }
+  _handleCalendarKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      event.stopPropagation();
+      if (this.disabled || this.readonly) {
+        return;
+      }
+      this.open = !this.open;
+    }
+  }
+  _handleToggle(event) {
+    if (reDispatch(this, event, new ToggleEvent("toggle", event))) {
+      this.open = event.newState === "open";
+      const calendar = this._calendarElement.value;
+      if (calendar) {
+        calendar.view = "day";
+      }
+    }
+  }
+  _updateValue(event) {
+    const target = event.target;
+    if (target.value === PLACEHOLDER_ALL) {
+      this.error = false;
+      return;
+    }
+    const newDate = tryParseDateFromUIValue(target.value);
+    if (!newDate || isDateOutOfRange(newDate, this._min, this._max)) {
+      this.error = true;
+      return;
+    }
+    this.error = false;
+    this.value = formatDateForProperty(newDate);
+    this.open = false;
+    this._emitSelect();
+  }
+  _updateInputSelection(target) {
+    var _a;
+    const selection = window.getSelection();
+    if (!selection) {
+      return;
+    }
+    if (target.value === "") {
+      target.value = PLACEHOLDER_ALL;
+    }
+    const itemInfo = DATE_ITEMS[0];
+    (_a = this._dateInputElement.value) == null ? void 0 : _a.setSelectionRange(
+      itemInfo.range[0],
+      itemInfo.range[1]
+    );
+    this._currentSelection = itemInfo.type;
+  }
+  _updateSelection(dateItem) {
+    var _a;
+    const selection = window.getSelection();
+    if (!selection) {
+      return;
+    }
+    const itemInfo = DATE_ITEMS.find(({ type }) => type === dateItem);
+    if (itemInfo) {
+      (_a = this._dateInputElement.value) == null ? void 0 : _a.setSelectionRange(
+        itemInfo.range[0],
+        itemInfo.range[1]
+      );
+      this._currentSelection = itemInfo.type;
+    }
+  }
+  render() {
+    const min = this._min;
+    const max = this._max;
+    return html`<div
+        class="size-full relative font-daikinSerif"
+        ${this._autoUpdateController.refReference()}
+      >
+        <input
+          ${ref(this._dateInputElement)}
+          class=${cvaField({ error: this.error })}
+          type="text"
+          placeholder=${ifDefined(this.placeholder ?? void 0)}
+          name=${this.name}
+          aria-label=${ifDefined(this._label ?? void 0)}
+          .value=${this._value ? formatDateForUI(this._value) : ""}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          ?required=${this.required}
+          @change=${this._handleChange}
+          @focusin=${this._handleFocusIn}
+          @focusout=${this._handleFocusOut}
+          @keydown=${this._handleKeyDown}
+          @beforeinput=${this._handleBeforeInput}
+          @mouseup=${this._handleMouseUp}
+        />
+        <daikin-icon-button
+          class="absolute top-0 bottom-0 right-2 m-auto"
+          type="button"
+          color="neutral"
+          variant="ghost"
+          button-aria-label="Open the date picker"
+          ?disabled=${this.disabled}
+          @pointerup=${this._handlePointerUp}
+          @keydown=${this._handleCalendarKeyDown}
+        >
+          <span class=${cvaIconButton({ intent: "calender" })}></span>
+        </daikin-icon-button>
+      </div>
+      <daikin-calendar
+        ${ref(this._calendarElement)}
+        id="calendar"
+        .value=${this._value ? formatDateForProperty(this._value) : null}
+        min=${formatDateForProperty(min)}
+        max=${formatDateForProperty(max)}
+        default-value=${ifDefined(
+      this._defaultValue ? formatDateForProperty(this._defaultValue) : void 0
+    )}
+        popover="auto"
+        class="absolute left-[--floating-x,0] top-[--floating-y,0]"
+        @toggle=${this._handleToggle}
+        @select=${this._handleSelect}
+        @selecting=${this._handleSelect}
+        ${this._autoUpdateController.refFloating()}
+      >
+      </daikin-calendar>
+      ${// Activate auto update only when the tooltip is open.
+    // TODO(DDS-1226): refactor here with CSS Anchor Positioning instead of using floating-ui
+    guard(
+      [this.open],
+      () => this._autoUpdateController.directive(
+        {
+          placement: "bottom-start",
+          middleware: [offset({ mainAxis: 0 }), flip(), shift()]
+        },
+        this.open
+      )
+    )}`;
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("open") || changedProperties.has("disabled") || changedProperties.has("readonly")) {
+      this.open = this._open;
+    }
+    {
+      for (const prop of ["value", "min", "max", "defaultValue"]) {
+        if (changedProperties.has(prop)) {
+          if (this[prop] && !tryParseDateFromProperty(this[prop])) {
+            console.warn(
+              `daikin-date-picker: Invalid date "${this[prop]}" specified for ${prop}`
+            );
+          }
+        }
+      }
+    }
+  }
+  updated(changedProperties) {
+    var _a;
+    if (changedProperties.has("open") || changedProperties.has("disabled") || changedProperties.has("readonly")) {
+      (_a = this._autoUpdateController.floatingElement) == null ? void 0 : _a.togglePopover(this._open);
+    }
+    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;
+  }
+};
+DaikinDatePicker.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: flex;
+      align-items: center;
+      height: 3rem;
+    }
+
+    daikin-calendar[popover] {
+      display: none;
+    }
+
+    daikin-calendar[popover]:popover-open {
+      display: flex;
+    }
+  `;
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinDatePicker.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinDatePicker.prototype, "min", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinDatePicker.prototype, "max", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinDatePicker.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinDatePicker.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinDatePicker.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinDatePicker.prototype, "error", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinDatePicker.prototype, "open", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "default-value" })
+], DaikinDatePicker.prototype, "defaultValue", 2);
+__decorateClass([
+  state()
+], DaikinDatePicker.prototype, "_label", 2);
+__decorateClass([
+  state()
+], DaikinDatePicker.prototype, "_currentSelection", 2);
+DaikinDatePicker = __decorateClass([
+  customElement("daikin-date-picker")
+], DaikinDatePicker);
+export {
+  DaikinDatePicker
+};

package/dist/es-dev/components/date-picker/index.d.ts

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

package/dist/es-dev/components/date-picker/index.js

@@ -0,0 +1,4 @@
+import { DaikinDatePicker } from "./daikin-date-picker.js";
+export {
+  DaikinDatePicker
+};

package/dist/es-dev/components/dropdown/daikin-dropdown.d.ts

@@ -1,5 +1,5 @@
 import { PropertyValues } from 'lit';
-import { DDSElement } from "../../base/index.js";
+import { DDSFormElement } from "../../base/dds-form-element.js";
 import { DaikinInputGroup } from "../input-group/index.js";
 /**
  * A dropdown list component.
@@ -27,18 +27,8 @@ import { DaikinInputGroup } from "../input-group/index.js";
  * </daikin-dropdown>
  * ```
  */
-export declare class DaikinDropdown extends DDSElement {
+export declare class DaikinDropdown extends DDSFormElement {
     static readonly styles: import('lit').CSSResult;
-    static readonly formAssociated = true;
-    private _internals;
-    /**
-     * Form value of the dropdown.
-     * `null` if not selected.
-     *
-     * If `multiple` is `true`, please use `selectedOptions` instead.
-     * If multiple selection is enabled, the value set to this property will be one of the selected items, and it is not possible to predict which value will be set.
-     */
-    value: string | null;
     /**
      * Placeholder text of the dropdown.
      */
@@ -85,14 +75,13 @@ export declare class DaikinDropdown extends DDSElement {
     private get _selectionLabels();
     private _initialUpdateCompleted;
     private _autoUpdateController;
-    private _clickOutsideController;
+    private _willBeFocusedByPress;
     /**
      * Last focused dropdown item.
      * The next time the dropdown opens, the focus will be moved to this element.
      */
     private _lastFocusedItem;
     private _dropdownRef;
-    private _onClickOutside;
     private _searchItem;
     private _moveFocus;
     private _updateFormValue;
@@ -107,6 +96,7 @@ export declare class DaikinDropdown extends DDSElement {
      * @param value The value of selected option.
      */
     private _handleSelectOption;
+    private _handleFocusOut;
     /**
      * Removes the last selected option.
      *
@@ -114,13 +104,15 @@ export declare class DaikinDropdown extends DDSElement {
      * If multiple selection is disabled, directly empty the selected options.
      */
     private _removeLastSelection;
-    private _handleClick;
     private _handleKeyDown;
     private _handleKeyDownEscape;
     /**
      * Handle `focusin` event to remember last focused item.
      */
     private _handleFocusIn;
+    private _handlePointerDown;
+    private _handlePointerUp;
+    private _handleButtonKeyDown;
     /**
      * Handle `floating-ready` event dispatched by `FloatingUIAutoUpdateController`.
      * The dropdown menu opens after the Floating UI has finished calculating its position, so there is a slight time lag between the change to `this.open` and the actual display.