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

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

@@ -3,11 +3,13 @@ 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 unsafeHtml_js = require("lit/directives/unsafe-html.js");
 const ddsElement = require("../../base/dds-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
+const iconRegistry = require("../../icon-registry.cjs");
 const tailwind = require("../../tailwind.css.cjs");
-const icons = require("./icons.json.cjs");
+const icons$1 = require("./icons.json.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators2, target, key, kind) => {
@@ -18,47 +20,164 @@ var __decorateClass = (decorators2, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const iconList = Object.keys(icons.icons);
-const iconClassMap = Object.fromEntries(
-  Object.entries(icons.icons).map(([name, object]) => [name, object.class])
+const { icons } = icons$1.default;
+const iconList = Object.keys(icons).filter(
+  (key) => key !== "logo-positive" && key !== "logo-negative"
 );
-const cvaIcon = classVarianceAuthority.cva(["block"], {
+function svgToDataUrl(svg) {
+  const encoded = encodeURIComponent(svg).replaceAll("'", "%27");
+  return `url("data:image/svg+xml,${encoded}")`;
+}
+const cvaIcon = classVarianceAuthority.cva(["inline-flex size-full"], {
   variants: {
-    icon: iconClassMap,
     color: {
       black: ["text-ddt-color-common-background-overlay"],
       white: ["text-ddt-color-common-text-inverse"],
       default: ["text-[--default-color]"],
       current: []
       // uses `currentColor`
+    },
+    mode: {
+      inline: [],
+      mask: [
+        "bg-current",
+        "[mask-size:100%_100%]",
+        "[-webkit-mask-size:100%_100%]",
+        "[mask-repeat:no-repeat]",
+        "[-webkit-mask-repeat:no-repeat]",
+        "[mask-image:var(--svg)]",
+        "[-webkit-mask-image:var(--svg)]"
+      ],
+      background: [
+        "bg-no-repeat",
+        "bg-[length:100%_100%]",
+        "bg-[image:var(--svg)]"
+      ],
+      static: []
+      // for static icons from icons.json
     }
   }
 });
 exports.DaikinIcon = class DaikinIcon extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
+    this.registry = iconRegistry.iconRegistry;
     this.icon = null;
     this.color = "default";
     this.size = "current";
+    this._iconData = null;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.loadIcon().catch((error) => {
+      {
+        console.warn(
+          `Error loading icon${this.icon ? ` "${this.icon}"` : ""} in <${this.tagName.toLowerCase()}>:`,
+          error
+        );
+      }
+    });
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("icon")) {
+      this.loadIcon().catch((error) => {
+        {
+          console.warn(
+            `Error loading icon${this.icon ? ` "${this.icon}"` : ""} in <${this.tagName.toLowerCase()}>:`,
+            error
+          );
+        }
+      });
+    }
+  }
+  async loadIcon() {
+    if (!this.icon) {
+      this._iconData = null;
+      return;
+    }
+    const staticIcon = icons[this.icon];
+    if (staticIcon) {
+      this._iconData = {
+        mode: "static",
+        defaultColor: staticIcon.color,
+        class: staticIcon.class
+      };
+      return;
+    }
+    try {
+      const iconData = await this.registry.getIcon(this.icon);
+      if (true) {
+        if (!iconData) {
+          console.warn(`Icon "${this.icon}" not found in registry`);
+        }
+      }
+      this._iconData = iconData;
+    } catch (error) {
+      {
+        console.warn(`Failed to load custom icon "${this.icon}":`, error);
+      }
+      this._iconData = null;
+    }
   }
   render() {
-    var _a;
-    const defaultColor = (_a = icons.icons[this.icon ?? ""]) == null ? void 0 : _a.color;
     {
       if (!this.icon) {
-        console.warn("icon property is not specified");
-      } else if (!(this.icon in icons.icons)) {
-        console.warn(`There is no icon named "${this.icon}".`);
-      } else if (this.color === "default" && !defaultColor) {
+        console.warn("icon property is not specified for daikin-icon");
+      }
+    }
+    if (!this.icon) {
+      return lit.html`<span
+        class=${cvaIcon({
+        color: this.color,
+        mode: "static"
+      })}
+        title="Unknown icon"
+      ></span>`;
+    }
+    if (!this._iconData) {
+      return lit.html`<span
+        class=${cvaIcon({
+        color: this.color,
+        mode: "inline"
+      })}
+        title=${this.icon || "Unknown icon"}
+      ></span>`;
+    }
+    const defaultColor = this._iconData.defaultColor;
+    {
+      if (this.color === "default" && !defaultColor) {
         console.warn(`The icon "${this.icon}" does not have a default color.`);
       }
     }
+    if (this._iconData.mode === "static") {
+      return lit.html`<span
+        class="${cvaIcon({
+        color: this.color,
+        mode: "static"
+      })} ${this._iconData.class}"
+        style=${`--default-color:${defaultColor ?? "#000000"}`}
+        role="presentation"
+      ></span>`;
+    }
+    const mode = this._iconData.mode ?? "mask";
+    if (mode === "inline") {
+      return lit.html`<span
+        class=${cvaIcon({
+        color: this.color,
+        mode
+      })}
+        style=${`--default-color:${defaultColor ?? "#000000"}`}
+        role="presentation"
+        >${unsafeHtml_js.unsafeHTML(this._iconData.svg)}</span
+      >`;
+    }
+    const svgDataUrl = svgToDataUrl(this._iconData.svg);
     return lit.html`<span
       class=${cvaIcon({
-      icon: this.icon,
-      color: this.color
+      color: this.color,
+      mode
     })}
-      style=${`--default-color:${defaultColor ?? "#000000"}`}
+      style=${`--default-color:${defaultColor ?? "#000000"};--svg:${svgDataUrl}`}
       role="presentation"
     ></span>`;
   }
@@ -67,7 +186,7 @@ exports.DaikinIcon.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
 
     :host {
-      display: inline-block;
+      display: inline-flex;
       width: var(--ddc-icon-size, 100%);
       height: var(--ddc-icon-size, 100%);
     }
@@ -88,6 +207,9 @@ exports.DaikinIcon.styles = lit.css`
       --ddc-icon-size: 24px;
     }
   `;
+__decorateClass([
+  decorators_js.property({ attribute: false })
+], exports.DaikinIcon.prototype, "registry", 2);
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinIcon.prototype, "icon", 2);
@@ -97,6 +219,9 @@ __decorateClass([
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinIcon.prototype, "size", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinIcon.prototype, "_iconData", 2);
 exports.DaikinIcon = __decorateClass([
   decorators.ddsElement("daikin-icon")
 ], exports.DaikinIcon);

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

@@ -1,23 +1,103 @@
 import { DDSElement } from "../../base/index.cjs";
+import { IconRegistry } from "../../icon-registry.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
-import { icons } from "./icons.json.cjs";
+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 {

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

@@ -1,4 +1,8 @@
 "use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const icons = { "alarm": { "class": "i-daikin-status-alarm", "color": null }, "close": { "class": "i-daikin-notification-close", "color": "#a0a0a0" }, "information": { "class": "i-daikin-status-information", "color": null }, "negative": { "class": "i-daikin-status-negative", "color": null }, "positive": { "class": "i-daikin-status-positive", "color": null }, "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" }, "error": { "class": "i-daikin-status-error", "color": "#FF4949" }, "cross": { "class": "i-daikin-cross", "color": null }, "profile": { "class": "i-daikin-profile", "color": null }, "chevron-up": { "class": "i-daikin-chevron-up", "color": null }, "chevron-down": { "class": "i-daikin-chevron-down", "color": null }, "chevron-left": { "class": "i-daikin-chevron-left", "color": null }, "chevron-right": { "class": "i-daikin-chevron-right", "color": null }, "sort": { "class": "i-daikin-sort", "color": null } };
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const icons = { "logo-positive": { "class": "i-daikin-logo-positive", "color": null }, "logo-negative": { "class": "i-daikin-logo-negative", "color": null }, "alarm": { "class": "i-daikin-alarm", "color": null }, "close": { "class": "i-daikin-close", "color": "#a0a0a0" }, "information": { "class": "i-daikin-information", "color": null }, "error": { "class": "i-daikin-error", "color": null }, "success": { "class": "i-daikin-success", "color": null }, "warning": { "class": "i-daikin-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" }, "profile": { "class": "i-daikin-profile", "color": null }, "chevron-up": { "class": "i-daikin-chevron-up", "color": null }, "chevron-down": { "class": "i-daikin-chevron-down", "color": null }, "chevron-left": { "class": "i-daikin-chevron-left", "color": null }, "chevron-right": { "class": "i-daikin-chevron-right", "color": null }, "sort": { "class": "i-daikin-sort", "color": null } };
+const iconsJson = {
+  icons
+};
+exports.default = iconsJson;
 exports.icons = icons;

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

@@ -1,27 +1,35 @@
 declare const _default: {
   "icons": {
+    "logo-positive": {
+      "class": "i-daikin-logo-positive",
+      "color": null
+    },
+    "logo-negative": {
+      "class": "i-daikin-logo-negative",
+      "color": null
+    },
     "alarm": {
-      "class": "i-daikin-status-alarm",
+      "class": "i-daikin-alarm",
       "color": null
     },
     "close": {
-      "class": "i-daikin-notification-close",
+      "class": "i-daikin-close",
       "color": "#a0a0a0"
     },
     "information": {
-      "class": "i-daikin-status-information",
+      "class": "i-daikin-information",
       "color": null
     },
-    "negative": {
-      "class": "i-daikin-status-negative",
+    "error": {
+      "class": "i-daikin-error",
       "color": null
     },
-    "positive": {
-      "class": "i-daikin-status-positive",
+    "success": {
+      "class": "i-daikin-success",
       "color": null
     },
     "warning": {
-      "class": "i-daikin-status-warning",
+      "class": "i-daikin-warning",
       "color": null
     },
     "pagination-chevron-left": {
@@ -32,14 +40,6 @@ declare const _default: {
       "class": "i-daikin-pagination-chevron-right",
       "color": "#414141"
     },
-    "error": {
-      "class": "i-daikin-status-error",
-      "color": "#FF4949"
-    },
-    "cross": {
-      "class": "i-daikin-cross",
-      "color": null
-    },
     "profile": {
       "class": "i-daikin-profile",
       "color": null

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

@@ -4,10 +4,11 @@ const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ifDefined_js = require("lit/directives/if-defined.js");
-const ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
+const ddsFormElement = require("../../base/dds-form-element.cjs");
 require("../icon/daikin-icon.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -76,7 +77,7 @@ const cvaIconButton = classVarianceAuthority.cva(
     }
   }
 );
-exports.DaikinIconButton = class DaikinIconButton extends ddsElement.DDSElement {
+exports.DaikinIconButton = class DaikinIconButton extends ddsFormElement.DDSFormSubmitElement {
   constructor() {
     super();
     this.variant = "fill";
@@ -86,10 +87,18 @@ exports.DaikinIconButton = class DaikinIconButton extends ddsElement.DDSElement
     this.type = "button";
     this.buttonAriaLabel = null;
     this.buttonRole = null;
+    this.buttonAriaHaspopup = null;
+    this.buttonAriaExpanded = null;
+    this.size = "s";
     this.addEventListener("click", (event) => {
       if (this.disabled) {
         event.stopImmediatePropagation();
       }
+      if (this.type === "submit") {
+        this.requestSubmit();
+      } else if (this.type === "reset") {
+        this.reset();
+      }
     });
   }
   render() {
@@ -117,6 +126,8 @@ exports.DaikinIconButton = class DaikinIconButton extends ddsElement.DDSElement
         type=${this.type}
         aria-label=${this.buttonAriaLabel ?? ""}
         ?disabled=${this.disabled}
+        aria-haspopup=${ifDefined_js.ifDefined(this.buttonAriaHaspopup ?? void 0)}
+        aria-expanded=${ifDefined_js.ifDefined(this.buttonAriaExpanded ?? void 0)}
       >
         <slot class="icon-size-full"></slot>
       </button>
@@ -136,8 +147,14 @@ exports.DaikinIconButton.styles = lit.css`
 
     :host {
       display: inline-block;
-      width: 2rem;
-      height: 2rem;
+      width: var(--ddc-icon-button-size, 2rem);
+      height: var(--ddc-icon-button-size, 2rem);
+    }
+    :host([size="s"]) {
+      --ddc-icon-button-size: 2rem; /* 32px */
+    }
+    :host([size="m"]) {
+      --ddc-icon-button-size: 3rem; /* 48px */
     }
   `;
 __decorateClass([
@@ -161,6 +178,15 @@ __decorateClass([
 __decorateClass([
   decorators_js.property({ type: String, reflect: true, attribute: "button-role" })
 ], exports.DaikinIconButton.prototype, "buttonRole", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true, attribute: "button-aria-haspopup" })
+], exports.DaikinIconButton.prototype, "buttonAriaHaspopup", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "button-aria-expanded" })
+], exports.DaikinIconButton.prototype, "buttonAriaExpanded", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinIconButton.prototype, "size", 2);
 __decorateClass([
   decorators_js.query("button")
 ], exports.DaikinIconButton.prototype, "_button", 2);

package/dist/cjs-dev/components/icon-button/daikin-icon-button.d.cts

@@ -1,6 +1,6 @@
-import { DDSElement } from "../../base/index.cjs";
 import { ARIARole } from "../../lit-analyzer-types.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
+import { DDSFormSubmitElement } from "../../base/dds-form-element.cjs";
 declare const cvaIconButton: (props?: ({
     color?: "default" | "danger" | "neutral" | null | undefined;
     variant?: "fill" | "outline" | "ghost" | null | undefined;
@@ -32,7 +32,7 @@ type IconButtonVariantProps = MergeVariantProps<typeof cvaIconButton>;
  * </daikin-icon-button>
  * ```
  */
-export declare class DaikinIconButton extends DDSElement {
+export declare class DaikinIconButton extends DDSFormSubmitElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Variant of the button.
@@ -65,6 +65,24 @@ export declare class DaikinIconButton extends DDSElement {
      * Optional ARIA role of the button.
      */
     buttonRole: ARIARole | null;
+    /**
+     * The aria-haspopup of the icon button when `type="button"`.
+     * When used within a daikin-menu component, this property is automatically assigned the value `buttonAriaHaspopup="menu"`.
+     */
+    buttonAriaHaspopup: "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | null;
+    /**
+     * The aria-expanded of icon button when `type="button"`.
+     * When used within a daikin-menu component, this property will be controlled by daikin-menu, so you don't need to specify it explicitly.
+     */
+    buttonAriaExpanded: boolean | null;
+    /**
+     * Size of the button.
+     * - `s`: 32px * 32px
+     * - `m`: 48px * 48px
+     *
+     * Default is `s`.
+     */
+    size: "s" | "m";
     private _button;
     constructor();
     render(): import('lit-html').TemplateResult<1>;