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

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

@@ -0,0 +1,245 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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 daikinTreeItem = require("../tree-item/daikin-tree-item.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;
+};
+exports.DaikinTreeSection = class DaikinTreeSection extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.disabled = false;
+    this.selectable = false;
+    this.selected = false;
+    this.open = false;
+    this.level = 0;
+    this._focusableRef = ref_js.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;
+    }
+    common.emitTreeSelect(this);
+  }
+  _handleSlotChange() {
+    this._updateChildrenLevel();
+    this._updateSections();
+  }
+  _handleTreeMoveFocus(event) {
+    common.handleTreeMoveFocusSection(this, event, this._children);
+  }
+  _handleKeyDown(event) {
+    var _a;
+    if (!isSimpleKey.isSimpleKeyEvent(event)) {
+      return;
+    }
+    if (!this.disabled && ["Enter", " "].includes(event.key)) {
+      event.preventDefault();
+      this._handleClick();
+      if (this.selectable) {
+        common.emitTreeSelect(this);
+      }
+      return;
+    }
+    const direction = common.getDirectionFromKey(event.key);
+    if (!direction) {
+      return;
+    }
+    event.preventDefault();
+    switch (direction) {
+      case "up":
+        common.emitTreeMoveFocus(this, "up");
+        break;
+      case "down": {
+        const nextItem = this.open && this._children[0];
+        if (nextItem) {
+          nextItem.focus();
+        } else {
+          common.emitTreeMoveFocus(this, "down");
+        }
+        break;
+      }
+      case "left":
+        if (this._open) {
+          this.open = false;
+        } else {
+          common.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 lit.html`<div
+      role="treeitem"
+      aria-expanded=${this._open}
+      aria-disabled=${this.disabled}
+      aria-selected=${this._selected}
+    >
+      <div
+        ${ref_js.ref(this._focusableRef)}
+        class=${daikinTreeItem.cvaTreeChildren({
+      selected: this._selected,
+      disabled: this.disabled,
+      icon: true,
+      open: this._open
+    })}
+        tabindex=${ifDefined_js.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);
+        common.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;
+  }
+};
+exports.DaikinTreeSection.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinTreeSection.prototype, "value", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinTreeSection.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, attribute: false })
+], exports.DaikinTreeSection.prototype, "selectable", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinTreeSection.prototype, "selected", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinTreeSection.prototype, "open", 2);
+__decorateClass([
+  decorators_js.property({ type: Number, attribute: false })
+], exports.DaikinTreeSection.prototype, "level", 2);
+__decorateClass([
+  decorators_js.queryAssignedElements({ selector: "daikin-tree-section,daikin-tree-item" })
+], exports.DaikinTreeSection.prototype, "_children", 2);
+__decorateClass([
+  decorators_js.queryAssignedElements({ selector: "daikin-tree-section" })
+], exports.DaikinTreeSection.prototype, "_sections", 2);
+exports.DaikinTreeSection = __decorateClass([
+  decorators_js.customElement("daikin-tree-section")
+], exports.DaikinTreeSection);

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

@@ -0,0 +1,119 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * The tree section component that can be used within `daikin-tree` component.
+ *
+ * The tree section accepts either a tree item or a tree section. By stacking tree sections, you can create a multi-level structure.
+ *
+ * Hierarchy:
+ * - `daikin-tree` > `daikin-tree-section` > `daikin-tree-item`
+ * - `daikin-tree` > `daikin-tree-section` > `daikin-tree-section` ...
+ *
+ * @fires toggle - _Cancellable._ A custom event emitted when the user clicks the header.
+ * @fires tree-move-focus - _Internal use._ A custom event used to move the focus within a tree.
+ *
+ * @slot - A slot for tree children. Place `daikin-tree-section` and `daikin-tree-item` elements here.
+ * @slot label - A slot for section header content. Place a `span` element here.
+ *
+ * @example
+ *
+ * ```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-section>
+ *   <span slot="label">Tree section</span>
+ *   <daikin-tree-item>Tree item 1</daikin-tree-item>
+ *   <daikin-tree-item>Tree item 2</daikin-tree-item>
+ *   <daikin-tree-item>Tree item 3</daikin-tree-item>
+ * </daikin-tree-section>
+ * ```
+ */
+export declare class DaikinTreeSection extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Value of the tree section.
+     */
+    value: string;
+    /**
+     * Whether the tree section is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether or not to enable tree selection.
+     * Controlled by `daikin-tree`.
+     *
+     * @private
+     */
+    selectable: 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;
+    /**
+     * Whether the tree section is open.
+     * Treated as `false` when `disabled` is `true`.
+     */
+    open: boolean;
+    /**
+     * _Internal use._
+     * The current nesting depth when the root's children are 0.
+     * Automatically set by the parent.
+     *
+     * @private
+     */
+    level: number;
+    private readonly _children;
+    private readonly _sections;
+    private readonly _focusableRef;
+    private get _open();
+    private get _selected();
+    private _updateChildrenLevel;
+    private _updateSections;
+    private _handleClick;
+    private _handleSlotChange;
+    private _handleTreeMoveFocus;
+    private _handleKeyDown;
+    render(): import('lit-html').TemplateResult<1>;
+    protected updated(changedProperties: PropertyValues): void;
+    /**
+     * Focuses on the inner button.
+     *s
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
+    /**
+     * 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?: FocusOptions): void;
+    /**
+     * 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: 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-section": DaikinTreeSection;
+    }
+}

package/dist/cjs-dev/components/tree-section/index.cjs

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

package/dist/cjs-dev/components/tree-section/index.d.cts

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

package/dist/cjs-dev/controllers/floating-ui-auto-update.cjs

@@ -61,6 +61,12 @@ class FloatingUIAutoUpdateController {
     };
     _host.addController(this);
   }
+  get floatingElement() {
+    return this._floatingElement;
+  }
+  get referenceElement() {
+    return this._referenceElement;
+  }
   refFloating() {
     return ref_js.ref(this._refCallbackFloating);
   }

package/dist/cjs-dev/controllers/{floating-ui-auto-update.d.ts → floating-ui-auto-update.d.cts}

@@ -16,6 +16,8 @@ export declare class FloatingUIAutoUpdateController<T extends ReactiveController
     constructor(_host: T, _isOptionsUpdated?: ((current: Partial<ComputePositionConfig>, previous: Partial<ComputePositionConfig>) => boolean) | undefined);
     private readonly _refCallbackFloating;
     private readonly _refCallbackReference;
+    get floatingElement(): HTMLElement | undefined;
+    get referenceElement(): Element | undefined;
     refFloating(): import('lit-html/directive.js').DirectiveResult<typeof import('lit-html/directives/ref.js').RefDirective>;
     refReference(): import('lit-html/directive.js').DirectiveResult<typeof import('lit-html/directives/ref.js').RefDirective>;
     directive(options: Partial<ComputePositionConfig>, enabled?: boolean): import('lit-html/directive.js').DirectiveResult<import('lit-html/directive.js').DirectiveClass>;

package/dist/cjs-dev/index.cjs

@@ -1,19 +1,24 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const colors = require("./colors.cjs");
 const daikinAccordion = require("./components/accordion/daikin-accordion.cjs");
 const daikinAccordionItem = require("./components/accordion-item/daikin-accordion-item.cjs");
 const daikinBreadcrumb = require("./components/breadcrumb/daikin-breadcrumb.cjs");
 const daikinBreadcrumbItem = require("./components/breadcrumb-item/daikin-breadcrumb-item.cjs");
 const daikinButton = require("./components/button/daikin-button.cjs");
+const daikinCard = require("./components/card/daikin-card.cjs");
+const daikinCardFooter = require("./components/card-footer/daikin-card-footer.cjs");
+const daikinCardHeader = require("./components/card-header/daikin-card-header.cjs");
 const daikinCheckbox = require("./components/checkbox/daikin-checkbox.cjs");
 const daikinDropdown = require("./components/dropdown/daikin-dropdown.cjs");
 const daikinDropdownItem = require("./components/dropdown-item/daikin-dropdown-item.cjs");
 const daikinIcon = require("./components/icon/daikin-icon.cjs");
+const daikinIconButton = require("./components/icon-button/daikin-icon-button.cjs");
 const daikinInputGroup = require("./components/input-group/daikin-input-group.cjs");
+const daikinLink = require("./components/link/daikin-link.cjs");
 const daikinList = require("./components/list/daikin-list.cjs");
 const daikinListItem = require("./components/list-item/daikin-list-item.cjs");
 const daikinNotification = require("./components/notification/daikin-notification.cjs");
+const daikinPagination = require("./components/pagination/daikin-pagination.cjs");
 const daikinProgressBar = require("./components/progress-bar/daikin-progress-bar.cjs");
 const daikinProgressIndicator = require("./components/progress-indicator/daikin-progress-indicator.cjs");
 const daikinProgressIndicatorItem = require("./components/progress-indicator-item/daikin-progress-indicator-item.cjs");
@@ -21,12 +26,17 @@ const daikinRadio = require("./components/radio/daikin-radio.cjs");
 const daikinSelect = require("./components/select/daikin-select.cjs");
 const daikinTab = require("./components/tab/daikin-tab.cjs");
 const daikinTabPanels = require("./components/tab-panels/daikin-tab-panels.cjs");
+const daikinTable = require("./components/table/daikin-table.cjs");
+const daikinTableCell = require("./components/table-cell/daikin-table-cell.cjs");
+const daikinTableHeaderCell = require("./components/table-header-cell/daikin-table-header-cell.cjs");
 const daikinTabs = require("./components/tabs/daikin-tabs.cjs");
 const daikinTextArea = require("./components/text-area/daikin-text-area.cjs");
 const daikinTextField = require("./components/text-field/daikin-text-field.cjs");
 const daikinToggle = require("./components/toggle/daikin-toggle.cjs");
 const daikinTooltip = require("./components/tooltip/daikin-tooltip.cjs");
-exports.colors = colors.colors;
+const daikinTree = require("./components/tree/daikin-tree.cjs");
+const daikinTreeItem = require("./components/tree-item/daikin-tree-item.cjs");
+const daikinTreeSection = require("./components/tree-section/daikin-tree-section.cjs");
 Object.defineProperty(exports, "DaikinAccordion", {
   enumerable: true,
   get: () => daikinAccordion.DaikinAccordion
@@ -47,6 +57,18 @@ Object.defineProperty(exports, "DaikinButton", {
   enumerable: true,
   get: () => daikinButton.DaikinButton
 });
+Object.defineProperty(exports, "DaikinCard", {
+  enumerable: true,
+  get: () => daikinCard.DaikinCard
+});
+Object.defineProperty(exports, "DaikinCardFooter", {
+  enumerable: true,
+  get: () => daikinCardFooter.DaikinCardFooter
+});
+Object.defineProperty(exports, "DaikinCardHeader", {
+  enumerable: true,
+  get: () => daikinCardHeader.DaikinCardHeader
+});
 Object.defineProperty(exports, "DaikinCheckbox", {
   enumerable: true,
   get: () => daikinCheckbox.DaikinCheckbox
@@ -64,10 +86,18 @@ Object.defineProperty(exports, "DaikinIcon", {
   get: () => daikinIcon.DaikinIcon
 });
 exports.iconList = daikinIcon.iconList;
+Object.defineProperty(exports, "DaikinIconButton", {
+  enumerable: true,
+  get: () => daikinIconButton.DaikinIconButton
+});
 Object.defineProperty(exports, "DaikinInputGroup", {
   enumerable: true,
   get: () => daikinInputGroup.DaikinInputGroup
 });
+Object.defineProperty(exports, "DaikinLink", {
+  enumerable: true,
+  get: () => daikinLink.DaikinLink
+});
 Object.defineProperty(exports, "DaikinList", {
   enumerable: true,
   get: () => daikinList.DaikinList
@@ -80,6 +110,10 @@ Object.defineProperty(exports, "DaikinNotification", {
   enumerable: true,
   get: () => daikinNotification.DaikinNotification
 });
+Object.defineProperty(exports, "DaikinPagination", {
+  enumerable: true,
+  get: () => daikinPagination.DaikinPagination
+});
 Object.defineProperty(exports, "DaikinProgressBar", {
   enumerable: true,
   get: () => daikinProgressBar.DaikinProgressBar
@@ -108,6 +142,18 @@ Object.defineProperty(exports, "DaikinTabPanels", {
   enumerable: true,
   get: () => daikinTabPanels.DaikinTabPanels
 });
+Object.defineProperty(exports, "DaikinTable", {
+  enumerable: true,
+  get: () => daikinTable.DaikinTable
+});
+Object.defineProperty(exports, "DaikinTableCell", {
+  enumerable: true,
+  get: () => daikinTableCell.DaikinTableCell
+});
+Object.defineProperty(exports, "DaikinTableHeaderCell", {
+  enumerable: true,
+  get: () => daikinTableHeaderCell.DaikinTableHeaderCell
+});
 Object.defineProperty(exports, "DaikinTabs", {
   enumerable: true,
   get: () => daikinTabs.DaikinTabs
@@ -128,3 +174,16 @@ Object.defineProperty(exports, "DaikinTooltip", {
   enumerable: true,
   get: () => daikinTooltip.DaikinTooltip
 });
+Object.defineProperty(exports, "DaikinTree", {
+  enumerable: true,
+  get: () => daikinTree.DaikinTree
+});
+Object.defineProperty(exports, "DaikinTreeItem", {
+  enumerable: true,
+  get: () => daikinTreeItem.DaikinTreeItem
+});
+exports.cvaTreeChildren = daikinTreeItem.cvaTreeChildren;
+Object.defineProperty(exports, "DaikinTreeSection", {
+  enumerable: true,
+  get: () => daikinTreeSection.DaikinTreeSection
+});

package/dist/cjs-dev/index.d.cts

@@ -0,0 +1,2 @@
+export * from "./components/index.cjs";
+export * from "./lit-analyzer-types.cjs";