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

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

@@ -0,0 +1,65 @@
+import { LitElement, PropertyValues } from 'lit';
+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.
+ * The `disabled` property of the component is also reflected in the `<select>` element in the slot.
+ *
+ * Hierarchy:
+ * - `daikin-input-group` > `daikin-select`
+ *
+ * @slot - A slot for an HTML `<select>` element which may contain `<option>` and `<optgroup>`.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-select>
+ *   <select name="select">
+ *     <option value="value1">Option 1</option>
+ *     <option value="value2">Option 2</option>
+ *     <optgroup label="Group">
+ *       <option value="value3">Option 3</option>
+ *       <option value="value4">Option 4</option>
+ *     </optgroup>
+ *   </select>
+ * </daikin-select>
+ * ```
+ */
+export declare class DaikinSelect extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Whether the select component is in an error state.
+     */
+    error: boolean;
+    /**
+     * Whether the select component is required.
+     */
+    required: boolean;
+    /**
+     * Whether the select component is disabled.
+     * This value will also be applied to the `disabled` property of the `<select>` element in the slot.
+     */
+    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;
+    render(): import('lit-html').TemplateResult<1>;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    reflectInputGroup(inputGroup: DaikinInputGroup): void;
+    /**
+     * Focuses on the `<select>` element in the slot.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-select": DaikinSelect;
+    }
+}

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

@@ -0,0 +1,169 @@
+import { cva } from "class-variance-authority";
+import { css, unsafeCSS, LitElement, html } from "lit";
+import { property, queryAssignedElements, state, 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 cvaSelect = cva(
+  [
+    "block",
+    "w-full",
+    "h-full",
+    "relative",
+    "after:i-daikin-dropdown-chevron-down",
+    "after:w-6",
+    "after:h-6",
+    "after:m-auto",
+    "after:absolute",
+    "after:top-0",
+    "after:bottom-0",
+    "after:right-[calc(0.75rem+1px)]",
+    "after:pointer-events-none",
+    "slotted-[select]:!appearance-none",
+    "slotted-[select]:!flex",
+    "slotted-[select]:!items-center",
+    "slotted-[select]:!gap-2",
+    "slotted-[select]:!w-full",
+    "slotted-[select]:!h-full",
+    "slotted-[select]:!min-h-12",
+    "slotted-[select]:!pl-4",
+    "slotted-[select]:!pr-12",
+    "slotted-[select]:!text-base",
+    "slotted-[select]:!font-daikinSerif",
+    "slotted-[select]:!border",
+    "slotted-[select]:!border-[--color-base]",
+    "slotted-[select]:!rounded",
+    "slotted-[select]:!leading-5",
+    "slotted-[select]:!outline",
+    "slotted-[select]:!outline-0",
+    "slotted-[select]:!-outline-offset-2",
+    "slotted-[select:focus-visible]:!outline-2",
+    "slotted-[select:focus-visible]:!outline-[--color-focus]",
+    "slotted-[select:enabled]:!cursor-pointer",
+    "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-system-element-text-primary"],
+        true: ["after:text-system-state-disabled"]
+      },
+      error: {
+        false: [
+          "var-color-system-state-neutral-active/color-base",
+          "var-color-system-state-focus/color-focus"
+        ],
+        true: [
+          "var-color-system-state-error-active/color-base",
+          "var-color-system-state-error-active/color-focus"
+        ]
+      }
+    }
+  }
+);
+let DaikinSelect = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    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) {
+      return;
+    }
+    select.disabled = this.disabled;
+    select.required = this.required;
+    select.ariaLabel = this._label;
+  }
+  _handleSlotChange() {
+    this._updateSelect();
+  }
+  render() {
+    return html`<slot
+      class=${cvaSelect({ disabled: this.disabled, error: this.error })}
+      @slotchange=${this._handleSlotChange}
+    ></slot>`;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("disabled") || changedProperties.has("required")) {
+      this._updateSelect();
+    }
+  }
+  reflectInputGroup(inputGroup) {
+    const isError = !inputGroup.disabled && !!inputGroup.error;
+    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.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._select) == null ? void 0 : _a.focus(options);
+  }
+};
+DaikinSelect.styles = css`
+    ::slotted(select) {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      border: 0 solid;
+
+      font: inherit;
+      font-feature-settings: inherit;
+      font-variation-settings: inherit;
+      letter-spacing: inherit;
+      color: inherit;
+      background: transparent;
+    }
+
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinSelect.prototype, "error", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinSelect.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinSelect.prototype, "disabled", 2);
+__decorateClass([
+  queryAssignedElements({ selector: "select" })
+], DaikinSelect.prototype, "_selects", 2);
+__decorateClass([
+  state()
+], DaikinSelect.prototype, "_label", 2);
+DaikinSelect = __decorateClass([
+  customElement("daikin-select")
+], DaikinSelect);
+export {
+  DaikinSelect
+};

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

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

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

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

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

@@ -16,46 +16,50 @@ const cvaTab = cva(
   [
     "flex",
     "w-full",
-    "h-full",
+    "min-w-14",
+    "h-10",
     "items-center",
     "justify-center",
     "px-4",
     "pt-2",
     "pb-3",
-    "text-base",
-    "font-bold",
     "text-center",
     "font-daikinSerif",
-    "relative",
     "tracking-wide",
     "whitespace-nowrap",
-    "contain-paint",
+    "relative",
     "focus-visible:outline-none",
-    "focus-visible:before:w-full",
-    "focus-visible:before:h-[calc(100%_-_4px)]",
-    "focus-visible:before:border",
-    "focus-visible:before:border-daikinBlue-700",
     "focus-visible:before:absolute",
-    "focus-visible:before:top-0",
-    "disabled:text-daikinNeutral-200"
+    "focus-visible:before:-inset-[3px]",
+    "focus-visible:before:z-[1]",
+    "focus-visible:before:border",
+    "focus-visible:before:border-2",
+    "focus-visible:before:border-system-state-focus",
+    "disabled:text-system-state-disabled",
+    "after:absolute",
+    "after:inset-0",
+    "after:top-auto"
   ],
   {
     variants: {
       active: {
         false: [
-          "hover:text-daikinNeutral-500",
-          "active:text-daikinNeutral-700"
+          "enabled:text-system-state-neutral-active",
+          "enabled:hover:text-system-state-neutral-hover",
+          "enabled:hover:bg-system-background-surface-hover",
+          "enabled:active:text-system-state-neutral-press",
+          "enabled:active:bg-system-background-surface-press",
+          "after:h-[1px]",
+          "after:bg-system-element-divider-secondary"
         ],
         true: [
-          "text-daikinBlue-500",
-          "hover:text-daikinBlue-300",
-          "active:text-daikinBlue-600",
-          "after:w-full",
+          "font-bold",
+          "enabled:text-system-state-primary-active",
+          "enabled:hover:bg-system-state-primary-surface-hover",
+          "enabled:active:bg-system-state-primary-surface-press",
           "after:h-1",
-          "after:absolute",
-          "after:bottom-0",
-          "enabled:after:bg-daikinBlue-500",
-          "disabled:after:bg-daikinNeutral-200"
+          "enabled:after:bg-system-state-primary-active",
+          "disabled:after:bg-system-state-disabled"
         ]
       }
     }
@@ -99,7 +103,8 @@ DaikinTab.styles = css`
     ${unsafeCSS(tailwindStyles)}
 
     :host {
-      display: inline-block;
+      display: block;
+      width: 100%;
     }
   `;
 __decorateClass([

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

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

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

@@ -1,8 +1,8 @@
 import { LitElement } from 'lit';
-import { ARIARole } from '../../lit-analyzer-types';
+import { ARIARole } from "../../lit-analyzer-types.js";
 /**
- * The panel switcher 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 panel switcher component ensures the corresponding content panel is shown while hiding the others.
+ * 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.
  *
  * Hierarchy:
  * - `daikin-tabs` > `daikin-tab-panels` ("panels" slot)
@@ -12,7 +12,7 @@ import { ARIARole } from '../../lit-analyzer-types';
  * @example
  *
  * ```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

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

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

package/dist/es-dev/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;