@daikin-oss/design-system-web-components 1.0.0 → 1.2.0

package/dist/cjs/components/date-picker/daikin-date-picker.cjs

@@ -0,0 +1,611 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const dom = require("@floating-ui/dom");
+const classVarianceAuthority = require("class-variance-authority");
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const ifDefined_js = require("lit/directives/if-defined.js");
+const ref_js = require("lit/directives/ref.js");
+const ddsFormElement = require("../../base/dds-form-element.cjs");
+const floatingUiAutoUpdate = require("../../controllers/floating-ui-auto-update.cjs");
+const tailwind = require("../../tailwind.css.cjs");
+const calendarCommon = require("../../utils/calendar-common.cjs");
+const reDispatch = require("../../utils/re-dispatch.cjs");
+require("../calendar/daikin-calendar.cjs");
+require("../icon-button/daikin-icon-button.cjs");
+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 = classVarianceAuthority.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 = calendarCommon.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) ? calendarCommon.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"
+    )
+  };
+}
+exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.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 floatingUiAutoUpdate.FloatingUIAutoUpdateController(this);
+    this._dateInputElement = ref_js.createRef();
+    this._calendarElement = ref_js.createRef();
+  }
+  get _value() {
+    return calendarCommon.tryParseDateFromProperty(this.value);
+  }
+  get _min() {
+    return calendarCommon.tryParseDateFromProperty(this.min) ?? calendarCommon.parseDateFromProperty(calendarCommon.DEFAULT_MIN_DATE);
+  }
+  get _max() {
+    return calendarCommon.tryParseDateFromProperty(this.max) ?? calendarCommon.parseDateFromProperty(calendarCommon.DEFAULT_MAX_DATE);
+  }
+  get _defaultValue() {
+    return calendarCommon.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;
+  }
+  _openCalendar() {
+    if (this.disabled || this.readonly) {
+      return;
+    }
+    this.open = true;
+  }
+  _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 = calendarCommon.parseDateFromProperty(calendar.value);
+    this.value = calendarCommon.formatDateForProperty(value);
+    target.value = formatDateForUI(value);
+    this.error = false;
+    if (event.type === "select") {
+      this.open = false;
+    }
+    this._emitSelect();
+  }
+  _handleToggle(event) {
+    if (reDispatch.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 || calendarCommon.isDateOutOfRange(newDate, this._min, this._max)) {
+      this.error = true;
+      return;
+    }
+    this.error = false;
+    this.value = calendarCommon.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 lit.html`<div
+        class="size-full relative font-daikinSerif"
+        ${this._autoUpdateController.refReference()}
+      >
+        <input
+          ${ref_js.ref(this._dateInputElement)}
+          class=${cvaField({ error: this.error })}
+          type="text"
+          placeholder=${ifDefined_js.ifDefined(this.placeholder ?? void 0)}
+          name=${this.name}
+          aria-label=${ifDefined_js.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}
+          @click=${this._openCalendar}
+        >
+          <span class=${calendarCommon.cvaIconButton({ intent: "calender" })}></span>
+        </daikin-icon-button>
+      </div>
+      <daikin-calendar
+        ${ref_js.ref(this._calendarElement)}
+        id="calendar"
+        .value=${this._value ? calendarCommon.formatDateForProperty(this._value) : null}
+        min=${calendarCommon.formatDateForProperty(min)}
+        max=${calendarCommon.formatDateForProperty(max)}
+        default-value=${ifDefined_js.ifDefined(
+      this._defaultValue ? calendarCommon.formatDateForProperty(this._defaultValue) : void 0
+    )}
+        popover
+        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 calendar is open.
+    // TODO: refactor here with CSS Anchor Positioning instead of using floating-ui
+    this._autoUpdateController.directive(
+      {
+        placement: "bottom-start",
+        middleware: [dom.offset({ mainAxis: 0 })]
+      },
+      this._open
+    )}`;
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("open") || changedProperties.has("disabled") || changedProperties.has("readonly")) {
+      this.open = this._open;
+    }
+  }
+  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;
+  }
+};
+exports.DaikinDatePicker.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: flex;
+      align-items: center;
+      height: 3rem;
+    }
+
+    daikin-calendar[popover] {
+      display: none;
+    }
+
+    daikin-calendar[popover]:popover-open {
+      display: flex;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinDatePicker.prototype, "placeholder", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinDatePicker.prototype, "min", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinDatePicker.prototype, "max", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinDatePicker.prototype, "readonly", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinDatePicker.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinDatePicker.prototype, "required", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinDatePicker.prototype, "error", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinDatePicker.prototype, "open", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true, attribute: "default-value" })
+], exports.DaikinDatePicker.prototype, "defaultValue", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinDatePicker.prototype, "_label", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinDatePicker.prototype, "_currentSelection", 2);
+exports.DaikinDatePicker = __decorateClass([
+  decorators_js.customElement("daikin-date-picker")
+], exports.DaikinDatePicker);

package/dist/cjs/components/date-picker/daikin-date-picker.d.cts

@@ -0,0 +1,105 @@
+import { PropertyValues } from 'lit';
+import { DDSFormElement } from "../../base/dds-form-element.cjs";
+import { DaikinInputGroup } from "../input-group/daikin-input-group.cjs";
+/**
+ * The date picker component provides a date selection function that can be combined with forms. This component uses `daikin-calendar` internally (users do not need to nest this).
+ *
+ * @fires select - Fires when the date is selected.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/date-picker/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-date-picker></daikin-date-picker>
+ * ```
+ */
+export declare class DaikinDatePicker extends DDSFormElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * The placeholder text.
+     */
+    placeholder: string | null;
+    /**
+     * The minimum date.
+     * example: `1900-01-01`
+     */
+    min: string;
+    /**
+     * The maximum date.
+     * example: `2099-12-31`
+     */
+    max: string;
+    /**
+     * Whether the text field is readonly.
+     */
+    readonly: boolean;
+    /**
+     * Whether the text field is disabled.
+     * Controlled by `daikin-input-group` when used within `daikin-input-group`.
+     */
+    disabled: boolean;
+    /**
+     * Whether the text field is required.
+     * Controlled by `daikin-input-group` when used within `daikin-input-group`.
+     */
+    required: boolean;
+    /**
+     * Whether or not to display error states.
+     * Ignored if the `disabled` is `true`.
+     * Controlled by `daikin-input-group` when used within `daikin-input-group`.
+     */
+    error: boolean;
+    /**
+     * Whether the date picker is open.
+     */
+    open: boolean;
+    /**
+     * The month that is initially displayed when the date picker is opened.
+     * If there is a `value` attribute, this is ignored.
+     */
+    defaultValue: string | null;
+    /**
+     * The label text used as the value of aria-label.
+     * Set automatically by `reflectInputGroup` method.
+     */
+    private _label;
+    private _currentSelection;
+    private _autoUpdateController;
+    private _dateInputElement;
+    private _calendarElement;
+    private get _value();
+    private get _min();
+    private get _max();
+    private get _defaultValue();
+    private get _viewDate();
+    private get _open();
+    private _openCalendar;
+    private _emitSelect;
+    private _handleFocusIn;
+    private _handleFocusOut;
+    private _handleChange;
+    private _handleMouseUp;
+    private _handleKeyDown;
+    private _handleBeforeInput;
+    private _handleSelect;
+    private _handleToggle;
+    private _updateValue;
+    private _updateInputSelection;
+    private _updateSelection;
+    render(): import('lit-html').TemplateResult<1>;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    /**
+     * This method is used by `daikin-input-group` to reflect it's attributes to this component.
+     * @private
+     */
+    reflectInputGroup(inputGroup: DaikinInputGroup): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-date-picker": DaikinDatePicker;
+    }
+}