@daikin-oss/design-system-web-components 1.1.0 → 1.3.0-next.2

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

@@ -1,5 +1,5 @@
 import { PropertyValues } from 'lit';
-import { DDSElement } from "../../base/index.js";
+import { DDSFormElement } from "../../base/dds-form-element.js";
 /**
  * The checkbox component is a UI element that allows users to select one or more options from a list of choices.
  * It functions similarly to the HTML `<input type="checkbox">` tag, enabling users to toggle the selection of each option independently.
@@ -21,16 +21,8 @@ import { DDSElement } from "../../base/index.js";
  * <daikin-checkbox label="Checkbox label" name="name" value="value"></daikin-checkbox>
  * ```
  */
-export declare class DaikinCheckbox extends DDSElement {
+export declare class DaikinCheckbox extends DDSFormElement {
     static readonly styles: import('lit').CSSResult;
-    /**
-     * The form name, submitted as a name/value pair when submitting the form.
-     */
-    name: string;
-    /**
-     * The form value, submitted as a name/value pair when submitting the form.
-     */
-    value: string;
     /**
      * Label text for the checkbox.
      */
@@ -49,6 +41,13 @@ export declare class DaikinCheckbox extends DDSElement {
      * Specify the checkbox disabled state.
      */
     disabled: boolean;
+    /**
+     * Specify the checkbox disabled state controlled by the parent component.
+     * Controlled by `daikin-checkbox-group`.
+     *
+     * @private
+     */
+    disabledByParent: boolean;
     get checked(): boolean;
     private get _labelHidden();
     /**
@@ -57,8 +56,6 @@ export declare class DaikinCheckbox extends DDSElement {
      * _Setter_: If `true` is set, it updates `checkState` to `"checked"`, and if `false` is set, it updates `checkState` to `"unchecked"`.
      */
     set checked(value: boolean);
-    static readonly formAssociated = true;
-    private _internals;
     private _updateFormValue;
     private _handleClick;
     private _handleChange;

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

@@ -1,9 +1,10 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html, nothing } from "lit";
+import { unsafeCSS, css, nothing, html } from "lit";
 import { property } from "lit/decorators.js";
-import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
+import { DDSFormElement } from "../../base/dds-form-element.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -67,21 +68,19 @@ const cvaLabel = cva([], {
       true: ["text-ddt-color-common-disabled"]
     },
     hidden: {
-      false: ["inline-block", "pr-2"],
+      false: ["inline-block"],
       true: ["hidden"]
     }
   }
 });
-let DaikinCheckbox = class extends DDSElement {
+let DaikinCheckbox = class extends DDSFormElement {
   constructor() {
     super(...arguments);
-    this.name = "";
-    this.value = "";
     this.label = "";
     this.labelPosition = "right";
     this.checkState = "unchecked";
     this.disabled = false;
-    this._internals = this.attachInternals();
+    this.disabledByParent = false;
   }
   get checked() {
     return this.checkState === "checked";
@@ -98,7 +97,7 @@ let DaikinCheckbox = class extends DDSElement {
     this.checkState = value ? "checked" : "unchecked";
   }
   _updateFormValue() {
-    this._internals.setFormValue(this.checked ? this.value : null);
+    this.setFormValue(this.checked ? this.value : null);
   }
   _handleClick(event) {
     var _a;
@@ -115,6 +114,7 @@ let DaikinCheckbox = class extends DDSElement {
     this.dispatchEvent(new Event("change", event));
   }
   render() {
+    const disabled = this.disabled || this.disabledByParent;
     return html`<label
       class="group flex gap-2 items-center size-full font-daikinSerif"
       part="label"
@@ -125,8 +125,8 @@ let DaikinCheckbox = class extends DDSElement {
           class=${CHECKBOX_CLASS_NAME}
           type="checkbox"
           name=${this.name}
+          ?disabled=${disabled}
           aria-label=${this._labelHidden ? this.label : nothing}
-          ?disabled=${this.disabled}
           .checked=${this.checked}
           .indeterminate=${this.checkState === "indeterminate"}
           .value=${this.value}
@@ -135,7 +135,7 @@ let DaikinCheckbox = class extends DDSElement {
       </span>
       <slot
         class=${cvaLabel({
-      disabled: this.disabled,
+      disabled,
       hidden: this._labelHidden
     })}
         ?hidden=${this._labelHidden}
@@ -157,13 +157,6 @@ DaikinCheckbox.styles = css`
       display: inline-flex;
     }
   `;
-DaikinCheckbox.formAssociated = true;
-__decorateClass([
-  property({ type: String, reflect: true })
-], DaikinCheckbox.prototype, "name", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], DaikinCheckbox.prototype, "value", 2);
 __decorateClass([
   property({ type: String })
 ], DaikinCheckbox.prototype, "label", 2);
@@ -176,6 +169,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinCheckbox.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: false })
+], DaikinCheckbox.prototype, "disabledByParent", 2);
 DaikinCheckbox = __decorateClass([
   ddsElement("daikin-checkbox")
 ], DaikinCheckbox);

package/dist/es-dev/components/checkbox-group/daikin-checkbox-group.d.ts

@@ -0,0 +1,69 @@
+import { LitElement } from 'lit';
+import { MergeVariantProps } from "../../type-utils.js";
+import { DaikinInputGroup } from "../input-group/index.js";
+declare const cvaCheckboxGroup: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type CheckboxGroupProps = MergeVariantProps<typeof cvaCheckboxGroup>;
+/**
+ * Checkbox groups are used to group multiple checkboxes.
+ *
+ * Hierarchies:
+ * - `daikin-checkbox-group` > `daikin-checkbox`
+ * - `daikin-input-group` > `daikin-checkbox-group` > `daikin-checkbox`
+ *
+ * @slot - A slot for checkbox. Place `daikin-checkbox` elements here.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/checkbox/index.js";
+ * import "@daikin-oss/design-system-web-components/components/checkbox-group/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-checkbox-group>
+ *   <daikin-checkbox name="name1" value="value1" label="Checkbox Item 1"></daikin-checkbox>
+ *   <daikin-checkbox name="name2" value="value2" label="Checkbox Item 2"></daikin-checkbox>
+ *   <daikin-checkbox name="name3" value="value3" label="Checkbox Item 3"></daikin-checkbox>
+ * </daikin-checkbox-group>
+ * ```
+ */
+export declare class DaikinCheckboxGroup extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Specify the checkbox group orientation
+     */
+    orientation: CheckboxGroupProps["orientation"];
+    /**
+     * Whether the checkbox group is required.
+     * Controlled by `daikin-input-group` when used within `daikin-input-group`.
+     */
+    required: boolean;
+    /**
+     * Whether the checkbox group is disabled.
+     * Controlled by `daikin-input-group` when used within `daikin-input-group`.
+     */
+    disabled: boolean;
+    /**
+     * The label text used as the value of aria-label.
+     * Set automatically by `reflectInputGroup` method.
+     */
+    private _label;
+    private readonly _checkboxes;
+    private _reflectSlotProperties;
+    private _handleSlotChange;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * This function expose to `daikin-input-group` and reflect it's attributes to `daikin-checkbox-group`.
+     * @ignore
+     */
+    reflectInputGroup(inputGroup: DaikinInputGroup): void;
+    updated(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-checkbox-group": DaikinCheckboxGroup;
+    }
+}
+export {};

package/dist/es-dev/components/checkbox-group/daikin-checkbox-group.js

@@ -0,0 +1,95 @@
+import { cva } from "class-variance-authority";
+import { unsafeCSS, css, LitElement, html } from "lit";
+import { property, state, queryAssignedElements, customElement } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.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 cvaCheckboxGroup = cva(["size-full", "flex", "gap-x-8", "gap-y-2"], {
+  variants: {
+    orientation: {
+      horizontal: ["flex-row", "flex-wrap"],
+      vertical: ["flex-col"]
+    }
+  }
+});
+let DaikinCheckboxGroup = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.orientation = "vertical";
+    this.required = false;
+    this.disabled = false;
+    this._label = null;
+  }
+  _reflectSlotProperties() {
+    for (const checkbox of this._checkboxes) {
+      checkbox.disabledByParent = this.disabled;
+    }
+  }
+  _handleSlotChange() {
+    this._reflectSlotProperties();
+  }
+  render() {
+    return html`<fieldset
+      class=${cvaCheckboxGroup({ orientation: this.orientation })}
+      aria-label=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
+    ifDefined(this._label)}
+      aria-required=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
+    ifDefined(this.required)}
+      aria-disabled=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
+    ifDefined(this.disabled)}
+    >
+      <slot @slotchange=${this._handleSlotChange}></slot>
+    </fieldset>`;
+  }
+  /**
+   * This function expose to `daikin-input-group` and reflect it's attributes to `daikin-checkbox-group`.
+   * @ignore
+   */
+  reflectInputGroup(inputGroup) {
+    this._label = inputGroup.label;
+    this.required = !!inputGroup.required;
+    this.disabled = inputGroup.disabled;
+  }
+  updated() {
+    this._reflectSlotProperties();
+  }
+};
+DaikinCheckboxGroup.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: inline-block;
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], DaikinCheckboxGroup.prototype, "orientation", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinCheckboxGroup.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinCheckboxGroup.prototype, "disabled", 2);
+__decorateClass([
+  state()
+], DaikinCheckboxGroup.prototype, "_label", 2);
+__decorateClass([
+  queryAssignedElements({
+    selector: "daikin-checkbox"
+  })
+], DaikinCheckboxGroup.prototype, "_checkboxes", 2);
+DaikinCheckboxGroup = __decorateClass([
+  customElement("daikin-checkbox-group")
+], DaikinCheckboxGroup);
+export {
+  DaikinCheckboxGroup
+};

package/dist/es-dev/components/checkbox-group/index.d.ts

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

package/dist/es-dev/components/checkbox-group/index.js

@@ -0,0 +1,4 @@
+import { DaikinCheckboxGroup } from "./daikin-checkbox-group.js";
+export {
+  DaikinCheckboxGroup
+};

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

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+/**
+ * A chip is a small UI component that represents a single piece of information, a filter, or a contact. Think of it as a compact tag or a small, clickable token.
+ *
+ * @fires remove - A custom event emitted when a user clicks the remove button.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/chip/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-chip chip-aria-label="Chip Text">Text</daikin-chip>
+ * ```
+ */
+export declare class DaikinChip extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Provides an accessible name of the chip.
+     */
+    chipAriaLabel: string | null;
+    private _focusableElement;
+    private _handleRemoveClick;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the inner remove button
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-chip": DaikinChip;
+    }
+}

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

@@ -0,0 +1,107 @@
+import { cva } from "class-variance-authority";
+import { unsafeCSS, css, LitElement, html } from "lit";
+import { property, query, customElement } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.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 cvaWrapper = cva([
+  "flex",
+  "items-center",
+  "rounded-[100px]",
+  "overflow-hidden",
+  "size-full",
+  "border",
+  "px-1",
+  "border-ddt-color-common-neutral-default"
+]);
+const cvaRemoveButton = cva([
+  "w-4",
+  "h-4",
+  "flex",
+  "items-center",
+  "justify-center",
+  "rounded-full",
+  "overflow-hidden",
+  "focus-visible:outline",
+  "focus-visible:outline-2",
+  "focus-visible:outline-ddt-color-common-border-focus",
+  "enabled:var-color-ddt-color-common-neutral-default/color-primary",
+  "enabled:hover:var-color-ddt-color-common-neutral-hover/color-primary",
+  "enabled:hover:var-color-ddt-color-common-surface-neutral-hover/color-secondary",
+  "enabled:active:var-color-ddt-color-common-neutral-press/color-primary",
+  "enabled:active:var-color-ddt-color-common-surface-neutral-press/color-secondary",
+  "text-[--color-primary]",
+  "bg-[--color-secondary]"
+]);
+let DaikinChip = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.chipAriaLabel = null;
+  }
+  _handleRemoveClick(event) {
+    event.stopPropagation();
+    this.dispatchEvent(new Event("remove", { bubbles: true, composed: true }));
+  }
+  render() {
+    return html`
+      <div
+        role="group"
+        class=${cvaWrapper()}
+        aria-label=${ifDefined(this.chipAriaLabel)}
+      >
+        <slot
+          name="left-icon"
+          class="icon-size-4 text-ddt-color-common-text-primary"
+        ></slot>
+        <span class="text-ddt-color-common-text-primary px-1 mr-[2px]">
+          <slot></slot>
+        </span>
+        <button
+          type="button"
+          class=${cvaRemoveButton()}
+          aria-label="Remove"
+          @click=${this._handleRemoveClick}
+        >
+          <span class="i-daikin-close text-[--color-primary]"></span>
+        </button>
+      </div>
+    `;
+  }
+  /**
+   * Focuses on the inner remove button
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._focusableElement) == null ? void 0 : _a.focus(options);
+  }
+};
+DaikinChip.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: inline-flex;
+      width: max-content;
+    }
+  `;
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "chip-aria-label" })
+], DaikinChip.prototype, "chipAriaLabel", 2);
+__decorateClass([
+  query("button")
+], DaikinChip.prototype, "_focusableElement", 2);
+DaikinChip = __decorateClass([
+  customElement("daikin-chip")
+], DaikinChip);
+export {
+  DaikinChip
+};

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

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

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

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

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

@@ -0,0 +1,134 @@
+import { PropertyValues } from 'lit';
+import { DDSFormElement } from "../../base/dds-form-element.js";
+import { DaikinInputGroup } from "../input-group/index.js";
+/**
+ * Interface for combobox option object
+ */
+export interface ComboboxOption {
+    label: string;
+    disabled?: boolean;
+    value?: string;
+}
+/**
+ * Type for combobox items - can be string or object array
+ */
+export type ComboboxItem = string | ComboboxOption;
+export declare function defaultFilterFn(items: readonly ComboboxItem[], value: string): readonly ComboboxItem[];
+/**
+ * A combobox component.
+ * Unlike a dropdown component, a combobox primarily functions as a text field (using a native <input> tag) that can accept custom user input. The dropdown list serves as a helpful aid to expedite the user's input process.
+ *
+ * @fires change - A custom event emitted when a user selects a combobox item or inputs a custom value.
+ * @fires input - A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event). Triggered when the user types in the input field, clicks clear button, or selects from dropdown options.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/combobox/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-combobox></daikin-combobox>
+ *
+ * <script>
+ *   const combobox = document.querySelector("daikin-combobox");
+ *   combobox.items = [ "Apple", "Banana", "Cherry" ];
+ * </script>
+ * ```
+ */
+export declare class DaikinCombobox extends DDSFormElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Placeholder text of the combobox.
+     */
+    placeholder: string | null;
+    /**
+     * Whether the combobox is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether the combobox is required.
+     */
+    required: boolean;
+    /**
+     * Whether the combobox is in an error state.
+     */
+    error: boolean;
+    /**
+     * Whether the combobox menu is opened.
+     */
+    open: boolean;
+    /**
+     * An array of items for the combobox dropdown. Can be:
+     * - Array of strings: ['Option 1', 'Option 2']
+     * - Array of objects: [{label: 'Option 1', disabled: false}, {label: 'Option 2', disabled: true}]
+     */
+    items: ComboboxItem[];
+    private _viewItems;
+    private _currentFocusItemIndex;
+    /**
+     * This property accepts a function that allows users to customize the logic for matching options in the dropdown.
+     * Default implementation performs case-insensitive substring matching.
+     */
+    filter: typeof defaultFilterFn;
+    private _input;
+    /**
+     * The label text used as the value of aria-label.
+     * Set automatically by `reflectInputGroup` method.
+     */
+    private _label;
+    private _autoUpdateController;
+    private _clickOutsideController;
+    private _onClickOutside;
+    private _moveFocusByKeydown;
+    private _updateFormValue;
+    private _closePopup;
+    private _handleFocusOut;
+    private _handleClick;
+    private _handleArrowClick;
+    private _handleClickItem;
+    private _handleKeyDown;
+    /**
+     * Handle `floating-ready` event dispatched by `FloatingUIAutoUpdateController`.
+     * The combobox 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;
+    /**
+     * Handles the clear button click event.
+     * Clears the current value and triggers form value update.
+     */
+    private _handleClearClick;
+    /**
+     * Synchronizes the display items based on the current filter state.
+     * @param type - Whether to show all items or apply filtering
+     */
+    private _synchronizeShowItems;
+    /**
+     * Handles input events from the combobox input field.
+     * Updates the value, applies filtering, and opens dropdown if matches are found.
+     */
+    private _handleInput;
+    /**
+     * Handles change events from the combobox input field.
+     * Dispatches a custom change event when the input value changes and loses focus.
+     */
+    private _handleChange;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the input element.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    /**
+     * This method is used by `daikin-input-group` to reflect it's attributes to this component.
+     * @private
+     */
+    reflectInputGroup(inputGroup: DaikinInputGroup): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-combobox": DaikinCombobox;
+    }
+}