@daikin-oss/design-system-web-components 0.7.0 → 1.1.0

package/dist/es/components/dropdown/daikin-dropdown.js

@@ -1,11 +1,16 @@
 import { flip, offset, size } from "@floating-ui/dom";
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, queryAssignedElements, query, state, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html } from "lit";
+import { property, queryAssignedElements, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import { ClickOutsideController } from "../../controllers/click-outside.js";
 import { FloatingUIAutoUpdateController } from "../../controllers/floating-ui-auto-update.js";
 import tailwindStyles from "../../tailwind.css.js";
+import { isSimpleKeyEvent } from "../../utils/is-simple-key.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -19,36 +24,34 @@ var __decorateClass = (decorators, target, key, kind) => {
 const cvaButton = cva(
   [
     "flex",
+    "justify-between",
     "items-center",
     "gap-2",
     "w-full",
     "h-full",
     "min-h-12",
     "bg-ddt-color-common-background-default",
-    "p-3",
-    "border",
-    "border-[--color-base]",
+    "py-3",
+    "pl-4",
+    "pr-3",
     "rounded",
     "overflow-hidden",
     "font-daikinSerif",
     "text-left",
-    "leading-5",
+    "leading-[130%]",
     "relative",
     "outline",
-    "outline-0",
-    "-outline-offset-2",
+    "outline-1",
+    "-outline-offset-1",
     "focus-visible:outline-2",
-    "focus-visible:outline-[--color-focus]",
+    "focus-visible:-outline-offset-2",
+    "enabled:outline-[--color-base]",
     "disabled:text-ddt-color-common-disabled",
-    "disabled:border-ddt-color-common-disabled",
+    "disabled:outline-ddt-color-common-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",
+    "after:size-6",
+    "after:flex-none",
+    "after:ml-auto",
     "enabled:after:text-ddt-color-common-text-primary",
     "disabled:after:text-ddt-color-common-disabled"
   ],
@@ -59,17 +62,19 @@ const cvaButton = cva(
           "enabled:hover:bg-ddt-color-common-surface-hover",
           "enabled:active:bg-ddt-color-common-surface-press"
         ],
-        true: ["enabled:bg-ddt-color-common-surface-press"]
+        true: [
+          "enabled:bg-ddt-color-common-surface-press",
+          "after:scale-y-[-1]"
+        ]
       },
       error: {
         false: [
           "var-color-ddt-color-common-neutral-default/color-base",
-          "var-color-ddt-color-common-border-focus/color-focus"
+          "hover:var-color-ddt-color-common-neutral-hover/color-base",
+          "active:var-color-ddt-color-common-neutral-press/color-base",
+          "focus-visible:var-color-ddt-color-common-border-focus/color-base"
         ],
-        true: [
-          "var-color-ddt-color-common-danger-default/color-base",
-          "var-color-ddt-color-common-danger-default/color-focus"
-        ]
+        true: ["var-color-ddt-color-common-danger-default/color-base"]
       },
       placeholder: {
         false: ["text-ddt-color-common-text-primary"],
@@ -93,7 +98,7 @@ const floatingPositionOptions = {
     })
   ]
 };
-let DaikinDropdown = class extends LitElement {
+let DaikinDropdown = class extends DDSElement {
   constructor() {
     super(...arguments);
     this._internals = this.attachInternals();
@@ -103,37 +108,31 @@ let DaikinDropdown = class extends LitElement {
     this.required = false;
     this.error = false;
     this.open = false;
+    this.multiple = false;
+    this.selectedOptions = [];
+    this.maxLabels = null;
     this._label = null;
-    this._hasSelectedItem = false;
-    this._selectedItemLabel = "";
+    this._initialUpdateCompleted = false;
     this._autoUpdateController = new FloatingUIAutoUpdateController(this);
     this._clickOutsideController = new ClickOutsideController(
       this,
       this._onClickOutside
     );
     this._lastFocusedItem = null;
+    this._dropdownRef = createRef();
   }
-  _updateFormValue() {
-    this._internals.setFormValue(this.value);
+  get _selectionLabels() {
+    const items = this._items;
+    return this.selectedOptions.map(
+      (value) => {
+        var _a;
+        return ((_a = items.find((item) => item.value === value)) == null ? void 0 : _a.textContent) ?? "";
+      }
+    );
   }
   _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) => {
@@ -155,13 +154,6 @@ let DaikinDropdown = class extends LitElement {
       this.open = true;
     }
   }
-  _handleKeyDownEscape() {
-    if (this.open) {
-      this.open = false;
-    } else {
-      this.value = null;
-    }
-  }
   _moveFocus(moveOffset) {
     if (!this.open) {
       this.open = true;
@@ -183,7 +175,56 @@ let DaikinDropdown = class extends LitElement {
       break;
     }
   }
+  _updateFormValue() {
+    this._internals.setFormValue(JSON.stringify(this.value));
+  }
+  _updateItemsSelectable() {
+    for (const item of this._items) {
+      item.selectable = this.multiple;
+    }
+  }
+  _updateValueBySelectedOptions() {
+    this.value = this.selectedOptions.at(-1) ?? null;
+  }
+  _updateSelectedOptionsByValue() {
+    this.selectedOptions = this.value ? [this.value] : [];
+  }
+  /**
+   * Handling for when an option is selected.
+   * If multiple selection is enabled, the specified option is added to or removed from the array of selected options.
+   * If multiple selection is disabled, the current value is set to the specified option. The selection is not cleared.
+   *
+   * @param value The value of selected option.
+   */
+  _handleSelectOption(value) {
+    this.value = value;
+    this.selectedOptions = this.multiple ? this.selectedOptions.includes(value) ? this.selectedOptions.filter((option) => option != value) : [...this.selectedOptions, value] : [value];
+  }
+  /**
+   * Removes the last selected option.
+   *
+   * If multiple selection is enabled, remove the last selected option and the array will eventually become empty.
+   * If multiple selection is disabled, directly empty the selected options.
+   */
+  _removeLastSelection() {
+    if (this.multiple) {
+      this.selectedOptions = this.selectedOptions.slice(0, -1);
+      this.value = this.selectedOptions.at(-1) ?? null;
+    } else {
+      this.selectedOptions = [];
+      this.value = null;
+    }
+  }
+  _handleClick() {
+    if (this.disabled) {
+      return;
+    }
+    this.open = !this.open;
+  }
   _handleKeyDown(event) {
+    if (!isSimpleKeyEvent(event)) {
+      return;
+    }
     const printableCharacter = event.key.trim().length === 1 ? event.key : null;
     if (printableCharacter) {
       event.preventDefault();
@@ -207,19 +248,12 @@ let DaikinDropdown = class extends LitElement {
         break;
     }
   }
-  /**
-   * Handle `select` event from `daikin-dropdown-item`.
-   */
-  _handleSelect(event) {
-    const target = event.target;
-    if (!target || !this._items.includes(target)) {
-      return;
+  _handleKeyDownEscape() {
+    if (this.open) {
+      this.open = false;
+    } else {
+      this._removeLastSelection();
     }
-    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.
@@ -241,14 +275,28 @@ let DaikinDropdown = class extends LitElement {
     const item = items.find((item2) => item2 === this._lastFocusedItem) ?? items.find((item2) => item2.value === this.value) ?? items.at(0);
     item == null ? void 0 : item.focus();
   }
+  /**
+   * Handle `select` event from `daikin-dropdown-item`.
+   */
+  _handleSelect(event) {
+    this._handleSelectOption(event.target.value);
+    if (!this.multiple) {
+      this.open = false;
+    }
+    this.dispatchEvent(new Event("change"));
+  }
+  _handleSlotChange() {
+    this._updateItemsSelectable();
+  }
   render() {
     return html`<div class="w-full relative" @keydown=${this._handleKeyDown}>
       <button
+        ${ref(this._dropdownRef)}
         type="button"
         class=${cvaButton({
       open: this.open,
       error: this.error,
-      placeholder: !this._hasSelectedItem
+      placeholder: !this.selectedOptions.length
     })}
         ?disabled=${this.disabled}
         role="combobox"
@@ -261,18 +309,19 @@ let DaikinDropdown = class extends LitElement {
         @click=${this._handleClick}
         ${this._autoUpdateController.refReference()}
       >
-        ${this._hasSelectedItem ? this._selectedItemLabel : this.placeholder}
+        ${this.selectedOptions.length ? this.multiple && this.selectedOptions.length > (this.maxLabels ?? 0) ? `${this.selectedOptions.length} items selected` : this._selectionLabels.join(", ") : 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"
+        class="floating-unready:hidden absolute left-[--floating-x,0] top-[--floating-y,0] min-w-[--floating-width] max-h-[12.5rem] border border-ddt-color-divider overflow-y-auto opacity-1 transition-[opacity] rounded"
         aria-label=${ifDefined(this._label ?? void 0)}
         role="listbox"
         @floating-ready=${this._handleFloatingReady}
         ${this._autoUpdateController.refFloating()}
       >
         <slot
+          @slotchange=${this._handleSlotChange}
           @select=${this._handleSelect}
           @focusin=${this._handleFocusIn}
         ></slot>
@@ -287,15 +336,37 @@ let DaikinDropdown = class extends LitElement {
     this._clickOutsideController.directive(this.open && !this.disabled)}
     </div>`;
   }
+  /**
+   * Focuses on the inner button.
+   * @param options focus options
+   */
   focus(options) {
     var _a;
     (_a = this._button) == null ? void 0 : _a.focus(options);
   }
+  willUpdate(changedProperties) {
+    if (!this._initialUpdateCompleted) {
+      if (!!this.selectedOptions.length && (!this.value || !this.selectedOptions.includes(this.value))) {
+        this._updateValueBySelectedOptions();
+      } else if (!!this.value && !this.selectedOptions.length) {
+        this.selectedOptions = [this.value];
+      }
+      this._initialUpdateCompleted = true;
+      return;
+    }
+    const hasChangedValue = changedProperties.has("value");
+    const hasChangedSelectedOptions = changedProperties.has("selectedOptions");
+    if (hasChangedValue && !hasChangedSelectedOptions) {
+      this._updateSelectedOptionsByValue();
+    }
+    if (!hasChangedValue && hasChangedSelectedOptions) {
+      this._updateValueBySelectedOptions();
+    }
+  }
   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(
@@ -305,7 +376,20 @@ let DaikinDropdown = class extends LitElement {
         this.focus();
       }
     }
+    if (changedProperties.has("selectedOptions")) {
+      const items = this._items;
+      for (const item of items) {
+        item.selected = this.selectedOptions.includes(item.value);
+      }
+    }
+    if (changedProperties.has("multiple")) {
+      this._updateItemsSelectable();
+    }
   }
+  /**
+   * 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;
@@ -345,6 +429,15 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinDropdown.prototype, "open", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinDropdown.prototype, "multiple", 2);
+__decorateClass([
+  property({ type: Array, attribute: false })
+], DaikinDropdown.prototype, "selectedOptions", 2);
+__decorateClass([
+  property({ type: Number, reflect: true, attribute: "max-labels" })
+], DaikinDropdown.prototype, "maxLabels", 2);
 __decorateClass([
   queryAssignedElements({ selector: "daikin-dropdown-item" })
 ], DaikinDropdown.prototype, "_items", 2);
@@ -354,14 +447,8 @@ __decorateClass([
 __decorateClass([
   state()
 ], DaikinDropdown.prototype, "_label", 2);
-__decorateClass([
-  state()
-], DaikinDropdown.prototype, "_hasSelectedItem", 2);
-__decorateClass([
-  state()
-], DaikinDropdown.prototype, "_selectedItemLabel", 2);
 DaikinDropdown = __decorateClass([
-  customElement("daikin-dropdown")
+  ddsElement("daikin-dropdown")
 ], DaikinDropdown);
 export {
   DaikinDropdown

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.js";
 /**
  * The dropdown item (option) component that can be used within `daikin-dropdown` component.
  *
@@ -11,11 +11,15 @@ import { LitElement } from 'lit';
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/dropdown-item/index.js";
+ * ```
+ *
  * ```html
  * <daikin-dropdown-item value="value">Dropdown item</daikin-dropdown-item>
  * ```
  */
-export declare class DaikinDropdownItem extends LitElement {
+export declare class DaikinDropdownItem extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Form value of the dropdown item.
@@ -30,9 +34,18 @@ export declare class DaikinDropdownItem extends LitElement {
      * Set automatically by `daikin-dropdown` component.
      */
     selected: boolean;
-    private _button;
+    selectable: boolean;
+    private _focusableElement;
     private _handleClick;
+    private _handleChange;
+    private _handleKeydown;
+    private _handleMousedown;
+    private _emitSelect;
     render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the inner button.
+     * @param options focus options
+     */
     focus(options?: FocusOptions): void;
 }
 declare global {

package/dist/es/components/dropdown-item/daikin-dropdown-item.js

@@ -1,7 +1,12 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, query, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html } from "lit";
+import { property, query } from "lit/decorators.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
+import { isSimilarToClick } from "../../utils/is-similar-to-click.js";
+import "../checkbox/daikin-checkbox.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -16,73 +21,133 @@ const cvaOption = cva(
   [
     "flex",
     "items-center",
-    "justify-between",
-    "w-full",
+    "gap-1",
+    "size-full",
     "min-h-12",
-    "text-ddt-color-common-text-primary",
-    "bg-ddt-color-common-background-default",
-    "p-3",
     "font-daikinSerif",
-    "leading-5",
+    "leading-[130%]",
     "text-left",
+    "relative",
     "focus-visible:outline",
     "focus-visible:outline-2",
     "focus-visible:-outline-offset-2",
-    "focus-visible:outline-ddt-color-common-border-focus",
-    "disabled:text-ddt-color-common-disabled"
+    "focus-visible:outline-ddt-color-common-border-focus"
   ],
   {
     variants: {
       selected: {
         false: [
-          "enabled:hover:bg-ddt-color-common-surface-hover",
-          "enabled:active:bg-ddt-color-common-surface-press"
+          "var-color-ddt-color-common-background-default/color-primary",
+          "hover:var-color-ddt-color-common-surface-hover/color-primary",
+          "active:var-color-ddt-color-common-surface-press/color-primary"
         ],
         true: [
-          "enabled:bg-ddt-color-common-surface-selected-default",
-          "enabled:hover:bg-ddt-color-common-surface-selected-hover",
-          "enabled:active:bg-ddt-color-common-surface-selected-press",
+          "var-color-ddt-color-common-surface-selected-default/color-primary",
+          "hover:var-color-ddt-color-common-surface-selected-hover/color-primary",
+          "active:var-color-ddt-color-common-surface-selected-press/color-primary",
           "after:i-daikin-dropdown-check",
-          "after:size-6"
+          "after:size-6",
+          "after:flex-none"
         ]
+      },
+      disabled: {
+        false: [
+          "text-ddt-color-common-text-primary",
+          "bg-[--color-primary]",
+          "cursor-pointer"
+        ],
+        true: [
+          "text-ddt-color-common-disabled",
+          "bg-ddt-color-common-background-default"
+        ]
+      },
+      multiple: {
+        false: ["justify-between", "p-3"],
+        true: ["after:hidden"]
       }
     }
   }
 );
-let DaikinDropdownItem = class extends LitElement {
+let DaikinDropdownItem = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.value = "";
     this.disabled = false;
     this.selected = false;
+    this.selectable = false;
   }
-  _handleClick() {
-    if (this.disabled) {
+  _handleClick(event) {
+    if (this.disabled || event.target.tagName === "DAIKIN-CHECKBOX") {
       return;
     }
-    this.dispatchEvent(
-      new Event("select", {
-        bubbles: true
-      })
-    );
+    this._emitSelect();
+    event.preventDefault();
+  }
+  _handleChange(event) {
+    this._emitSelect();
+    event.preventDefault();
+  }
+  _handleKeydown(event) {
+    if (!isSimilarToClick(event.key) || this.disabled) {
+      return;
+    }
+    this._emitSelect();
+    event.preventDefault();
+  }
+  _handleMousedown(event) {
+    if (event.detail === 2) {
+      event.preventDefault();
+    }
+  }
+  _emitSelect() {
+    this.dispatchEvent(new Event("select", { bubbles: true }));
   }
   render() {
-    return 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>`;
+    const optionClassName = cvaOption({
+      selected: this.selected,
+      disabled: this.disabled,
+      multiple: this.selectable
+    });
+    return this.selectable ? html`<span
+          class=${optionClassName}
+          data-value=${this.value}
+          role="option"
+          aria-selected=${this.selected}
+          tabindex="-1"
+          aria-disabled=${this.disabled}
+          @click=${this._handleClick}
+          @keydown=${this._handleKeydown}
+          @mousedown=${this._handleMousedown}
+        >
+          <daikin-checkbox
+            class="size-full part-[label]:p-2 part-[label]:cursor-pointer"
+            check-state=${this.selected ? "checked" : "unchecked"}
+            tabindex="-1"
+            ?disabled=${this.disabled}
+            @change=${this._handleChange}
+          >
+            <slot></slot>
+          </daikin-checkbox>
+        </span>` : html`<button
+          type="button"
+          class=${optionClassName}
+          data-value=${this.value}
+          role="option"
+          aria-selected=${this.selected}
+          tabindex="-1"
+          ?disabled=${this.disabled}
+          @click=${this._handleClick}
+        >
+          <slot></slot>
+        </button>`;
   }
+  /**
+   * Focuses on the inner button.
+   * @param options focus options
+   */
   focus(options) {
     var _a;
-    (_a = this._button) == null ? void 0 : _a.focus(options);
+    (_a = this._focusableElement) == null ? void 0 : _a.focus(options);
   }
 };
 DaikinDropdownItem.styles = css`
@@ -103,10 +168,13 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinDropdownItem.prototype, "selected", 2);
 __decorateClass([
-  query("button")
-], DaikinDropdownItem.prototype, "_button", 2);
+  property({ type: Boolean, reflect: true })
+], DaikinDropdownItem.prototype, "selectable", 2);
+__decorateClass([
+  query("button,span[role=option]")
+], DaikinDropdownItem.prototype, "_focusableElement", 2);
 DaikinDropdownItem = __decorateClass([
-  customElement("daikin-dropdown-item")
+  ddsElement("daikin-dropdown-item")
 ], DaikinDropdownItem);
 export {
   DaikinDropdownItem

package/dist/es/components/icon/daikin-icon.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.js";
 import { MergeVariantProps } from "../../type-utils.js";
 import { icons } from "./icons.json.js";
 export declare const iconList: string[];
@@ -29,7 +29,7 @@ export type IconVariantProps = MergeVariantProps<typeof cvaIcon>;
  * <daikin-icon icon="information" color="black" size="m"></daikin-icon>
  * ```
  */
-export declare class DaikinIcon extends LitElement {
+export declare class DaikinIcon extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Specify the name of the icon

package/dist/es/components/icon/daikin-icon.js

@@ -1,6 +1,9 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html } from "lit";
+import { property } from "lit/decorators.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
 import { icons } from "./icons.json.js";
 var __defProp = Object.defineProperty;
@@ -29,7 +32,7 @@ const cvaIcon = cva(["block"], {
     }
   }
 });
-let DaikinIcon = class extends LitElement {
+let DaikinIcon = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.icon = null;
@@ -84,7 +87,7 @@ __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinIcon.prototype, "size", 2);
 DaikinIcon = __decorateClass([
-  customElement("daikin-icon")
+  ddsElement("daikin-icon")
 ], DaikinIcon);
 export {
   DaikinIcon,