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

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

@@ -65,7 +65,7 @@ exports.DaikinTooltip = class DaikinTooltip extends lit.LitElement {
       return;
     }
     window.CSS.registerProperty({
-      name: "--dds-tooltip-spacing",
+      name: "--ddc-tooltip-spacing",
       syntax: "<length>",
       inherits: true,
       initialValue: "0px"
@@ -101,7 +101,7 @@ exports.DaikinTooltip = class DaikinTooltip extends lit.LitElement {
   render() {
     var _a;
     const spacing = parseInt(
-      ((_a = this._hostStyles) == null ? void 0 : _a.getPropertyValue("--dds-tooltip-spacing")) || DEFAULT_TOOLTIP_SPACING,
+      ((_a = this._hostStyles) == null ? void 0 : _a.getPropertyValue("--ddc-tooltip-spacing")) || DEFAULT_TOOLTIP_SPACING,
       10
     );
     return lit.html`<div class="relative inline-block">
@@ -160,7 +160,7 @@ exports.DaikinTooltip.styles = lit.css`
     :host {
       display: inline-block;
 
-      --dds-tooltip-spacing: ${lit.unsafeCSS(DEFAULT_TOOLTIP_SPACING)};
+      --ddc-tooltip-spacing: ${lit.unsafeCSS(DEFAULT_TOOLTIP_SPACING)};
     }
   `;
 __decorateClass([

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

@@ -8,7 +8,7 @@ import { LitElement, PropertyValues } from 'lit';
  * @slot - A slot for the element to which the tooltip is attached (the trigger element).
  * @slot description - A slot for the tooltip description content.
  *
- * @cssprop [--dds-tooltip-spacing=20px] - Spacing between the tooltip and the trigger
+ * @cssprop [--ddc-tooltip-spacing=20px] - Spacing between the tooltip and the trigger
  *
  * @example
  *

package/dist/cjs/components/tree/common.cjs

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function getDirectionFromKey(key) {
+  return {
+    ArrowUp: "up",
+    ArrowDown: "down",
+    ArrowLeft: "left",
+    ArrowRight: "right"
+  }[key];
+}
+function handleTreeMoveFocusCommon(event, children) {
+  const moveOffset = {
+    up: -1,
+    down: 1,
+    left: 0
+  }[event.detail.direction];
+  if (!moveOffset) {
+    return;
+  }
+  const target = event.target;
+  const enabledChildren = children.filter(({ disabled }) => !disabled);
+  const focusedItemIndex = enabledChildren.findIndex((item) => item === target);
+  if (focusedItemIndex < 0) {
+    return;
+  }
+  event.stopPropagation();
+  const child = enabledChildren[focusedItemIndex + moveOffset];
+  if (!child) {
+    return false;
+  }
+  if (moveOffset > 0) {
+    child.focus();
+  } else {
+    child.focusLastItem();
+  }
+  return true;
+}
+function handleTreeMoveFocusSection(section, event, children) {
+  const { direction } = event.detail;
+  if (direction === "left") {
+    event.stopPropagation();
+    section.focus();
+  } else {
+    const result = handleTreeMoveFocusCommon(event, children);
+    if (result === false) {
+      if (direction === "up") {
+        section.focus();
+      } else {
+        emitTreeMoveFocus(section, "down");
+      }
+    }
+  }
+}
+function handleTreeMoveFocusRoot(event, children) {
+  event.stopPropagation();
+  handleTreeMoveFocusCommon(event, children);
+}
+function emitTreeMoveFocus(target, direction) {
+  target.dispatchEvent(
+    new CustomEvent("tree-move-focus", {
+      detail: {
+        direction
+      },
+      composed: true,
+      bubbles: true
+    })
+  );
+}
+function emitTreeSelect(target) {
+  target.dispatchEvent(
+    new Event("tree-select", {
+      composed: true,
+      bubbles: true
+    })
+  );
+}
+function emitTreeUnselect(target) {
+  target.dispatchEvent(
+    new Event("tree-unselect", {
+      composed: true,
+      bubbles: true
+    })
+  );
+}
+exports.emitTreeMoveFocus = emitTreeMoveFocus;
+exports.emitTreeSelect = emitTreeSelect;
+exports.emitTreeUnselect = emitTreeUnselect;
+exports.getDirectionFromKey = getDirectionFromKey;
+exports.handleTreeMoveFocusRoot = handleTreeMoveFocusRoot;
+exports.handleTreeMoveFocusSection = handleTreeMoveFocusSection;

package/dist/cjs/components/tree/common.d.cts

@@ -0,0 +1,32 @@
+import { DaikinTreeItem } from "../tree-item/index.cjs";
+import { DaikinTreeSection } from "../tree-section/index.cjs";
+export type Direction = "up" | "down" | "left" | "right";
+export type DirectionDispatched = Exclude<Direction, "right">;
+export type TreeMoveFocusEventDetail = {
+    direction: DirectionDispatched;
+};
+export type TreeMoveFocusEvent = CustomEvent<TreeMoveFocusEventDetail>;
+/**
+ * Get direction from key name.
+ * @param key `event.key` where `event` is `KeyboardEvent`
+ * @returns direction
+ */
+export declare function getDirectionFromKey(key: string): Direction | undefined;
+/**
+ * `tree-move-focus` event handler for `daikin-tree-section`.
+ *
+ * @param section `daikin-tree-section`
+ * @param event `TreeMoveFocusEvent`
+ * @param children Children in the slot.
+ */
+export declare function handleTreeMoveFocusSection(section: DaikinTreeSection, event: TreeMoveFocusEvent, children: readonly (DaikinTreeSection | DaikinTreeItem)[]): void;
+/**
+ * `tree-move-focus` event handler for `daikin-tree`.
+ *
+ * @param event `TreeMoveFocusEvent`
+ * @param children Children in the slot.
+ */
+export declare function handleTreeMoveFocusRoot(event: TreeMoveFocusEvent, children: readonly (DaikinTreeSection | DaikinTreeItem)[]): void;
+export declare function emitTreeMoveFocus(target: HTMLElement, direction: DirectionDispatched): void;
+export declare function emitTreeSelect(target: HTMLElement): void;
+export declare function emitTreeUnselect(target: HTMLElement): void;

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

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const tailwind = require("../../tailwind.css.cjs");
+const common = require("./common.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;
+};
+exports.DaikinTree = class DaikinTree extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.selectable = false;
+    this.selected = null;
+  }
+  _updateChildrenLevel() {
+    this._children.forEach((child) => child.level = 0);
+  }
+  _updateSections() {
+    this._sections.forEach((section) => {
+      section.selectable = this.selectable;
+    });
+  }
+  _handleSlotChange() {
+    this._updateChildrenLevel();
+    this._updateSections();
+  }
+  _handleTreeMoveFocus(event) {
+    common.handleTreeMoveFocusRoot(event, this._children);
+  }
+  _handleTreeSelect(event) {
+    event.stopPropagation();
+    if (!this.selectable) {
+      return;
+    }
+    const target = event.target;
+    this.selected = target.value;
+  }
+  _handleTreeUnselect(event) {
+    event.stopPropagation();
+    this.selected = this.getSelectedItem();
+  }
+  render() {
+    return lit.html`<div role="tree">
+      <slot
+        @slotchange=${this._handleSlotChange}
+        @tree-move-focus=${this._handleTreeMoveFocus}
+        @tree-select=${this._handleTreeSelect}
+        @tree-unselect=${this._handleTreeUnselect}
+      ></slot>
+    </div>`;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("selectable")) {
+      this._updateSections();
+    }
+    if (changedProperties.has("selected") && this.selectable) {
+      this.selectItem(this.selected);
+    }
+  }
+  /**
+   * Calls `selectItem` for the tree sections and tree items of the child elements in the slot.
+   *
+   * @param value Tree item value.
+   * @private
+   */
+  selectItem(value) {
+    this._children.forEach((child) => child.selectItem(value));
+  }
+  /**
+   * Returns the `value` of the currently selected section or item.
+   * If nothing is selected, returns `null`.
+   *
+   * @returns The `value` of the selected section or item (if any). `null` if there is none.
+   * @private
+   */
+  getSelectedItem() {
+    return this._children.map((child) => child.getSelectedItem()).find((item) => !!item) ?? null;
+  }
+};
+exports.DaikinTree.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinTree.prototype, "selectable", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinTree.prototype, "selected", 2);
+__decorateClass([
+  decorators_js.queryAssignedElements({ selector: "daikin-tree-section,daikin-tree-item" })
+], exports.DaikinTree.prototype, "_children", 2);
+__decorateClass([
+  decorators_js.queryAssignedElements({ selector: "daikin-tree-section" })
+], exports.DaikinTree.prototype, "_sections", 2);
+exports.DaikinTree = __decorateClass([
+  decorators_js.customElement("daikin-tree")
+], exports.DaikinTree);

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

@@ -0,0 +1,74 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * The tree component is a component that creates a hierarchical list. You can create a hierarchical structure by placing tree section components and tree item components under the parent tree component.
+ *
+ * Hierarchy:
+ * - `daikin-tree` > `daikin-tree-section` > `daikin-tree-item`
+ * - `daikin-tree` > `daikin-tree-section` > `daikin-tree-section` ...
+ * - `daikin-tree` > `daikin-tree-item`
+ *
+ * @slot - A slot for tree sections and tree items. Place `daikin-tree-section` or `daikin-tree-item` elements here.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/tree/index.js";
+ * import "@daikin-oss/design-system-web-components/components/tree-item/index.js";
+ * import "@daikin-oss/design-system-web-components/components/tree-section/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-tree>
+ *   <daikin-tree-section>
+ *     <span slot="label">Tree section 1</span>
+ *     <daikin-tree-item>Tree item 1-1</daikin-tree-item>
+ *     <daikin-tree-item>Tree item 1-2</daikin-tree-item>
+ *     <daikin-tree-item>Tree item 1-3</daikin-tree-item>
+ *   </daikin-tree-section>
+ * </daikin-tree>
+ * ```
+ */
+export declare class DaikinTree extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Whether or not to enable tree selection.
+     * When enabled, tree sections and items can be selected by click, and the `selected` property of the `daikin-tree` and its descendants will be automatically controlled.
+     * Even if this is disabled, you can still set the `selected` property of sections and items yourself.
+     */
+    selectable: boolean;
+    /**
+     * The value of the currently selected tree section or tree item.
+     * Only used if `selectable` is `true`.
+     */
+    selected: string | null;
+    private readonly _children;
+    private readonly _sections;
+    private _updateChildrenLevel;
+    private _updateSections;
+    private _handleSlotChange;
+    private _handleTreeMoveFocus;
+    private _handleTreeSelect;
+    private _handleTreeUnselect;
+    render(): import('lit-html').TemplateResult<1>;
+    protected updated(changedProperties: PropertyValues): void;
+    /**
+     * Calls `selectItem` for the tree sections and tree items of the child elements in the slot.
+     *
+     * @param value Tree item value.
+     * @private
+     */
+    selectItem(value: string | null): void;
+    /**
+     * Returns the `value` of the currently selected section or item.
+     * If nothing is selected, returns `null`.
+     *
+     * @returns The `value` of the selected section or item (if any). `null` if there is none.
+     * @private
+     */
+    getSelectedItem(): string | null;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-tree": DaikinTree;
+    }
+}

package/dist/cjs/components/tree/index.cjs

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

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

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

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

@@ -0,0 +1,197 @@
+"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 ref_js = require("lit/directives/ref.js");
+const tailwind = require("../../tailwind.css.cjs");
+const isSimpleKey = require("../../utils/is-simple-key.cjs");
+const common = require("../tree/common.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 cvaTreeChildren = classVarianceAuthority.cva(
+  [
+    "flex",
+    "items-center",
+    "w-full",
+    "min-h-12",
+    "py-3",
+    "pr-4",
+    "pl-[calc((var(--level)+1)*1rem)]",
+    "focus-visible:outline",
+    "focus-visible:outline-2",
+    "focus-visible:-outline-offset-2",
+    "focus-visible:outline-ddt-color-common-border-focus"
+  ],
+  {
+    variants: {
+      disabled: {
+        false: [
+          "text-ddt-color-common-text-primary",
+          "bg-[--color-base]",
+          "cursor-pointer"
+        ],
+        true: ["text-ddt-color-common-disabled"]
+      },
+      selected: {
+        false: [
+          "var-color-transparent/color-base",
+          "hover:var-color-ddt-color-common-surface-hover/color-base",
+          "active:var-color-ddt-color-common-surface-press/color-base"
+        ],
+        true: [
+          "var-color-ddt-color-common-surface-selected-default/color-base",
+          "hover:var-color-ddt-color-common-surface-selected-hover/color-base",
+          "active:var-color-ddt-color-common-surface-selected-press/color-base"
+        ]
+      },
+      icon: {
+        false: ["before:size-6"],
+        true: [
+          "before:i-daikin-chevron-right",
+          "before:size-5",
+          "before:m-0.5",
+          "before:transition-all"
+        ]
+      },
+      open: {
+        false: [],
+        true: ["before:rotate-90"]
+      }
+    }
+  }
+);
+exports.DaikinTreeItem = class DaikinTreeItem extends lit.LitElement {
+  constructor() {
+    super();
+    this.value = "";
+    this.disabled = false;
+    this.selected = false;
+    this.level = 0;
+    this._focusableRef = ref_js.createRef();
+    this.addEventListener("click", (event) => {
+      if (this.disabled) {
+        event.stopImmediatePropagation();
+      }
+    });
+  }
+  _handleKeyDown(event) {
+    if (!isSimpleKey.isSimpleKeyEvent(event)) {
+      return;
+    }
+    if (!this.disabled && ["Enter", " "].includes(event.key)) {
+      event.preventDefault();
+      common.emitTreeSelect(this);
+      return;
+    }
+    const direction = common.getDirectionFromKey(event.key);
+    if (!direction) {
+      return;
+    }
+    event.preventDefault();
+    if (direction !== "right") {
+      common.emitTreeMoveFocus(this, direction);
+    }
+  }
+  render() {
+    return lit.html`<div
+      ${ref_js.ref(this._focusableRef)}
+      class=${cvaTreeChildren({
+      disabled: this.disabled,
+      selected: this.selected && !this.disabled,
+      icon: false,
+      open: false
+    })}
+      role="treeitem"
+      aria-disabled=${this.disabled}
+      aria-selected=${this.selected && !this.disabled}
+      tabindex=${ifDefined_js.ifDefined(!this.disabled ? 0 : void 0)}
+      style=${`--level:${this.level}`}
+      @click=${() => common.emitTreeSelect(this)}
+      @keydown=${this._handleKeyDown}
+    >
+      <slot></slot>
+    </div>`;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("disabled")) {
+      if (this.disabled) {
+        this.selectItem(null);
+        common.emitTreeUnselect(this);
+      }
+    }
+  }
+  /**
+   * Focuses on the inner button.
+   *
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._focusableRef.value) == null ? void 0 : _a.focus(options);
+  }
+  /**
+   * Focuses on the inner button.
+   * This is provided to ensure consistency of the interface.
+   *
+   * @param options focus options
+   * @private
+   */
+  focusLastItem(options) {
+    var _a;
+    (_a = this._focusableRef.value) == null ? void 0 : _a.focus(options);
+  }
+  /**
+   * Updates the selection state (`this.selected`) to true if the argument `value` matches `this.value`. Otherwise, sets it to false.
+   *
+   * @param value Tree item value.
+   * @private
+   */
+  selectItem(value) {
+    if (this.disabled && value != null) {
+      return;
+    }
+    this.selected = this.value === value;
+  }
+  /**
+   * Returns `this.value` if selected, or `null` if not selected.
+   *
+   * @returns `this.value` if selected. `null` if not selected.
+   * @private
+   */
+  getSelectedItem() {
+    return !this.disabled && this.selected ? this.value : null;
+  }
+};
+exports.DaikinTreeItem.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinTreeItem.prototype, "value", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinTreeItem.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinTreeItem.prototype, "selected", 2);
+__decorateClass([
+  decorators_js.property({ type: Number, attribute: false })
+], exports.DaikinTreeItem.prototype, "level", 2);
+exports.DaikinTreeItem = __decorateClass([
+  decorators_js.customElement("daikin-tree-item")
+], exports.DaikinTreeItem);
+exports.cvaTreeChildren = cvaTreeChildren;

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

@@ -0,0 +1,95 @@
+import { LitElement, PropertyValues } from 'lit';
+export declare const cvaTreeChildren: (props?: ({
+    disabled?: boolean | null | undefined;
+    selected?: boolean | null | undefined;
+    icon?: boolean | null | undefined;
+    open?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * The tree item component that can be used within `daikin-tree` and `daikin-tree-section` component.
+ *
+ * This can be placed either under the tree section or directly under the tree. Elements cannot be placed any deeper than tree item.
+ *
+ * Hierarchy:
+ * - `daikin-tree` > `daikin-tree-section` > `daikin-tree-item`
+ * - `daikin-tree` > `daikin-tree-item`
+ *
+ * @fires click - A retargeted event of a [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event) emitted from the inner `<a>` or `<button>` element. Suppressed if `disabled` is true,
+ * @fires tree-move-focus - _Internal use._ A custom event used to move the focus within a tree.
+ *
+ * @slot - A slot for the tree item content.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/tree-item/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-tree-item>Tree item</daikin-tree-item>
+ * ```
+ */
+export declare class DaikinTreeItem extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Value of the tree item.
+     */
+    value: string;
+    /**
+     * Whether the tree item is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether the tree item is selected.
+     * Ignored if disabled.
+     * Controlled by `daikin-tree` if its `selectable` is true.
+     * If the tree's `selected` is false, you can manually set this property to control the display of the selected state.
+     */
+    selected: boolean;
+    /**
+     * _Internal use._
+     * The current nesting depth when the root's children are 0.
+     * Automatically set by the parent.
+     *
+     * @private
+     */
+    level: number;
+    private readonly _focusableRef;
+    private _handleKeyDown;
+    constructor();
+    render(): import('lit-html').TemplateResult<1>;
+    protected updated(changedProperties: PropertyValues): void;
+    /**
+     * Focuses on the inner button.
+     *
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
+    /**
+     * Focuses on the inner button.
+     * This is provided to ensure consistency of the interface.
+     *
+     * @param options focus options
+     * @private
+     */
+    focusLastItem(options?: FocusOptions): void;
+    /**
+     * Updates the selection state (`this.selected`) to true if the argument `value` matches `this.value`. Otherwise, sets it to false.
+     *
+     * @param value Tree item value.
+     * @private
+     */
+    selectItem(value: string | null): void;
+    /**
+     * Returns `this.value` if selected, or `null` if not selected.
+     *
+     * @returns `this.value` if selected. `null` if not selected.
+     * @private
+     */
+    getSelectedItem(): string | null;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-tree-item": DaikinTreeItem;
+    }
+}

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinTreeItem = require("./daikin-tree-item.cjs");
+Object.defineProperty(exports, "DaikinTreeItem", {
+  enumerable: true,
+  get: () => daikinTreeItem.DaikinTreeItem
+});
+exports.cvaTreeChildren = daikinTreeItem.cvaTreeChildren;

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

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