@e1011/es-kit 1.2.0 → 1.2.1

package/dist/types/src/core/hooks/useThemePreference.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useThemePreference.d.ts","sourceRoot":"","sources":["../../../../../src/core/hooks/useThemePreference.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,oBACb,MAAM,WAAW,mBACjB,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,KACxC,IAEF,CAAA"}
+{"version":3,"file":"useThemePreference.d.ts","sourceRoot":"","sources":["../../../../../src/core/hooks/useThemePreference.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,oBACb,MAAM,WAAW,mBACjB,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,KACxC,IAKF,CAAA"}

package/dist/types/src/core/utils/helpers/ui.d.ts

@@ -35,15 +35,20 @@ export type ThemeMap = {
     light: string;
 };
 /**
- * Gets the base themes.
- * @returns {ThemeMap} The current base themes.
+ * Reads the theme config stored on the given element.
+ * Falls back to defaultThemes when no config has been set.
+ * Scoping to the element means different microfrontends (different roots) are isolated,
+ * while all bundles targeting the same element share one config.
+ * @param {HTMLElement} [element] - The element to read from. Defaults to document.body.
+ * @returns {ThemeMap} The current base themes for the element.
  */
-export declare const getBaseThemes: () => ThemeMap;
+export declare const getBaseThemes: (element?: HTMLElement) => ThemeMap;
 /**
- * Sets the base theme class names.
- * @param {ThemeMap} themes - Object containing the CSS classes for dark and light themes.
+ * Sets the base theme class names on the given element.
+ * @param {ThemeMap} themes - CSS classes for dark and light themes.
+ * @param {HTMLElement} [element] - The element to store config on. Defaults to document.body.
  */
-export declare const setThemeClassNames: (themes: ThemeMap) => void;
+export declare const setThemeClassNames: (themes: ThemeMap, element?: HTMLElement) => void;
 /**
  * Switches the color theme of the document.
  * @param {boolean} isDark - Flag to determine if the dark theme should be applied.

package/dist/types/src/core/utils/helpers/ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../../../../../src/core/utils/helpers/ui.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,QACnB,MAAM,SAAS,OAAO,KAAG,OAAO,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAA;CAQnF,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAA;AAC5D,eAAO,MAAM,UAAU,eAAgB,UAAU,EAAE,KAAG,MAE1B,CAAA;AAG5B,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAClC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACnC,CAAC;AAEF,eAAO,MAAM,UAAU,UAAW,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAE,mBAY1D,CAAA;AAID,KAAK,mBAAmB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,KAAK,MAAM,CAAA;AAC3G,KAAK,UAAU,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAA;CAAE,GAAG,mBAAmB,CAAA;AAE9F,eAAO,MAAM,UAAU,EAAE,UA6BxB,CAAA;AAED,KAAK,YAAY,GAAG;IAAE,QAAQ,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAA;CAAE,GACvD,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC,CAAA;AAE/D,eAAO,MAAM,WAAW,EAAE,YAgBzB,CAAA;AAID,MAAM,MAAM,SAAS,GAAG;IACtB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAA;CACtC,GAAG,KAAK,CAAA;AAET,eAAO,MAAM,IAAI,WAAY,SAAS,KAAG,IAIxC,CAAA;AAED;;;;;GAKG;AACH,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAOD;;;GAGG;AACH,eAAO,MAAM,aAAa,QAAO,QAAsB,CAAA;AAEvD;;;GAGG;AACH,eAAO,MAAM,kBAAkB,WAAY,QAAQ,KAAG,IAErD,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,WAAY,OAAO,gBAAgB,WAAW,4BAAuB,IAmCjG,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,YAAa,OAAO,gBAAgB,WAAW,KAAG,IAO9E,CAAA;AAID;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,oBACjB,MAAM,WAAW,mBACjB,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,KACxC,MAAM,IA6CR,CAAA"}
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../../../../../src/core/utils/helpers/ui.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,QACnB,MAAM,SAAS,OAAO,KAAG,OAAO,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAA;CAQnF,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAA;AAC5D,eAAO,MAAM,UAAU,eAAgB,UAAU,EAAE,KAAG,MAE1B,CAAA;AAG5B,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAClC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACnC,CAAC;AAEF,eAAO,MAAM,UAAU,UAAW,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAE,mBAY1D,CAAA;AAID,KAAK,mBAAmB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,KAAK,MAAM,CAAA;AAC3G,KAAK,UAAU,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAA;CAAE,GAAG,mBAAmB,CAAA;AAE9F,eAAO,MAAM,UAAU,EAAE,UA6BxB,CAAA;AAED,KAAK,YAAY,GAAG;IAAE,QAAQ,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAA;CAAE,GACvD,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC,CAAA;AAE/D,eAAO,MAAM,WAAW,EAAE,YAgBzB,CAAA;AAID,MAAM,MAAM,SAAS,GAAG;IACtB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAA;CACtC,GAAG,KAAK,CAAA;AAET,eAAO,MAAM,IAAI,WAAY,SAAS,KAAG,IAIxC,CAAA;AAED;;;;;GAKG;AACH,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AASD;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,aAAc,WAAW,KAAG,QAIrD,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,WAAY,QAAQ,YAAY,WAAW,KAAG,IAK5E,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,WACnB,OAAO,gBAAgB,WAAW,4BACzC,IAoCF,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,YAAa,OAAO,gBAAgB,WAAW,KAAG,IAQ9E,CAAA;AAID;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,oBACjB,MAAM,WAAW,mBACjB,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,KACxC,MAAM,IA6CR,CAAA"}

package/dist/ui/esm/src/core/utils/helpers/ui.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui.js","sources":["../../../../../../../src/core/utils/helpers/ui.ts"],"sourcesContent":["export const mapSerReplacer\n= (key: string, value: unknown): unknown | { dataType: string; value: Array<unknown>} => {\n  if (value instanceof Map) {\n    return {\n      dataType: 'Map',\n      value: Array.from(value.entries()), // or with spread: value: [...value]\n    }\n  }\n  return value\n}\n\nexport type TClassName = string | boolean | null | undefined\nexport const classNames = (...classes: TClassName[]): string => classes\n  .filter((className: TClassName) => (typeof className === 'string' && className !== undefined && className !== null))\n  .filter(Boolean).join(' ')\n\n\nexport type PropsCategoriesType = {\n  dataProps: Record<string, unknown>\n  restProps: Record<string, unknown>\n};\n\nexport const parseProps = (props: Record<string, unknown>):PropsCategoriesType => {\n  const dataProps: Record<string, unknown> = {}\n  const restProps: Record<string, unknown> = {}\n\n  Object.entries(props).forEach(([key, value]) => {\n    if (key.substr(0, 5) === 'data-' || key.substr(0, 4) === 'data') {\n      dataProps[key] = value\n    } else {\n      restProps[key] = value\n    }\n  })\n  return { dataProps, restProps }\n}\n\n\n\ntype GeneratorIdCallable = (token: string, increment?: boolean, forcedValue?: number | undefined) => string\ntype GenerateId = { tokens?: Record<string, number | null | undefined> } & GeneratorIdCallable\n\nexport const generateId: GenerateId = (\n  token: string,\n  increment = true,\n  forcedValue: number | undefined = undefined,\n) => {\n  generateId.tokens = generateId.tokens || {}\n\n  if (forcedValue !== undefined && forcedValue !== null) {\n    generateId.tokens[token] = forcedValue\n    return `${token}${generateId?.tokens?.[token] as number}`\n  }\n\n  const noValue = generateId?.tokens[token] === undefined || generateId?.tokens[token] === null\n\n  generateId.tokens[token] = generateId.tokens[token] || 0\n\n  if (noValue) {\n    return `${token}${0}`\n  }\n\n  if (increment) {\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    generateId.tokens[token] += 1\n\n    return `${token}${generateId?.tokens?.[token] as number}`\n  }\n\n  return `${token}${generateId?.tokens?.[token] as number}`\n}\n\ntype FAnchorClick = { aElement?: HTMLAnchorElement | null }\n  & ((href: string, target?: string, remove?: boolean) => void)\n\nexport const anchorClick: FAnchorClick = (href: string, target = '_top', remove = false): HTMLAnchorElement | null => {\n  anchorClick.aElement = anchorClick.aElement || document.createElement('a')\n\n  const { aElement } = anchorClick\n\n  aElement.setAttribute('href', href)\n  aElement.setAttribute('target', target)\n\n  aElement.dataset.date = `${Date.now()}`\n  aElement.click()\n  if (remove) {\n    aElement.remove()\n    anchorClick.aElement = null\n  }\n\n  return aElement\n}\n\n\n\nexport type NoopEvent = {\n  preventDefault?: () => void\n  stopPropagation?: () => void\n  stopImmediatePropagation?: () => void\n} | Event\n\nexport const noop = (event?: NoopEvent): void => {\n  event?.preventDefault?.()\n  event?.stopPropagation?.()\n  event?.stopImmediatePropagation?.()\n}\n\n/**\n * Type definition for theme map.\n * @typedef {Object} ThemeMap\n * @property {string} dark - CSS class for the dark theme.\n * @property {string} light - CSS class for the light theme.\n */\nexport type ThemeMap = {\n  dark: string\n  light: string\n}\n\nlet baseThemes: ThemeMap = {\n  dark: 'theme-dark',\n  light: 'theme-light',\n}\n\n/**\n * Gets the base themes.\n * @returns {ThemeMap} The current base themes.\n */\nexport const getBaseThemes = (): ThemeMap => baseThemes\n\n/**\n * Sets the base theme class names.\n * @param {ThemeMap} themes - Object containing the CSS classes for dark and light themes.\n */\nexport const setThemeClassNames = (themes: ThemeMap): void => {\n  baseThemes = themes\n}\n\n/**\n * Switches the color theme of the document.\n * @param {boolean} isDark - Flag to determine if the dark theme should be applied.\n * @param {HTMLElement} [htmlElement] - The HTML element to which the theme will be applied.\n * @param {boolean} [findShadows=true] - Flag to determine if shadow DOM elements should also be themed.\n */\nexport const switchColorTheme = (isDark: boolean, htmlElement?: HTMLElement, findShadows = true): void => {\n  const oldClass = isDark ? baseThemes.light : baseThemes.dark\n  const newClass = isDark ? baseThemes.dark : baseThemes.light\n\n  if (htmlElement) {\n    htmlElement.classList.remove(oldClass)\n    htmlElement.classList.remove(newClass)\n    htmlElement.classList.add(newClass)\n  }\n\n  if (typeof document !== 'undefined') {\n    document.querySelectorAll(`.${oldClass}`).forEach((element) => {\n      element.classList.add(`.${newClass}`)\n      element.classList.remove(`.${oldClass}`)\n    })\n\n    if (findShadows) {\n      document.querySelectorAll('.shadow-div').forEach((element) => {\n        element.shadowRoot?.querySelector(`.${oldClass}`)?.classList.add(newClass)\n        element.shadowRoot?.querySelector(`.${oldClass}`)?.classList.remove(oldClass)\n      })\n\n      document.querySelectorAll('esmf-wrapper').forEach((element) => {\n        element.shadowRoot?.querySelector(`.${oldClass}`)?.classList.add(newClass)\n        element.shadowRoot?.querySelector(`.${oldClass}`)?.classList.remove(oldClass)\n\n        const firstChild: HTMLElement = element.shadowRoot?.childNodes[0] as HTMLElement\n\n        if (firstChild) {\n          firstChild.classList.add(newClass)\n          firstChild.classList.remove(oldClass)\n        }\n      })\n    }\n  }\n}\n\n/**\n * Updates the color theme of the document.\n * @param {boolean} [isDark] - Optional flag to determine if the dark theme should be applied.\n * @param {HTMLElement} [htmlElement] - The HTML element to which the theme will be applied.\n */\nexport const updateColorTheme = (isDark?: boolean, htmlElement?: HTMLElement): void => {\n  let resolvedIsDark: boolean = isDark || false\n\n  if (typeof document !== 'undefined' && isDark === undefined) {\n    resolvedIsDark = document.body.classList.contains(baseThemes.dark)\n  }\n  switchColorTheme(resolvedIsDark, htmlElement || document.body)\n}\n\nconst windowMatchMediaChangeEventType = 'change'\n\n/**\n * Observes the user's theme preference and applies the appropriate theme.\n * @param {() => HTMLElement} [getHtmlElement] - Function to get the HTML element to which the theme will be applied.\n * @param {(isDark: boolean) => void} [switchCallback] - Callback function to execute when the theme changes.\n * @returns {() => void} Function to stop observing the theme preference.\n */\nexport const observeThemePreference = (\n  getHtmlElement: () => HTMLElement = (): HTMLElement => document.body,\n  switchCallback: (isDark: boolean) => void = (isDark: boolean): boolean => isDark,\n): () => void => {\n  const switchColorThemeHandler = (isDark: boolean): void => {\n    const htmlElement = getHtmlElement()\n\n    switchColorTheme?.(isDark, htmlElement)\n    switchCallback?.(isDark)\n  }\n\n  const changeDarkColorThemeHandler = (event: MediaQueryListEvent): void => {\n    switchColorThemeHandler(event.matches)\n  }\n\n  const changeLightColorThemeHandler = (event: MediaQueryListEvent): void => {\n    switchColorThemeHandler(!event.matches)\n  }\n\n  const isDark = window.matchMedia('(prefers-color-scheme: dark)')\n\n  try {\n    window.matchMedia('(prefers-color-scheme: dark)').removeEventListener(\n      windowMatchMediaChangeEventType, changeDarkColorThemeHandler,\n    )\n    window.matchMedia('(prefers-color-scheme: light)').removeEventListener(\n      windowMatchMediaChangeEventType, changeLightColorThemeHandler,\n    )\n  } catch (error) {\n    console.error(`Error::observeThemePreference::removeEventListener: ${error}`)\n  }\n\n  switchColorThemeHandler(isDark?.matches)\n  window.matchMedia('(prefers-color-scheme: dark)').addEventListener(\n    windowMatchMediaChangeEventType, changeDarkColorThemeHandler,\n  )\n  window.matchMedia('(prefers-color-scheme: light)').addEventListener(\n    windowMatchMediaChangeEventType, changeLightColorThemeHandler,\n  )\n\n  return () => {\n    window.matchMedia('(prefers-color-scheme: dark)').removeEventListener(\n      windowMatchMediaChangeEventType, changeDarkColorThemeHandler,\n    )\n    window.matchMedia('(prefers-color-scheme: light)').removeEventListener(\n      windowMatchMediaChangeEventType, changeLightColorThemeHandler,\n    )\n  }\n}\n"],"names":["classNames","_len","arguments","length","classes","Array","_key","filter","className","Boolean","join","parseProps","props","dataProps","restProps","Object","entries","forEach","_ref","key","value","substr","noop","event","_event$preventDefault","_event$stopPropagatio","_event$stopImmediateP","preventDefault","call","stopPropagation","stopImmediatePropagation"],"mappings":"iFAYaA,MAAAA,EAAa,WAAA,IAAA,IAAAC,EAAAC,UAAAC,OAAIC,EAAOC,IAAAA,MAAAJ,GAAAK,EAAA,EAAAA,EAAAL,EAAAK,IAAPF,EAAOE,GAAAJ,UAAAI,GAAA,OAA2BF,EAC7DG,QAAQC,GAAgD,iBAAdA,GAAP,MAAiCA,IACpED,OAAOE,SAASC,KAAK,IAAI,EAQfC,EAAcC,IACzB,MAAMC,EAAqC,CAAE,EACvCC,EAAqC,CAAE,EAS7C,OAPAC,OAAOC,QAAQJ,GAAOK,SAAQC,IAAkB,IAAhBC,EAAKC,GAAMF,EAChB,UAArBC,EAAIE,OAAO,EAAG,IAAuC,SAArBF,EAAIE,OAAO,EAAG,GAChDR,EAAUM,GAAOC,EAEjBN,EAAUK,GAAOC,CACnB,IAEK,CAAEP,YAAWC,YAAW,EAoEpBQ,EAAQC,IAA4B,IAAAC,EAAAC,EAAAC,EAC/CH,SAAqBC,QAAhBA,EAALD,EAAOI,0BAAcH,GAArBA,EAAAI,KAAAL,GACAA,SAAsBE,QAAjBA,EAALF,EAAOM,2BAAeJ,GAAtBA,EAAAG,KAAAL,GACAA,SAA+BG,QAA1BA,EAALH,EAAOO,oCAAwBJ,GAA/BA,EAAAE,KAAAL,EAAmC"}
+{"version":3,"file":"ui.js","sources":["../../../../../../../src/core/utils/helpers/ui.ts"],"sourcesContent":["export const mapSerReplacer\n= (key: string, value: unknown): unknown | { dataType: string; value: Array<unknown>} => {\n  if (value instanceof Map) {\n    return {\n      dataType: 'Map',\n      value: Array.from(value.entries()), // or with spread: value: [...value]\n    }\n  }\n  return value\n}\n\nexport type TClassName = string | boolean | null | undefined\nexport const classNames = (...classes: TClassName[]): string => classes\n  .filter((className: TClassName) => (typeof className === 'string' && className !== undefined && className !== null))\n  .filter(Boolean).join(' ')\n\n\nexport type PropsCategoriesType = {\n  dataProps: Record<string, unknown>\n  restProps: Record<string, unknown>\n};\n\nexport const parseProps = (props: Record<string, unknown>):PropsCategoriesType => {\n  const dataProps: Record<string, unknown> = {}\n  const restProps: Record<string, unknown> = {}\n\n  Object.entries(props).forEach(([key, value]) => {\n    if (key.substr(0, 5) === 'data-' || key.substr(0, 4) === 'data') {\n      dataProps[key] = value\n    } else {\n      restProps[key] = value\n    }\n  })\n  return { dataProps, restProps }\n}\n\n\n\ntype GeneratorIdCallable = (token: string, increment?: boolean, forcedValue?: number | undefined) => string\ntype GenerateId = { tokens?: Record<string, number | null | undefined> } & GeneratorIdCallable\n\nexport const generateId: GenerateId = (\n  token: string,\n  increment = true,\n  forcedValue: number | undefined = undefined,\n) => {\n  generateId.tokens = generateId.tokens || {}\n\n  if (forcedValue !== undefined && forcedValue !== null) {\n    generateId.tokens[token] = forcedValue\n    return `${token}${generateId?.tokens?.[token] as number}`\n  }\n\n  const noValue = generateId?.tokens[token] === undefined || generateId?.tokens[token] === null\n\n  generateId.tokens[token] = generateId.tokens[token] || 0\n\n  if (noValue) {\n    return `${token}${0}`\n  }\n\n  if (increment) {\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    generateId.tokens[token] += 1\n\n    return `${token}${generateId?.tokens?.[token] as number}`\n  }\n\n  return `${token}${generateId?.tokens?.[token] as number}`\n}\n\ntype FAnchorClick = { aElement?: HTMLAnchorElement | null }\n  & ((href: string, target?: string, remove?: boolean) => void)\n\nexport const anchorClick: FAnchorClick = (href: string, target = '_top', remove = false): HTMLAnchorElement | null => {\n  anchorClick.aElement = anchorClick.aElement || document.createElement('a')\n\n  const { aElement } = anchorClick\n\n  aElement.setAttribute('href', href)\n  aElement.setAttribute('target', target)\n\n  aElement.dataset.date = `${Date.now()}`\n  aElement.click()\n  if (remove) {\n    aElement.remove()\n    anchorClick.aElement = null\n  }\n\n  return aElement\n}\n\n\n\nexport type NoopEvent = {\n  preventDefault?: () => void\n  stopPropagation?: () => void\n  stopImmediatePropagation?: () => void\n} | Event\n\nexport const noop = (event?: NoopEvent): void => {\n  event?.preventDefault?.()\n  event?.stopPropagation?.()\n  event?.stopImmediatePropagation?.()\n}\n\n/**\n * Type definition for theme map.\n * @typedef {Object} ThemeMap\n * @property {string} dark - CSS class for the dark theme.\n * @property {string} light - CSS class for the light theme.\n */\nexport type ThemeMap = {\n  dark: string\n  light: string\n}\n\nconst THEME_PROP = '__eskit_themes__'\n\nconst defaultThemes: ThemeMap = {\n  dark: 'theme-dark',\n  light: 'theme-light',\n}\n\n/**\n * Reads the theme config stored on the given element.\n * Falls back to defaultThemes when no config has been set.\n * Scoping to the element means different microfrontends (different roots) are isolated,\n * while all bundles targeting the same element share one config.\n * @param {HTMLElement} [element] - The element to read from. Defaults to document.body.\n * @returns {ThemeMap} The current base themes for the element.\n */\nexport const getBaseThemes = (element?: HTMLElement): ThemeMap => {\n  const el = element ?? document.body\n\n  return (el as unknown as Record<string, unknown>)[THEME_PROP] as ThemeMap ?? defaultThemes\n}\n\n/**\n * Sets the base theme class names on the given element.\n * @param {ThemeMap} themes - CSS classes for dark and light themes.\n * @param {HTMLElement} [element] - The element to store config on. Defaults to document.body.\n */\nexport const setThemeClassNames = (themes: ThemeMap, element?: HTMLElement): void => {\n  const el = element ?? document.body\n  const store = el as unknown as Record<string, unknown>\n\n  store[THEME_PROP] = themes\n}\n\n/**\n * Switches the color theme of the document.\n * @param {boolean} isDark - Flag to determine if the dark theme should be applied.\n * @param {HTMLElement} [htmlElement] - The HTML element to which the theme will be applied.\n * @param {boolean} [findShadows=true] - Flag to determine if shadow DOM elements should also be themed.\n */\nexport const switchColorTheme = (\n  isDark: boolean, htmlElement?: HTMLElement, findShadows = true,\n): void => {\n  const themes = getBaseThemes(htmlElement)\n  const oldClass = isDark ? themes.light : themes.dark\n  const newClass = isDark ? themes.dark : themes.light\n\n  if (htmlElement) {\n    htmlElement.classList.remove(oldClass)\n    htmlElement.classList.remove(newClass)\n    htmlElement.classList.add(newClass)\n  }\n\n  if (typeof document !== 'undefined') {\n    document.querySelectorAll(`.${oldClass}`).forEach((element) => {\n      element.classList.add(`.${newClass}`)\n      element.classList.remove(`.${oldClass}`)\n    })\n\n    if (findShadows) {\n      document.querySelectorAll('.shadow-div').forEach((element) => {\n        element.shadowRoot?.querySelector(`.${oldClass}`)?.classList.add(newClass)\n        element.shadowRoot?.querySelector(`.${oldClass}`)?.classList.remove(oldClass)\n      })\n\n      document.querySelectorAll('esmf-wrapper').forEach((element) => {\n        element.shadowRoot?.querySelector(`.${oldClass}`)?.classList.add(newClass)\n        element.shadowRoot?.querySelector(`.${oldClass}`)?.classList.remove(oldClass)\n\n        const firstChild: HTMLElement = element.shadowRoot?.childNodes[0] as HTMLElement\n\n        if (firstChild) {\n          firstChild.classList.add(newClass)\n          firstChild.classList.remove(oldClass)\n        }\n      })\n    }\n  }\n}\n\n/**\n * Updates the color theme of the document.\n * @param {boolean} [isDark] - Optional flag to determine if the dark theme should be applied.\n * @param {HTMLElement} [htmlElement] - The HTML element to which the theme will be applied.\n */\nexport const updateColorTheme = (isDark?: boolean, htmlElement?: HTMLElement): void => {\n  const el = htmlElement || document.body\n  let resolvedIsDark: boolean = isDark || false\n\n  if (typeof document !== 'undefined' && isDark === undefined) {\n    resolvedIsDark = document.body.classList.contains(getBaseThemes(el).dark)\n  }\n  switchColorTheme(resolvedIsDark, el)\n}\n\nconst windowMatchMediaChangeEventType = 'change'\n\n/**\n * Observes the user's theme preference and applies the appropriate theme.\n * @param {() => HTMLElement} [getHtmlElement] - Function to get the HTML element to which the theme will be applied.\n * @param {(isDark: boolean) => void} [switchCallback] - Callback function to execute when the theme changes.\n * @returns {() => void} Function to stop observing the theme preference.\n */\nexport const observeThemePreference = (\n  getHtmlElement: () => HTMLElement = (): HTMLElement => document.body,\n  switchCallback: (isDark: boolean) => void = (isDark: boolean): boolean => isDark,\n): () => void => {\n  const switchColorThemeHandler = (isDark: boolean): void => {\n    const htmlElement = getHtmlElement()\n\n    switchColorTheme?.(isDark, htmlElement)\n    switchCallback?.(isDark)\n  }\n\n  const changeDarkColorThemeHandler = (event: MediaQueryListEvent): void => {\n    switchColorThemeHandler(event.matches)\n  }\n\n  const changeLightColorThemeHandler = (event: MediaQueryListEvent): void => {\n    switchColorThemeHandler(!event.matches)\n  }\n\n  const isDark = window.matchMedia('(prefers-color-scheme: dark)')\n\n  try {\n    window.matchMedia('(prefers-color-scheme: dark)').removeEventListener(\n      windowMatchMediaChangeEventType, changeDarkColorThemeHandler,\n    )\n    window.matchMedia('(prefers-color-scheme: light)').removeEventListener(\n      windowMatchMediaChangeEventType, changeLightColorThemeHandler,\n    )\n  } catch (error) {\n    console.error(`Error::observeThemePreference::removeEventListener: ${error}`)\n  }\n\n  switchColorThemeHandler(isDark?.matches)\n  window.matchMedia('(prefers-color-scheme: dark)').addEventListener(\n    windowMatchMediaChangeEventType, changeDarkColorThemeHandler,\n  )\n  window.matchMedia('(prefers-color-scheme: light)').addEventListener(\n    windowMatchMediaChangeEventType, changeLightColorThemeHandler,\n  )\n\n  return () => {\n    window.matchMedia('(prefers-color-scheme: dark)').removeEventListener(\n      windowMatchMediaChangeEventType, changeDarkColorThemeHandler,\n    )\n    window.matchMedia('(prefers-color-scheme: light)').removeEventListener(\n      windowMatchMediaChangeEventType, changeLightColorThemeHandler,\n    )\n  }\n}\n"],"names":["classNames","_len","arguments","length","classes","Array","_key","filter","className","Boolean","join","parseProps","props","dataProps","restProps","Object","entries","forEach","_ref","key","value","substr","noop","event","_event$preventDefault","_event$stopPropagatio","_event$stopImmediateP","preventDefault","call","stopPropagation","stopImmediatePropagation"],"mappings":"iFAYaA,MAAAA,EAAa,WAAA,IAAA,IAAAC,EAAAC,UAAAC,OAAIC,EAAOC,IAAAA,MAAAJ,GAAAK,EAAA,EAAAA,EAAAL,EAAAK,IAAPF,EAAOE,GAAAJ,UAAAI,GAAA,OAA2BF,EAC7DG,QAAQC,GAAgD,iBAAdA,GAAP,MAAiCA,IACpED,OAAOE,SAASC,KAAK,IAAI,EAQfC,EAAcC,IACzB,MAAMC,EAAqC,CAAE,EACvCC,EAAqC,CAAE,EAS7C,OAPAC,OAAOC,QAAQJ,GAAOK,SAAQC,IAAkB,IAAhBC,EAAKC,GAAMF,EAChB,UAArBC,EAAIE,OAAO,EAAG,IAAuC,SAArBF,EAAIE,OAAO,EAAG,GAChDR,EAAUM,GAAOC,EAEjBN,EAAUK,GAAOC,CACnB,IAEK,CAAEP,YAAWC,YAAW,EAoEpBQ,EAAQC,IAA4B,IAAAC,EAAAC,EAAAC,EAC/CH,SAAqBC,QAAhBA,EAALD,EAAOI,0BAAcH,GAArBA,EAAAI,KAAAL,GACAA,SAAsBE,QAAjBA,EAALF,EAAOM,2BAAeJ,GAAtBA,EAAAG,KAAAL,GACAA,SAA+BG,QAA1BA,EAALH,EAAOO,oCAAwBJ,GAA/BA,EAAAE,KAAAL,EAAmC"}

package/dist/ui/src/core/utils/helpers/ui.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui.js","sources":["../../../../../../src/core/utils/helpers/ui.ts"],"sourcesContent":["export const mapSerReplacer\n= (key: string, value: unknown): unknown | { dataType: string; value: Array<unknown>} => {\n  if (value instanceof Map) {\n    return {\n      dataType: 'Map',\n      value: Array.from(value.entries()), // or with spread: value: [...value]\n    }\n  }\n  return value\n}\n\nexport type TClassName = string | boolean | null | undefined\nexport const classNames = (...classes: TClassName[]): string => classes\n  .filter((className: TClassName) => (typeof className === 'string' && className !== undefined && className !== null))\n  .filter(Boolean).join(' ')\n\n\nexport type PropsCategoriesType = {\n  dataProps: Record<string, unknown>\n  restProps: Record<string, unknown>\n};\n\nexport const parseProps = (props: Record<string, unknown>):PropsCategoriesType => {\n  const dataProps: Record<string, unknown> = {}\n  const restProps: Record<string, unknown> = {}\n\n  Object.entries(props).forEach(([key, value]) => {\n    if (key.substr(0, 5) === 'data-' || key.substr(0, 4) === 'data') {\n      dataProps[key] = value\n    } else {\n      restProps[key] = value\n    }\n  })\n  return { dataProps, restProps }\n}\n\n\n\ntype GeneratorIdCallable = (token: string, increment?: boolean, forcedValue?: number | undefined) => string\ntype GenerateId = { tokens?: Record<string, number | null | undefined> } & GeneratorIdCallable\n\nexport const generateId: GenerateId = (\n  token: string,\n  increment = true,\n  forcedValue: number | undefined = undefined,\n) => {\n  generateId.tokens = generateId.tokens || {}\n\n  if (forcedValue !== undefined && forcedValue !== null) {\n    generateId.tokens[token] = forcedValue\n    return `${token}${generateId?.tokens?.[token] as number}`\n  }\n\n  const noValue = generateId?.tokens[token] === undefined || generateId?.tokens[token] === null\n\n  generateId.tokens[token] = generateId.tokens[token] || 0\n\n  if (noValue) {\n    return `${token}${0}`\n  }\n\n  if (increment) {\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    generateId.tokens[token] += 1\n\n    return `${token}${generateId?.tokens?.[token] as number}`\n  }\n\n  return `${token}${generateId?.tokens?.[token] as number}`\n}\n\ntype FAnchorClick = { aElement?: HTMLAnchorElement | null }\n  & ((href: string, target?: string, remove?: boolean) => void)\n\nexport const anchorClick: FAnchorClick = (href: string, target = '_top', remove = false): HTMLAnchorElement | null => {\n  anchorClick.aElement = anchorClick.aElement || document.createElement('a')\n\n  const { aElement } = anchorClick\n\n  aElement.setAttribute('href', href)\n  aElement.setAttribute('target', target)\n\n  aElement.dataset.date = `${Date.now()}`\n  aElement.click()\n  if (remove) {\n    aElement.remove()\n    anchorClick.aElement = null\n  }\n\n  return aElement\n}\n\n\n\nexport type NoopEvent = {\n  preventDefault?: () => void\n  stopPropagation?: () => void\n  stopImmediatePropagation?: () => void\n} | Event\n\nexport const noop = (event?: NoopEvent): void => {\n  event?.preventDefault?.()\n  event?.stopPropagation?.()\n  event?.stopImmediatePropagation?.()\n}\n\n/**\n * Type definition for theme map.\n * @typedef {Object} ThemeMap\n * @property {string} dark - CSS class for the dark theme.\n * @property {string} light - CSS class for the light theme.\n */\nexport type ThemeMap = {\n  dark: string\n  light: string\n}\n\nlet baseThemes: ThemeMap = {\n  dark: 'theme-dark',\n  light: 'theme-light',\n}\n\n/**\n * Gets the base themes.\n * @returns {ThemeMap} The current base themes.\n */\nexport const getBaseThemes = (): ThemeMap => baseThemes\n\n/**\n * Sets the base theme class names.\n * @param {ThemeMap} themes - Object containing the CSS classes for dark and light themes.\n */\nexport const setThemeClassNames = (themes: ThemeMap): void => {\n  baseThemes = themes\n}\n\n/**\n * Switches the color theme of the document.\n * @param {boolean} isDark - Flag to determine if the dark theme should be applied.\n * @param {HTMLElement} [htmlElement] - The HTML element to which the theme will be applied.\n * @param {boolean} [findShadows=true] - Flag to determine if shadow DOM elements should also be themed.\n */\nexport const switchColorTheme = (isDark: boolean, htmlElement?: HTMLElement, findShadows = true): void => {\n  const oldClass = isDark ? baseThemes.light : baseThemes.dark\n  const newClass = isDark ? baseThemes.dark : baseThemes.light\n\n  if (htmlElement) {\n    htmlElement.classList.remove(oldClass)\n    htmlElement.classList.remove(newClass)\n    htmlElement.classList.add(newClass)\n  }\n\n  if (typeof document !== 'undefined') {\n    document.querySelectorAll(`.${oldClass}`).forEach((element) => {\n      element.classList.add(`.${newClass}`)\n      element.classList.remove(`.${oldClass}`)\n    })\n\n    if (findShadows) {\n      document.querySelectorAll('.shadow-div').forEach((element) => {\n        element.shadowRoot?.querySelector(`.${oldClass}`)?.classList.add(newClass)\n        element.shadowRoot?.querySelector(`.${oldClass}`)?.classList.remove(oldClass)\n      })\n\n      document.querySelectorAll('esmf-wrapper').forEach((element) => {\n        element.shadowRoot?.querySelector(`.${oldClass}`)?.classList.add(newClass)\n        element.shadowRoot?.querySelector(`.${oldClass}`)?.classList.remove(oldClass)\n\n        const firstChild: HTMLElement = element.shadowRoot?.childNodes[0] as HTMLElement\n\n        if (firstChild) {\n          firstChild.classList.add(newClass)\n          firstChild.classList.remove(oldClass)\n        }\n      })\n    }\n  }\n}\n\n/**\n * Updates the color theme of the document.\n * @param {boolean} [isDark] - Optional flag to determine if the dark theme should be applied.\n * @param {HTMLElement} [htmlElement] - The HTML element to which the theme will be applied.\n */\nexport const updateColorTheme = (isDark?: boolean, htmlElement?: HTMLElement): void => {\n  let resolvedIsDark: boolean = isDark || false\n\n  if (typeof document !== 'undefined' && isDark === undefined) {\n    resolvedIsDark = document.body.classList.contains(baseThemes.dark)\n  }\n  switchColorTheme(resolvedIsDark, htmlElement || document.body)\n}\n\nconst windowMatchMediaChangeEventType = 'change'\n\n/**\n * Observes the user's theme preference and applies the appropriate theme.\n * @param {() => HTMLElement} [getHtmlElement] - Function to get the HTML element to which the theme will be applied.\n * @param {(isDark: boolean) => void} [switchCallback] - Callback function to execute when the theme changes.\n * @returns {() => void} Function to stop observing the theme preference.\n */\nexport const observeThemePreference = (\n  getHtmlElement: () => HTMLElement = (): HTMLElement => document.body,\n  switchCallback: (isDark: boolean) => void = (isDark: boolean): boolean => isDark,\n): () => void => {\n  const switchColorThemeHandler = (isDark: boolean): void => {\n    const htmlElement = getHtmlElement()\n\n    switchColorTheme?.(isDark, htmlElement)\n    switchCallback?.(isDark)\n  }\n\n  const changeDarkColorThemeHandler = (event: MediaQueryListEvent): void => {\n    switchColorThemeHandler(event.matches)\n  }\n\n  const changeLightColorThemeHandler = (event: MediaQueryListEvent): void => {\n    switchColorThemeHandler(!event.matches)\n  }\n\n  const isDark = window.matchMedia('(prefers-color-scheme: dark)')\n\n  try {\n    window.matchMedia('(prefers-color-scheme: dark)').removeEventListener(\n      windowMatchMediaChangeEventType, changeDarkColorThemeHandler,\n    )\n    window.matchMedia('(prefers-color-scheme: light)').removeEventListener(\n      windowMatchMediaChangeEventType, changeLightColorThemeHandler,\n    )\n  } catch (error) {\n    console.error(`Error::observeThemePreference::removeEventListener: ${error}`)\n  }\n\n  switchColorThemeHandler(isDark?.matches)\n  window.matchMedia('(prefers-color-scheme: dark)').addEventListener(\n    windowMatchMediaChangeEventType, changeDarkColorThemeHandler,\n  )\n  window.matchMedia('(prefers-color-scheme: light)').addEventListener(\n    windowMatchMediaChangeEventType, changeLightColorThemeHandler,\n  )\n\n  return () => {\n    window.matchMedia('(prefers-color-scheme: dark)').removeEventListener(\n      windowMatchMediaChangeEventType, changeDarkColorThemeHandler,\n    )\n    window.matchMedia('(prefers-color-scheme: light)').removeEventListener(\n      windowMatchMediaChangeEventType, changeLightColorThemeHandler,\n    )\n  }\n}\n"],"names":["_len","arguments","length","classes","Array","_key","filter","className","Boolean","join","event","_event$preventDefault","_event$stopPropagatio","_event$stopImmediateP","preventDefault","call","stopPropagation","stopImmediatePropagation","props","dataProps","restProps","Object","entries","forEach","_ref","key","value","substr"],"mappings":"oHAY0B,WAAA,IAAA,IAAAA,EAAAC,UAAAC,OAAIC,EAAOC,IAAAA,MAAAJ,GAAAK,EAAA,EAAAA,EAAAL,EAAAK,IAAPF,EAAOE,GAAAJ,UAAAI,GAAA,OAA2BF,EAC7DG,QAAQC,GAAgD,iBAAdA,GAAP,MAAiCA,IACpED,OAAOE,SAASC,KAAK,IAAI,eAuFPC,IAA4B,IAAAC,EAAAC,EAAAC,EAC/CH,SAAqBC,QAAhBA,EAALD,EAAOI,0BAAcH,GAArBA,EAAAI,KAAAL,GACAA,SAAsBE,QAAjBA,EAALF,EAAOM,2BAAeJ,GAAtBA,EAAAG,KAAAL,GACAA,SAA+BG,QAA1BA,EAALH,EAAOO,oCAAwBJ,GAA/BA,EAAAE,KAAAL,EAAmC,qBAlFVQ,IACzB,MAAMC,EAAqC,CAAE,EACvCC,EAAqC,CAAE,EAS7C,OAPAC,OAAOC,QAAQJ,GAAOK,SAAQC,IAAkB,IAAhBC,EAAKC,GAAMF,EAChB,UAArBC,EAAIE,OAAO,EAAG,IAAuC,SAArBF,EAAIE,OAAO,EAAG,GAChDR,EAAUM,GAAOC,EAEjBN,EAAUK,GAAOC,CACnB,IAEK,CAAEP,YAAWC,YAAW"}
+{"version":3,"file":"ui.js","sources":["../../../../../../src/core/utils/helpers/ui.ts"],"sourcesContent":["export const mapSerReplacer\n= (key: string, value: unknown): unknown | { dataType: string; value: Array<unknown>} => {\n  if (value instanceof Map) {\n    return {\n      dataType: 'Map',\n      value: Array.from(value.entries()), // or with spread: value: [...value]\n    }\n  }\n  return value\n}\n\nexport type TClassName = string | boolean | null | undefined\nexport const classNames = (...classes: TClassName[]): string => classes\n  .filter((className: TClassName) => (typeof className === 'string' && className !== undefined && className !== null))\n  .filter(Boolean).join(' ')\n\n\nexport type PropsCategoriesType = {\n  dataProps: Record<string, unknown>\n  restProps: Record<string, unknown>\n};\n\nexport const parseProps = (props: Record<string, unknown>):PropsCategoriesType => {\n  const dataProps: Record<string, unknown> = {}\n  const restProps: Record<string, unknown> = {}\n\n  Object.entries(props).forEach(([key, value]) => {\n    if (key.substr(0, 5) === 'data-' || key.substr(0, 4) === 'data') {\n      dataProps[key] = value\n    } else {\n      restProps[key] = value\n    }\n  })\n  return { dataProps, restProps }\n}\n\n\n\ntype GeneratorIdCallable = (token: string, increment?: boolean, forcedValue?: number | undefined) => string\ntype GenerateId = { tokens?: Record<string, number | null | undefined> } & GeneratorIdCallable\n\nexport const generateId: GenerateId = (\n  token: string,\n  increment = true,\n  forcedValue: number | undefined = undefined,\n) => {\n  generateId.tokens = generateId.tokens || {}\n\n  if (forcedValue !== undefined && forcedValue !== null) {\n    generateId.tokens[token] = forcedValue\n    return `${token}${generateId?.tokens?.[token] as number}`\n  }\n\n  const noValue = generateId?.tokens[token] === undefined || generateId?.tokens[token] === null\n\n  generateId.tokens[token] = generateId.tokens[token] || 0\n\n  if (noValue) {\n    return `${token}${0}`\n  }\n\n  if (increment) {\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    generateId.tokens[token] += 1\n\n    return `${token}${generateId?.tokens?.[token] as number}`\n  }\n\n  return `${token}${generateId?.tokens?.[token] as number}`\n}\n\ntype FAnchorClick = { aElement?: HTMLAnchorElement | null }\n  & ((href: string, target?: string, remove?: boolean) => void)\n\nexport const anchorClick: FAnchorClick = (href: string, target = '_top', remove = false): HTMLAnchorElement | null => {\n  anchorClick.aElement = anchorClick.aElement || document.createElement('a')\n\n  const { aElement } = anchorClick\n\n  aElement.setAttribute('href', href)\n  aElement.setAttribute('target', target)\n\n  aElement.dataset.date = `${Date.now()}`\n  aElement.click()\n  if (remove) {\n    aElement.remove()\n    anchorClick.aElement = null\n  }\n\n  return aElement\n}\n\n\n\nexport type NoopEvent = {\n  preventDefault?: () => void\n  stopPropagation?: () => void\n  stopImmediatePropagation?: () => void\n} | Event\n\nexport const noop = (event?: NoopEvent): void => {\n  event?.preventDefault?.()\n  event?.stopPropagation?.()\n  event?.stopImmediatePropagation?.()\n}\n\n/**\n * Type definition for theme map.\n * @typedef {Object} ThemeMap\n * @property {string} dark - CSS class for the dark theme.\n * @property {string} light - CSS class for the light theme.\n */\nexport type ThemeMap = {\n  dark: string\n  light: string\n}\n\nconst THEME_PROP = '__eskit_themes__'\n\nconst defaultThemes: ThemeMap = {\n  dark: 'theme-dark',\n  light: 'theme-light',\n}\n\n/**\n * Reads the theme config stored on the given element.\n * Falls back to defaultThemes when no config has been set.\n * Scoping to the element means different microfrontends (different roots) are isolated,\n * while all bundles targeting the same element share one config.\n * @param {HTMLElement} [element] - The element to read from. Defaults to document.body.\n * @returns {ThemeMap} The current base themes for the element.\n */\nexport const getBaseThemes = (element?: HTMLElement): ThemeMap => {\n  const el = element ?? document.body\n\n  return (el as unknown as Record<string, unknown>)[THEME_PROP] as ThemeMap ?? defaultThemes\n}\n\n/**\n * Sets the base theme class names on the given element.\n * @param {ThemeMap} themes - CSS classes for dark and light themes.\n * @param {HTMLElement} [element] - The element to store config on. Defaults to document.body.\n */\nexport const setThemeClassNames = (themes: ThemeMap, element?: HTMLElement): void => {\n  const el = element ?? document.body\n  const store = el as unknown as Record<string, unknown>\n\n  store[THEME_PROP] = themes\n}\n\n/**\n * Switches the color theme of the document.\n * @param {boolean} isDark - Flag to determine if the dark theme should be applied.\n * @param {HTMLElement} [htmlElement] - The HTML element to which the theme will be applied.\n * @param {boolean} [findShadows=true] - Flag to determine if shadow DOM elements should also be themed.\n */\nexport const switchColorTheme = (\n  isDark: boolean, htmlElement?: HTMLElement, findShadows = true,\n): void => {\n  const themes = getBaseThemes(htmlElement)\n  const oldClass = isDark ? themes.light : themes.dark\n  const newClass = isDark ? themes.dark : themes.light\n\n  if (htmlElement) {\n    htmlElement.classList.remove(oldClass)\n    htmlElement.classList.remove(newClass)\n    htmlElement.classList.add(newClass)\n  }\n\n  if (typeof document !== 'undefined') {\n    document.querySelectorAll(`.${oldClass}`).forEach((element) => {\n      element.classList.add(`.${newClass}`)\n      element.classList.remove(`.${oldClass}`)\n    })\n\n    if (findShadows) {\n      document.querySelectorAll('.shadow-div').forEach((element) => {\n        element.shadowRoot?.querySelector(`.${oldClass}`)?.classList.add(newClass)\n        element.shadowRoot?.querySelector(`.${oldClass}`)?.classList.remove(oldClass)\n      })\n\n      document.querySelectorAll('esmf-wrapper').forEach((element) => {\n        element.shadowRoot?.querySelector(`.${oldClass}`)?.classList.add(newClass)\n        element.shadowRoot?.querySelector(`.${oldClass}`)?.classList.remove(oldClass)\n\n        const firstChild: HTMLElement = element.shadowRoot?.childNodes[0] as HTMLElement\n\n        if (firstChild) {\n          firstChild.classList.add(newClass)\n          firstChild.classList.remove(oldClass)\n        }\n      })\n    }\n  }\n}\n\n/**\n * Updates the color theme of the document.\n * @param {boolean} [isDark] - Optional flag to determine if the dark theme should be applied.\n * @param {HTMLElement} [htmlElement] - The HTML element to which the theme will be applied.\n */\nexport const updateColorTheme = (isDark?: boolean, htmlElement?: HTMLElement): void => {\n  const el = htmlElement || document.body\n  let resolvedIsDark: boolean = isDark || false\n\n  if (typeof document !== 'undefined' && isDark === undefined) {\n    resolvedIsDark = document.body.classList.contains(getBaseThemes(el).dark)\n  }\n  switchColorTheme(resolvedIsDark, el)\n}\n\nconst windowMatchMediaChangeEventType = 'change'\n\n/**\n * Observes the user's theme preference and applies the appropriate theme.\n * @param {() => HTMLElement} [getHtmlElement] - Function to get the HTML element to which the theme will be applied.\n * @param {(isDark: boolean) => void} [switchCallback] - Callback function to execute when the theme changes.\n * @returns {() => void} Function to stop observing the theme preference.\n */\nexport const observeThemePreference = (\n  getHtmlElement: () => HTMLElement = (): HTMLElement => document.body,\n  switchCallback: (isDark: boolean) => void = (isDark: boolean): boolean => isDark,\n): () => void => {\n  const switchColorThemeHandler = (isDark: boolean): void => {\n    const htmlElement = getHtmlElement()\n\n    switchColorTheme?.(isDark, htmlElement)\n    switchCallback?.(isDark)\n  }\n\n  const changeDarkColorThemeHandler = (event: MediaQueryListEvent): void => {\n    switchColorThemeHandler(event.matches)\n  }\n\n  const changeLightColorThemeHandler = (event: MediaQueryListEvent): void => {\n    switchColorThemeHandler(!event.matches)\n  }\n\n  const isDark = window.matchMedia('(prefers-color-scheme: dark)')\n\n  try {\n    window.matchMedia('(prefers-color-scheme: dark)').removeEventListener(\n      windowMatchMediaChangeEventType, changeDarkColorThemeHandler,\n    )\n    window.matchMedia('(prefers-color-scheme: light)').removeEventListener(\n      windowMatchMediaChangeEventType, changeLightColorThemeHandler,\n    )\n  } catch (error) {\n    console.error(`Error::observeThemePreference::removeEventListener: ${error}`)\n  }\n\n  switchColorThemeHandler(isDark?.matches)\n  window.matchMedia('(prefers-color-scheme: dark)').addEventListener(\n    windowMatchMediaChangeEventType, changeDarkColorThemeHandler,\n  )\n  window.matchMedia('(prefers-color-scheme: light)').addEventListener(\n    windowMatchMediaChangeEventType, changeLightColorThemeHandler,\n  )\n\n  return () => {\n    window.matchMedia('(prefers-color-scheme: dark)').removeEventListener(\n      windowMatchMediaChangeEventType, changeDarkColorThemeHandler,\n    )\n    window.matchMedia('(prefers-color-scheme: light)').removeEventListener(\n      windowMatchMediaChangeEventType, changeLightColorThemeHandler,\n    )\n  }\n}\n"],"names":["_len","arguments","length","classes","Array","_key","filter","className","Boolean","join","event","_event$preventDefault","_event$stopPropagatio","_event$stopImmediateP","preventDefault","call","stopPropagation","stopImmediatePropagation","props","dataProps","restProps","Object","entries","forEach","_ref","key","value","substr"],"mappings":"oHAY0B,WAAA,IAAA,IAAAA,EAAAC,UAAAC,OAAIC,EAAOC,IAAAA,MAAAJ,GAAAK,EAAA,EAAAA,EAAAL,EAAAK,IAAPF,EAAOE,GAAAJ,UAAAI,GAAA,OAA2BF,EAC7DG,QAAQC,GAAgD,iBAAdA,GAAP,MAAiCA,IACpED,OAAOE,SAASC,KAAK,IAAI,eAuFPC,IAA4B,IAAAC,EAAAC,EAAAC,EAC/CH,SAAqBC,QAAhBA,EAALD,EAAOI,0BAAcH,GAArBA,EAAAI,KAAAL,GACAA,SAAsBE,QAAjBA,EAALF,EAAOM,2BAAeJ,GAAtBA,EAAAG,KAAAL,GACAA,SAA+BG,QAA1BA,EAALH,EAAOO,oCAAwBJ,GAA/BA,EAAAE,KAAAL,EAAmC,qBAlFVQ,IACzB,MAAMC,EAAqC,CAAE,EACvCC,EAAqC,CAAE,EAS7C,OAPAC,OAAOC,QAAQJ,GAAOK,SAAQC,IAAkB,IAAhBC,EAAKC,GAAMF,EAChB,UAArBC,EAAIE,OAAO,EAAG,IAAuC,SAArBF,EAAIE,OAAO,EAAG,GAChDR,EAAUM,GAAOC,EAEjBN,EAAUK,GAAOC,CACnB,IAEK,CAAEP,YAAWC,YAAW"}