@daikin-oss/design-system-web-components 2.0.0 → 2.0.1-next.1

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

@@ -1,114 +1,89 @@
-import { unsafeCSS, css, html } from "lit";
-import { queryAssignedElements } 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 "../../base/dds-form-element.js";
-import { property } from "../../base/dds-property.js";
+import { property as property$1 } from "../../base/dds-property.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
 import { ddsElement } from "../../base/decorators.js";
-import "../../base/define.js";
-import tailwindStyles from "../../tailwind.css.js";
+import "../../base/index.js";
+import tailwind_default from "../../tailwind.css.js";
 import { isSimpleKeyEvent } from "../../utils/is-simple-key.js";
+import { emitTreeMoveFocus, emitTreeSelect, emitTreeUnselect, getDirectionFromKey, handleTreeMoveFocusSection } from "../tree/common.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 DDSElement {
-  constructor() {
-    super(...arguments);
-    this.value = "";
-    this.disabled = 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;
-    }
-  }
-  _handleClick() {
-    if (!this.disabled && this.dispatchEvent(
-      new Event("toggle", {
-        cancelable: true
-      })
-    )) {
-      this.open = !this.open;
-    }
-    emitTreeSelect(this);
-  }
-  _handleSlotChange() {
-    this._updateChildrenLevel();
-  }
-  _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();
-      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) {
-          if (this.dispatchEvent(new Event("toggle", { cancelable: true }))) {
-            this.open = false;
-          }
-        } else {
-          emitTreeMoveFocus(this, "left");
-        }
-        break;
-      case "right":
-        if (!this._open) {
-          if (this.dispatchEvent(new Event("toggle", { cancelable: true }))) {
-            this.open = true;
-          }
-        } else {
-          (_a = this._children[0]) == null ? void 0 : _a.focus();
-        }
-        break;
+import "../tree-item/index.js";
+import { css, html, unsafeCSS } from "lit";
+import { queryAssignedElements } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+//#region src/components/tree-section/daikin-tree-section.ts
+var DaikinTreeSection = class DaikinTreeSection extends DDSElement {
+	constructor(..._args) {
+		super(..._args);
+		this.value = "";
+		this.disabled = false;
+		this.selected = false;
+		this.open = false;
+		this.level = 0;
+		this._focusableRef = createRef();
+	}
+	static {
+		this.styles = css`
+    ${unsafeCSS(tailwind_default)}
+
+    :host {
+      display: block;
     }
-  }
-  render() {
-    return html`<div
+  `;
+	}
+	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;
+	}
+	_handleClick() {
+		if (!this.disabled && this.dispatchEvent(new Event("toggle", { cancelable: true }))) this.open = !this.open;
+		emitTreeSelect(this);
+	}
+	_handleSlotChange() {
+		this._updateChildrenLevel();
+	}
+	_handleTreeMoveFocus(event) {
+		handleTreeMoveFocusSection(this, event, this._children);
+	}
+	_handleKeyDown(event) {
+		if (!isSimpleKeyEvent(event)) return;
+		if (!this.disabled && ["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			this._handleClick();
+			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) {
+					if (this.dispatchEvent(new Event("toggle", { cancelable: true }))) this.open = false;
+				} else emitTreeMoveFocus(this, "left");
+				break;
+			case "right": if (!this._open) {
+				if (this.dispatchEvent(new Event("toggle", { cancelable: true }))) this.open = true;
+			} else this._children[0]?.focus();
+		}
+	}
+	render() {
+		return html`<div
       role="treeitem"
       aria-expanded=${this._open}
       aria-disabled=${this.disabled}
@@ -117,11 +92,11 @@ let DaikinTreeSection = class extends DDSElement {
       <div
         ${ref(this._focusableRef)}
         class=${cvaTreeChildren({
-      selected: this._selected,
-      disabled: this.disabled,
-      icon: true,
-      open: this._open
-    })}
+			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}
@@ -142,102 +117,75 @@ let DaikinTreeSection = class extends DDSElement {
         ></slot>
       </div>
     </div>`;
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("level")) {
-      this._updateChildrenLevel();
-    }
-    if (changedProperties.has("disabled")) {
-      if (this.disabled && changedProperties.get("disabled") === false) {
-        emitTreeUnselect(this);
-      }
-    }
-  }
-  /**
-   * 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 `selectItems` for the tree sections and tree items of the child elements in the slot in the same way.
-   *
-   * @param value Tree item value.
-   * @private
-   */
-  selectItems(values) {
-    this.selected = !this.disabled && values.includes(this.value);
-    this._children.forEach(
-      (child) => child.selectItems(this.disabled ? [] : values)
-    );
-  }
-  /**
-   * Returns an array of the `value` of the currently selected sections and items.
-   * If nothing is selected, returns `[]`.
-   *
-   * @returns An array of the `value` of the currently selected sections and items (if any). `[]` if there is none.
-   * @private
-   */
-  getSelectedItems() {
-    if (this.disabled) {
-      return [];
-    }
-    return Array.from(
-      /* @__PURE__ */ new Set([
-        ...this.selected ? [this.value] : [],
-        ...this._children.flatMap((child) => child.getSelectedItems())
-      ])
-    );
-  }
-};
-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, 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);
-DaikinTreeSection = __decorateClass([
-  ddsElement("daikin-tree-section")
-], DaikinTreeSection);
-export {
-  DaikinTreeSection
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("level")) this._updateChildrenLevel();
+		if (changedProperties.has("disabled")) {
+			if (this.disabled && changedProperties.get("disabled") === false) emitTreeUnselect(this);
+		}
+	}
+	/**
+	* Focuses on the inner button.
+	*s
+	* @param options focus options
+	*/
+	focus(options) {
+		this._focusableRef.value?.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 `selectItems` for the tree sections and tree items of the child elements in the slot in the same way.
+	*
+	* @param value Tree item value.
+	* @private
+	*/
+	selectItems(values) {
+		this.selected = !this.disabled && values.includes(this.value);
+		this._children.forEach((child) => child.selectItems(this.disabled ? [] : values));
+	}
+	/**
+	* Returns an array of the `value` of the currently selected sections and items.
+	* If nothing is selected, returns `[]`.
+	*
+	* @returns An array of the `value` of the currently selected sections and items (if any). `[]` if there is none.
+	* @private
+	*/
+	getSelectedItems() {
+		if (this.disabled) return [];
+		return Array.from(/* @__PURE__ */ new Set([...this.selected ? [this.value] : [], ...this._children.flatMap((child) => child.getSelectedItems())]));
+	}
 };
+__decorate([property$1({ type: String })], DaikinTreeSection.prototype, "value", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinTreeSection.prototype, "disabled", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinTreeSection.prototype, "selected", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinTreeSection.prototype, "open", void 0);
+__decorate([property$1({
+	type: Number,
+	attribute: false
+})], DaikinTreeSection.prototype, "level", void 0);
+__decorate([queryAssignedElements({ selector: "daikin-tree-section,daikin-tree-item" })], DaikinTreeSection.prototype, "_children", void 0);
+DaikinTreeSection = __decorate([ddsElement("daikin-tree-section")], DaikinTreeSection);
+//#endregion
+export { DaikinTreeSection };

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

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

package/dist/es/components/vertical-navigation/daikin-vertical-navigation.js

@@ -1,77 +1,23 @@
-import { unsafeCSS, css, html } from "lit";
-import { queryAssignedElements } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
 import { DDSElement } from "../../base/dds-element.js";
-import "../../base/dds-form-element.js";
-import { property, oneOf } from "../../base/dds-property.js";
+import { oneOf, property as property$1 } from "../../base/dds-property.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
 import { ddsElement } from "../../base/decorators.js";
-import "../../base/define.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;
-};
-let DaikinVerticalNavigation = class extends DDSElement {
-  constructor() {
-    super(...arguments);
-    this.openItems = [];
-    this.exclusive = false;
-    this.navigationAriaLabel = null;
-  }
-  _handleToggle(event) {
-    const target = event.target;
-    if (target.type !== "menu") {
-      if (this.exclusive && this.openItems.length > 0) {
-        this.openItems = [];
-        this._reflectItemOpen();
-        this.dispatchEvent(new Event("change", { bubbles: true }));
-      }
-      return;
-    }
-    const targetName = target.name;
-    if (!targetName) {
-      return;
-    }
-    const willOpen = !target.open;
-    if (this.exclusive) {
-      this.openItems = willOpen ? [targetName] : [];
-    } else {
-      this.openItems = willOpen ? [...this.openItems, targetName] : this.openItems.filter((item) => item !== targetName);
-    }
-    this._reflectItemOpen();
-    this.dispatchEvent(new Event("change", { bubbles: true }));
-  }
-  _reflectItemOpen() {
-    for (const item of this._items) {
-      if (item.type === "menu") {
-        item.open = this.openItems.includes(item.name);
-      }
-    }
-  }
-  render() {
-    return html`<nav aria-label=${ifDefined(this.navigationAriaLabel)}>
-      <div role="list" class="w-full flex flex-col">
-        <slot
-          @toggle=${this._handleToggle}
-          @slotchange=${this._reflectItemOpen}
-        ></slot>
-      </div>
-    </nav>`;
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("openItems") || changedProperties.has("exclusive")) {
-      this._reflectItemOpen();
-    }
-  }
-};
-DaikinVerticalNavigation.styles = css`
-    ${unsafeCSS(tailwindStyles)}
+import "../../base/index.js";
+import tailwind_default from "../../tailwind.css.js";
+import { css, html, unsafeCSS } from "lit";
+import { queryAssignedElements } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+//#region src/components/vertical-navigation/daikin-vertical-navigation.ts
+var DaikinVerticalNavigation = class DaikinVerticalNavigation extends DDSElement {
+	constructor(..._args) {
+		super(..._args);
+		this.openItems = [];
+		this.exclusive = false;
+		this.navigationAriaLabel = null;
+	}
+	static {
+		this.styles = css`
+    ${unsafeCSS(tailwind_default)}
 
     :host {
       display: block;
@@ -83,34 +29,62 @@ DaikinVerticalNavigation.styles = css`
       --divider-bottom-display: block;
     }
   `;
-__decorateClass([
-  property({ type: Array, attribute: false })
-], DaikinVerticalNavigation.prototype, "openItems", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinVerticalNavigation.prototype, "exclusive", 2);
-__decorateClass([
-  property({
-    type: String,
-    reflect: true,
-    fallbackValue: "none",
-    isAllowedValue: oneOf([
-      "none",
-      "underline"
-    ])
-  })
-], DaikinVerticalNavigation.prototype, "border", 2);
-__decorateClass([
-  property({ type: String, reflect: true, attribute: "navigation-aria-label" })
-], DaikinVerticalNavigation.prototype, "navigationAriaLabel", 2);
-__decorateClass([
-  queryAssignedElements({
-    selector: "daikin-vertical-navigation-item"
-  })
-], DaikinVerticalNavigation.prototype, "_items", 2);
-DaikinVerticalNavigation = __decorateClass([
-  ddsElement("daikin-vertical-navigation")
-], DaikinVerticalNavigation);
-export {
-  DaikinVerticalNavigation
+	}
+	_handleToggle(event) {
+		const target = event.target;
+		if (target.type !== "menu") {
+			if (this.exclusive && this.openItems.length > 0) {
+				this.openItems = [];
+				this._reflectItemOpen();
+				this.dispatchEvent(new Event("change", { bubbles: true }));
+			}
+			return;
+		}
+		const targetName = target.name;
+		if (!targetName) return;
+		const willOpen = !target.open;
+		if (this.exclusive) this.openItems = willOpen ? [targetName] : [];
+		else this.openItems = willOpen ? [...this.openItems, targetName] : this.openItems.filter((item) => item !== targetName);
+		this._reflectItemOpen();
+		this.dispatchEvent(new Event("change", { bubbles: true }));
+	}
+	_reflectItemOpen() {
+		for (const item of this._items) if (item.type === "menu") item.open = this.openItems.includes(item.name);
+	}
+	render() {
+		return html`<nav aria-label=${ifDefined(this.navigationAriaLabel)}>
+      <div role="list" class="w-full flex flex-col">
+        <slot
+          @toggle=${this._handleToggle}
+          @slotchange=${this._reflectItemOpen}
+        ></slot>
+      </div>
+    </nav>`;
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("openItems") || changedProperties.has("exclusive")) this._reflectItemOpen();
+	}
 };
+__decorate([property$1({
+	type: Array,
+	attribute: false
+})], DaikinVerticalNavigation.prototype, "openItems", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinVerticalNavigation.prototype, "exclusive", void 0);
+__decorate([property$1({
+	type: String,
+	reflect: true,
+	fallbackValue: "none",
+	isAllowedValue: oneOf(["none", "underline"])
+})], DaikinVerticalNavigation.prototype, "border", void 0);
+__decorate([property$1({
+	type: String,
+	reflect: true,
+	attribute: "navigation-aria-label"
+})], DaikinVerticalNavigation.prototype, "navigationAriaLabel", void 0);
+__decorate([queryAssignedElements({ selector: "daikin-vertical-navigation-item" })], DaikinVerticalNavigation.prototype, "_items", void 0);
+DaikinVerticalNavigation = __decorate([ddsElement("daikin-vertical-navigation")], DaikinVerticalNavigation);
+//#endregion
+export { DaikinVerticalNavigation };

package/dist/es/components/vertical-navigation/index.js

@@ -1,4 +1,2 @@
 import { DaikinVerticalNavigation } from "./daikin-vertical-navigation.js";
-export {
-  DaikinVerticalNavigation
-};
+export { DaikinVerticalNavigation };