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

package/dist/es/components/pagination/pagination-utils.d.ts

@@ -0,0 +1,28 @@
+interface Page {
+    type: "page";
+    page: number;
+}
+interface Ellipsis {
+    type: "ellipsis";
+    pages: number[];
+}
+export type PaginationContent = (Page | Ellipsis)[];
+/**
+ * Generates an array of a sequence of numbers in the range `[begin, end)`.
+ *
+ * @param begin The value of the first element in the generated array.
+ * @param end The value of the last element of the generated array + 1.
+ * @returns An array of increasing sequences. Empty if `begin` is greater than or equal to `end`.
+ */
+export declare function sequence(begin: number, end: number): number[];
+export declare function pageSequence(begin: number, end: number): Page[];
+/**
+ * Calculate the display and hidden page items.
+ *
+ * @param total The total pages number.
+ * @param current The current page number.
+ * @param window Number of elements to display in pagination.
+ * @returns {PaginationContent}.
+ */
+export declare function calculatePagination(total: number, current: number, window: number): PaginationContent;
+export {};

package/dist/es/components/pagination/pagination-utils.js

@@ -0,0 +1,50 @@
+function sequence(begin, end) {
+  const length = Math.max(end - begin, 0);
+  return Array.from({ length }, (_, i) => begin + i);
+}
+function pageSequence(begin, end) {
+  return sequence(begin, end).map((page) => ({ type: "page", page }));
+}
+function calculatePagination(total, current, window) {
+  if (total < 1) {
+    total = 1;
+  }
+  if (window < 5) {
+    window = 5;
+  }
+  if (total <= window) {
+    return pageSequence(1, total + 1);
+  }
+  const centerLeft = current - Math.floor((window - 5) / 2);
+  const centerRight = centerLeft + window - 5;
+  if (centerLeft <= 3) {
+    return [
+      ...pageSequence(1, window - 1),
+      { type: "ellipsis", pages: sequence(window - 1, total) },
+      { type: "page", page: total }
+    ];
+  }
+  if (centerRight >= total - 2) {
+    return [
+      { type: "page", page: 1 },
+      { type: "ellipsis", pages: sequence(2, total - (window - 3)) },
+      ...sequence(total - (window - 3), total).map(
+        (value) => ({ type: "page", page: value })
+      ),
+      { type: "page", page: total }
+    ];
+  }
+  return [
+    // Both sides need an ellipsis.
+    { type: "page", page: 1 },
+    { type: "ellipsis", pages: sequence(2, centerLeft) },
+    ...pageSequence(centerLeft, centerRight + 1),
+    { type: "ellipsis", pages: sequence(centerRight + 1, total) },
+    { type: "page", page: total }
+  ];
+}
+export {
+  calculatePagination,
+  pageSequence,
+  sequence
+};

package/dist/es/components/progress-bar/daikin-progress-bar.d.ts

@@ -1,5 +1,5 @@
 import { LitElement, PropertyValues } from 'lit';
-import { MergeVariantProps } from '../../type-utils';
+import { MergeVariantProps } from "../../type-utils.js";
 declare const cvaBar: (props?: ({
     variant?: "error" | "indeterminate" | "inprogress" | "completed" | null | undefined;
     size?: "medium" | "large" | null | undefined;

package/dist/es/components/progress-bar/index.d.ts

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

package/dist/es/components/progress-indicator/index.d.ts

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

package/dist/es/components/progress-indicator-item/daikin-progress-indicator-item.d.ts

@@ -1,12 +1,9 @@
 import { LitElement } from 'lit';
-import { MergeVariantProps } from '../../type-utils';
+import { MergeVariantProps } from "../../type-utils.js";
 declare const cvaContainer: (props?: ({
     status?: "inprogress" | "unfinished" | "finished" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare const cvaLabel: (props?: ({
-    status?: "inprogress" | "unfinished" | "finished" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type ProgressIndicatorItemVariantProps = MergeVariantProps<typeof cvaContainer | typeof cvaLabel>;
+type ProgressIndicatorItemVariantProps = MergeVariantProps<typeof cvaContainer>;
 /**
  * The progress indicator item component is a child element within the `daikin-progress-indicator` component, this represents one of the tasks that the user is working on.
  *

package/dist/es/components/progress-indicator-item/daikin-progress-indicator-item.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
+import { css, unsafeCSS, LitElement, html, nothing } from "lit";
 import { property, customElement } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -22,7 +22,7 @@ const cvaContainer = cva(
     "w-full",
     "text-system-element-text-primary",
     "pt-1",
-    "border-t-4",
+    "border-t-[0.25rem]",
     "font-daikinSerif"
   ],
   {
@@ -35,22 +35,6 @@ const cvaContainer = cva(
     }
   }
 );
-const cvaLabel = cva(
-  ["flex", "items-center", "gap-2", "font-bold", "leading-5"],
-  {
-    variants: {
-      status: {
-        unfinished: [],
-        inprogress: [],
-        finished: [
-          "after:size-4",
-          "after:i-daikin-status-success",
-          "after:text-system-state-primary-active"
-        ]
-      }
-    }
-  }
-);
 let DaikinProgressIndicatorItem = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -65,8 +49,16 @@ let DaikinProgressIndicatorItem = class extends LitElement {
       role="listitem"
       aria-current=${ifDefined(this.current ? "step" : void 0)}
     >
-      <slot class=${cvaLabel({ status: this.status })}></slot>
-      <slot name="description" class="text-sm leading-[18px]"></slot>
+      <div class="flex items-center gap-2 font-bold leading-5">
+        <slot></slot>
+        ${this.status === "finished" ? html`
+              <span
+                class="size-4 i-daikin-status-success text-system-state-primary-active"
+                aria-label="Completed"
+              ></span>
+            ` : nothing}
+      </div>
+      <slot name="description" class="text-sm leading-[1.1rem]"></slot>
     </div>`;
   }
 };
@@ -76,7 +68,7 @@ DaikinProgressIndicatorItem.styles = css`
     :host {
       display: block;
       width: 100%;
-      min-width: 142px;
+      min-width: 9rem;
     }
   `;
 __decorateClass([

package/dist/es/components/progress-indicator-item/index.d.ts

@@ -1 +1 @@
-export * from './daikin-progress-indicator-item';
+export * from "./daikin-progress-indicator-item.js";

package/dist/es/components/radio/daikin-radio.d.ts

@@ -22,11 +22,11 @@ import { LitElement } from 'lit';
 export declare class DaikinRadio extends LitElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * Form name of the radio button.
+     * The form name, submitted as a name/value pair when submitting the form.
      */
     name: string;
     /**
-     * Form value of the radio button.
+     * The form value, submitted as a name/value pair when submitting the form.
      */
     value: string;
     /**
@@ -40,11 +40,11 @@ export declare class DaikinRadio extends LitElement {
      */
     labelPosition: "right" | "hidden";
     /**
-     * Whether the radio button is checked.
+     * Specify the radio button checked state.
      */
     checked: boolean;
     /**
-     * Whether the radio button is disabled.
+     * Specify the radio button disabled state.
      */
     disabled: boolean;
     /**

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

@@ -88,7 +88,7 @@ let DaikinRadio = class extends LitElement {
           class=${RADIO_CLASS_NAME}
           type="radio"
           name=${this.name}
-          value=${this.value}
+          .value=${this.value}
           aria-label=${this.labelPosition === "hidden" ? this.label : nothing}
           ?disabled=${this.disabled}
           .checked=${this.checked}

package/dist/es/components/radio/index.d.ts

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

package/dist/es/components/radio-group/daikin-radio-group.d.ts

@@ -1,6 +1,6 @@
 import { LitElement, PropertyValues } from 'lit';
-import { MergeVariantProps } from '../../type-utils';
-import { DaikinInputGroup } from '../input-group';
+import { MergeVariantProps } from "../../type-utils.js";
+import { DaikinInputGroup } from "../input-group/index.js";
 declare const radioGroupCN: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/es/components/radio-group/daikin-radio-group.js

@@ -3,6 +3,7 @@ import { css, unsafeCSS, LitElement, html } from "lit";
 import { queryAssignedElements, property, state, customElement } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import tailwindStyles from "../../tailwind.css.js";
+import "../radio/daikin-radio.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {

package/dist/es/components/radio-group/index.d.ts

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

package/dist/es/components/select/daikin-select.d.ts

@@ -1,5 +1,5 @@
 import { LitElement, PropertyValues } from 'lit';
-import { DaikinInputGroup } from '../input-group';
+import { DaikinInputGroup } from "../input-group/index.js";
 /**
  * A select component.
  * This component accepts an HTML `<select>` element in the slot and applies styles to it.
@@ -41,6 +41,11 @@ export declare class DaikinSelect extends LitElement {
      */
     disabled: boolean;
     private readonly _selects;
+    /**
+     * The label text used as the value of aria-label.
+     * Set automatically by `reflectInputGroup` method.
+     */
+    private _label;
     private get _select();
     private _updateSelect;
     private _handleSlotChange;

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

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, queryAssignedElements, customElement } from "lit/decorators.js";
+import { property, queryAssignedElements, state, customElement } from "lit/decorators.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -25,7 +25,7 @@ const cvaSelect = cva(
     "after:absolute",
     "after:top-0",
     "after:bottom-0",
-    "after:right-3",
+    "after:right-[calc(0.75rem+1px)]",
     "after:pointer-events-none",
     "slotted-[select]:!appearance-none",
     "slotted-[select]:!flex",
@@ -40,8 +40,7 @@ const cvaSelect = cva(
     "slotted-[select]:!font-daikinSerif",
     "slotted-[select]:!border",
     "slotted-[select]:!border-[--color-base]",
-    "slotted-[select]:!rounded-md",
-    "slotted-[select]:!font-daikinSerif",
+    "slotted-[select]:!rounded",
     "slotted-[select]:!leading-5",
     "slotted-[select]:!outline",
     "slotted-[select]:!outline-0",
@@ -49,26 +48,26 @@ const cvaSelect = cva(
     "slotted-[select:focus-visible]:!outline-2",
     "slotted-[select:focus-visible]:!outline-[--color-focus]",
     "slotted-[select:enabled]:!cursor-pointer",
-    "slotted-[select:enabled]:!text-daikinNeutral-800",
-    "slotted-[select:enabled:hover]:!bg-[#f2f2f2]",
-    "slotted-[select:enabled:active]:!bg-daikinNeutral-100",
-    "slotted-[select:disabled]:!text-daikinNeutral-200",
-    "slotted-[select:disabled]:!border-daikinNeutral-200"
+    "slotted-[select:enabled]:!text-system-element-text-primary",
+    "slotted-[select:enabled:hover]:!bg-system-background-surface-hover",
+    "slotted-[select:enabled:active]:!bg-system-background-surface-press",
+    "slotted-[select:disabled]:!text-system-state-disabled",
+    "slotted-[select:disabled]:!border-system-state-disabled"
   ],
   {
     variants: {
       disabled: {
-        false: ["after:text-daikinNeutral-900"],
-        true: ["after:text-daikinNeutral-200"]
+        false: ["after:text-system-element-text-primary"],
+        true: ["after:text-system-state-disabled"]
       },
       error: {
         false: [
-          "var-color-daikinNeutral-600/color-base",
-          "var-color-daikinBlue-700/color-focus"
+          "var-color-system-state-neutral-active/color-base",
+          "var-color-system-state-focus/color-focus"
         ],
         true: [
-          "var-color-daikinRed-500/color-base",
-          "var-color-daikinRed-500/color-focus"
+          "var-color-system-state-error-active/color-base",
+          "var-color-system-state-error-active/color-focus"
         ]
       }
     }
@@ -80,15 +79,19 @@ let DaikinSelect = class extends LitElement {
     this.error = false;
     this.required = false;
     this.disabled = false;
+    this._label = null;
   }
   get _select() {
     return this._selects[0] ?? null;
   }
   _updateSelect() {
     const select = this._select;
-    if (select) {
-      select.disabled = this.disabled;
+    if (!select) {
+      return;
     }
+    select.disabled = this.disabled;
+    select.required = this.required;
+    select.ariaLabel = this._label;
   }
   _handleSlotChange() {
     this._updateSelect();
@@ -100,7 +103,7 @@ let DaikinSelect = class extends LitElement {
     ></slot>`;
   }
   updated(changedProperties) {
-    if (changedProperties.has("disabled")) {
+    if (changedProperties.has("disabled") || changedProperties.has("required")) {
       this._updateSelect();
     }
   }
@@ -109,6 +112,8 @@ let DaikinSelect = class extends LitElement {
     this.disabled = !!inputGroup.disabled;
     this.required = !!inputGroup.required;
     this.error = isError;
+    this._label = inputGroup.label;
+    this._updateSelect();
   }
   /**
    * Focuses on the `<select>` element in the slot.
@@ -153,6 +158,9 @@ __decorateClass([
 __decorateClass([
   queryAssignedElements({ selector: "select" })
 ], DaikinSelect.prototype, "_selects", 2);
+__decorateClass([
+  state()
+], DaikinSelect.prototype, "_label", 2);
 DaikinSelect = __decorateClass([
   customElement("daikin-select")
 ], DaikinSelect);

package/dist/es/components/select/index.d.ts

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

package/dist/es/components/tab/index.d.ts

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

package/dist/es/components/tab-panels/daikin-tab-panels.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import { ARIARole } from '../../lit-analyzer-types';
+import { ARIARole } from "../../lit-analyzer-types.js";
 /**
  * The tab panels component is a child element within the `daikin-tabs` that controls the display of the content panels associated with each tab.
  * When a user selects a tab, the tab panels component ensures the corresponding content panel is shown while hiding the others.

package/dist/es/components/tab-panels/index.d.ts

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

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

@@ -0,0 +1,130 @@
+import { LitElement, PropertyValues } from 'lit';
+export type HeaderType<T extends string = string> = {
+    key: T;
+    label: string;
+    alignment?: "left" | "right" | "center";
+    sortable: boolean;
+};
+/**
+ * The table component is a component that can display multiple data objects in a tabular format.
+ *
+ * It is modeled on the HTML `<table>` element. However, unlike a normal `<table>` element, this component does not require its child elements to have cells. Instead, it can be made to function as a table by giving the properties `headers` and `rows` appropriate arrays.
+ *
+ * If the contents of the table are plain text only, give them to the `rows` property. However, if you want to give contents other than text, such as buttons or images, you will need to prepare a element with the corresponding `slot` attribute. The value of this attribute must be structured as follows: ``slot=${`cell:${headers[i].key}:${rows[i].id}`}``
+ *
+ * The table provides two functions: checkboxes and sorting, and you can select the functions you need.
+ *
+ * Hierarchy:
+ * - `daikin-table` > `daikin-table-cell`
+ * - `daikin-table` > `daikin-table-header-cell`
+ *
+ * @fires change-check - When the checkbox is operated, it returns the array of `id`s that are currently checked.
+ * @fires change-sort - When the sort is changed, it returns the current sort key and the order (ascending or descending).
+ *
+ * @slot header:${headers[i].key} - A slot for the header cell of a table. Use this when you want to display something other than text, such as an icon. Use `daikin-table-header-cell` for the wrapper.
+ * @slot cell:${rows[j].id}:${headers[i].key} - A slot for the data cell of a table. Use `daikin-table-cell` for the wrapper.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-table
+ *   .headers="[
+ *     { key: 'name', label: 'Name', sortable: true },
+ *     { key: 'season', label: 'Season', sortable: true },
+ *     { key: 'price', label: 'Price', alignment: 'right', sortable: false },
+ *   ]"
+ *   .rows="[
+ *     { id: '1', name: 'Apple', season: 'Autumn', price: '$2' },
+ *     { id: '2', name: 'Peach', season: 'Summer', price: '$4' },
+ *     { id: '3', name: 'Orange', season: 'Winter', price: '$1' },
+ *     { id: '4', name: 'Strawberry', season: 'Spring', price: '$4' },
+ *   ]"
+ * >
+ *   <daikin-table-cell slot="cell:1:name">
+ *     Apple
+ *     <span slot="subtitle">This is a autumn fruit.</span>
+ *   </daikin-table-cell>
+ *   <daikin-table-cell slot="cell:2:name">
+ *     Peach
+ *     <span slot="subtitle">This is a summer fruit.</span>
+ *   </daikin-table-cell>
+ *   <daikin-table-cell slot="cell:3:name">
+ *     Orange
+ *     <span slot="subtitle">This is a winter fruit.</span>
+ *   </daikin-table-cell>
+ *   <daikin-table-cell slot="cell:4:name">
+ *     Strawberry
+ *     <span slot="subtitle">This is a spring fruit.</span>
+ *   </daikin-table-cell>
+ * </daikin-table>
+ * ```
+ */
+export declare class DaikinTable<T extends {
+    id: string;
+} = any> extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Headers of the table.
+     * - key: The value of `key` corresponds to the key, excluding the id of rows. As a whole array, the value of `key` must be unique. Also, only use alphanumeric characters, `$`, and `_` in the `key`.
+     * - label: This is the text that is displayed in the header cells.
+     * - alignment: The direction in which the characters are aligned can be omitted. If it is omitted, the characters will be aligned to the left.
+     * - sortable: If sortable (`sortable = true`), this specifies whether sorting is performed on this column.
+     */
+    headers: readonly HeaderType<Extract<keyof T, string>>[];
+    /**
+     * Rows of the table.
+     * An array that uses the element `key` in the column as the key and stores the corresponding value.
+     * As a whole array, the value of `id` should be unique.
+     */
+    rows: T[];
+    /**
+     * Whether or not to enable selection of rows.
+     * If `true`, a checkbox will be displayed to the left of each row.
+     */
+    selectable: boolean;
+    /**
+     * Whether or not to enable sorting of the rows.
+     * If `true`, a button for sorting will be displayed to the right of each header cell text.
+     */
+    sortable: boolean;
+    /**
+     * An array of `id`s for the `rows` that have been checked.
+     */
+    selection: string[];
+    /**
+     * Sort order of the table.
+     */
+    order: "asc" | "desc" | null;
+    /**
+     * The `key` of the currently sorted column.
+     */
+    sort: keyof T | null;
+    /**
+     * Specify this when you want to customize the sort function.
+     * The function must be ascending, and the return value must be `0`, `1` or `-1`.
+     */
+    sortFunction: {
+        [key in keyof T]?: (a: T, b: T, key: key) => number;
+    } | ((a: T, b: T, key: keyof T) => number) | false | null;
+    private _bulkRowsCheckState;
+    /**
+     * The rows displayed in the current table.
+     * Currently this is a sorted `rows`, but pagination may be considered in the future.
+     */
+    private _currentView;
+    private _updateCurrentView;
+    private _emitChangeCheckEvent;
+    private _handleHeaderCheckboxChange;
+    private _handleBodyCheckboxChange;
+    private _handleClickSort;
+    private _updateHeaderCheckboxState;
+    render(): import('lit-html').TemplateResult<1>;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-table": DaikinTable;
+    }
+}
+export default DaikinTable;