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

package/dist/es-dev/components/table/daikin-table.js

@@ -0,0 +1,261 @@
+import { cva } from "class-variance-authority";
+import { css, unsafeCSS, LitElement, html, nothing } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { repeat } from "lit/directives/repeat.js";
+import tailwindStyles from "../../tailwind.css.js";
+import "../checkbox/daikin-checkbox.js";
+import "../table-cell/daikin-table-cell.js";
+import "../table-header-cell/daikin-table-header-cell.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 defaultSort = (a, b, key) => String(a[key]).localeCompare(String(b[key]));
+const cvaRow = cva(
+  [
+    "border-b",
+    "border-b-system-element-divider-secondary",
+    "focus-visible:outline",
+    "focus-visible:outline-2",
+    "focus-visible:-outline-offset-2",
+    "focus-visible:outline-system-state-focus"
+  ],
+  {
+    variants: {
+      selected: {
+        false: ["hover:bg-system-background-surface-hover"],
+        true: [
+          "bg-system-background-surface-selected",
+          "hover:bg-system-background-surface-selectedHover"
+        ]
+      }
+    }
+  }
+);
+let DaikinTable = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.headers = [];
+    this.rows = [];
+    this.selectable = false;
+    this.sortable = false;
+    this.selection = [];
+    this.order = null;
+    this.sort = null;
+    this.sortFunction = null;
+    this._bulkRowsCheckState = "unchecked";
+    this._currentView = [];
+  }
+  _updateCurrentView() {
+    var _a;
+    const sort = this.sort;
+    if (!sort || this.sortFunction === false) {
+      this._currentView = Array.from(this.rows);
+      return;
+    }
+    const sortFunction = (typeof this.sortFunction === "object" ? (_a = this.sortFunction) == null ? void 0 : _a[sort] : this.sortFunction) ?? defaultSort;
+    this._currentView = this.rows.toSorted((a, b) => sortFunction(a, b, sort));
+    if (this.order === "desc") {
+      this._currentView.reverse();
+    }
+  }
+  _emitChangeCheckEvent() {
+    this.dispatchEvent(new Event("change-check"));
+  }
+  _handleHeaderCheckboxChange() {
+    switch (this._bulkRowsCheckState) {
+      case "checked":
+        this.selection = [];
+        break;
+      default:
+        this.selection = this._currentView.map(({ id }) => id);
+        break;
+    }
+    this._emitChangeCheckEvent();
+  }
+  _handleBodyCheckboxChange(event) {
+    const { name: id } = event.target;
+    if (this.selection.includes(id)) {
+      this.selection = this.selection.filter((selectedId) => selectedId !== id);
+    } else {
+      this.selection = [...this.selection, id];
+    }
+    this._emitChangeCheckEvent();
+  }
+  _handleClickSort(event, key) {
+    event.stopPropagation();
+    if (this.sort === key) {
+      this.order = this.order === "asc" ? "desc" : "asc";
+    } else {
+      this.sort = key;
+      this.order = "asc";
+    }
+    this.dispatchEvent(new Event("change-sort"));
+  }
+  _updateHeaderCheckboxState() {
+    const rowIdSet = new Set(this.rows.map(({ id }) => id));
+    this.selection = this.selection.filter((id) => rowIdSet.has(id));
+    const selectionCount = this.selection.length;
+    this._bulkRowsCheckState = this._currentView.length === selectionCount ? "checked" : selectionCount ? "indeterminate" : "unchecked";
+  }
+  render() {
+    const createHeaderRow = () => repeat(
+      this.headers,
+      ({ key }) => key,
+      ({ key, label, alignment, sortable }) => html`<th
+            class="h-full p-0"
+            aria-sort=${ifDefined(
+        this.sortable && this.sort === key ? this.order === "asc" ? "ascending" : "descending" : void 0
+      )}
+          >
+            <slot
+              name=${`header:${key}`}
+              @change-sort=${(event) => this._handleClickSort(event, key)}
+            >
+              <daikin-table-header-cell
+                alignment=${alignment ?? "left"}
+                ?sortable=${this.sortable && sortable}
+              >
+                ${label}
+              </daikin-table-header-cell>
+            </slot>
+          </th>`
+    );
+    const createRow = (item) => repeat(
+      this.headers,
+      ({ key }) => `${item.id}:${key}`,
+      ({ key, alignment }) => html`<td class="h-full p-0">
+            <slot name=${`cell:${item.id}:${key}`}>
+              <daikin-table-cell alignment=${alignment ?? "left"}>
+                ${item[key]}
+              </daikin-table-cell>
+            </slot>
+          </td>`
+    );
+    return html`<div class="flex flex-col gap-6 w-full font-daikinSerif">
+      <table class="w-full table-fixed">
+        <thead>
+          <tr class="border-b border-b-system-element-divider-primary">
+            ${this.selectable ? html`<td class="w-12 p-0">
+                  <span
+                    class="flex items-center justify-center size-full min-h-12"
+                  >
+                    <daikin-checkbox
+                      name="allItem"
+                      .checkState=${this._bulkRowsCheckState}
+                      label="Select all"
+                      label-position="hidden"
+                      @change=${this._handleHeaderCheckboxChange}
+                    ></daikin-checkbox>
+                  </span>
+                </td>` : nothing}
+            ${createHeaderRow()}
+          </tr>
+        </thead>
+        <tbody>
+          ${repeat(
+      this._currentView,
+      ({ id }) => id,
+      (row) => html`<tr
+                class=${cvaRow({
+        selected: this.selectable && !!this.selection.find((id) => id === row.id)
+      })}
+              >
+                ${this.selectable ? html`<td class="w-12 p-0">
+                      <span
+                        class="flex justify-center items-center size-full min-h-12"
+                      >
+                        <daikin-checkbox
+                          name=${row.id}
+                          .checkState=${this.selection.includes(row.id) ? "checked" : "unchecked"}
+                          label="Select row"
+                          label-position="hidden"
+                          @change=${this._handleBodyCheckboxChange}
+                        ></daikin-checkbox>
+                      </span>
+                    </td>` : nothing}
+                ${createRow(row)}
+              </tr>`
+    )}
+        </tbody>
+      </table>
+    </div>`;
+  }
+  willUpdate(changedProperties) {
+    const viewChanged = changedProperties.has("rows") || changedProperties.has("sort") || changedProperties.has("order") || changedProperties.has("sortFunction");
+    const selectionChanged = changedProperties.has("selection");
+    if (viewChanged) {
+      this._updateCurrentView();
+    }
+    if (viewChanged || selectionChanged) {
+      this._updateHeaderCheckboxState();
+    }
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("headers")) {
+      {
+        if (this.headers.length !== [...new Set(this.headers.map(({ key }) => key))].length) {
+          console.warn("The `key` values in `headers` are duplicated");
+        }
+      }
+    }
+    if (changedProperties.has("rows")) {
+      {
+        if (this.rows.length !== [...new Set(this.rows.map(({ id }) => id))].length) {
+          console.warn("The `id` values in `rows` are duplicated");
+        }
+      }
+    }
+  }
+};
+DaikinTable.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  property({ type: Array, attribute: false })
+], DaikinTable.prototype, "headers", 2);
+__decorateClass([
+  property({ type: Array, attribute: false })
+], DaikinTable.prototype, "rows", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTable.prototype, "selectable", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTable.prototype, "sortable", 2);
+__decorateClass([
+  property({ type: Array, attribute: false })
+], DaikinTable.prototype, "selection", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinTable.prototype, "order", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinTable.prototype, "sort", 2);
+__decorateClass([
+  property({ attribute: false })
+], DaikinTable.prototype, "sortFunction", 2);
+__decorateClass([
+  state()
+], DaikinTable.prototype, "_bulkRowsCheckState", 2);
+__decorateClass([
+  state()
+], DaikinTable.prototype, "_currentView", 2);
+DaikinTable = __decorateClass([
+  customElement("daikin-table")
+], DaikinTable);
+export {
+  DaikinTable
+};

package/dist/es-dev/components/table/index.d.ts

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

package/dist/es-dev/components/table/index.js

@@ -0,0 +1,4 @@
+import { DaikinTable } from "./daikin-table.js";
+export {
+  DaikinTable
+};

package/dist/es-dev/components/table-cell/daikin-table-cell.d.ts

@@ -0,0 +1,41 @@
+import { LitElement } from 'lit';
+import { MergeVariantProps } from "../../type-utils.js";
+declare const cvaCell: (props?: ({
+    alignment?: "right" | "left" | "center" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type TableCellVariantProps = MergeVariantProps<typeof cvaCell>;
+/**
+ * This is a component that functions as an element to be placed on the daikin-table. When you want to insert a subtitle into a cell, or when you want to use something other than plain text (e.g. a button), you need to use this component.
+ *
+ * This is a component used as a slot in the daikin-table, but in order to do so, you need to specify the appropriate slot attribute. For more information, please check the daikin-table component.
+ *
+ * Hierarchy:
+ * - `daikin-table` > `daikin-table-cell`
+ *
+ * @slot - A slot for the table cell.
+ * @slot subtitle - This is a subtitle element that is inserted into a cell.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-table-cell slot="cell:key:id">
+ *   Table cell label
+ *   <span slot="subtitle">Table cell subtitle</span>
+ * </daikin-table-cell>
+ * ```
+ */
+export declare class DaikinTableCell extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Specify the direction of cell alignment.
+     * This is not normally something that users need to specify.
+     */
+    alignment: TableCellVariantProps["alignment"];
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-table-cell": DaikinTableCell;
+    }
+}
+export default DaikinTableCell;

package/dist/es-dev/components/table-cell/daikin-table-cell.js

@@ -0,0 +1,69 @@
+import { cva } from "class-variance-authority";
+import { css, unsafeCSS, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.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;
+};
+const cvaCell = cva(
+  [
+    "flex",
+    "flex-col",
+    "gap-1",
+    "justify-center",
+    "size-full",
+    "min-h-12",
+    "px-4",
+    "py-3",
+    "text-system-element-text-primary"
+  ],
+  {
+    variants: {
+      alignment: {
+        left: ["items-start", "text-left"],
+        right: ["items-end", "text-end"],
+        center: ["items-center", "text-center"]
+      }
+    }
+  }
+);
+let DaikinTableCell = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.alignment = "left";
+  }
+  render() {
+    return html`<span class=${cvaCell({ alignment: this.alignment })}>
+      <slot></slot>
+      <slot
+        name="subtitle"
+        class="text-system-element-text-secondary text-xs"
+      ></slot>
+    </span>`;
+  }
+};
+DaikinTableCell.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+      width: 100%;
+      min-height: 3rem;
+    }
+  `;
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinTableCell.prototype, "alignment", 2);
+DaikinTableCell = __decorateClass([
+  customElement("daikin-table-cell")
+], DaikinTableCell);
+export {
+  DaikinTableCell
+};

package/dist/es-dev/components/table-cell/index.d.ts

@@ -0,0 +1 @@
+export * from "./daikin-table-cell.js";

package/dist/es-dev/components/table-cell/index.js

@@ -0,0 +1,4 @@
+import { DaikinTableCell } from "./daikin-table-cell.js";
+export {
+  DaikinTableCell
+};

package/dist/es-dev/components/table-header-cell/daikin-table-header-cell.d.ts

@@ -0,0 +1,50 @@
+import { LitElement } from 'lit';
+import { MergeVariantProps } from "../../type-utils.js";
+declare const cvaHeaderCell: (props?: ({
+    alignment?: "right" | "left" | "center" | null | undefined;
+    sortable?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type TableHeaderCellVariantProps = MergeVariantProps<typeof cvaHeaderCell>;
+/**
+ * `daikin-table-header-cell` is a component that functions as a cell in the header row of `daikin-table`.
+ * By assigning this component to a slot in `daikin-table`, you can display advanced content such as subtitles and icons.
+ *
+ * This component is created for `daikin-table` and requires the appropriate slot name to be specified to use it.
+ * For more information, please refer to the `daikin-table` component.
+ *
+ * Hierarchy:
+ * - `daikin-table` > `daikin-table-header-cell`
+ *
+ * @fires change-sort - Fires when the sort button is clicked. See `sortable` property for details.
+ *
+ * @slot - A slot for the table header cell.
+ * @slot left-icon - A slot for an icon to be placed to the left of the text. Place `daikin-icon` or something similar.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-table-header-cell slot="header:key">
+ *   Table header cell label
+ * </daikin-table-header-cell>
+ * ```
+ */
+export declare class DaikinTableHeaderCell extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Alignment of cell contents.
+     */
+    alignment: TableHeaderCellVariantProps["alignment"];
+    /**
+     * Whether to display as a sortable column or not.
+     * When set to `true`, it becomes clickable and the sort icon is displayed on the right.
+     * It also makes the component emit the `change-sort` event when clicked.
+     */
+    sortable: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-table-header-cell": DaikinTableHeaderCell;
+    }
+}
+export default DaikinTableHeaderCell;

package/dist/es-dev/components/table-header-cell/daikin-table-header-cell.js

@@ -0,0 +1,94 @@
+import { cva } from "class-variance-authority";
+import { css, unsafeCSS, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.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;
+};
+const cvaHeaderCell = cva(
+  [
+    "flex",
+    "items-center",
+    "gap-2",
+    "size-full",
+    "min-h-12",
+    "px-4",
+    "py-3",
+    "text-system-element-text-primary",
+    "font-bold"
+  ],
+  {
+    variants: {
+      alignment: {
+        left: ["justify-start", "text-left"],
+        right: ["justify-end", "text-end"],
+        center: ["justify-center", "text-center"]
+      },
+      sortable: {
+        false: [],
+        true: [
+          "hover:bg-system-background-surface-hover",
+          "active:bg-system-background-surface-press",
+          "focus-visible:outline",
+          "focus-visible:outline-2",
+          "focus-visible:-outline-offset-2",
+          "focus-visible:outline-system-state-focus",
+          "after:flex-none",
+          "after:size-6",
+          "after:text-system-element-text-primary",
+          "after:i-daikin-sort"
+        ]
+      }
+    }
+  }
+);
+let DaikinTableHeaderCell = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.alignment = "left";
+    this.sortable = false;
+  }
+  render() {
+    const headerCellCN = cvaHeaderCell({
+      alignment: this.alignment,
+      sortable: this.sortable
+    });
+    const content = html`<slot name="left-icon" class="icon-size-6"></slot>
+      <slot></slot>`;
+    return this.sortable ? html`<button
+          type="button"
+          class=${headerCellCN}
+          @click=${() => this.dispatchEvent(new Event("change-sort", { bubbles: true }))}
+        >
+          ${content}
+        </button>` : html`<span class=${headerCellCN}>${content}</span>`;
+  }
+};
+DaikinTableHeaderCell.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  `;
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinTableHeaderCell.prototype, "alignment", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTableHeaderCell.prototype, "sortable", 2);
+DaikinTableHeaderCell = __decorateClass([
+  customElement("daikin-table-header-cell")
+], DaikinTableHeaderCell);
+export {
+  DaikinTableHeaderCell
+};

package/dist/es-dev/components/table-header-cell/index.d.ts

@@ -0,0 +1 @@
+export * from "./daikin-table-header-cell.js";

package/dist/es-dev/components/table-header-cell/index.js

@@ -0,0 +1,4 @@
+import { DaikinTableHeaderCell } from "./daikin-table-header-cell.js";
+export {
+  DaikinTableHeaderCell
+};

package/dist/es-dev/components/tabs/daikin-tabs.d.ts

@@ -2,7 +2,6 @@ import { LitElement, PropertyValues } from 'lit';
 /**
  * The tab group component manages a group of tabs and switches the content displayed using the panel switcher component.
  * It allows users to navigate between different sections of content by clicking on individual tabs.
- * Tab groups do not provide styles; developers must apply styles to the wrapper of the tabs (`tablist` part) and to the panel switcher(s).
  *
  * > [!WARNING]
  * > At least one tab must be available (that means, the tab must be present and enabled).
@@ -18,18 +17,15 @@ import { LitElement, PropertyValues } from 'lit';
  * @slot - A slot for tab buttons. Place `daikin-tab` elements here.
  * @slot panels - A slot for tab panels component. Place a `daikin-tab-panels` element here.
  *
- * @csspart tablist - The container element for the default (tab list) slot. Has "tablist" role.
- *
  * @example
  *
  * ```js
  * import "@daikin-oss/design-system-web-components/components/tab/index.js";
  * import "@daikin-oss/design-system-web-components/components/tab-group/index.js";
- * import "@daikin-oss/design-system-web-components/components/panel-switcher/index.js";
+ * import "@daikin-oss/design-system-web-components/components/tab-panels/index.js";
  * ```
  *
  * ```html
- * <!-- See storybook for styling tab group. You'll need `::part(tablist)` to style the tab container. -->
  * <daikin-tabs value="foo">
  *   <daikin-tab value="foo">Foo tab</daikin-tab>
  *   <daikin-tab value="bar">Bar tab</daikin-tab>

package/dist/es-dev/components/tabs/daikin-tabs.js

@@ -178,7 +178,7 @@ let DaikinTabs = class extends LitElement {
   render() {
     return html`
       <div
-        part="tablist"
+        class="flex flex-nowrap w-full p-[3px] overflow-auto relative before:absolute before:h-[1px] before:inset-[3px] before:top-auto before:bg-system-element-divider-secondary"
         role="tablist"
         @click=${this._handleTabClick}
         @keydown=${this._handleKeyDown}
@@ -198,6 +198,11 @@ let DaikinTabs = class extends LitElement {
 };
 DaikinTabs.styles = css`
     ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+      width: 100%;
+    }
   `;
 __decorateClass([
   property({ type: String, reflect: true })

package/dist/es-dev/components/tabs/index.d.ts

@@ -1 +1 @@
-export * from './daikin-tabs';
+export * from "./daikin-tabs.js";