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

package/dist/es/components/tree-section/daikin-tree-section.js

@@ -0,0 +1,246 @@
+import { css, unsafeCSS, LitElement, html } from "lit";
+import { property, queryAssignedElements, customElement } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import tailwindStyles from "../../tailwind.css.js";
+import { isSimpleKeyEvent } from "../../utils/is-simple-key.js";
+import { cvaTreeChildren } from "../tree-item/daikin-tree-item.js";
+import { emitTreeSelect, handleTreeMoveFocusSection, getDirectionFromKey, emitTreeMoveFocus, emitTreeUnselect } from "../tree/common.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;
+};
+let DaikinTreeSection = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.disabled = false;
+    this.selectable = false;
+    this.selected = false;
+    this.open = false;
+    this.level = 0;
+    this._focusableRef = createRef();
+  }
+  get _open() {
+    return this.open && !this.disabled;
+  }
+  get _selected() {
+    return this.selected && !this.disabled;
+  }
+  _updateChildrenLevel() {
+    for (const item of this._children) {
+      item.level = this.level + 1;
+    }
+  }
+  _updateSections() {
+    this._sections.forEach((section) => {
+      section.selectable = this.selectable;
+    });
+  }
+  _handleClick() {
+    if (!this.disabled && this.dispatchEvent(
+      new Event("toggle", {
+        cancelable: true
+      })
+    )) {
+      this.open = !this.open;
+    }
+    emitTreeSelect(this);
+  }
+  _handleSlotChange() {
+    this._updateChildrenLevel();
+    this._updateSections();
+  }
+  _handleTreeMoveFocus(event) {
+    handleTreeMoveFocusSection(this, event, this._children);
+  }
+  _handleKeyDown(event) {
+    var _a;
+    if (!isSimpleKeyEvent(event)) {
+      return;
+    }
+    if (!this.disabled && ["Enter", " "].includes(event.key)) {
+      event.preventDefault();
+      this._handleClick();
+      if (this.selectable) {
+        emitTreeSelect(this);
+      }
+      return;
+    }
+    const direction = getDirectionFromKey(event.key);
+    if (!direction) {
+      return;
+    }
+    event.preventDefault();
+    switch (direction) {
+      case "up":
+        emitTreeMoveFocus(this, "up");
+        break;
+      case "down": {
+        const nextItem = this.open && this._children[0];
+        if (nextItem) {
+          nextItem.focus();
+        } else {
+          emitTreeMoveFocus(this, "down");
+        }
+        break;
+      }
+      case "left":
+        if (this._open) {
+          this.open = false;
+        } else {
+          emitTreeMoveFocus(this, "left");
+        }
+        break;
+      case "right":
+        if (!this._open) {
+          this.open = true;
+        } else {
+          (_a = this._children[0]) == null ? void 0 : _a.focus();
+        }
+        break;
+    }
+  }
+  render() {
+    return html`<div
+      role="treeitem"
+      aria-expanded=${this._open}
+      aria-disabled=${this.disabled}
+      aria-selected=${this._selected}
+    >
+      <div
+        ${ref(this._focusableRef)}
+        class=${cvaTreeChildren({
+      selected: this._selected,
+      disabled: this.disabled,
+      icon: true,
+      open: this._open
+    })}
+        tabindex=${ifDefined(!this.disabled ? 0 : void 0)}
+        style=${`--level:${this.level}`}
+        @click=${this._handleClick}
+        @keydown=${this._handleKeyDown}
+      >
+        <slot name="label"></slot>
+      </div>
+      <div role="group" ?hidden=${!this._open}>
+        <slot
+          @slotchange=${this._handleSlotChange}
+          @tree-move-focus=${this._handleTreeMoveFocus}
+        ></slot>
+      </div>
+    </div>`;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("level")) {
+      this._updateChildrenLevel();
+    }
+    if (changedProperties.has("disabled")) {
+      if (this.disabled) {
+        this.selectItem(null);
+        emitTreeUnselect(this);
+      }
+    }
+    if (changedProperties.has("selectable")) {
+      this._updateSections();
+    }
+  }
+  /**
+   * Focuses on the inner button.
+   *s
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._focusableRef.value) == null ? void 0 : _a.focus(options);
+  }
+  /**
+   * Focuses on the last enabled item in the slot recursively.
+   * If the tree is closed or there are no enabled items in the slot, this will focus on itself.
+   * This is called from the next item to move the focus to the item above it in the display.
+   *
+   * @param options focus options
+   * @private
+   */
+  focusLastItem(options) {
+    const child = this._open && this._children.findLast((element) => !element.disabled);
+    if (child) {
+      child.focusLastItem(options);
+    } else {
+      this.focus(options);
+    }
+  }
+  /**
+   * Updates the selection state (`this.selected`) to true if the argument `value` matches `this.value`. Otherwise, sets it to false.
+   * In addition, calls `selectItem` for the tree sections and tree items of the child elements in the slot in the same way.
+   *
+   * @param value Tree item value.
+   * @private
+   */
+  selectItem(value) {
+    if (this.disabled && value != null) {
+      return;
+    }
+    this.selected = this.value === 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() {
+    if (this.disabled) {
+      return null;
+    }
+    if (this.selected) {
+      return this.value;
+    }
+    return this._children.map((child) => child.getSelectedItem()).find((item) => !!item) ?? null;
+  }
+};
+DaikinTreeSection.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], DaikinTreeSection.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTreeSection.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: false })
+], DaikinTreeSection.prototype, "selectable", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTreeSection.prototype, "selected", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTreeSection.prototype, "open", 2);
+__decorateClass([
+  property({ type: Number, attribute: false })
+], DaikinTreeSection.prototype, "level", 2);
+__decorateClass([
+  queryAssignedElements({ selector: "daikin-tree-section,daikin-tree-item" })
+], DaikinTreeSection.prototype, "_children", 2);
+__decorateClass([
+  queryAssignedElements({ selector: "daikin-tree-section" })
+], DaikinTreeSection.prototype, "_sections", 2);
+DaikinTreeSection = __decorateClass([
+  customElement("daikin-tree-section")
+], DaikinTreeSection);
+export {
+  DaikinTreeSection
+};

package/dist/es/components/tree-section/index.d.ts

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

package/dist/es/components/tree-section/index.js

@@ -0,0 +1,4 @@
+import { DaikinTreeSection } from "./daikin-tree-section.js";
+export {
+  DaikinTreeSection
+};

package/dist/es/index.d.ts

@@ -1,3 +1,2 @@
-export * from "./colors.js";
 export * from "./components/index.js";
 export * from "./lit-analyzer-types.js";

package/dist/es/index.js

@@ -1,9 +1,11 @@
-import { colors } from "./colors.js";
 import { DaikinAccordion } from "./components/accordion/daikin-accordion.js";
 import { DaikinAccordionItem } from "./components/accordion-item/daikin-accordion-item.js";
 import { DaikinBreadcrumb } from "./components/breadcrumb/daikin-breadcrumb.js";
 import { DaikinBreadcrumbItem } from "./components/breadcrumb-item/daikin-breadcrumb-item.js";
 import { DaikinButton } from "./components/button/daikin-button.js";
+import { DaikinCard } from "./components/card/daikin-card.js";
+import { DaikinCardFooter } from "./components/card-footer/daikin-card-footer.js";
+import { DaikinCardHeader } from "./components/card-header/daikin-card-header.js";
 import { DaikinCheckbox } from "./components/checkbox/daikin-checkbox.js";
 import { DaikinDropdown } from "./components/dropdown/daikin-dropdown.js";
 import { DaikinDropdownItem } from "./components/dropdown-item/daikin-dropdown-item.js";
@@ -30,12 +32,18 @@ import { DaikinTextArea } from "./components/text-area/daikin-text-area.js";
 import { DaikinTextField } from "./components/text-field/daikin-text-field.js";
 import { DaikinToggle } from "./components/toggle/daikin-toggle.js";
 import { DaikinTooltip } from "./components/tooltip/daikin-tooltip.js";
+import { DaikinTree } from "./components/tree/daikin-tree.js";
+import { DaikinTreeItem, cvaTreeChildren } from "./components/tree-item/daikin-tree-item.js";
+import { DaikinTreeSection } from "./components/tree-section/daikin-tree-section.js";
 export {
   DaikinAccordion,
   DaikinAccordionItem,
   DaikinBreadcrumb,
   DaikinBreadcrumbItem,
   DaikinButton,
+  DaikinCard,
+  DaikinCardFooter,
+  DaikinCardHeader,
   DaikinCheckbox,
   DaikinDropdown,
   DaikinDropdownItem,
@@ -62,6 +70,9 @@ export {
   DaikinTextField,
   DaikinToggle,
   DaikinTooltip,
-  colors,
+  DaikinTree,
+  DaikinTreeItem,
+  DaikinTreeSection,
+  cvaTreeChildren,
   iconList
 };