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

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

@@ -1,59 +1,53 @@
-import { unsafeCSS, css, html } from "lit";
-import { queryAssignedElements } from "lit/decorators.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 { handleTreeMoveFocusRoot } from "./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 DaikinTree = class extends DDSElement {
-  constructor() {
-    super(...arguments);
-    this.selectable = false;
-    this.selectedItems = [];
-  }
-  _handleMouseDown(event) {
-    if (event.detail >= 2) {
-      event.preventDefault();
-    }
-  }
-  _handleSlotChange() {
-    this._children.forEach((child) => child.level = 0);
-    this.selectItems(this.selectedItems);
-  }
-  _handleTreeMoveFocus(event) {
-    handleTreeMoveFocusRoot(event, this._children);
-  }
-  _handleTreeSelect(event) {
-    if (!this.selectable) {
-      return;
-    }
-    event.stopPropagation();
-    const target = event.target;
-    this.selectedItems = [target.value];
-    this.dispatchEvent(new Event("change", { bubbles: true }));
-  }
-  _handleTreeUnselect(event) {
-    if (!this.selectable) {
-      return;
+import { css, html, unsafeCSS } from "lit";
+import { queryAssignedElements } from "lit/decorators.js";
+//#region src/components/tree/daikin-tree.ts
+var DaikinTree = class DaikinTree extends DDSElement {
+	constructor(..._args) {
+		super(..._args);
+		this.selectable = false;
+		this.selectedItems = [];
+	}
+	static {
+		this.styles = css`
+    ${unsafeCSS(tailwind_default)}
+
+    :host {
+      display: block;
     }
-    event.stopPropagation();
-    this.selectedItems = this.getSelectedItems();
-    this.dispatchEvent(new Event("change", { bubbles: true }));
-  }
-  render() {
-    return html`<div role="tree" @mousedown=${this._handleMouseDown}>
+  `;
+	}
+	_handleMouseDown(event) {
+		if (event.detail >= 2) event.preventDefault();
+	}
+	_handleSlotChange() {
+		this._children.forEach((child) => child.level = 0);
+		this.selectItems(this.selectedItems);
+	}
+	_handleTreeMoveFocus(event) {
+		handleTreeMoveFocusRoot(event, this._children);
+	}
+	_handleTreeSelect(event) {
+		if (!this.selectable) return;
+		event.stopPropagation();
+		const target = event.target;
+		this.selectedItems = [target.value];
+		this.dispatchEvent(new Event("change", { bubbles: true }));
+	}
+	_handleTreeUnselect(event) {
+		if (!this.selectable) return;
+		event.stopPropagation();
+		this.selectedItems = this.getSelectedItems();
+		this.dispatchEvent(new Event("change", { bubbles: true }));
+	}
+	render() {
+		return html`<div role="tree" @mousedown=${this._handleMouseDown}>
       <slot
         @slotchange=${this._handleSlotChange}
         @tree-move-focus=${this._handleTreeMoveFocus}
@@ -61,53 +55,39 @@ let DaikinTree = class extends DDSElement {
         @tree-unselect=${this._handleTreeUnselect}
       ></slot>
     </div>`;
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("selectedItems")) {
-      this.selectItems(this.selectedItems);
-    }
-  }
-  /**
-   * Calls `selectItems` for the tree sections and tree items of the child elements in the slot.
-   *
-   * @param value Tree item value.
-   * @private
-   */
-  selectItems(values) {
-    this._children.forEach((child) => child.selectItems(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 selected sections and items (if any). `[]` if there is none.
-   * @private
-   */
-  getSelectedItems() {
-    return Array.from(
-      new Set(this._children.flatMap((child) => child.getSelectedItems()))
-    );
-  }
-};
-DaikinTree.styles = css`
-    ${unsafeCSS(tailwindStyles)}
-
-    :host {
-      display: block;
-    }
-  `;
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinTree.prototype, "selectable", 2);
-__decorateClass([
-  property({ type: Array, attribute: false })
-], DaikinTree.prototype, "selectedItems", 2);
-__decorateClass([
-  queryAssignedElements({ selector: "daikin-tree-section,daikin-tree-item" })
-], DaikinTree.prototype, "_children", 2);
-DaikinTree = __decorateClass([
-  ddsElement("daikin-tree")
-], DaikinTree);
-export {
-  DaikinTree
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("selectedItems")) this.selectItems(this.selectedItems);
+	}
+	/**
+	* Calls `selectItems` for the tree sections and tree items of the child elements in the slot.
+	*
+	* @param value Tree item value.
+	* @private
+	*/
+	selectItems(values) {
+		this._children.forEach((child) => child.selectItems(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 selected sections and items (if any). `[]` if there is none.
+	* @private
+	*/
+	getSelectedItems() {
+		return Array.from(new Set(this._children.flatMap((child) => child.getSelectedItems())));
+	}
 };
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinTree.prototype, "selectable", void 0);
+__decorate([property$1({
+	type: Array,
+	attribute: false
+})], DaikinTree.prototype, "selectedItems", void 0);
+__decorate([queryAssignedElements({ selector: "daikin-tree-section,daikin-tree-item" })], DaikinTree.prototype, "_children", void 0);
+DaikinTree = __decorate([ddsElement("daikin-tree")], DaikinTree);
+//#endregion
+export { DaikinTree };

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

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

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

@@ -1,124 +1,120 @@
-import { cva } from "class-variance-authority";
-import { unsafeCSS, css, html } from "lit";
-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 __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 { emitTreeSelect, 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;
-};
-const cvaTreeChildren = cva(
-  [
-    "flex",
-    "items-center",
-    "w-full",
-    "text-(length:--dds-font-size-label-text)",
-    "py-(--dds-padding-30)",
-    "px-(--dds-padding-40)",
-    "pl-[calc((var(--level)+1)*(var(--dds-padding-40)))]",
-    "natural-break",
-    "focus-visible:outline-solid",
-    "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: [
-          "[--color-base:transparent]",
-          "hover:[--color-base:var(--dds-color-common-surface-hover)]",
-          "active:[--color-base:var(--dds-color-common-surface-press)]"
-        ],
-        true: [
-          "[--color-base:var(--dds-color-common-surface-selected-default)]",
-          "hover:[--color-base:var(--dds-color-common-surface-selected-hover)]",
-          "active:[--color-base:var(--dds-color-common-surface-selected-press)]"
-        ]
-      },
-      icon: {
-        false: ["before:size-(--dds-icon)", "before:flex-none"],
-        true: [
-          "before:icon-[daikin--chevron-right]",
-          "before:size-(--dds-icon)",
-          "before:transition-all",
-          "before:flex-none",
-          "before:self-start"
-        ]
-      },
-      open: {
-        false: [],
-        true: ["before:rotate-90"]
-      }
-    }
-  }
-);
-let DaikinTreeItem = class extends DDSElement {
-  constructor() {
-    super();
-    this.value = "";
-    this.disabled = false;
-    this.selected = false;
-    this.level = 0;
-    this._focusableRef = createRef();
-    this.addEventListener("click", (event) => {
-      if (this.disabled) {
-        event.stopImmediatePropagation();
-      }
-    });
-  }
-  get _selected() {
-    return this.selected && !this.disabled;
-  }
-  _handleKeyDown(event) {
-    if (!isSimpleKeyEvent(event)) {
-      return;
-    }
-    if (!this.disabled && ["Enter", " "].includes(event.key)) {
-      event.preventDefault();
-      emitTreeSelect(this);
-      return;
-    }
-    const direction = getDirectionFromKey(event.key);
-    if (!direction) {
-      return;
+import { emitTreeMoveFocus, emitTreeSelect, emitTreeUnselect, getDirectionFromKey } from "../tree/common.js";
+import { css, html, unsafeCSS } from "lit";
+import { cva } from "class-variance-authority";
+import { createRef, ref } from "lit/directives/ref.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+//#region src/components/tree-item/daikin-tree-item.ts
+var cvaTreeChildren = cva([
+	"flex",
+	"items-center",
+	"w-full",
+	"text-(length:--dds-font-size-label-text)",
+	"py-(--dds-padding-30)",
+	"px-(--dds-padding-40)",
+	"pl-[calc((var(--level)+1)*(var(--dds-padding-40)))]",
+	"natural-break",
+	"focus-visible:outline-solid",
+	"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: [
+			"[--color-base:transparent]",
+			"hover:[--color-base:var(--dds-color-common-surface-hover)]",
+			"active:[--color-base:var(--dds-color-common-surface-press)]"
+		],
+		true: [
+			"[--color-base:var(--dds-color-common-surface-selected-default)]",
+			"hover:[--color-base:var(--dds-color-common-surface-selected-hover)]",
+			"active:[--color-base:var(--dds-color-common-surface-selected-press)]"
+		]
+	},
+	icon: {
+		false: ["before:size-(--dds-icon)", "before:flex-none"],
+		true: [
+			"before:icon-[daikin--chevron-right]",
+			"before:size-(--dds-icon)",
+			"before:transition-all",
+			"before:flex-none",
+			"before:self-start"
+		]
+	},
+	open: {
+		false: [],
+		true: ["before:rotate-90"]
+	}
+} });
+var DaikinTreeItem = class DaikinTreeItem extends DDSElement {
+	static {
+		this.styles = css`
+    ${unsafeCSS(tailwind_default)}
+
+    :host {
+      display: block;
+
+      --ddc-tree-item-min-h: var(--dds-input-height, 3rem);
+      --ddc-tree-item-padding-y: var(--dds-padding-30);
     }
-    event.preventDefault();
-    if (direction !== "right") {
-      emitTreeMoveFocus(this, direction);
+
+    :host([data-density="compact"]),
+    :host-context([data-density="compact"]) {
+      --ddc-tree-item-min-h: calc(var(--dds-input-height) + 4px);
+      --ddc-tree-item-padding-y: var(--dds-padding-30);
     }
-  }
-  render() {
-    return html`<div
+  `;
+	}
+	get _selected() {
+		return this.selected && !this.disabled;
+	}
+	_handleKeyDown(event) {
+		if (!isSimpleKeyEvent(event)) return;
+		if (!this.disabled && ["Enter", " "].includes(event.key)) {
+			event.preventDefault();
+			emitTreeSelect(this);
+			return;
+		}
+		const direction = getDirectionFromKey(event.key);
+		if (!direction) return;
+		event.preventDefault();
+		if (direction !== "right") emitTreeMoveFocus(this, direction);
+	}
+	constructor() {
+		super();
+		this.value = "";
+		this.disabled = false;
+		this.selected = false;
+		this.level = 0;
+		this._focusableRef = createRef();
+		this.addEventListener("click", (event) => {
+			if (this.disabled) event.stopImmediatePropagation();
+		});
+	}
+	render() {
+		return html`<div
       ${ref(this._focusableRef)}
       part="item"
       class=${cvaTreeChildren({
-      disabled: this.disabled,
-      selected: this._selected,
-      icon: false,
-      open: false
-    })}
+			disabled: this.disabled,
+			selected: this._selected,
+			icon: false,
+			open: false
+		})}
       role="treeitem"
       aria-disabled=${this.disabled}
       aria-selected=${this._selected}
@@ -137,85 +133,62 @@ let DaikinTreeItem = class extends DDSElement {
         </span>
       </div>
     </div>`;
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("disabled")) {
-      if (this.disabled && changedProperties.get("disabled") === false) {
-        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
-   */
-  selectItems(values) {
-    this.selected = !this.disabled && values.includes(this.value);
-  }
-  /**
-   * Returns `[this.value]` if selected, or `[]` if not selected.
-   *
-   * @returns `[this.value]` if selected. `[]` if not selected.
-   * @private
-   */
-  getSelectedItems() {
-    return !this.disabled && this.selected ? [this.value] : [];
-  }
-};
-DaikinTreeItem.styles = css`
-    ${unsafeCSS(tailwindStyles)}
-
-    :host {
-      display: block;
-
-      --ddc-tree-item-min-h: var(--dds-input-height, 3rem);
-      --ddc-tree-item-padding-y: var(--dds-padding-30);
-    }
-
-    :host([data-density="compact"]),
-    :host-context([data-density="compact"]) {
-      --ddc-tree-item-min-h: calc(var(--dds-input-height) + 4px);
-      --ddc-tree-item-padding-y: var(--dds-padding-30);
-    }
-  `;
-__decorateClass([
-  property({ type: String })
-], DaikinTreeItem.prototype, "value", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinTreeItem.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinTreeItem.prototype, "selected", 2);
-__decorateClass([
-  property({ type: Number, attribute: false })
-], DaikinTreeItem.prototype, "level", 2);
-DaikinTreeItem = __decorateClass([
-  ddsElement("daikin-tree-item")
-], DaikinTreeItem);
-export {
-  DaikinTreeItem,
-  cvaTreeChildren
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("disabled")) {
+			if (this.disabled && changedProperties.get("disabled") === false) emitTreeUnselect(this);
+		}
+	}
+	/**
+	* Focuses on the inner button.
+	*
+	* @param options focus options
+	*/
+	focus(options) {
+		this._focusableRef.value?.focus(options);
+	}
+	/**
+	* Focuses on the inner button.
+	* This is provided to ensure consistency of the interface.
+	*
+	* @param options focus options
+	* @private
+	*/
+	focusLastItem(options) {
+		this._focusableRef.value?.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
+	*/
+	selectItems(values) {
+		this.selected = !this.disabled && values.includes(this.value);
+	}
+	/**
+	* Returns `[this.value]` if selected, or `[]` if not selected.
+	*
+	* @returns `[this.value]` if selected. `[]` if not selected.
+	* @private
+	*/
+	getSelectedItems() {
+		return !this.disabled && this.selected ? [this.value] : [];
+	}
 };
+__decorate([property({ type: String })], DaikinTreeItem.prototype, "value", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], DaikinTreeItem.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], DaikinTreeItem.prototype, "selected", void 0);
+__decorate([property({
+	type: Number,
+	attribute: false
+})], DaikinTreeItem.prototype, "level", void 0);
+DaikinTreeItem = __decorate([ddsElement("daikin-tree-item")], DaikinTreeItem);
+//#endregion
+export { DaikinTreeItem, cvaTreeChildren };

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

@@ -1,5 +1,2 @@
 import { DaikinTreeItem, cvaTreeChildren } from "./daikin-tree-item.js";
-export {
-  DaikinTreeItem,
-  cvaTreeChildren
-};
+export { DaikinTreeItem, cvaTreeChildren };