@daikin-oss/design-system-web-components 0.7.0 → 1.1.0

package/dist/es/components/carousel-item/daikin-carousel-item.js

@@ -0,0 +1,81 @@
+import { css, unsafeCSS, html } from "lit";
+import { property, queryAssignedElements, state } from "lit/decorators.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.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;
+};
+let DaikinCarouselItem = class extends DDSElement {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+    this.active = false;
+    this._hasTextContents = false;
+  }
+  _handleFooterSlotChange() {
+    this._hasTextContents = this._titleElements.length > 0 || this._descriptionElements.length > 0;
+  }
+  render() {
+    return html`<div
+      class="flex flex-col flex-none gap-3 text-ddt-color-common-text-primary font-daikinSerif overflow-hidden"
+      role="tabpanel"
+      aria-label=${this.label}
+      aria-hidden=${!this.active}
+    >
+      <slot></slot>
+      <div
+        class="visible:flex flex-col gap-2"
+        ?hidden=${!this._hasTextContents}
+      >
+        <slot
+          name="title"
+          class="leading-[130%] font-bold"
+          @slotchange=${this._handleFooterSlotChange}
+        ></slot>
+        <slot
+          name="description"
+          class="text-sm"
+          @slotchange=${this._handleFooterSlotChange}
+        ></slot>
+      </div>
+    </div>`;
+  }
+};
+DaikinCarouselItem.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  property({ type: String, attribute: false })
+], DaikinCarouselItem.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: false })
+], DaikinCarouselItem.prototype, "active", 2);
+__decorateClass([
+  queryAssignedElements({ slot: "title" })
+], DaikinCarouselItem.prototype, "_titleElements", 2);
+__decorateClass([
+  queryAssignedElements({ slot: "description" })
+], DaikinCarouselItem.prototype, "_descriptionElements", 2);
+__decorateClass([
+  state()
+], DaikinCarouselItem.prototype, "_hasTextContents", 2);
+DaikinCarouselItem = __decorateClass([
+  ddsElement("daikin-carousel-item")
+], DaikinCarouselItem);
+export {
+  DaikinCarouselItem
+};

package/dist/es/components/carousel-item/index.d.ts

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

package/dist/es/components/carousel-item/index.js

@@ -0,0 +1,4 @@
+import { DaikinCarouselItem } from "./daikin-carousel-item.js";
+export {
+  DaikinCarouselItem
+};

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

@@ -1,4 +1,5 @@
-import { LitElement, PropertyValues } from 'lit';
+import { PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.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.
@@ -6,6 +7,10 @@ import { LitElement, PropertyValues } from 'lit';
  *
  * @fires change - A cloned event of a [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) emitted from the inner `<input type="checkbox">` element.
  *
+ * @slot - A slot for the checkbox label content.
+ *
+ * @csspart label - Change the style of checkbox label.
+ *
  * @example
  *
  * ```js
@@ -16,7 +21,7 @@ import { LitElement, PropertyValues } from 'lit';
  * <daikin-checkbox label="Checkbox label" name="name" value="value"></daikin-checkbox>
  * ```
  */
-export declare class DaikinCheckbox extends LitElement {
+export declare class DaikinCheckbox extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * The form name, submitted as a name/value pair when submitting the form.
@@ -45,6 +50,7 @@ export declare class DaikinCheckbox extends LitElement {
      */
     disabled: boolean;
     get checked(): boolean;
+    private get _labelHidden();
     /**
      * A property-only accessor for `checkState` provided for convenience.
      * _Getter_: Returns `true` when `checkState` is `"checked"`, and `false` otherwise.

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

@@ -1,6 +1,9 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html, nothing } from "lit";
-import { property, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -25,6 +28,7 @@ const CHECKBOX_CLASS_NAME = cva([
   "before:m-auto",
   "before:inset-0",
   "checked:before:i-daikin-checkbox-checked",
+  "checked:before:size-3",
   "indeterminate:before:i-daikin-checkbox-indeterminate",
   "indeterminate:before:size-2.5",
   "focus-visible:outline",
@@ -56,15 +60,19 @@ const CHECKBOX_CLASS_NAME = cva([
   "disabled:checked:bg-ddt-color-common-disabled",
   "disabled:indeterminate:bg-ddt-color-common-disabled"
 ])();
-const cvaLabel = cva(["pr-2"], {
+const cvaLabel = cva([], {
   variants: {
     disabled: {
       false: ["text-ddt-color-common-text-primary"],
       true: ["text-ddt-color-common-disabled"]
+    },
+    hidden: {
+      false: ["inline-block", "pr-2"],
+      true: ["hidden"]
     }
   }
 });
-let DaikinCheckbox = class extends LitElement {
+let DaikinCheckbox = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.name = "";
@@ -78,6 +86,9 @@ let DaikinCheckbox = class extends LitElement {
   get checked() {
     return this.checkState === "checked";
   }
+  get _labelHidden() {
+    return this.labelPosition === "hidden";
+  }
   /**
    * A property-only accessor for `checkState` provided for convenience.
    * _Getter_: Returns `true` when `checkState` is `"checked"`, and `false` otherwise.
@@ -90,9 +101,13 @@ let DaikinCheckbox = class extends LitElement {
     this._internals.setFormValue(this.checked ? this.value : null);
   }
   _handleClick(event) {
+    var _a;
     if (this.disabled) {
       event.preventDefault();
     }
+    if (((_a = event.target) == null ? void 0 : _a.tagName) !== "INPUT") {
+      event.stopPropagation();
+    }
   }
   _handleChange(event) {
     this.checkState = event.target.checked ? "checked" : "unchecked";
@@ -100,29 +115,33 @@ let DaikinCheckbox = class extends LitElement {
     this.dispatchEvent(new Event("change", event));
   }
   render() {
-    return html`<label class="group flex gap-2 items-center font-daikinSerif">
+    return html`<label
+      class="group flex gap-2 items-center size-full font-daikinSerif"
+      part="label"
+      @click=${this._handleClick}
+    >
       <span class="p-2">
         <input
           class=${CHECKBOX_CLASS_NAME}
           type="checkbox"
           name=${this.name}
-          aria-label=${this.labelPosition === "hidden" ? this.label : nothing}
-          .value=${this.value}
-          .indeterminate=${this.checkState === "indeterminate"}
-          .checked=${this.checked}
+          aria-label=${this._labelHidden ? this.label : nothing}
           ?disabled=${this.disabled}
+          .checked=${this.checked}
+          .indeterminate=${this.checkState === "indeterminate"}
+          .value=${this.value}
           @change=${this._handleChange}
-          @click=${this._handleClick}
         />
       </span>
-      <span
+      <slot
         class=${cvaLabel({
-      disabled: this.disabled
+      disabled: this.disabled,
+      hidden: this._labelHidden
     })}
-        ?hidden=${this.labelPosition === "hidden"}
+        ?hidden=${this._labelHidden}
       >
         ${this.label}
-      </span>
+      </slot>
     </label>`;
   }
   updated(changedProperties) {
@@ -158,7 +177,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinCheckbox.prototype, "disabled", 2);
 DaikinCheckbox = __decorateClass([
-  customElement("daikin-checkbox")
+  ddsElement("daikin-checkbox")
 ], DaikinCheckbox);
 export {
   DaikinCheckbox

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

@@ -1,4 +1,5 @@
-import { LitElement, PropertyValues } from 'lit';
+import { PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.js";
 import { DaikinInputGroup } from "../input-group/index.js";
 /**
  * A dropdown list component.
@@ -13,6 +14,11 @@ import { DaikinInputGroup } from "../input-group/index.js";
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/dropdown/index.js";
+ * import "@daikin-oss/design-system-web-components/components/dropdown-item/index.js";
+ * ```
+ *
  * ```html
  * <daikin-dropdown label="Dropdown label">
  *   <daikin-dropdown-item value="value1">Dropdown item 1</daikin-dropdown-item>
@@ -21,13 +27,16 @@ import { DaikinInputGroup } from "../input-group/index.js";
  * </daikin-dropdown>
  * ```
  */
-export declare class DaikinDropdown extends LitElement {
+export declare class DaikinDropdown extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     static readonly formAssociated = true;
     private _internals;
     /**
      * Form value of the dropdown.
      * `null` if not selected.
+     *
+     * If `multiple` is `true`, please use `selectedOptions` instead.
+     * If multiple selection is enabled, the value set to this property will be one of the selected items, and it is not possible to predict which value will be set.
      */
     value: string | null;
     /**
@@ -50,6 +59,22 @@ export declare class DaikinDropdown extends LitElement {
      * Whether the dropdown menu is opened.
      */
     open: boolean;
+    /**
+     * Whether the dropdown menu is supports multiple selections.
+     */
+    multiple: boolean;
+    /**
+     * An array of `value` s for the currently selected option.
+     *
+     * This can be used regardless of the value of `multiple`, but if `multiple` is `true`, always use this instead of `value`.
+     * If `multiple` is `false`, the second and subsequent items will be deleted.
+     */
+    selectedOptions: string[];
+    /**
+     * Specifies the maximum number of items to display without omission in the label when `multiple` is `true`.
+     * Specify `null` to display all selected items without omission.
+     */
+    maxLabels: number | null;
     private readonly _items;
     private _button;
     /**
@@ -57,8 +82,8 @@ export declare class DaikinDropdown extends LitElement {
      * Set automatically by `reflectInputGroup` method.
      */
     private _label;
-    private _hasSelectedItem;
-    private _selectedItemLabel;
+    private get _selectionLabels();
+    private _initialUpdateCompleted;
     private _autoUpdateController;
     private _clickOutsideController;
     /**
@@ -66,18 +91,32 @@ export declare class DaikinDropdown extends LitElement {
      * The next time the dropdown opens, the focus will be moved to this element.
      */
     private _lastFocusedItem;
-    private _updateFormValue;
+    private _dropdownRef;
     private _onClickOutside;
-    private _reflectItemsAndLabel;
-    private _handleClick;
     private _searchItem;
-    private _handleKeyDownEscape;
     private _moveFocus;
-    private _handleKeyDown;
+    private _updateFormValue;
+    private _updateItemsSelectable;
+    private _updateValueBySelectedOptions;
+    private _updateSelectedOptionsByValue;
     /**
-     * Handle `select` event from `daikin-dropdown-item`.
+     * Handling for when an option is selected.
+     * If multiple selection is enabled, the specified option is added to or removed from the array of selected options.
+     * If multiple selection is disabled, the current value is set to the specified option. The selection is not cleared.
+     *
+     * @param value The value of selected option.
      */
-    private _handleSelect;
+    private _handleSelectOption;
+    /**
+     * Removes the last selected option.
+     *
+     * If multiple selection is enabled, remove the last selected option and the array will eventually become empty.
+     * If multiple selection is disabled, directly empty the selected options.
+     */
+    private _removeLastSelection;
+    private _handleClick;
+    private _handleKeyDown;
+    private _handleKeyDownEscape;
     /**
      * Handle `focusin` event to remember last focused item.
      */
@@ -88,9 +127,23 @@ export declare class DaikinDropdown extends LitElement {
      * 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;
+    /**
+     * Handle `select` event from `daikin-dropdown-item`.
+     */
+    private _handleSelect;
+    private _handleSlotChange;
     render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the inner button.
+     * @param options focus options
+     */
     focus(options?: FocusOptions): void;
+    protected willUpdate(changedProperties: PropertyValues): 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 {