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

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

@@ -1,16 +1,17 @@
 import { flip, offset, size } from "@floating-ui/dom";
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property, queryAssignedElements, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { createRef, ref } from "lit/directives/ref.js";
-import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
-import { ClickOutsideController } from "../../controllers/click-outside.js";
+import { DDSFormElement } from "../../base/dds-form-element.js";
 import { FloatingUIAutoUpdateController } from "../../controllers/floating-ui-auto-update.js";
 import tailwindStyles from "../../tailwind.css.js";
 import { isSimpleKeyEvent } from "../../utils/is-simple-key.js";
+import "../dropdown-item/daikin-dropdown-item.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -43,12 +44,13 @@ const cvaButton = cva(
     "outline",
     "outline-1",
     "-outline-offset-1",
+    "break-all",
     "focus-visible:outline-2",
     "focus-visible:-outline-offset-2",
     "enabled:outline-[--color-base]",
     "disabled:text-ddt-color-common-disabled",
     "disabled:outline-ddt-color-common-disabled",
-    "after:i-daikin-dropdown-chevron-down",
+    "after:i-daikin-chevron-down",
     "after:size-6",
     "after:flex-none",
     "after:ml-auto",
@@ -98,11 +100,9 @@ const floatingPositionOptions = {
     })
   ]
 };
-let DaikinDropdown = class extends DDSElement {
+let DaikinDropdown = class extends DDSFormElement {
   constructor() {
     super(...arguments);
-    this._internals = this.attachInternals();
-    this.value = null;
     this.placeholder = "";
     this.disabled = false;
     this.required = false;
@@ -114,10 +114,7 @@ let DaikinDropdown = class extends DDSElement {
     this._label = null;
     this._initialUpdateCompleted = false;
     this._autoUpdateController = new FloatingUIAutoUpdateController(this);
-    this._clickOutsideController = new ClickOutsideController(
-      this,
-      this._onClickOutside
-    );
+    this._willBeFocusedByPress = false;
     this._lastFocusedItem = null;
     this._dropdownRef = createRef();
   }
@@ -130,9 +127,6 @@ let DaikinDropdown = class extends DDSElement {
       }
     );
   }
-  _onClickOutside() {
-    this.open = false;
-  }
   _searchItem(prefix) {
     const items = this._items.filter(
       (item) => {
@@ -159,24 +153,18 @@ let DaikinDropdown = class extends DDSElement {
       this.open = true;
       return;
     }
-    const items = this._items;
-    const activeElement = document.activeElement;
-    const focusedItemIndex = activeElement ? items.findIndex((item) => item.contains(activeElement)) : -1;
+    const items = this._items.filter(({ disabled }) => !disabled);
+    const focusedItemIndex = items.findIndex(
+      (item2) => item2.matches(":focus-within")
+    );
     if (focusedItemIndex === -1) {
       moveOffset = 1;
     }
-    for (let index = focusedItemIndex + moveOffset, i = 0; i < items.length; index += moveOffset, i++) {
-      index = (index + items.length) % items.length;
-      const item = items[index];
-      if (item.disabled) {
-        continue;
-      }
-      item.focus();
-      break;
-    }
+    const item = items[Math.max(0, Math.min(focusedItemIndex + moveOffset, items.length - 1))];
+    item.focus();
   }
   _updateFormValue() {
-    this._internals.setFormValue(JSON.stringify(this.value));
+    this.setFormValue(this.value);
   }
   _updateItemsSelectable() {
     for (const item of this._items) {
@@ -184,7 +172,7 @@ let DaikinDropdown = class extends DDSElement {
     }
   }
   _updateValueBySelectedOptions() {
-    this.value = this.selectedOptions.at(-1) ?? null;
+    this.value = this.selectedOptions.at(-1) ?? "";
   }
   _updateSelectedOptionsByValue() {
     this.selectedOptions = this.value ? [this.value] : [];
@@ -199,6 +187,15 @@ let DaikinDropdown = class extends DDSElement {
   _handleSelectOption(value) {
     this.value = value;
     this.selectedOptions = this.multiple ? this.selectedOptions.includes(value) ? this.selectedOptions.filter((option) => option != value) : [...this.selectedOptions, value] : [value];
+    this.dispatchEvent(new Event("change"));
+  }
+  _handleFocusOut(event) {
+    if (!event.relatedTarget && !this._willBeFocusedByPress) {
+      if (!this.multiple && this._lastFocusedItem) {
+        this._handleSelectOption(this._lastFocusedItem.value);
+      }
+      this.open = false;
+    }
   }
   /**
    * Removes the last selected option.
@@ -209,19 +206,23 @@ let DaikinDropdown = class extends DDSElement {
   _removeLastSelection() {
     if (this.multiple) {
       this.selectedOptions = this.selectedOptions.slice(0, -1);
-      this.value = this.selectedOptions.at(-1) ?? null;
+      this.value = this.selectedOptions.at(-1) ?? "";
     } else {
       this.selectedOptions = [];
-      this.value = null;
+      this.value = "";
     }
   }
-  _handleClick() {
-    if (this.disabled) {
+  _handleKeyDown(event) {
+    if (event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        this.open = true;
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        this.open = false;
+      }
       return;
     }
-    this.open = !this.open;
-  }
-  _handleKeyDown(event) {
     if (!isSimpleKeyEvent(event)) {
       return;
     }
@@ -234,6 +235,8 @@ let DaikinDropdown = class extends DDSElement {
     const operation = {
       ArrowDown: "down",
       ArrowUp: "up",
+      PageDown: "pageDown",
+      PageUp: "pageUp",
       Escape: "close"
     }[event.key];
     switch (operation) {
@@ -242,6 +245,11 @@ let DaikinDropdown = class extends DDSElement {
         event.preventDefault();
         this._moveFocus(operation === "up" ? -1 : 1);
         break;
+      case "pageDown":
+      case "pageUp":
+        event.preventDefault();
+        this._moveFocus(operation === "pageUp" ? -10 : 10);
+        break;
       case "close":
         event.preventDefault();
         this._handleKeyDownEscape();
@@ -265,6 +273,28 @@ let DaikinDropdown = class extends DDSElement {
     }
     this._lastFocusedItem = target;
   }
+  _handlePointerDown() {
+    if (this.open) {
+      this._willBeFocusedByPress = true;
+    }
+  }
+  _handlePointerUp() {
+    if (this.disabled) {
+      return;
+    }
+    this._willBeFocusedByPress = false;
+    this.open = !this.open;
+  }
+  _handleButtonKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      event.stopPropagation();
+      if (this.disabled) {
+        return;
+      }
+      this.open = !this.open;
+    }
+  }
   /**
    * 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.
@@ -273,7 +303,9 @@ let DaikinDropdown = class extends DDSElement {
   _handleFloatingReady() {
     const items = this._items;
     const item = items.find((item2) => item2 === this._lastFocusedItem) ?? items.find((item2) => item2.value === this.value) ?? items.at(0);
-    item == null ? void 0 : item.focus();
+    setTimeout(() => {
+      item == null ? void 0 : item.focus();
+    }, 100);
   }
   /**
    * Handle `select` event from `daikin-dropdown-item`.
@@ -283,13 +315,13 @@ let DaikinDropdown = class extends DDSElement {
     if (!this.multiple) {
       this.open = false;
     }
-    this.dispatchEvent(new Event("change"));
   }
   _handleSlotChange() {
     this._updateItemsSelectable();
   }
   render() {
-    return html`<div class="w-full relative" @keydown=${this._handleKeyDown}>
+    const fallbackLabel = this.open && !this.disabled ? "Close dropdown" : this.selectedOptions.length ? `Selected: ${this._selectionLabels.join(", ")}` : "Open dropdown";
+    return html`<div class="w-full" @keydown=${this._handleKeyDown}>
       <button
         ${ref(this._dropdownRef)}
         type="button"
@@ -299,32 +331,40 @@ let DaikinDropdown = class extends DDSElement {
       placeholder: !this.selectedOptions.length
     })}
         ?disabled=${this.disabled}
-        role="combobox"
-        aria-label=${ifDefined(this._label ?? void 0)}
+        aria-label=${this._label ?? fallbackLabel}
         aria-expanded=${this.open && !this.disabled}
         aria-disabled=${this.disabled}
         aria-controls="dropdown-items"
-        aria-autocomplete="list"
         aria-required=${this.required}
-        @click=${this._handleClick}
+        aria-haspopup="listbox"
+        @pointerup=${this._handlePointerUp}
+        @pointerdown=${this._handlePointerDown}
+        @keydown=${this._handleButtonKeyDown}
         ${this._autoUpdateController.refReference()}
       >
-        ${this.selectedOptions.length ? this.multiple && this.selectedOptions.length > (this.maxLabels ?? 0) ? `${this.selectedOptions.length} items selected` : this._selectionLabels.join(", ") : this.placeholder}
+        <span class="truncate">
+          ${this.selectedOptions.length ? this.multiple && this.selectedOptions.length > (this.maxLabels ?? 0) ? this.selectedOptions.length === 1 ? `one item selected` : `${this.selectedOptions.length} items selected` : this._selectionLabels.join(", ") : this.placeholder}
+        </span>
       </button>
       <div
         id="dropdown-items"
-        popover
-        class="floating-unready:hidden absolute left-[--floating-x,0] top-[--floating-y,0] min-w-[--floating-width] max-h-[12.5rem] border border-ddt-color-divider overflow-y-auto opacity-1 transition-[opacity] rounded"
-        aria-label=${ifDefined(this._label ?? void 0)}
-        role="listbox"
+        popover="manual"
+        class="flex flex-col overflow-hidden floating-unready:hidden absolute left-[--floating-x,0] top-[--floating-y,0] min-w-[--floating-width] max-h-[12.5rem] border border-ddt-color-divider opacity-1 transition-[opacity] rounded max-w-min"
         @floating-ready=${this._handleFloatingReady}
         ${this._autoUpdateController.refFloating()}
       >
-        <slot
-          @slotchange=${this._handleSlotChange}
-          @select=${this._handleSelect}
-          @focusin=${this._handleFocusIn}
-        ></slot>
+        <div
+          class="flex-1 overflow-y-auto break-all"
+          aria-label=${ifDefined(this._label ?? void 0)}
+          role="listbox"
+        >
+          <slot
+            @slotchange=${this._handleSlotChange}
+            @select=${this._handleSelect}
+            @focusin=${this._handleFocusIn}
+            @focusout=${this._handleFocusOut}
+          ></slot>
+        </div>
       </div>
       ${// Activate auto update only when the dropdown is open.
     // TODO(DDS-1226): refactor here with CSS Anchor Positioning instead of using floating-ui
@@ -332,8 +372,6 @@ let DaikinDropdown = class extends DDSElement {
       floatingPositionOptions,
       this.open && !this.disabled
     )}
-      ${// Listen to click outside only when the dropdown is open.
-    this._clickOutsideController.directive(this.open && !this.disabled)}
     </div>`;
   }
   /**
@@ -410,10 +448,6 @@ DaikinDropdown.styles = css`
       width: 100%;
     }
   `;
-DaikinDropdown.formAssociated = true;
-__decorateClass([
-  property({ type: String, reflect: true })
-], DaikinDropdown.prototype, "value", 2);
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinDropdown.prototype, "placeholder", 2);

package/dist/es-dev/components/dropdown-item/daikin-dropdown-item.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property, query } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";

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

@@ -1,23 +1,103 @@
 import { DDSElement } from "../../base/index.js";
+import { IconRegistry } from "../../icon-registry.js";
 import { MergeVariantProps } from "../../type-utils.js";
-import { icons } from "./icons.json.js";
+declare const icons: {
+    "logo-positive": {
+        class: string;
+        color: null;
+    };
+    "logo-negative": {
+        class: string;
+        color: null;
+    };
+    alarm: {
+        class: string;
+        color: null;
+    };
+    close: {
+        class: string;
+        color: string;
+    };
+    information: {
+        class: string;
+        color: null;
+    };
+    error: {
+        class: string;
+        color: null;
+    };
+    success: {
+        class: string;
+        color: null;
+    };
+    warning: {
+        class: string;
+        color: null;
+    };
+    "pagination-chevron-left": {
+        class: string;
+        color: string;
+    };
+    "pagination-chevron-right": {
+        class: string;
+        color: string;
+    };
+    profile: {
+        class: string;
+        color: null;
+    };
+    "chevron-up": {
+        class: string;
+        color: null;
+    };
+    "chevron-down": {
+        class: string;
+        color: null;
+    };
+    "chevron-left": {
+        class: string;
+        color: null;
+    };
+    "chevron-right": {
+        class: string;
+        color: null;
+    };
+    sort: {
+        class: string;
+        color: null;
+    };
+};
 export declare const iconList: string[];
 export type IconType = keyof typeof icons;
 declare const cvaIcon: (props?: ({
-    icon?: string | number | null | undefined;
     color?: "current" | "default" | "black" | "white" | null | undefined;
+    mode?: "mask" | "background" | "inline" | "static" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type IconVariantProps = MergeVariantProps<typeof cvaIcon>;
 /**
  * The icon component is a versatile UI element used to display small graphical symbols or images that represent actions, objects, or concepts within an application.
- * The icon set is provided by DDS.
+ * The icon set is provided by DDS, and it also supports custom icons via the icon registry.
  *
- * To use an arbitrary color, specify `"current"` for the `color` property and set the `color` CSS property to the color you want to use.
+ * For static DDS icons, the component uses the predefined icon set.
+ * For custom icons, it can dynamically load icons from various sources using the icon registry.
  *
- * 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.
+ * This component supports multiple rendering modes for enhanced security when using custom icons:
  *
- * @cssprop [--ddc-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`.
+ * - **mask** (default for custom icons): Uses CSS mask-image for secure rendering with color customization
+ * - **background**: Uses CSS background-image for secure rendering without color customization
+ * - **inline**: Traditional SVG rendering using innerHTML (use with caution)
+ * - **static** (for DDS icons): Uses predefined CSS classes from the DDS icon set
+ *
+ * **Security Note**: When using custom icons, especially with `inline` mode, ensure that the SVG content comes from trusted sources only.
+ * Untrusted input may lead to XSS vulnerabilities. Consider using `mask` or `background` modes for better security.
+ *
+ * To use a custom color, set the `color` property to `"current"` and apply the desired color using the CSS `color` property.
+ * This works out-of-the-box for mask and static modes, and can be achieved for inline mode with additional effort. The background mode does not support custom colors.
+ *
+ * If an icon cannot be loaded, a blank space will be displayed.
+ * In development builds, warnings will be shown in the console for debugging.
+ *
+ * @cssprop [--ddc-icon-size] - Icon size. If a value other than "current" is set for the `size` property, it will be automatically overwritten. This may also be set by a parent component such as `daikin-icon-button`.
  *
  * @example
  *
@@ -26,15 +106,51 @@ export type IconVariantProps = MergeVariantProps<typeof cvaIcon>;
  * ```
  *
  * ```html
+ * <!-- Using a DDS static icon -->
  * <daikin-icon icon="information" color="black" size="m"></daikin-icon>
+ *
+ * <!-- Using a custom icon -->
+ * <daikin-icon icon="my-custom-icon" color="black" size="m"></daikin-icon>
+ *
+ * <script>
+ * import { iconRegistry } from "@daikin-oss/design-system-web-components/icon-registry.js";
+ *
+ * // Register with mask mode for secure rendering
+ * iconRegistry.register({
+ *   name: "my-custom-icon",
+ *   svg: {
+ *     svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">...</svg>',
+ *     mode: "mask",
+ *     defaultColor: "#0066cc"
+ *   },
+ * });
+ *
+ * // Register dynamic custom icons
+ * iconRegistry.register({
+ *   match: /^custom-/,
+ *   async fetch: (name) => {
+ *     const response = await fetch(`/path/to/custom/icons/${name}.svg`);
+ *     if (!response.ok) {
+ *       throw new Error(`Failed to load custom icon "${name}"`);
+ *     }
+ *     return response.text();
+ *   },
+ * });
+ * </script>
  * ```
  */
 export declare class DaikinIcon extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * Specify the name of the icon
+     * Specify icon registry instance.
+     * Default is the global icon registry.
+     */
+    registry: IconRegistry;
+    /**
+     * Specify the name of the icon.
+     * Can be a static DDS icon name or a custom icon name registered in the icon registry.
      */
-    icon: IconType | null;
+    icon: string | null;
     /**
      * Specify icon color
      */
@@ -44,6 +160,10 @@ export declare class DaikinIcon extends DDSElement {
      * If "current" is set, `--ddc-icon-size` CSS variable will be used. `--ddc-icon-size` may be set by the parent component such as `daikin-icon-button`.
      */
     size: "s" | "m" | "l" | "xl" | "current";
+    private _iconData;
+    connectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private loadIcon;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {