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

package/dist/cjs-dev/components/dropdown/daikin-dropdown.d.cts

@@ -0,0 +1,100 @@
+import { LitElement, PropertyValues } from 'lit';
+import { DaikinInputGroup } from "../input-group/index.cjs";
+/**
+ * A dropdown list component.
+ *
+ * Hierarchy:
+ * - `daikin-dropdown` > `daikin-dropdown-item`
+ * - `daikin-input-group` > `daikin-dropdown` > `daikin-dropdown-item`
+ *
+ * @fires change - A custom event emitted when a user selects a dropdown item.
+ *
+ * @slot - Dropdown item list slot. Place `daikin-dropdown-item` elements here.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-dropdown label="Dropdown label">
+ *   <daikin-dropdown-item value="value1">Dropdown item 1</daikin-dropdown-item>
+ *   <daikin-dropdown-item value="value2">Dropdown item 2</daikin-dropdown-item>
+ *   <daikin-dropdown-item value="value3" disabled>Dropdown item 3</daikin-dropdown-item>
+ * </daikin-dropdown>
+ * ```
+ */
+export declare class DaikinDropdown extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    static readonly formAssociated = true;
+    private _internals;
+    /**
+     * Form value of the dropdown.
+     * `null` if not selected.
+     */
+    value: string | null;
+    /**
+     * Placeholder text of the dropdown.
+     */
+    placeholder: string;
+    /**
+     * Whether the dropdown is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether the dropdown is required.
+     */
+    required: boolean;
+    /**
+     * Whether the dropdown is in an error state.
+     */
+    error: boolean;
+    /**
+     * Whether the dropdown menu is opened.
+     */
+    open: boolean;
+    private readonly _items;
+    private _button;
+    /**
+     * The label text used as the value of aria-label.
+     * Set automatically by `reflectInputGroup` method.
+     */
+    private _label;
+    private _hasSelectedItem;
+    private _selectedItemLabel;
+    private _autoUpdateController;
+    private _clickOutsideController;
+    /**
+     * Last focused dropdown item.
+     * The next time the dropdown opens, the focus will be moved to this element.
+     */
+    private _lastFocusedItem;
+    private _updateFormValue;
+    private _onClickOutside;
+    private _reflectItemsAndLabel;
+    private _handleClick;
+    private _searchItem;
+    private _handleKeyDownEscape;
+    private _moveFocus;
+    private _handleKeyDown;
+    /**
+     * Handle `select` event from `daikin-dropdown-item`.
+     */
+    private _handleSelect;
+    /**
+     * Handle `focusin` event to remember last focused item.
+     */
+    private _handleFocusIn;
+    /**
+     * Handle `floating-ready` event dispatched by `FloatingUIAutoUpdateController`.
+     * The dropdown menu opens after the Floating UI has finished calculating its position, so there is a slight time lag between the change to `this.open` and the actual display.
+     * Since the focus cannot be moved until the element is displayed on the screen, the focus is moved to the item after receiving the completion of the Floating UI position calculation here.
+     */
+    private _handleFloatingReady;
+    render(): import('lit-html').TemplateResult<1>;
+    focus(options?: FocusOptions): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    reflectInputGroup(inputGroup: DaikinInputGroup): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-dropdown": DaikinDropdown;
+    }
+}

package/dist/cjs-dev/components/dropdown/index.cjs

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

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

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

package/dist/cjs-dev/components/dropdown-item/daikin-dropdown-item.cjs

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const classVarianceAuthority = require("class-variance-authority");
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const tailwind = require("../../tailwind.css.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;
+};
+const cvaOption = classVarianceAuthority.cva(
+  [
+    "flex",
+    "items-center",
+    "justify-between",
+    "w-full",
+    "min-h-12",
+    "text-system-element-text-primary",
+    "bg-system-element-text-inverse",
+    "p-3",
+    "font-daikinSerif",
+    "leading-5",
+    "text-left",
+    "focus-visible:outline",
+    "focus-visible:outline-2",
+    "focus-visible:-outline-offset-2",
+    "focus-visible:outline-system-state-focus",
+    "disabled:text-system-state-disabled"
+  ],
+  {
+    variants: {
+      selected: {
+        false: [
+          "enabled:hover:bg-system-background-surface-hover",
+          "enabled:active:bg-system-background-surface-press"
+        ],
+        true: [
+          "enabled:bg-system-background-surface-selected",
+          "enabled:hover:bg-system-background-surface-selectedHover",
+          "enabled:active:bg-system-background-surface-selectedActive",
+          "after:i-daikin-dropdown-check",
+          "after:size-6"
+        ]
+      }
+    }
+  }
+);
+exports.DaikinDropdownItem = class DaikinDropdownItem extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.disabled = false;
+    this.selected = false;
+  }
+  _handleClick() {
+    if (this.disabled) {
+      return;
+    }
+    this.dispatchEvent(
+      new Event("select", {
+        bubbles: true
+      })
+    );
+  }
+  render() {
+    return lit.html`<button
+      type="button"
+      class=${cvaOption({ selected: this.selected })}
+      data-value=${this.value}
+      role="option"
+      aria-selected=${this.selected}
+      tabindex="-1"
+      ?disabled=${this.disabled}
+      @click=${this._handleClick}
+    >
+      <slot></slot>
+    </button>`;
+  }
+  focus(options) {
+    var _a;
+    (_a = this._button) == null ? void 0 : _a.focus(options);
+  }
+};
+exports.DaikinDropdownItem.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinDropdownItem.prototype, "value", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinDropdownItem.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinDropdownItem.prototype, "selected", 2);
+__decorateClass([
+  decorators_js.query("button")
+], exports.DaikinDropdownItem.prototype, "_button", 2);
+exports.DaikinDropdownItem = __decorateClass([
+  decorators_js.customElement("daikin-dropdown-item")
+], exports.DaikinDropdownItem);

package/dist/cjs-dev/components/dropdown-item/daikin-dropdown-item.d.cts

@@ -0,0 +1,42 @@
+import { LitElement } from 'lit';
+/**
+ * The dropdown item (option) component that can be used within `daikin-dropdown` component.
+ *
+ * Hierarchy:
+ * - `daikin-dropdown` > `daikin-dropdown-item`
+ *
+ * @fires select - A custom event emitted when a user clicks the item. For internal use (`daikin-dropdown`).
+ *
+ * @slot - A slot for the item content.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-dropdown-item value="value">Dropdown item</daikin-dropdown-item>
+ * ```
+ */
+export declare class DaikinDropdownItem extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Form value of the dropdown item.
+     */
+    value: string;
+    /**
+     * Whether the dropdown item is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the dropdown item is selected.
+     * Set automatically by `daikin-dropdown` component.
+     */
+    selected: boolean;
+    private _button;
+    private _handleClick;
+    render(): import('lit-html').TemplateResult<1>;
+    focus(options?: FocusOptions): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-dropdown-item": DaikinDropdownItem;
+    }
+}

package/dist/cjs-dev/components/dropdown-item/index.cjs

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

package/dist/cjs-dev/components/dropdown-item/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-dropdown-item.cjs";

package/dist/cjs-dev/components/icon/daikin-icon.cjs

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const variables_js = require("@daikin-oss/dds-tokens/js/daikin/Light/variables.js");
 const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
@@ -23,12 +22,6 @@ const iconClassMap = Object.fromEntries(
 const cvaIcon = classVarianceAuthority.cva(["block"], {
   variants: {
     icon: iconClassMap,
-    size: {
-      s: [`w-[--size-s]`, `h-[--size-s]`],
-      m: [`w-[--size-m]`, `h-[--size-m]`],
-      l: [`w-[--size-l]`, `h-[--size-l]`],
-      xl: [`w-[--size-xl]`, `h-[--size-xl]`]
-    },
     color: {
       black: ["text-black"],
       white: ["text-white"],
@@ -43,7 +36,7 @@ exports.DaikinIcon = class DaikinIcon extends lit.LitElement {
     super(...arguments);
     this.icon = null;
     this.color = "default";
-    this.size = "m";
+    this.size = "current";
   }
   render() {
     var _a;
@@ -60,8 +53,7 @@ exports.DaikinIcon = class DaikinIcon extends lit.LitElement {
     return lit.html`<span
       class=${cvaIcon({
       icon: this.icon,
-      color: this.color,
-      size: this.size
+      color: this.color
     })}
       style=${`--default-color:${defaultColor ?? "#000000"}`}
       role="presentation"
@@ -72,13 +64,25 @@ exports.DaikinIcon.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
 
     :host {
-      --size-s: ${lit.unsafeCSS(variables_js.space12)};
-      --size-m: ${lit.unsafeCSS(variables_js.space16)};
-      --size-l: ${lit.unsafeCSS(variables_js.space20)};
-      --size-xl: ${lit.unsafeCSS(variables_js.space24)};
+      display: inline-block;
+      width: var(--dds-icon-size, 100%);
+      height: var(--dds-icon-size, 100%);
+    }
+
+    :host([size="s"]) {
+      --dds-icon-size: 12px;
+    }
+
+    :host([size="m"]) {
+      --dds-icon-size: 16px;
+    }
+
+    :host([size="l"]) {
+      --dds-icon-size: 20px;
+    }
 
-      display: block;
-      width: max-content;
+    :host([size="xl"]) {
+      --dds-icon-size: 24px;
     }
   `;
 __decorateClass([

package/dist/{cjs/components/icon/daikin-icon.d.ts → cjs-dev/components/icon/daikin-icon.d.cts}

@@ -1,12 +1,11 @@
 import { LitElement } from 'lit';
-import { MergeVariantProps } from '../../type-utils';
-import { icons } from './icons.json';
+import { MergeVariantProps } from "../../type-utils.cjs";
+import { icons } from "./icons.json.cjs";
 export declare const iconList: string[];
 export type IconType = keyof typeof icons;
 declare const cvaIcon: (props?: ({
     icon?: string | number | null | undefined;
-    size?: "s" | "m" | "l" | "xl" | null | undefined;
-    color?: "black" | "white" | "default" | "current" | null | undefined;
+    color?: "default" | "black" | "white" | "current" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type IconVariantProps = MergeVariantProps<typeof cvaIcon>;
 /**
@@ -18,6 +17,8 @@ export type IconVariantProps = MergeVariantProps<typeof cvaIcon>;
  * If you try to use an icon that does not exist, a blank space will be displayed.
  * In the development build, warnings will be displayed in the console, so please check there if you encounter any unexpected behavior.
  *
+ * @cssprop [--dds-icon-size] - Icon size. If a value other than "current" is set for the `size` property, it will be overwritten automatically. This may be set by the parent component such as `daikin-icon-button`.
+ *
  * @example
  *
  * ```js
@@ -39,9 +40,10 @@ export declare class DaikinIcon extends LitElement {
      */
     color: IconVariantProps["color"];
     /**
-     * Specify the height and width of the icon
+     * Specify the size of the icon.
+     * If "current" is set, `--dds-icon-size` CSS variable will be used. `--dds-icon-size` may be set by the parent component such as `daikin-icon-button`.
      */
-    size: IconVariantProps["size"];
+    size: "s" | "m" | "l" | "xl" | "current";
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/dist/cjs-dev/components/icon/icons.json.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const icons = {
   alarm: {
-    "class": "i-daikin-notification-status-alarm",
+    "class": "i-daikin-status-alarm",
     color: null
   },
   close: {
@@ -10,24 +10,44 @@ const icons = {
     color: "#a0a0a0"
   },
   information: {
-    "class": "i-daikin-notification-status-information",
+    "class": "i-daikin-status-information",
     color: null
   },
   negative: {
-    "class": "i-daikin-notification-status-negative",
+    "class": "i-daikin-status-negative",
     color: null
   },
   positive: {
-    "class": "i-daikin-notification-status-positive",
+    "class": "i-daikin-status-positive",
     color: null
   },
   warning: {
-    "class": "i-daikin-notification-status-warning",
+    "class": "i-daikin-status-warning",
     color: null
   },
+  "pagination-chevron-left": {
+    "class": "i-daikin-pagination-chevron-left",
+    color: "#414141"
+  },
+  "pagination-chevron-right": {
+    "class": "i-daikin-pagination-chevron-right",
+    color: "#414141"
+  },
+  arrowUp: {
+    "class": "i-daikin-arrow-up",
+    color: "#414141"
+  },
+  success: {
+    "class": "i-daikin-status-success",
+    color: "#0097E0"
+  },
   error: {
     "class": "i-daikin-status-error",
-    color: "#ff4949"
+    color: "#FF4949"
+  },
+  cross: {
+    "class": "i-daikin-cross",
+    color: null
   },
   "chevron-up": {
     "class": "i-daikin-chevron-up",
@@ -44,6 +64,10 @@ const icons = {
   "chevron-right": {
     "class": "i-daikin-chevron-right",
     color: null
+  },
+  sort: {
+    "class": "i-daikin-sort",
+    color: null
   }
 };
 exports.icons = icons;

package/dist/cjs-dev/components/icon/{icons.json.d.ts → icons.json.d.cts}

@@ -1,7 +1,7 @@
 declare const _default: {
   "icons": {
     "alarm": {
-      "class": "i-daikin-notification-status-alarm",
+      "class": "i-daikin-status-alarm",
       "color": null
     },
     "close": {
@@ -9,24 +9,44 @@ declare const _default: {
       "color": "#a0a0a0"
     },
     "information": {
-      "class": "i-daikin-notification-status-information",
+      "class": "i-daikin-status-information",
       "color": null
     },
     "negative": {
-      "class": "i-daikin-notification-status-negative",
+      "class": "i-daikin-status-negative",
       "color": null
     },
     "positive": {
-      "class": "i-daikin-notification-status-positive",
+      "class": "i-daikin-status-positive",
       "color": null
     },
     "warning": {
-      "class": "i-daikin-notification-status-warning",
+      "class": "i-daikin-status-warning",
       "color": null
     },
+    "pagination-chevron-left": {
+      "class": "i-daikin-pagination-chevron-left",
+      "color": "#414141"
+    },
+    "pagination-chevron-right": {
+      "class": "i-daikin-pagination-chevron-right",
+      "color": "#414141"
+    },
+    "arrowUp": {
+      "class": "i-daikin-arrow-up",
+      "color": "#414141"
+    },
+    "success": {
+      "class": "i-daikin-status-success",
+      "color": "#0097E0"
+    },
     "error": {
       "class": "i-daikin-status-error",
-      "color": "#ff4949"
+      "color": "#FF4949"
+    },
+    "cross": {
+      "class": "i-daikin-cross",
+      "color": null
     },
     "chevron-up": {
       "class": "i-daikin-chevron-up",
@@ -43,6 +63,10 @@ declare const _default: {
     "chevron-right": {
       "class": "i-daikin-chevron-right",
       "color": null
+    },
+    "sort": {
+      "class": "i-daikin-sort",
+      "color": null
     }
   }
 }

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

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