@daikin-oss/design-system-web-components 0.4.0 → 0.6.0

package/dist/cjs/components/dropdown/daikin-dropdown.cjs

@@ -0,0 +1,367 @@
+"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 clickOutside = require("../../controllers/click-outside.cjs");
+const floatingUiAutoUpdate = require("../../controllers/floating-ui-auto-update.cjs");
+const tailwind = require("../../tailwind.css.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 cvaButton = classVarianceAuthority.cva(
+  [
+    "flex",
+    "items-center",
+    "gap-2",
+    "w-full",
+    "h-full",
+    "min-h-12",
+    "bg-white",
+    "p-3",
+    "border",
+    "border-[--color-base]",
+    "rounded",
+    "overflow-hidden",
+    "font-daikinSerif",
+    "text-left",
+    "leading-5",
+    "relative",
+    "outline",
+    "outline-0",
+    "-outline-offset-2",
+    "focus-visible:outline-2",
+    "focus-visible:outline-[--color-focus]",
+    "disabled:text-system-state-disabled",
+    "disabled:border-system-state-disabled",
+    "after:i-daikin-dropdown-chevron-down",
+    "after:w-6",
+    "after:h-6",
+    "after:absolute",
+    "after:m-auto",
+    "after:top-0",
+    "after:bottom-0",
+    "after:right-3",
+    "enabled:after:text-system-element-text-primary",
+    "disabled:after:text-system-state-disabled"
+  ],
+  {
+    variants: {
+      open: {
+        false: [
+          "enabled:hover:bg-system-background-surface-hover",
+          "enabled:active:bg-system-background-surface-press"
+        ],
+        true: ["enabled:bg-system-background-surface-press"]
+      },
+      error: {
+        false: [
+          "var-color-system-state-neutral-active/color-base",
+          "var-color-system-state-focus/color-focus"
+        ],
+        true: [
+          "var-color-system-state-error-active/color-base",
+          "var-color-system-state-error-active/color-focus"
+        ]
+      },
+      placeholder: {
+        false: ["text-system-element-text-primary"],
+        true: ["text-system-element-text-secondary"]
+      }
+    }
+  }
+);
+const floatingPositionOptions = {
+  placement: "bottom",
+  middleware: [
+    dom.flip({ fallbackStrategy: "initialPlacement" }),
+    dom.offset({ mainAxis: 0 }),
+    dom.size({
+      apply({ rects, elements }) {
+        elements.floating.style.setProperty(
+          "--floating-width",
+          `${rects.reference.width}px`
+        );
+      }
+    })
+  ]
+};
+exports.DaikinDropdown = class DaikinDropdown extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this._internals = this.attachInternals();
+    this.value = null;
+    this.placeholder = "";
+    this.disabled = false;
+    this.required = false;
+    this.error = false;
+    this.open = false;
+    this._label = null;
+    this._hasSelectedItem = false;
+    this._selectedItemLabel = "";
+    this._autoUpdateController = new floatingUiAutoUpdate.FloatingUIAutoUpdateController(this);
+    this._clickOutsideController = new clickOutside.ClickOutsideController(
+      this,
+      this._onClickOutside
+    );
+    this._lastFocusedItem = null;
+  }
+  _updateFormValue() {
+    this._internals.setFormValue(this.value);
+  }
+  _onClickOutside() {
+    this.open = false;
+  }
+  _reflectItemsAndLabel() {
+    const items = this._items;
+    const selectedItem = items.find((item) => item.value === this.value);
+    for (const item of items) {
+      item.selected = item === selectedItem;
+    }
+    this._hasSelectedItem = !!selectedItem;
+    this._selectedItemLabel = (selectedItem == null ? void 0 : selectedItem.textContent) ?? "";
+  }
+  _handleClick() {
+    if (this.disabled) {
+      return;
+    }
+    this.open = !this.open;
+  }
+  _searchItem(prefix) {
+    const items = this._items.filter(
+      (item) => {
+        var _a;
+        return !item.disabled && ((_a = item.textContent) == null ? void 0 : _a.toLowerCase().startsWith(prefix.toLowerCase()));
+      }
+    );
+    if (!items.length) {
+      this.open = true;
+      return;
+    }
+    const activeElement = document.activeElement;
+    const focusedItemIndex = activeElement ? items.findIndex((item) => item.contains(activeElement)) : -1;
+    const nextItem = items[(focusedItemIndex + 1) % items.length];
+    if (this.open) {
+      nextItem.focus();
+    } else {
+      this._lastFocusedItem = nextItem;
+      this.open = true;
+    }
+  }
+  _handleKeyDownEscape() {
+    if (this.open) {
+      this.open = false;
+    } else {
+      this.value = null;
+    }
+  }
+  _moveFocus(moveOffset) {
+    if (!this.open) {
+      this.open = true;
+      return;
+    }
+    const items = this._items;
+    const activeElement = document.activeElement;
+    const focusedItemIndex = activeElement ? items.findIndex((item) => item.contains(activeElement)) : -1;
+    if (focusedItemIndex === -1) {
+      moveOffset = 1;
+    }
+    for (let index = focusedItemIndex + moveOffset, i = 0; i < items.length; index += moveOffset, i++) {
+      index = (index + items.length) % items.length;
+      const item = items[index];
+      if (item.disabled) {
+        continue;
+      }
+      item.focus();
+      break;
+    }
+  }
+  _handleKeyDown(event) {
+    const printableCharacter = event.key.trim().length === 1 ? event.key : null;
+    if (printableCharacter) {
+      event.preventDefault();
+      this._searchItem(printableCharacter);
+      return;
+    }
+    const operation = {
+      ArrowDown: "down",
+      ArrowUp: "up",
+      Escape: "close"
+    }[event.key];
+    switch (operation) {
+      case "down":
+      case "up":
+        event.preventDefault();
+        this._moveFocus(operation === "up" ? -1 : 1);
+        break;
+      case "close":
+        event.preventDefault();
+        this._handleKeyDownEscape();
+        break;
+    }
+  }
+  /**
+   * Handle `select` event from `daikin-dropdown-item`.
+   */
+  _handleSelect(event) {
+    const target = event.target;
+    if (!target || !this._items.includes(target)) {
+      return;
+    }
+    this._hasSelectedItem = true;
+    this._selectedItemLabel = target.textContent ?? "";
+    this.value = target.value;
+    this.open = false;
+    this.dispatchEvent(new Event("change"));
+  }
+  /**
+   * Handle `focusin` event to remember last focused item.
+   */
+  _handleFocusIn(event) {
+    const target = event.target;
+    if (!target || !this._items.includes(target)) {
+      return;
+    }
+    this._lastFocusedItem = target;
+  }
+  /**
+   * 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.
+   * Since the focus cannot be moved until the element is displayed on the screen, the focus is moved to the item after receiving the completion of the Floating UI position calculation here.
+   */
+  _handleFloatingReady() {
+    const items = this._items;
+    const item = items.find((item2) => item2 === this._lastFocusedItem) ?? items.find((item2) => item2.value === this.value) ?? items.at(0);
+    item == null ? void 0 : item.focus();
+  }
+  render() {
+    return lit.html`<div class="w-full relative" @keydown=${this._handleKeyDown}>
+      <button
+        type="button"
+        class=${cvaButton({
+      open: this.open,
+      error: this.error,
+      placeholder: !this._hasSelectedItem
+    })}
+        ?disabled=${this.disabled}
+        role="combobox"
+        aria-label=${ifDefined_js.ifDefined(this._label ?? void 0)}
+        aria-expanded=${this.open && !this.disabled}
+        aria-disabled=${this.disabled}
+        aria-controls="dropdown-items"
+        aria-autocomplete="list"
+        aria-required=${this.required}
+        @click=${this._handleClick}
+        ${this._autoUpdateController.refReference()}
+      >
+        ${this._hasSelectedItem ? this._selectedItemLabel : this.placeholder}
+      </button>
+      <div
+        id="dropdown-items"
+        popover
+        class="floating-unready:hidden absolute left-[--floating-x,0] top-[--floating-y,0] min-w-[--floating-width] max-h-[12.5rem] overflow-y-auto opacity-1 transition-[opacity] rounded shadow-dropdown"
+        aria-label=${ifDefined_js.ifDefined(this._label ?? void 0)}
+        role="listbox"
+        @floating-ready=${this._handleFloatingReady}
+        ${this._autoUpdateController.refFloating()}
+      >
+        <slot
+          @select=${this._handleSelect}
+          @focusin=${this._handleFocusIn}
+        ></slot>
+      </div>
+      ${// Activate auto update only when the dropdown is open.
+    // TODO(DDS-1226): refactor here with CSS Anchor Positioning instead of using floating-ui
+    this._autoUpdateController.directive(
+      floatingPositionOptions,
+      this.open && !this.disabled
+    )}
+      ${// Listen to click outside only when the dropdown is open.
+    this._clickOutsideController.directive(this.open && !this.disabled)}
+    </div>`;
+  }
+  focus(options) {
+    var _a;
+    (_a = this._button) == null ? void 0 : _a.focus(options);
+  }
+  updated(changedProperties) {
+    var _a;
+    if (changedProperties.has("value")) {
+      this._updateFormValue();
+      this._reflectItemsAndLabel();
+    }
+    if (changedProperties.has("open") || changedProperties.has("disabled")) {
+      (_a = this._autoUpdateController.floatingElement) == null ? void 0 : _a.togglePopover(
+        this.open && !this.disabled
+      );
+      if (changedProperties.get("open") && !this.open && !this.disabled) {
+        this.focus();
+      }
+    }
+  }
+  reflectInputGroup(inputGroup) {
+    const isError = !inputGroup.disabled && !!inputGroup.error;
+    this.disabled = !!inputGroup.disabled;
+    this.required = !!inputGroup.required;
+    this.error = isError;
+    this._label = inputGroup.label;
+  }
+};
+exports.DaikinDropdown.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    ::slotted {
+      width: 100%;
+    }
+  `;
+exports.DaikinDropdown.formAssociated = true;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinDropdown.prototype, "value", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinDropdown.prototype, "placeholder", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinDropdown.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinDropdown.prototype, "required", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinDropdown.prototype, "error", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinDropdown.prototype, "open", 2);
+__decorateClass([
+  decorators_js.queryAssignedElements({ selector: "daikin-dropdown-item" })
+], exports.DaikinDropdown.prototype, "_items", 2);
+__decorateClass([
+  decorators_js.query("button")
+], exports.DaikinDropdown.prototype, "_button", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinDropdown.prototype, "_label", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinDropdown.prototype, "_hasSelectedItem", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinDropdown.prototype, "_selectedItemLabel", 2);
+exports.DaikinDropdown = __decorateClass([
+  decorators_js.customElement("daikin-dropdown")
+], exports.DaikinDropdown);

package/dist/cjs/components/dropdown/daikin-dropdown.d.cts

@@ -0,0 +1,100 @@
+import { LitElement, PropertyValues } from 'lit';
+import { DaikinInputGroup } from "../input-group/index.cjs";
+/**
+ * A dropdown list component.
+ *
+ * Hierarchy:
+ * - `daikin-dropdown` > `daikin-dropdown-item`
+ * - `daikin-input-group` > `daikin-dropdown` > `daikin-dropdown-item`
+ *
+ * @fires change - A custom event emitted when a user selects a dropdown item.
+ *
+ * @slot - Dropdown item list slot. Place `daikin-dropdown-item` elements here.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-dropdown label="Dropdown label">
+ *   <daikin-dropdown-item value="value1">Dropdown item 1</daikin-dropdown-item>
+ *   <daikin-dropdown-item value="value2">Dropdown item 2</daikin-dropdown-item>
+ *   <daikin-dropdown-item value="value3" disabled>Dropdown item 3</daikin-dropdown-item>
+ * </daikin-dropdown>
+ * ```
+ */
+export declare class DaikinDropdown extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    static readonly formAssociated = true;
+    private _internals;
+    /**
+     * Form value of the dropdown.
+     * `null` if not selected.
+     */
+    value: string | null;
+    /**
+     * Placeholder text of the dropdown.
+     */
+    placeholder: string;
+    /**
+     * Whether the dropdown is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether the dropdown is required.
+     */
+    required: boolean;
+    /**
+     * Whether the dropdown is in an error state.
+     */
+    error: boolean;
+    /**
+     * Whether the dropdown menu is opened.
+     */
+    open: boolean;
+    private readonly _items;
+    private _button;
+    /**
+     * The label text used as the value of aria-label.
+     * Set automatically by `reflectInputGroup` method.
+     */
+    private _label;
+    private _hasSelectedItem;
+    private _selectedItemLabel;
+    private _autoUpdateController;
+    private _clickOutsideController;
+    /**
+     * Last focused dropdown item.
+     * The next time the dropdown opens, the focus will be moved to this element.
+     */
+    private _lastFocusedItem;
+    private _updateFormValue;
+    private _onClickOutside;
+    private _reflectItemsAndLabel;
+    private _handleClick;
+    private _searchItem;
+    private _handleKeyDownEscape;
+    private _moveFocus;
+    private _handleKeyDown;
+    /**
+     * Handle `select` event from `daikin-dropdown-item`.
+     */
+    private _handleSelect;
+    /**
+     * Handle `focusin` event to remember last focused item.
+     */
+    private _handleFocusIn;
+    /**
+     * 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.
+     * Since the focus cannot be moved until the element is displayed on the screen, the focus is moved to the item after receiving the completion of the Floating UI position calculation here.
+     */
+    private _handleFloatingReady;
+    render(): import('lit-html').TemplateResult<1>;
+    focus(options?: FocusOptions): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    reflectInputGroup(inputGroup: DaikinInputGroup): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-dropdown": DaikinDropdown;
+    }
+}

package/dist/cjs/components/dropdown/index.cjs

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

package/dist/cjs/components/dropdown/index.d.cts

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

package/dist/cjs/components/dropdown-item/daikin-dropdown-item.cjs

@@ -0,0 +1,112 @@
+"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 tailwind = require("../../tailwind.css.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 cvaOption = classVarianceAuthority.cva(
+  [
+    "flex",
+    "items-center",
+    "justify-between",
+    "w-full",
+    "min-h-12",
+    "text-system-element-text-primary",
+    "bg-system-element-text-inverse",
+    "p-3",
+    "font-daikinSerif",
+    "leading-5",
+    "text-left",
+    "focus-visible:outline",
+    "focus-visible:outline-2",
+    "focus-visible:-outline-offset-2",
+    "focus-visible:outline-system-state-focus",
+    "disabled:text-system-state-disabled"
+  ],
+  {
+    variants: {
+      selected: {
+        false: [
+          "enabled:hover:bg-system-background-surface-hover",
+          "enabled:active:bg-system-background-surface-press"
+        ],
+        true: [
+          "enabled:bg-system-background-surface-selected",
+          "enabled:hover:bg-system-background-surface-selectedHover",
+          "enabled:active:bg-system-background-surface-selectedActive",
+          "after:i-daikin-dropdown-check",
+          "after:size-6"
+        ]
+      }
+    }
+  }
+);
+exports.DaikinDropdownItem = class DaikinDropdownItem extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.disabled = false;
+    this.selected = false;
+  }
+  _handleClick() {
+    if (this.disabled) {
+      return;
+    }
+    this.dispatchEvent(
+      new Event("select", {
+        bubbles: true
+      })
+    );
+  }
+  render() {
+    return lit.html`<button
+      type="button"
+      class=${cvaOption({ selected: this.selected })}
+      data-value=${this.value}
+      role="option"
+      aria-selected=${this.selected}
+      tabindex="-1"
+      ?disabled=${this.disabled}
+      @click=${this._handleClick}
+    >
+      <slot></slot>
+    </button>`;
+  }
+  focus(options) {
+    var _a;
+    (_a = this._button) == null ? void 0 : _a.focus(options);
+  }
+};
+exports.DaikinDropdownItem.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinDropdownItem.prototype, "value", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinDropdownItem.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinDropdownItem.prototype, "selected", 2);
+__decorateClass([
+  decorators_js.query("button")
+], exports.DaikinDropdownItem.prototype, "_button", 2);
+exports.DaikinDropdownItem = __decorateClass([
+  decorators_js.customElement("daikin-dropdown-item")
+], exports.DaikinDropdownItem);

package/dist/cjs/components/dropdown-item/daikin-dropdown-item.d.cts

@@ -0,0 +1,42 @@
+import { LitElement } from 'lit';
+/**
+ * The dropdown item (option) component that can be used within `daikin-dropdown` component.
+ *
+ * Hierarchy:
+ * - `daikin-dropdown` > `daikin-dropdown-item`
+ *
+ * @fires select - A custom event emitted when a user clicks the item. For internal use (`daikin-dropdown`).
+ *
+ * @slot - A slot for the item content.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-dropdown-item value="value">Dropdown item</daikin-dropdown-item>
+ * ```
+ */
+export declare class DaikinDropdownItem extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Form value of the dropdown item.
+     */
+    value: string;
+    /**
+     * Whether the dropdown item is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the dropdown item is selected.
+     * Set automatically by `daikin-dropdown` component.
+     */
+    selected: boolean;
+    private _button;
+    private _handleClick;
+    render(): import('lit-html').TemplateResult<1>;
+    focus(options?: FocusOptions): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-dropdown-item": DaikinDropdownItem;
+    }
+}

package/dist/cjs/components/dropdown-item/index.cjs

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

package/dist/cjs/components/dropdown-item/index.d.cts

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