@daikin-oss/design-system-web-components 0.3.2 → 0.5.0

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

@@ -0,0 +1,368 @@
+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 { ClickOutsideController } from "../../controllers/click-outside.js";
+import { FloatingUIAutoUpdateController } from "../../controllers/floating-ui-auto-update.js";
+import tailwindStyles from "../../tailwind.css.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 cvaButton = cva(
+  [
+    "flex",
+    "items-center",
+    "gap-2",
+    "w-full",
+    "h-full",
+    "min-h-12",
+    "bg-white",
+    "p-3",
+    "border",
+    "border-[--color-base]",
+    "rounded-md",
+    "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: [
+    flip({ fallbackStrategy: "initialPlacement" }),
+    offset({ mainAxis: 0 }),
+    size({
+      apply({ rects, elements }) {
+        elements.floating.style.setProperty(
+          "--floating-width",
+          `${rects.reference.width}px`
+        );
+      }
+    })
+  ]
+};
+let DaikinDropdown = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this._internals = this.attachInternals();
+    this.label = null;
+    this.value = null;
+    this.placeholder = "";
+    this.disabled = false;
+    this.required = false;
+    this.error = false;
+    this.open = false;
+    this._hasSelectedItem = false;
+    this._selectedItemLabel = "";
+    this._autoUpdateController = new FloatingUIAutoUpdateController(this);
+    this._clickOutsideController = new 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 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=${this.label ?? ""}
+        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 min-w-[--floating-width] max-h-[200px] overflow-y-auto m-0 p-0 absolute left-[--floating-x,0] top-[--floating-y,0] right-auto bottom-auto opacity-1 transition-[opacity] rounded-[4px] shadow-dropdown"
+        aria-label=${this.label ?? ""}
+        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._popover) == 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;
+  }
+};
+DaikinDropdown.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    ::slotted {
+      width: 100%;
+    }
+  `;
+DaikinDropdown.formAssociated = true;
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinDropdown.prototype, "label", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinDropdown.prototype, "value", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinDropdown.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinDropdown.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinDropdown.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinDropdown.prototype, "error", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinDropdown.prototype, "open", 2);
+__decorateClass([
+  queryAssignedElements({ selector: "daikin-dropdown-item" })
+], DaikinDropdown.prototype, "_items", 2);
+__decorateClass([
+  query("button")
+], DaikinDropdown.prototype, "_button", 2);
+__decorateClass([
+  query("div[popover]")
+], DaikinDropdown.prototype, "_popover", 2);
+__decorateClass([
+  state()
+], DaikinDropdown.prototype, "_hasSelectedItem", 2);
+__decorateClass([
+  state()
+], DaikinDropdown.prototype, "_selectedItemLabel", 2);
+DaikinDropdown = __decorateClass([
+  customElement("daikin-dropdown")
+], DaikinDropdown);
+export {
+  DaikinDropdown
+};

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

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

package/dist/es-dev/components/dropdown/index.js

@@ -0,0 +1,4 @@
+import { DaikinDropdown } from "./daikin-dropdown.js";
+export {
+  DaikinDropdown
+};

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

@@ -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/es-dev/components/dropdown-item/daikin-dropdown-item.js

@@ -0,0 +1,113 @@
+import { cva } from "class-variance-authority";
+import { css, unsafeCSS, LitElement, html } from "lit";
+import { property, query, customElement } from "lit/decorators.js";
+import tailwindStyles from "../../tailwind.css.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 cvaOption = 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"
+        ]
+      }
+    }
+  }
+);
+let DaikinDropdownItem = class extends 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 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);
+  }
+};
+DaikinDropdownItem.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], DaikinDropdownItem.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinDropdownItem.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinDropdownItem.prototype, "selected", 2);
+__decorateClass([
+  query("button")
+], DaikinDropdownItem.prototype, "_button", 2);
+DaikinDropdownItem = __decorateClass([
+  customElement("daikin-dropdown-item")
+], DaikinDropdownItem);
+export {
+  DaikinDropdownItem
+};

package/dist/es-dev/components/dropdown-item/index.d.ts

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

package/dist/es-dev/components/dropdown-item/index.js

@@ -0,0 +1,4 @@
+import { DaikinDropdownItem } from "./daikin-dropdown-item.js";
+export {
+  DaikinDropdownItem
+};

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

@@ -20,6 +20,10 @@ export type IconVariantProps = MergeVariantProps<typeof cvaIcon>;
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/icon/index.js";
+ * ```
+ *
  * ```html
  * <daikin-icon icon="information" color="black" size="m"></daikin-icon>
  * ```

package/dist/es-dev/components/icon/icons.json.d.ts

@@ -1,7 +1,7 @@
 declare const _default: {
   "icons": {
     "alarm": {
-      "class": "i-daikin-notification-status-alarm",
+      "class": "i-daikin-status-alarm",
       "color": null
     },
     "close": {
@@ -9,19 +9,43 @@ declare const _default: {
       "color": "#a0a0a0"
     },
     "information": {
-      "class": "i-daikin-notification-status-information",
+      "class": "i-daikin-status-information",
       "color": null
     },
     "negative": {
-      "class": "i-daikin-notification-status-negative",
+      "class": "i-daikin-status-negative",
       "color": null
     },
     "positive": {
-      "class": "i-daikin-notification-status-positive",
+      "class": "i-daikin-status-positive",
       "color": null
     },
     "warning": {
-      "class": "i-daikin-notification-status-warning",
+      "class": "i-daikin-status-warning",
+      "color": null
+    },
+    "success": {
+      "class": "i-daikin-status-success",
+      "color": "#0097E0"
+    },
+    "error": {
+      "class": "i-daikin-status-error",
+      "color": "#FF4949"
+    },
+    "chevron-up": {
+      "class": "i-daikin-chevron-up",
+      "color": null
+    },
+    "chevron-down": {
+      "class": "i-daikin-chevron-down",
+      "color": null
+    },
+    "chevron-left": {
+      "class": "i-daikin-chevron-left",
+      "color": null
+    },
+    "chevron-right": {
+      "class": "i-daikin-chevron-right",
       "color": null
     }
   }

package/dist/es-dev/components/icon/icons.json.js

@@ -1,6 +1,6 @@
 const icons = {
   alarm: {
-    "class": "i-daikin-notification-status-alarm",
+    "class": "i-daikin-status-alarm",
     color: null
   },
   close: {
@@ -8,19 +8,43 @@ const icons = {
     color: "#a0a0a0"
   },
   information: {
-    "class": "i-daikin-notification-status-information",
+    "class": "i-daikin-status-information",
     color: null
   },
   negative: {
-    "class": "i-daikin-notification-status-negative",
+    "class": "i-daikin-status-negative",
     color: null
   },
   positive: {
-    "class": "i-daikin-notification-status-positive",
+    "class": "i-daikin-status-positive",
     color: null
   },
   warning: {
-    "class": "i-daikin-notification-status-warning",
+    "class": "i-daikin-status-warning",
+    color: null
+  },
+  success: {
+    "class": "i-daikin-status-success",
+    color: "#0097E0"
+  },
+  error: {
+    "class": "i-daikin-status-error",
+    color: "#FF4949"
+  },
+  "chevron-up": {
+    "class": "i-daikin-chevron-up",
+    color: null
+  },
+  "chevron-down": {
+    "class": "i-daikin-chevron-down",
+    color: null
+  },
+  "chevron-left": {
+    "class": "i-daikin-chevron-left",
+    color: null
+  },
+  "chevron-right": {
+    "class": "i-daikin-chevron-right",
     color: null
   }
 };

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

@@ -4,15 +4,22 @@ export * from './breadcrumb';
 export * from './breadcrumb-item';
 export * from './button';
 export * from './checkbox';
+export * from './dropdown';
+export * from './dropdown-item';
 export * from './icon';
 export * from './input-group';
+export * from './list';
+export * from './list-item';
 export * from './notification';
-export * from './panel-switcher';
 export * from './progress-bar';
+export * from './progress-indicator';
+export * from './progress-indicator-item';
 export * from './radio';
+export * from './select';
 export * from './tab';
-export * from './tab-group';
-export * from './text-input';
-export * from './textarea';
+export * from './tab-panels';
+export * from './tabs';
+export * from './text-area';
+export * from './text-field';
 export * from './toggle';
 export * from './tooltip';