@daikin-oss/design-system-web-components 1.2.0 → 1.3.0

package/dist/es-dev/controllers/floating-ui-auto-update.d.ts

@@ -13,7 +13,19 @@ export declare class FloatingUIAutoUpdateController<T extends ReactiveController
     private readonly _isOptionsUpdated?;
     private _floatingElement;
     private _referenceElement;
+    /**
+     * Context information to be passed with floating-ready event
+     */
+    private _triggerContext;
     constructor(_host: T, _isOptionsUpdated?: ((current: Partial<ComputePositionConfig>, previous: Partial<ComputePositionConfig>) => boolean) | undefined);
+    /**
+     * Set context information that will be included in the floating-ready event
+     */
+    setTriggerContext(context: Record<string, unknown>): void;
+    /**
+     * Clear the trigger context
+     */
+    clearTriggerContext(): void;
     private readonly _refCallbackFloating;
     private readonly _refCallbackReference;
     get floatingElement(): HTMLElement | undefined;

package/dist/es-dev/controllers/floating-ui-auto-update.js

@@ -3,7 +3,7 @@ import { nothing } from "lit";
 import { ref } from "lit/directives/ref.js";
 import { createControllerDirective } from "./helpers/controller-directive.js";
 const floatingUIAutoUpdateDirective = createControllerDirective(
-  (referenceElement, floatingElement, options) => {
+  (referenceElement, floatingElement, options, _isOptionsUpdated, triggerContext) => {
     const cleanupAutoUpdate = autoUpdate(
       referenceElement,
       floatingElement,
@@ -16,7 +16,10 @@ const floatingUIAutoUpdateDirective = createControllerDirective(
           floatingElement.style.setProperty("--floating-y", `${y}px`);
           floatingElement.setAttribute("data-floating-ready", "");
           if (isFirst) {
-            floatingElement.dispatchEvent(new Event("floating-ready"));
+            const event = new CustomEvent("floating-ready", {
+              detail: triggerContext
+            });
+            floatingElement.dispatchEvent(event);
           }
         }).catch((error) => {
           {
@@ -41,7 +44,8 @@ const floatingUIAutoUpdateDirective = createControllerDirective(
       current[0] !== previous[0] || // Check if the floating element is changed
       current[1] !== previous[1] || // Check if the options is changed.
       // If option comparison function (current[3]) is provided, use it to compare options. Otherwise, use `!==` to compare options.
-      (((_a = current[3]) == null ? void 0 : _a.call(current, current[2], previous[2])) ?? current[2] !== previous[2])
+      (((_a = current[3]) == null ? void 0 : _a.call(current, current[2], previous[2])) ?? current[2] !== previous[2]) || // Check if the trigger context is changed
+      current[4] !== previous[4]
     );
   }
 );
@@ -49,6 +53,7 @@ class FloatingUIAutoUpdateController {
   constructor(_host, _isOptionsUpdated) {
     this._host = _host;
     this._isOptionsUpdated = _isOptionsUpdated;
+    this._triggerContext = {};
     this._refCallbackFloating = (element) => {
       this._floatingElement = element;
       this._host.requestUpdate();
@@ -59,6 +64,18 @@ class FloatingUIAutoUpdateController {
     };
     _host.addController(this);
   }
+  /**
+   * Set context information that will be included in the floating-ready event
+   */
+  setTriggerContext(context) {
+    this._triggerContext = { ...context };
+  }
+  /**
+   * Clear the trigger context
+   */
+  clearTriggerContext() {
+    this._triggerContext = {};
+  }
   get floatingElement() {
     return this._floatingElement;
   }
@@ -79,7 +96,8 @@ class FloatingUIAutoUpdateController {
       this._referenceElement,
       this._floatingElement,
       options,
-      this._isOptionsUpdated
+      this._isOptionsUpdated,
+      this._triggerContext
     );
   }
 }

package/dist/es-dev/icon-registry.d.ts

@@ -0,0 +1,120 @@
+/**
+ * Icon data structure containing SVG information
+ */
+export interface IconData {
+    /** SVG content as a string */
+    svg: string;
+    /** Default color for the icon */
+    defaultColor?: string | null;
+    /**
+     * Determines how the SVG is rendered.
+     * This affects the styling and behavior of the icon.
+     *
+     * - "mask": Uses the SVG as a CSS mask, allowing for color customization. Use this for monochrome icons.
+     * - "background": Uses the SVG as a CSS background image. Use this for colorful icons with no complex styling.
+     * - "inline": Renders the SVG inline, allowing for more complex styling.
+     *   **Be cautious with this mode as it can introduce security risks if the SVG content is not trusted.**
+     *
+     * @default "mask"
+     */
+    mode?: "mask" | "background" | "inline";
+}
+/**
+ * Direct icon registration configuration
+ */
+export interface DirectIconRegistration {
+    /** Icon name */
+    name: string;
+    /** SVG content or icon data */
+    svg: string | IconData;
+}
+/**
+ * Dynamic icon registration configuration using regex pattern matching
+ */
+export interface DynamicIconRegistration {
+    /** Regular expression to match icon names */
+    match: RegExp;
+    /** Function to fetch SVG content for matched names */
+    fetch: (name: string) => Promise<string | IconData> | string | IconData;
+}
+/**
+ * Icon registration configuration
+ */
+export type IconRegistration = DirectIconRegistration | DynamicIconRegistration;
+/**
+ * Icon registry class that manages icon registration and retrieval
+ */
+export declare class IconRegistry {
+    #private;
+    /**
+     * Get the singleton instance of IconRegistry
+     */
+    static getGlobalInstance(): IconRegistry;
+    /**
+     * Register an icon or dynamic icon fetcher
+     * @param registration Icon registration configuration
+     *
+     * @example
+     * // Direct registration
+     * registry.register({ name: "custom-icon", svg: "<svg>...</svg>" });
+     *
+     * // Dynamic registration
+     * registry.register({
+     *   match: /^custom-/,
+     *   fetch: async (name) => {
+     *     const response = await fetch(`/icons/${name}.svg`);
+     *     return response.text();
+     *   }
+     * });
+     */
+    register(registration: IconRegistration): void;
+    /**
+     * Get an icon by name
+     * @param name Icon name
+     * @returns Promise that resolves to IconData or null if not found
+     */
+    getIcon(name: string): Promise<IconData | null>;
+    /**
+     * Check if an icon is registered (either directly or through dynamic registration)
+     * @param name Icon name
+     * @returns true if icon is available
+     */
+    hasIcon(name: string): boolean;
+    /**
+     * Get all directly registered icon names
+     * @returns Array of icon names
+     */
+    getRegisteredIconNames(): string[];
+    /**
+     * Get all dynamic registration patterns
+     * @returns Array of regex patterns
+     */
+    getDynamicPatterns(): RegExp[];
+    /**
+     * Clear all registrations and cache
+     */
+    clear(): void;
+    /**
+     * Remove a specific icon registration
+     * @param name Icon name to remove
+     */
+    unregister(name: string): boolean;
+    /**
+     * Fetch icon from dynamic registration
+     * @param registration Dynamic registration
+     * @param name Icon name
+     * @returns Promise that resolves to IconData or null
+     */
+    private fetchDynamicIcon;
+    /**
+     * Perform the actual dynamic fetch
+     * @param registration Dynamic registration
+     * @param name Icon name
+     * @returns Promise that resolves to IconData or null
+     */
+    private performDynamicFetch;
+}
+/**
+ * Global icon registry instance
+ */
+export declare const iconRegistry: IconRegistry;

package/dist/es-dev/icon-registry.js

@@ -0,0 +1,170 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var _instance, _icons, _dynamicRegistrations, _cache;
+function isDynamicRegistration(registration) {
+  return "match" in registration && "fetch" in registration;
+}
+function isDirectRegistration(registration) {
+  return "name" in registration && "svg" in registration;
+}
+function normalizeIconData(svg) {
+  if (typeof svg === "string") {
+    return { mode: "mask", svg };
+  }
+  return { mode: "mask", ...svg };
+}
+const _IconRegistry = class _IconRegistry {
+  constructor() {
+    /** Map of registered icons by name */
+    __privateAdd(this, _icons, /* @__PURE__ */ new Map());
+    /** Array of dynamic icon registrations */
+    __privateAdd(this, _dynamicRegistrations, []);
+    /** Cache for dynamically fetched icons */
+    __privateAdd(this, _cache, /* @__PURE__ */ new Map());
+  }
+  /**
+   * Get the singleton instance of IconRegistry
+   */
+  static getGlobalInstance() {
+    const instance = __privateGet(_IconRegistry, _instance) ?? __privateSet(_IconRegistry, _instance, new _IconRegistry());
+    return instance;
+  }
+  /**
+   * Register an icon or dynamic icon fetcher
+   * @param registration Icon registration configuration
+   *
+   * @example
+   * // Direct registration
+   * registry.register({ name: "custom-icon", svg: "<svg>...</svg>" });
+   *
+   * // Dynamic registration
+   * registry.register({
+   *   match: /^custom-/,
+   *   fetch: async (name) => {
+   *     const response = await fetch(`/icons/${name}.svg`);
+   *     return response.text();
+   *   }
+   * });
+   */
+  register(registration) {
+    if (isDirectRegistration(registration)) {
+      const iconData = normalizeIconData(registration.svg);
+      __privateGet(this, _icons).set(registration.name, iconData);
+    } else if (isDynamicRegistration(registration)) {
+      __privateGet(this, _dynamicRegistrations).push(registration);
+    }
+  }
+  /**
+   * Get an icon by name
+   * @param name Icon name
+   * @returns Promise that resolves to IconData or null if not found
+   */
+  async getIcon(name) {
+    const registered = __privateGet(this, _icons).get(name);
+    if (registered) {
+      return registered;
+    }
+    for (const registration of __privateGet(this, _dynamicRegistrations)) {
+      if (registration.match.test(name)) {
+        return this.fetchDynamicIcon(registration, name);
+      }
+    }
+    return null;
+  }
+  /**
+   * Check if an icon is registered (either directly or through dynamic registration)
+   * @param name Icon name
+   * @returns true if icon is available
+   */
+  hasIcon(name) {
+    if (__privateGet(this, _icons).has(name)) {
+      return true;
+    }
+    return __privateGet(this, _dynamicRegistrations).some(
+      (registration) => registration.match.test(name)
+    );
+  }
+  /**
+   * Get all directly registered icon names
+   * @returns Array of icon names
+   */
+  getRegisteredIconNames() {
+    return Array.from(__privateGet(this, _icons).keys());
+  }
+  /**
+   * Get all dynamic registration patterns
+   * @returns Array of regex patterns
+   */
+  getDynamicPatterns() {
+    return __privateGet(this, _dynamicRegistrations).map((reg) => reg.match);
+  }
+  /**
+   * Clear all registrations and cache
+   */
+  clear() {
+    __privateGet(this, _icons).clear();
+    __privateGet(this, _dynamicRegistrations).length = 0;
+    __privateGet(this, _cache).clear();
+  }
+  /**
+   * Remove a specific icon registration
+   * @param name Icon name to remove
+   */
+  unregister(name) {
+    const existed = __privateGet(this, _icons).has(name);
+    __privateGet(this, _icons).delete(name);
+    return existed;
+  }
+  /**
+   * Fetch icon from dynamic registration
+   * @param registration Dynamic registration
+   * @param name Icon name
+   * @returns Promise that resolves to IconData or null
+   */
+  async fetchDynamicIcon(registration, name) {
+    const cacheKey = `${registration.match.source}\0${name}`;
+    const cached = __privateGet(this, _cache).get(cacheKey);
+    if (cached) {
+      return cached;
+    }
+    const fetchPromise = this.performDynamicFetch(registration, name).then(
+      (result) => {
+        __privateGet(this, _cache).set(cacheKey, result);
+        return result;
+      }
+    );
+    __privateGet(this, _cache).set(cacheKey, fetchPromise);
+    return fetchPromise;
+  }
+  /**
+   * Perform the actual dynamic fetch
+   * @param registration Dynamic registration
+   * @param name Icon name
+   * @returns Promise that resolves to IconData or null
+   */
+  async performDynamicFetch(registration, name) {
+    try {
+      const result = await registration.fetch(name);
+      return normalizeIconData(result);
+    } catch (error) {
+      console.warn(`Failed to fetch dynamic icon "${name}":`, error);
+      return null;
+    }
+  }
+};
+_instance = new WeakMap();
+_icons = new WeakMap();
+_dynamicRegistrations = new WeakMap();
+_cache = new WeakMap();
+__privateAdd(_IconRegistry, _instance);
+let IconRegistry = _IconRegistry;
+const iconRegistry = IconRegistry.getGlobalInstance();
+export {
+  IconRegistry,
+  iconRegistry
+};

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

@@ -1,2 +1,3 @@
 export * from "./components/index.js";
+export * from "./icon-registry.js";
 export * from "./lit-analyzer-types.js";

package/dist/es-dev/index.js

@@ -12,6 +12,8 @@ import { DaikinCarousel } from "./components/carousel/daikin-carousel.js";
 import { DaikinCarouselItem } from "./components/carousel-item/daikin-carousel-item.js";
 import { DaikinCheckbox } from "./components/checkbox/daikin-checkbox.js";
 import { DaikinCheckboxGroup } from "./components/checkbox-group/daikin-checkbox-group.js";
+import { DaikinChip } from "./components/chip/daikin-chip.js";
+import { DaikinCombobox, defaultFilterFn } from "./components/combobox/daikin-combobox.js";
 import { DaikinDatePicker } from "./components/date-picker/daikin-date-picker.js";
 import { DaikinDropdown } from "./components/dropdown/daikin-dropdown.js";
 import { DaikinDropdownItem } from "./components/dropdown-item/daikin-dropdown-item.js";
@@ -33,6 +35,7 @@ import { DaikinProgressBar } from "./components/progress-bar/daikin-progress-bar
 import { DaikinProgressIndicator } from "./components/progress-indicator/daikin-progress-indicator.js";
 import { DaikinProgressIndicatorItem } from "./components/progress-indicator-item/daikin-progress-indicator-item.js";
 import { DaikinRadio } from "./components/radio/daikin-radio.js";
+import { DaikinRadioGroup } from "./components/radio-group/daikin-radio-group.js";
 import { DaikinSelect } from "./components/select/daikin-select.js";
 import { DaikinSlider } from "./components/slider/daikin-slider.js";
 import { DaikinTab } from "./components/tab/daikin-tab.js";
@@ -43,6 +46,8 @@ import { DaikinTableHeaderCell } from "./components/table-header-cell/daikin-tab
 import { DaikinTabs } from "./components/tabs/daikin-tabs.js";
 import { DaikinTextArea } from "./components/text-area/daikin-text-area.js";
 import { DaikinTextField } from "./components/text-field/daikin-text-field.js";
+import { DaikinTextMaskedField } from "./components/text-masked-field/daikin-text-masked-field.js";
+import { DaikinTimePicker, calcDigitInput, formatPartsForUI, formatTimeForUI, from24HourFormat, getTimeItemInSelection, isTimeOutOfRange, isValidValueTime, parsePartsFromUIValue, to24HourFormat, tryParseTimeFromUIValue } from "./components/time-picker/daikin-time-picker.js";
 import { DaikinToastNotification } from "./components/toast-notification/daikin-toast-notification.js";
 import { DaikinToastNotificationManager } from "./components/toast-notification-manager/daikin-toast-notification-manager.js";
 import { DaikinToggle } from "./components/toggle/daikin-toggle.js";
@@ -50,6 +55,7 @@ import { DaikinTooltip } from "./components/tooltip/daikin-tooltip.js";
 import { DaikinTree } from "./components/tree/daikin-tree.js";
 import { DaikinTreeItem, cvaTreeChildren } from "./components/tree-item/daikin-tree-item.js";
 import { DaikinTreeSection } from "./components/tree-section/daikin-tree-section.js";
+import { IconRegistry, iconRegistry } from "./icon-registry.js";
 export {
   DaikinAccordion,
   DaikinAccordionItem,
@@ -65,6 +71,8 @@ export {
   DaikinCarouselItem,
   DaikinCheckbox,
   DaikinCheckboxGroup,
+  DaikinChip,
+  DaikinCombobox,
   DaikinDatePicker,
   DaikinDropdown,
   DaikinDropdownItem,
@@ -86,6 +94,7 @@ export {
   DaikinProgressIndicator,
   DaikinProgressIndicatorItem,
   DaikinRadio,
+  DaikinRadioGroup,
   DaikinSelect,
   DaikinSlider,
   DaikinTab,
@@ -96,6 +105,8 @@ export {
   DaikinTabs,
   DaikinTextArea,
   DaikinTextField,
+  DaikinTextMaskedField,
+  DaikinTimePicker,
   DaikinToastNotification,
   DaikinToastNotificationManager,
   DaikinToggle,
@@ -103,6 +114,19 @@ export {
   DaikinTree,
   DaikinTreeItem,
   DaikinTreeSection,
+  IconRegistry,
+  calcDigitInput,
   cvaTreeChildren,
-  iconList
+  defaultFilterFn,
+  formatPartsForUI,
+  formatTimeForUI,
+  from24HourFormat,
+  getTimeItemInSelection,
+  iconList,
+  iconRegistry,
+  isTimeOutOfRange,
+  isValidValueTime,
+  parsePartsFromUIValue,
+  to24HourFormat,
+  tryParseTimeFromUIValue
 };