@daikin-oss/design-system-web-components 1.6.0 → 2.0.0

package/dist/cjs/components/combobox/daikin-combobox.cjs

@@ -33,11 +33,9 @@ const cvaInput = classVarianceAuthority.cva(
     "gap-2",
     "w-full",
     "h-full",
-    "min-h-12",
+    "min-h-(--dds-input-height)",
     "bg-ddt-color-common-background-default",
-    "py-3",
-    "pl-4",
-    "pr-16",
+    "pr-[calc(var(--dds-padding-30)+var(--dds-gap-10)*2+var(--dds-icon)*2)]",
     "rounded-sm",
     "overflow-hidden",
     "text-left",
@@ -54,6 +52,7 @@ const cvaInput = classVarianceAuthority.cva(
     "enabled:outline-(--color-base)",
     "disabled:text-ddt-color-common-disabled",
     "disabled:outline-ddt-color-common-disabled",
+    "disabled:placeholder:text-ddt-color-common-disabled",
     "enabled:after:text-ddt-color-common-text-primary",
     "disabled:after:text-ddt-color-common-disabled",
     "enabled:hover:bg-ddt-color-common-surface-hover",
@@ -68,6 +67,12 @@ const cvaInput = classVarianceAuthority.cva(
           "focus-visible:[--color-base:var(--dds-color-common-border-focus)]"
         ],
         true: ["[--color-base:var(--dds-color-common-danger-default)]"]
+      },
+      hasLeftIcon: {
+        false: ["pl-[calc(var(--dds-padding-30)+var(--dds-space-100))]"],
+        true: [
+          "pl-[calc(var(--dds-padding-30)+var(--dds-gap-10)+var(--dds-icon)+var(--dds-space-100))]"
+        ]
       }
     }
   }
@@ -78,9 +83,11 @@ const cvaOption = classVarianceAuthority.cva(
     "items-center",
     "gap-1",
     "size-full",
-    "min-h-12",
-    "p-3",
+    "min-h-(--dds-input-height)",
+    "py-[calc(var(--dds-padding-30)+0.09375rem)]",
+    "px-(--dds-padding-30)",
     "text-left",
+    "text-(length:--dds-font-size-label-text)",
     "relative",
     "data-focus:outline-solid",
     "data-focus:outline-2",
@@ -100,10 +107,10 @@ const cvaOption = classVarianceAuthority.cva(
           "hover:[--color-primary:var(--dds-color-common-surface-selected-hover)]",
           "active:[--color-primary:var(--dds-color-common-surface-selected-press)]",
           "after:icon-[daikin--dropdown-check]",
-          "after:size-6",
-          "pr-10",
+          "after:size-(--dds-icon)",
+          "pr-[calc((var(--dds-padding-10))+var(--dds-icon)+var(--dds-padding-30))]",
           "after:absolute",
-          "after:right-3",
+          "after:right-(--dds-padding-30)",
           "after:top-1/2",
           "after:-translate-y-1/2"
         ]
@@ -125,7 +132,7 @@ const cvaOption = classVarianceAuthority.cva(
 const cvaArrow = classVarianceAuthority.cva(
   [
     "icon-[daikin--chevron-down]",
-    "size-6",
+    "size-(--dds-icon)",
     "shrink-0",
     "z-10",
     "pointer-events-auto"
@@ -187,17 +194,22 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
     this.required = false;
     this.error = false;
     this.open = false;
+    this.readonly = false;
     this.items = [];
     this._viewItems = [];
     this._currentFocusItemIndex = null;
     this.filter = defaultFilterFn;
     this._label = null;
+    this._hasLeftIcon = false;
     this._autoUpdateController = new floatingUiAutoUpdate.FloatingUIAutoUpdateController(this);
     this._clickOutsideController = new clickOutside.ClickOutsideController(
       this,
       this._onClickOutside
     );
   }
+  get _isPopupOpen() {
+    return this.open && !this.disabled && !this.readonly;
+  }
   _onClickOutside() {
     this._closePopup();
   }
@@ -245,6 +257,10 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
     this.open = false;
     this._currentFocusItemIndex = null;
   }
+  _handleLeftIconSlotChange(event) {
+    const slot = event.target;
+    this._hasLeftIcon = slot.assignedElements().length > 0;
+  }
   _handleFocusOut(event) {
     if (this.open && // ignore if focusing within the component, especially to the menu items
     // or menu item will be destroyed before click event is handled
@@ -253,7 +269,7 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
     }
   }
   _handleClick() {
-    if (this.disabled) {
+    if (this.disabled || this.readonly) {
       return;
     }
     this._autoUpdateController.setTriggerContext({
@@ -272,6 +288,9 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
     this._handleClick();
   }
   _handleClickItem(item) {
+    if (this.disabled || this.readonly) {
+      return;
+    }
     const value = getItemValue(item);
     this.value = value;
     this.open = false;
@@ -289,6 +308,9 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
     );
   }
   _handleKeyDown(event) {
+    if (this.disabled || this.readonly) {
+      return;
+    }
     if (event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
       if (event.key === "ArrowDown") {
         event.preventDefault();
@@ -372,6 +394,9 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
    * Clears the current value and triggers form value update.
    */
   _handleClearClick() {
+    if (this.disabled || this.readonly) {
+      return;
+    }
     this.value = "";
     this.dispatchEvent(
       new Event("input", {
@@ -397,6 +422,9 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
    * Updates the value, applies filtering, and opens dropdown if matches are found.
    */
   _handleInput(event) {
+    if (this.disabled || this.readonly) {
+      return;
+    }
     this.value = event.target.value;
     this._synchronizeShowItems("filtered");
     this.open = this._viewItems.length > 0;
@@ -406,6 +434,9 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
    * Dispatches a custom change event when the input value changes and loses focus.
    */
   _handleChange() {
+    if (this.disabled || this.readonly) {
+      return;
+    }
     this.dispatchEvent(
       new Event("change", {
         bubbles: true
@@ -418,19 +449,30 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
         >${`${this._viewItems.length} available results`}</span
       >
       <div class="w-full relative">
+        <div
+          class="absolute left-(--dds-padding-30) top-1/2 -translate-y-1/2 flex items-center pointer-events-none z-10 ${this.disabled ? "text-ddt-color-common-disabled" : "text-ddt-color-common-text-primary"}"
+        >
+          <slot
+            name="left-icon"
+            class="slotted:size-(--dds-icon)"
+            @slotchange=${this._handleLeftIconSlotChange}
+          ></slot>
+        </div>
         <input
           class=${cvaInput({
-      error: this.error
+      error: this.error,
+      hasLeftIcon: this._hasLeftIcon
     })}
           role="combobox"
           name=${ifDefined_js.ifDefined(this.getBackingProperty("name"))}
           placeholder=${ifDefined_js.ifDefined(this.getBackingProperty("placeholder"))}
           .value=${this.value}
           ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
           aria-label=${ifDefined_js.ifDefined(this._label)}
-          aria-expanded=${this.open && !this.disabled}
+          aria-expanded=${this._isPopupOpen}
           aria-disabled=${this.disabled}
-          aria-controls=${this.open ? "combobox-items" : lit.nothing}
+          aria-controls=${this._isPopupOpen ? "combobox-items" : lit.nothing}
           aria-autocomplete="list"
           aria-required=${this.required}
           aria-haspopup="listbox"
@@ -442,33 +484,36 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
           ${this._autoUpdateController.refReference()}
         />
         <div
-          class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1"
+          class="absolute right-(--dds-padding-30) top-1/2 -translate-y-1/2 flex items-center gap-1"
         >
-          ${!!this.value && !!this.value.length ? lit.html`<daikin-icon-button
-                class="size-6 shrink-0"
+          ${!!this.value && !!this.value.length && !this.readonly ? lit.html`<daikin-icon-button
+                class="size-(--dds-icon) shrink-0 part-icon-button:p-(--dds-padding-10)!"
                 color="neutral"
                 variant="ghost"
-                ?disabled=${this.disabled}
+                ?disabled=${this.disabled || this.readonly}
                 button-aria-label="Clear"
                 button-tabindex="-1"
                 @click=${this._handleClearClick}
                 @focusout=${this._handleFocusOut}
               >
-                <span class="icon-[daikin--close] size-6"></span>
+                <span class="icon-[daikin--close] size-(--dds-icon)"></span>
               </daikin-icon-button>` : lit.nothing}
-          <span
-            class=${cvaArrow({ open: this.open, disabled: this.disabled })}
-            role="img"
-            aria-label=${this.open ? "Close" : "Open"}
-            @mousedown=${this._handleArrowClick}
-            @keydown=${this._handleKeyDown}
-          >
-          </span>
+          ${this.readonly && !this.disabled ? lit.nothing : lit.html`<span
+                class=${cvaArrow({
+      open: this._isPopupOpen,
+      disabled: this.disabled
+    })}
+                role="img"
+                aria-label=${this._isPopupOpen ? "Close" : "Open"}
+                @mousedown=${this._handleArrowClick}
+                @keydown=${this._handleKeyDown}
+              >
+              </span>`}
         </div>
       </div>
       <div
         id="combobox-items"
-        popover="manual"
+        .popover=${"manual"}
         tabindex="-1"
         class="flex flex-col overflow-hidden rounded-sm border border-ddt-color-divider floating-unready:hidden absolute left-(--floating-x,0) top-(--floating-y,0) min-w-(--floating-width) max-h-50 max-w-min"
         @floating-ready=${this._handleFloatingReady}
@@ -508,10 +553,10 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
     // TODO(DDS-1226): refactor here with CSS Anchor Positioning instead of using floating-ui
     this._autoUpdateController.directive(
       floatingPositionOptions,
-      this.open && !this.disabled
+      this._isPopupOpen
     )}
       ${// Listen to click outside only when the combobox is open.
-    this._clickOutsideController.directive(this.open && !this.disabled)}
+    this._clickOutsideController.directive(this._isPopupOpen)}
     </div>`;
   }
   /**
@@ -522,6 +567,11 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
     var _a;
     (_a = this._input) == null ? void 0 : _a.focus(options);
   }
+  willUpdate(changedProperties) {
+    if ((changedProperties.has("open") || changedProperties.has("readonly")) && this.readonly && this.open) {
+      this.open = false;
+    }
+  }
   updated(changedProperties) {
     var _a;
     if (changedProperties.has("items")) {
@@ -530,9 +580,9 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
     if (changedProperties.has("value")) {
       this._updateFormValue();
     }
-    if (changedProperties.has("open") || changedProperties.has("disabled")) {
+    if (changedProperties.has("open") || changedProperties.has("disabled") || changedProperties.has("readonly")) {
       (_a = this._autoUpdateController.floatingElement) == null ? void 0 : _a.togglePopover(
-        this.open && !this.disabled
+        this._isPopupOpen
       );
       if (changedProperties.get("open") && !this.open && !this.disabled) {
         this.focus();
@@ -540,7 +590,7 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
     }
     if (changedProperties.has("open")) {
       const wasOpen = changedProperties.get("open");
-      if (wasOpen !== void 0) {
+      if (wasOpen !== void 0 && wasOpen !== this.open) {
         this.dispatchEvent(
           new ToggleEvent("toggle", {
             oldState: wasOpen ? "open" : "closed",
@@ -561,6 +611,7 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
   reflectInputGroup(inputGroup) {
     const isError = !inputGroup.disabled && !!inputGroup.error;
     this.disabled = !!inputGroup.disabled;
+    this.readonly = !!inputGroup.readonly;
     this.required = !!inputGroup.required;
     this.error = isError;
     this._label = inputGroup.label;
@@ -574,6 +625,27 @@ exports.DaikinCombobox.styles = lit.css`
       width: 100%;
     }
 
+    :host([readonly]:not([disabled])) input {
+      --color-base: var(--dds-color-common-surface-secondary);
+      background-color: var(--dds-color-common-surface-secondary);
+    }
+
+    :host([readonly]:not([disabled])) input:hover,
+    :host([readonly]:not([disabled])) input:active {
+      --color-base: var(--dds-color-common-surface-secondary);
+      background-color: var(--dds-color-common-surface-secondary);
+    }
+
+    :host([readonly]:not([disabled])) input:focus-visible {
+      --color-base: var(--dds-color-common-border-focus);
+    }
+
+    :host([readonly][error]:not([disabled])) input,
+    :host([readonly][error]:not([disabled])) input:hover,
+    :host([readonly][error]:not([disabled])) input:active {
+      --color-base: var(--dds-color-common-danger-default);
+    }
+
     ::slotted {
       width: 100%;
     }
@@ -593,6 +665,9 @@ __decorateClass([
 __decorateClass([
   ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinCombobox.prototype, "open", 2);
+__decorateClass([
+  ddsProperty.property({ type: Boolean, reflect: true })
+], exports.DaikinCombobox.prototype, "readonly", 2);
 __decorateClass([
   ddsProperty.property({ type: Array, attribute: false })
 ], exports.DaikinCombobox.prototype, "items", 2);
@@ -611,6 +686,9 @@ __decorateClass([
 __decorateClass([
   decorators_js.state()
 ], exports.DaikinCombobox.prototype, "_label", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinCombobox.prototype, "_hasLeftIcon", 2);
 exports.DaikinCombobox = __decorateClass([
   decorators.ddsElement("daikin-combobox")
 ], exports.DaikinCombobox);

package/dist/cjs/components/combobox/daikin-combobox.d.cts

@@ -29,6 +29,8 @@ export declare function defaultFilterFn(items: readonly ComboboxItem[], value: s
  * @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.
  * @fires toggle - A custom event emitted when the combobox menu opens or closes.
  *
+ * @slot left-icon - A slot for an icon to be placed to the left of the text. Place `daikin-icon` or something similar.
+ *
  * @example
  *
  * ```js
@@ -67,6 +69,10 @@ export declare class DaikinCombobox extends DDSFormElement {
      * When controlling this property externally, listen to the `toggle` event and sync your state based on `event.newState` to keep it in sync.
      */
     open: boolean;
+    /**
+     * Whether the combobox is readonly.
+     */
+    readonly: boolean;
     /**
      * An array of items for the combobox dropdown. Can be:
      * - Array of strings: ['Option 1', 'Option 2']
@@ -86,12 +92,15 @@ export declare class DaikinCombobox extends DDSFormElement {
      * Set automatically by `reflectInputGroup` method.
      */
     private _label;
+    private _hasLeftIcon;
+    private get _isPopupOpen();
     private _autoUpdateController;
     private _clickOutsideController;
     private _onClickOutside;
     private _moveFocusByKeydown;
     private _updateFormValue;
     private _closePopup;
+    private _handleLeftIconSlotChange;
     private _handleFocusOut;
     private _handleClick;
     private _handleArrowClick;
@@ -129,6 +138,7 @@ export declare class DaikinCombobox extends DDSFormElement {
      * @param options focus options
      */
     focus(options?: FocusOptions): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
     protected updated(changedProperties: PropertyValues<this>): void;
     /**
      * This method is used by `daikin-input-group` to reflect it's attributes to this component.