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

package/dist/cjs-dev/components/calendar/daikin-calendar.cjs

@@ -0,0 +1,558 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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 repeat_js = require("lit/directives/repeat.js");
+const tailwind = require("../../tailwind.css.cjs");
+const calendarCommon = require("../../utils/calendar-common.cjs");
+const scroller = require("../../utils/scroller.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 MONTHS = [
+  ["Jan", "January"],
+  ["Feb", "February"],
+  ["Mar", "March"],
+  ["Apr", "April"],
+  ["May", "May"],
+  ["Jun", "June"],
+  ["Jul", "July"],
+  ["Aug", "August"],
+  ["Sep", "September"],
+  ["Oct", "October"],
+  ["Nov", "November"],
+  ["Dec", "December"]
+];
+const DAYS = [
+  ["Sun", "Sunday"],
+  ["Mon", "Monday"],
+  ["Tue", "Tuesday"],
+  ["Wed", "Wednesday"],
+  ["Thu", "Thursday"],
+  ["Fri", "Friday"],
+  ["Sat", "Saturday"]
+];
+const cvaContentButton = classVarianceAuthority.cva(
+  [
+    "flex",
+    "items-center",
+    "justify-center",
+    "rounded-full",
+    "text-sm",
+    "outline",
+    "outline-2",
+    "outline-offset-2",
+    "outline-transparent",
+    "focus-visible:outline-ddt-color-common-border-focus",
+    "enabled:bg-[var(--color-primary)]",
+    "disabled:text-ddt-color-common-disabled"
+  ],
+  {
+    variants: {
+      date: {
+        false: ["w-[calc((100%_-_3rem)/3)]", "h-8", "px-2"],
+        true: ["size-8"]
+      },
+      variant: {
+        default: [
+          "enabled:text-ddt-color-common-neutral-default",
+          "enabled:hover:text-ddt-color-common-neutral-hover",
+          "enabled:active:text-ddt-color-common-neutral-press",
+          "enabled:hover:var-color-ddt-color-common-surface-neutral-hover/color-primary",
+          "enabled:active:var-color-ddt-color-common-surface-neutral-press/color-primary"
+        ],
+        selected: [
+          "enabled:text-ddt-color-common-text-inverse",
+          "var-color-ddt-color-common-brand-default/color-primary",
+          "hover:var-color-ddt-color-common-brand-hover/color-primary",
+          "active:var-color-ddt-color-common-brand-press/color-primary"
+        ],
+        today: [
+          "enabled:text-ddt-color-common-neutral-default",
+          "enabled:hover:text-ddt-color-common-neutral-hover",
+          "enabled:active:text-ddt-color-common-neutral-press",
+          "enabled:border",
+          "enabled:border-ddt-color-common-neutral-default",
+          "enabled:hover:var-color-ddt-color-common-surface-neutral-hover/color-primary",
+          "enabled:active:var-color-ddt-color-common-surface-neutral-press/color-primary"
+        ]
+      }
+    }
+  }
+);
+function getToday() {
+  return calendarCommon.normalizeDate(/* @__PURE__ */ new Date());
+}
+function getNextFocusDateByKey(date, event) {
+  const cloned = calendarCommon.cloneDate(date);
+  const offset = {
+    ArrowUp: -7,
+    ArrowRight: 1,
+    ArrowDown: 7,
+    ArrowLeft: -1
+  }[event.key];
+  if (offset) {
+    cloned.setUTCDate(cloned.getUTCDate() + offset);
+    return cloned;
+  }
+  switch (event.key) {
+    case "Home":
+      cloned.setUTCDate(cloned.getUTCDate() - cloned.getUTCDay());
+      return cloned;
+    case "End":
+      cloned.setUTCDate(cloned.getUTCDate() + (6 - cloned.getUTCDay()));
+      return cloned;
+    case "PageUp":
+      return event.shiftKey ? calendarCommon.getDateByMonthOffsetClamped(cloned, -12) : calendarCommon.getDateByMonthOffsetClamped(cloned, -1);
+    case "PageDown":
+      return event.shiftKey ? calendarCommon.getDateByMonthOffsetClamped(cloned, 12) : calendarCommon.getDateByMonthOffsetClamped(cloned, 1);
+  }
+  return null;
+}
+exports.DaikinCalendar = class DaikinCalendar extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.value = null;
+    this.min = "1900-01-01";
+    this.max = "2099-12-31";
+    this.defaultValue = null;
+    this.view = "day";
+    this._dateToBeFocused = null;
+    this._viewDate = getToday();
+  }
+  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 ?? "");
+  }
+  /**
+   * The date that serves as the basis for the current view.
+   */
+  get viewDate() {
+    return calendarCommon.cloneDate(this._viewDate);
+  }
+  _emitSelect() {
+    this.dispatchEvent(
+      new Event("select", {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _emitSelecting() {
+    this.dispatchEvent(
+      new Event("selecting", {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _canNavigateMonth(date, offset) {
+    return !calendarCommon.isMonthOutOfRange(
+      calendarCommon.getDateByMonthOffsetClamped(date, offset),
+      this._min,
+      this._max
+    );
+  }
+  _navigateMonth(date, offset) {
+    this._viewDate = calendarCommon.getDateByMonthOffsetClamped(date, offset);
+  }
+  _handleCalendarClick(date) {
+    this.value = calendarCommon.formatDateForProperty(date);
+    this._emitSelect();
+  }
+  _handleMonthClick() {
+    this.view = this.view != "year" ? "year" : "month";
+  }
+  _handleYearAndMonthPickerClick(date) {
+    this.view = this.view === "year" ? "month" : "day";
+    this._viewDate = calendarCommon.cloneDate(date);
+    this.value = calendarCommon.formatDateForProperty(calendarCommon.clampDate(date, this._min, this._max));
+    this._emitSelecting();
+  }
+  _handleCalendarKeyDown(event) {
+    const focused = (this.shadowRoot ?? this.ownerDocument).activeElement;
+    const focusedDateValue = focused == null ? void 0 : focused.dataset.date;
+    if (!focusedDateValue) {
+      return;
+    }
+    const focusedDate = calendarCommon.parseDateFromProperty(focusedDateValue);
+    const nextFocusDate = getNextFocusDateByKey(focusedDate, event);
+    if (!nextFocusDate) {
+      return;
+    }
+    event.preventDefault();
+    const dateToBeFocused = calendarCommon.clampDate(nextFocusDate, this._min, this._max);
+    const dateButton = this.renderRoot.querySelector(
+      `[data-type=day][data-date="${calendarCommon.formatDateForProperty(dateToBeFocused)}"]`
+    );
+    if (dateButton && calendarCommon.isSameYearMonth(dateToBeFocused, focusedDate)) {
+      dateButton.focus();
+    } else {
+      this._dateToBeFocused = dateToBeFocused;
+      this._navigateMonth(
+        this._viewDate,
+        dateToBeFocused.getUTCFullYear() * 12 + dateToBeFocused.getUTCMonth() - (focusedDate.getUTCFullYear() * 12 + focusedDate.getUTCMonth())
+      );
+    }
+  }
+  _handleYearAndMonthPickerKeyDown(event) {
+    const offset = {
+      ArrowUp: -3,
+      ArrowRight: 1,
+      ArrowDown: 3,
+      ArrowLeft: -1
+    }[event.key];
+    if (!offset) {
+      return;
+    }
+    event.preventDefault();
+    const focused = (this.shadowRoot ?? this.ownerDocument).activeElement;
+    if (!focused) {
+      return;
+    }
+    const buttons = Array.from(
+      this.renderRoot.querySelectorAll(
+        `[data-type="${this.view}"]`
+      )
+    );
+    const focusedIndex = buttons.findIndex((button) => button === focused);
+    if (focusedIndex === -1) {
+      return;
+    }
+    const newIndex = (focusedIndex + offset + buttons.length) % buttons.length;
+    buttons[newIndex].focus();
+  }
+  _createYearAndMonthPickerContainer(children) {
+    return lit.html`<div class="w-full h-72">
+      <div
+        role="radiogroup"
+        class="flex justify-start items-start flex-wrap gap-[1rem_1.5rem] w-full max-h-full pt-4 px-4 pb-4 overflow-auto"
+        @keydown=${this._handleYearAndMonthPickerKeyDown}
+      >
+        ${children}
+      </div>
+    </div>`;
+  }
+  _createYearAndMonthPickerButton({
+    type,
+    disabled,
+    today,
+    selected,
+    focusable,
+    date,
+    text,
+    label
+  }) {
+    const variant = selected ? "selected" : today ? "today" : "default";
+    return lit.html`<button
+      class=${cvaContentButton({ variant, date: false })}
+      ?disabled=${disabled}
+      role="radio"
+      aria-checked=${selected}
+      aria-current=${today ? "date" : lit.nothing}
+      aria-label=${ifDefined_js.ifDefined(label)}
+      data-type=${type}
+      tabindex=${focusable ? lit.nothing : -1}
+      @click=${() => this._handleYearAndMonthPickerClick(date)}
+    >
+      ${text}
+    </button>`;
+  }
+  _createYearPicker({
+    viewDate,
+    value,
+    min,
+    max
+  }) {
+    const selectedYear = value == null ? void 0 : value.getUTCFullYear();
+    const todayYear = getToday().getUTCFullYear();
+    const focusableYear = selectedYear ?? todayYear;
+    const years = Array.from(
+      { length: max.getUTCFullYear() - min.getUTCFullYear() + 1 },
+      (_, index) => index + min.getUTCFullYear()
+    );
+    return this._createYearAndMonthPickerContainer(
+      lit.html`${repeat_js.repeat(
+        years,
+        (year) => year,
+        (year) => {
+          const date = calendarCommon.createDateClamped(
+            year,
+            viewDate.getUTCMonth(),
+            viewDate.getUTCDate()
+          );
+          return this._createYearAndMonthPickerButton({
+            type: "year",
+            disabled: false,
+            today: year === todayYear,
+            selected: year === selectedYear,
+            focusable: year === focusableYear,
+            date: calendarCommon.clampDate(date, min, max),
+            text: String(year)
+          });
+        }
+      )}`
+    );
+  }
+  _createMonthPicker({
+    viewDate,
+    value,
+    min,
+    max
+  }) {
+    const today = getToday();
+    const year = viewDate.getUTCFullYear();
+    const selectedMonth = (value == null ? void 0 : value.getUTCFullYear()) === viewDate.getUTCFullYear() ? value.getUTCMonth() : void 0;
+    const todayMonth = year === today.getUTCFullYear() ? today.getUTCMonth() : void 0;
+    const focusableMonth = selectedMonth ?? todayMonth ?? (calendarCommon.isSameYearMonth(min, viewDate) ? min.getUTCMonth() : 0);
+    return this._createYearAndMonthPickerContainer(
+      lit.html`${repeat_js.repeat(
+        MONTHS,
+        ([abbr]) => abbr,
+        ([abbr, full], month) => {
+          const date = calendarCommon.createDateClamped(
+            viewDate.getUTCFullYear(),
+            month,
+            viewDate.getUTCDate()
+          );
+          return this._createYearAndMonthPickerButton({
+            type: "month",
+            disabled: calendarCommon.isMonthOutOfRange(date, min, max),
+            today: month === todayMonth,
+            selected: month === selectedMonth,
+            focusable: month === focusableMonth,
+            date: calendarCommon.clampDate(date, min, max),
+            text: abbr,
+            label: full
+          });
+        }
+      )}`
+    );
+  }
+  _createDatePicker({
+    viewDate,
+    value,
+    min,
+    max
+  }) {
+    const today = getToday();
+    const weeks = calendarCommon.calcWeeksOnCalendar(
+      viewDate.getUTCFullYear(),
+      viewDate.getUTCMonth()
+    );
+    const focusable = value && calendarCommon.isSameYearMonth(viewDate, value) ? value : calendarCommon.isSameYearMonth(viewDate, today) ? today : calendarCommon.clampDate(viewDate, min, max);
+    return lit.html`<div class="flex flex-col gap-2 w-full h-72" role="grid">
+      <div class="flex gap-1 flex-wrap w-full px-4" role="row">
+        ${repeat_js.repeat(
+      DAYS,
+      ([abbr]) => abbr,
+      ([abbr, full]) => lit.html`<div
+              class="flex justify-center items-center size-8 text-ddt-color-common-text-secondary text-xs font-bold leading-[1.3]"
+              role="columnheader"
+              aria-label=${full}
+            >
+              ${abbr}
+            </div>`
+    )}
+      </div>
+      <div
+        class="flex flex-col gap-2 flex-wrap w-full px-4 pb-4"
+        role="rowgroup"
+        @keydown=${this._handleCalendarKeyDown}
+      >
+        ${repeat_js.repeat(
+      weeks,
+      (week) => week[0].getTime(),
+      (week) => lit.html`<div class="flex gap-1" role="row">
+              ${repeat_js.repeat(
+        week,
+        (date) => date.getTime(),
+        (date) => lit.html`<button
+                    class=${cvaContentButton({
+          variant: date.getTime() === (value == null ? void 0 : value.getTime()) ? "selected" : date.getTime() === today.getTime() ? "today" : "default",
+          date: true
+        })}
+                    role="gridcell"
+                    ?disabled=${calendarCommon.isDateOutOfRange(date, min, max)}
+                    tabindex=${ifDefined_js.ifDefined(
+          focusable.getTime() != date.getTime() ? -1 : void 0
+        )}
+                    aria-current=${date.getTime() === today.getTime() ? "date" : lit.nothing}
+                    aria-selected=${date.getTime() === (value == null ? void 0 : value.getTime())}
+                    data-type="day"
+                    data-date=${calendarCommon.formatDateForProperty(date)}
+                    @click=${() => this._handleCalendarClick(date)}
+                  >
+                    ${date.getUTCDate()}
+                  </button>`
+      )}
+            </div>`
+    )}
+      </div>
+    </div>`;
+  }
+  render() {
+    const viewDate = this._viewDate;
+    const value = this._value;
+    const view = this.view;
+    const year = viewDate.getUTCFullYear();
+    const month = viewDate.getUTCMonth();
+    const pulldownLabel = {
+      year: "Switch to month view",
+      month: "Switch to year view",
+      day: "Switch to year view"
+    }[view];
+    const renderState = {
+      viewDate,
+      value,
+      min: this._min,
+      max: this._max
+    };
+    const picker = {
+      year: this._createYearPicker,
+      month: this._createMonthPicker,
+      day: this._createDatePicker
+    }[view].call(this, renderState);
+    return lit.html`<div
+      class="flex items-stretch flex-col gap-2 w-[17.5rem] h-max pt-3 bg-ddt-color-common-background-default outline outline-1 -outline-offset-1 outline-ddt-color-divider rounded font-daikinSerif"
+    >
+      <div class="flex justify-between items-center pl-4 pr-3">
+        <div class="flex items-center gap-2">
+          <span
+            class="text-ddt-color-common-text-primary font-bold"
+            aria-live="polite"
+          >
+            ${`${MONTHS[month][1]} ${year}`}
+          </span>
+          <daikin-icon-button
+            type="button"
+            variant="ghost"
+            color="neutral"
+            button-aria-label=${pulldownLabel}
+            @click=${this._handleMonthClick}
+          >
+            <span
+              class=${calendarCommon.cvaIconButton({
+      intent: "pulldown",
+      rotate: view === "year" ? "inverse" : "default"
+    })}
+            ></span>
+          </daikin-icon-button>
+        </div>
+        ${view === "day" ? lit.html`<div class="flex gap-2">
+              <daikin-icon-button
+                type="button"
+                variant="ghost"
+                color="neutral"
+                button-aria-label="Previous month"
+                ?disabled=${!this._canNavigateMonth(viewDate, -1)}
+                @click=${() => this._navigateMonth(viewDate, -1)}
+              >
+                <span class=${calendarCommon.cvaIconButton({ intent: "previous" })}></span>
+              </daikin-icon-button>
+              <daikin-icon-button
+                type="button"
+                variant="ghost"
+                color="neutral"
+                button-aria-label="Next month"
+                ?disabled=${!this._canNavigateMonth(viewDate, 1)}
+                @click=${() => this._navigateMonth(viewDate, 1)}
+              >
+                <span class=${calendarCommon.cvaIconButton({ intent: "next" })}></span>
+              </daikin-icon-button>
+            </div>` : lit.nothing}
+      </div>
+      ${picker}
+    </div>`;
+  }
+  willUpdate(changedProperties) {
+    {
+      for (const prop of ["value", "min", "max", "defaultValue"]) {
+        if (changedProperties.has(prop)) {
+          if (this[prop] && !calendarCommon.tryParseDateFromProperty(this[prop])) {
+            console.warn(
+              `daikin-calendar: Invalid date "${this[prop]}" specified for ${prop}`
+            );
+          }
+        }
+      }
+    }
+    if (changedProperties.has("defaultValue") || changedProperties.has("value")) {
+      const base = this._value ?? this._defaultValue ?? getToday();
+      if (this._viewDate.getTime() !== base.getTime()) {
+        this._viewDate = calendarCommon.cloneDate(base);
+      }
+    }
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("_viewDate") && this._dateToBeFocused != null) {
+      const dateButton = this.renderRoot.querySelector(
+        `[data-type=day][data-date="${calendarCommon.formatDateForProperty(this._dateToBeFocused)}"]`
+      );
+      dateButton == null ? void 0 : dateButton.focus();
+      this._dateToBeFocused = null;
+    }
+    if (changedProperties.get("view") != null) {
+      const baseSelector = `[data-type="${this.view}"]`;
+      const target = this.renderRoot.querySelector(
+        `${baseSelector}[aria-checked=true], ${baseSelector}[aria-selected=true]`
+      ) ?? this.renderRoot.querySelector(
+        `${baseSelector}[aria-current]`
+      ) ?? this.renderRoot.querySelector(`${baseSelector}:enabled`);
+      if (target) {
+        if (this.view === "year" || this.view === "month") {
+          scroller.scrollIntoViewOnlyParent(target, "vertical", true);
+        }
+        target.focus();
+      }
+    }
+  }
+};
+exports.DaikinCalendar.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+      width: fit-content;
+      height: fit-content;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String, attribute: false })
+], exports.DaikinCalendar.prototype, "value", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinCalendar.prototype, "min", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinCalendar.prototype, "max", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true, attribute: "default-value" })
+], exports.DaikinCalendar.prototype, "defaultValue", 2);
+__decorateClass([
+  decorators_js.property({ type: String, attribute: false })
+], exports.DaikinCalendar.prototype, "view", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinCalendar.prototype, "_viewDate", 2);
+exports.DaikinCalendar = __decorateClass([
+  decorators_js.customElement("daikin-calendar")
+], exports.DaikinCalendar);

package/dist/cjs-dev/components/calendar/daikin-calendar.d.cts

@@ -0,0 +1,87 @@
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+/**
+ * The calendar component provides calendar elements. It has a function for selecting dates, and is also used in `daikin-date-picker`.
+ *
+ * @fires select - Fires when the date is selected.
+ * @fires selecting - Fires when the year or month is selected.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/calendar/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-calendar></daikin-calendar>
+ * ```
+ */
+export declare class DaikinCalendar extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * The current value of the input, submitted as a name/value pair with form data.
+     */
+    value: string | null;
+    /**
+     * The minimum date.
+     * example: `1900-01-01`
+     */
+    min: string;
+    /**
+     * The maximum date.
+     * example: `2099-12-31`
+     */
+    max: string;
+    /**
+     * The month that is initially displayed when the date picker is opened.
+     * If there is a `value` attribute, this is ignored.
+     */
+    defaultValue: string | null;
+    /**
+     * _Internal use._
+     *
+     * Calendar view (day, month, or year)
+     *
+     * @private
+     * Intended for use only by `daikin-date-picker`.
+     */
+    view: "year" | "month" | "day";
+    private _dateToBeFocused;
+    private get _value();
+    private get _min();
+    private get _max();
+    private get _defaultValue();
+    /**
+     * The date that serves as the basis for the current view.
+     * The year and month are used to determine the display range, and the date is used to update the value.
+     * The range of viewDate is not affected by min or max.
+     */
+    private _viewDate;
+    /**
+     * The date that serves as the basis for the current view.
+     */
+    get viewDate(): Date;
+    private _emitSelect;
+    private _emitSelecting;
+    private _canNavigateMonth;
+    private _navigateMonth;
+    private _handleCalendarClick;
+    private _handleMonthClick;
+    private _handleYearAndMonthPickerClick;
+    private _handleCalendarKeyDown;
+    private _handleYearAndMonthPickerKeyDown;
+    private _createYearAndMonthPickerContainer;
+    private _createYearAndMonthPickerButton;
+    private _createYearPicker;
+    private _createMonthPicker;
+    private _createDatePicker;
+    render(): TemplateResult<1>;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected updated(changedProperties: PropertyValues<this> & PropertyValues<{
+        _viewDate: Date;
+    }>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-calendar": DaikinCalendar;
+    }
+}

package/dist/cjs-dev/components/calendar/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinCalendar = require("./daikin-calendar.cjs");
+Object.defineProperty(exports, "DaikinCalendar", {
+  enumerable: true,
+  get: () => daikinCalendar.DaikinCalendar
+});

package/dist/cjs-dev/components/calendar/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-calendar.cjs";

package/dist/cjs-dev/components/card/daikin-card.cjs

@@ -23,7 +23,7 @@ const cvaContainer = classVarianceAuthority.cva(
     "flex-col",
     "gap-4",
     "size-full",
-    "p-4",
+    "p-3",
     "rounded-lg",
     "bg-ddt-color-common-background-default"
   ],