igniteui-webcomponents 6.1.0 → 6.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-webcomponents",
-  "version": "6.1.0",
+  "version": "6.1.1",
   "description": "Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.",
   "author": "Infragistics",
   "license": "SEE LICENSE IN LICENSE",

package/theming/config.d.ts

@@ -1,9 +1,9 @@
 import type { Theme, ThemeVariant } from './types.js';
-export declare const getTheme: () => {
+export declare function getTheme(): {
     theme: Theme;
     themeVariant: ThemeVariant;
 };
-export declare const setTheme: (value: Theme, variant: ThemeVariant) => void;
+export declare function setTheme(value: Theme, variant: ThemeVariant): void;
 /**
  * Allows the global configuration of the active theme.
  *
@@ -14,4 +14,4 @@ export declare const setTheme: (value: Theme, variant: ThemeVariant) => void;
  *  configureTheme('material', 'light');
  *  ```
  */
-export declare const configureTheme: (t: Theme, v?: ThemeVariant) => void;
+export declare function configureTheme(t: Theme, v?: ThemeVariant): void;

package/theming/config.js

@@ -1,10 +1,10 @@
-import { isDefined } from '../components/common/util.js';
+import { isServer } from 'lit';
 import { CHANGE_THEME_EVENT, } from './theming-event.js';
 import { getAllCssVariables } from './utils.js';
 let theme;
 let themeVariant;
 function dispatchThemingEvent(detail) {
-    if (isDefined(globalThis.dispatchEvent)) {
+    if (!isServer) {
         globalThis.dispatchEvent(new CustomEvent(CHANGE_THEME_EVENT, { detail }));
     }
 }
@@ -14,28 +14,24 @@ function isOfTypeTheme(theme) {
 function isOfTypeThemeVariant(variant) {
     return ['light', 'dark'].includes(variant);
 }
-export const getTheme = () => {
+export function getTheme() {
     if (!(theme && themeVariant)) {
-        const [_theme, _variant] = Object.entries(getAllCssVariables()).filter(([v]) => v === 'igTheme' || v === 'igThemeVariant') || [];
-        theme =
-            _theme?.[1] && isOfTypeTheme(_theme[1])
-                ? _theme[1]
-                : 'bootstrap';
-        themeVariant =
-            _variant?.[1] && isOfTypeThemeVariant(_variant[1])
-                ? _variant[1]
-                : 'light';
+        const cssVars = getAllCssVariables();
+        const foundTheme = cssVars.igTheme;
+        const foundVariant = cssVars.igThemeVariant;
+        theme = isOfTypeTheme(foundTheme) ? foundTheme : 'bootstrap';
+        themeVariant = isOfTypeThemeVariant(foundVariant) ? foundVariant : 'light';
     }
     return { theme, themeVariant };
-};
-export const setTheme = (value, variant) => {
+}
+export function setTheme(value, variant) {
     theme = value;
     themeVariant = variant;
-};
-export const configureTheme = (t, v = 'light') => {
+}
+export function configureTheme(t, v = 'light') {
     if (isOfTypeTheme(t) && isOfTypeThemeVariant(v)) {
         setTheme(t, v);
+        dispatchThemingEvent({ theme, themeVariant });
     }
-    dispatchThemingEvent({ theme, themeVariant });
-};
+}
 //# sourceMappingURL=config.js.map

package/theming/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sourceRoot":"","sources":["../../src/theming/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EACL,kBAAkB,GAEnB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEhD,IAAI,KAAY,CAAC;AACjB,IAAI,YAA0B,CAAC;AAK/B,SAAS,oBAAoB,CAAC,MAA8B;IAC1D,IAAI,SAAS,CAAC,UAAU,CAAC,aAAa,CAAC,EAAE,CAAC;QACxC,UAAU,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,kBAAkB,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;IAC5E,CAAC;AACH,CAAC;AAED,SAAS,aAAa,CAAC,KAAa;IAClC,OAAO,CAAC,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AACvE,CAAC;AAED,SAAS,oBAAoB,CAAC,OAAe;IAC3C,OAAO,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AAC7C,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAGjB,GAAG,EAAE;IACP,IAAI,CAAC,CAAC,KAAK,IAAI,YAAY,CAAC,EAAE,CAAC;QAC7B,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,GACtB,MAAM,CAAC,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAC,MAAM,CACzC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,SAAS,IAAI,CAAC,KAAK,gBAAgB,CACnD,IAAI,EAAE,CAAC;QAEV,KAAK;YACH,MAAM,EAAE,CAAC,CAAC,CAAC,IAAI,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;gBACrC,CAAC,CAAE,MAAM,CAAC,CAAC,CAAW;gBACtB,CAAC,CAAC,WAAW,CAAC;QAElB,YAAY;YACV,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,oBAAoB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gBAChD,CAAC,CAAE,QAAQ,CAAC,CAAC,CAAkB;gBAC/B,CAAC,CAAC,OAAO,CAAC;IAChB,CAAC;IAED,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC;AACjC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,OAAqB,EAAE,EAAE;IAC9D,KAAK,GAAG,KAAK,CAAC;IACd,YAAY,GAAG,OAAO,CAAC;AACzB,CAAC,CAAC;AAYF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,CAAQ,EAAE,IAAkB,OAAO,EAAE,EAAE;IACpE,IAAI,aAAa,CAAC,CAAC,CAAC,IAAI,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;QAChD,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACjB,CAAC;IAED,oBAAoB,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,CAAC;AAChD,CAAC,CAAC","sourcesContent":["import { isDefined } from '../components/common/util.js';\nimport {\n  CHANGE_THEME_EVENT,\n  type ChangeThemeEventDetail,\n} from './theming-event.js';\nimport type { Theme, ThemeVariant } from './types.js';\nimport { getAllCssVariables } from './utils.js';\n\nlet theme: Theme;\nlet themeVariant: ThemeVariant;\n\n/**\n * Dispatch an \"igc-change-theme\" event to `window` with the given detail.\n */\nfunction dispatchThemingEvent(detail: ChangeThemeEventDetail) {\n  if (isDefined(globalThis.dispatchEvent)) {\n    globalThis.dispatchEvent(new CustomEvent(CHANGE_THEME_EVENT, { detail }));\n  }\n}\n\nfunction isOfTypeTheme(theme: string): theme is Theme {\n  return ['bootstrap', 'material', 'indigo', 'fluent'].includes(theme);\n}\n\nfunction isOfTypeThemeVariant(variant: string): variant is ThemeVariant {\n  return ['light', 'dark'].includes(variant);\n}\n\nexport const getTheme: () => {\n  theme: Theme;\n  themeVariant: ThemeVariant;\n} = () => {\n  if (!(theme && themeVariant)) {\n    const [_theme, _variant] =\n      Object.entries(getAllCssVariables()).filter(\n        ([v]) => v === 'igTheme' || v === 'igThemeVariant'\n      ) || [];\n\n    theme =\n      _theme?.[1] && isOfTypeTheme(_theme[1])\n        ? (_theme[1] as Theme)\n        : 'bootstrap';\n\n    themeVariant =\n      _variant?.[1] && isOfTypeThemeVariant(_variant[1])\n        ? (_variant[1] as ThemeVariant)\n        : 'light';\n  }\n\n  return { theme, themeVariant };\n};\n\nexport const setTheme = (value: Theme, variant: ThemeVariant) => {\n  theme = value;\n  themeVariant = variant;\n};\n\n/**\n * Allows the global configuration of the active theme.\n *\n * Usage:\n *  ```ts\n *  import { configureTheme } from 'igniteui-webcomponents';\n *\n *  configureTheme('material', 'light');\n *  ```\n */\nexport const configureTheme = (t: Theme, v: ThemeVariant = 'light') => {\n  if (isOfTypeTheme(t) && isOfTypeThemeVariant(v)) {\n    setTheme(t, v);\n  }\n\n  dispatchThemingEvent({ theme, themeVariant });\n};\n"]}
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../../src/theming/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAC/B,OAAO,EACL,kBAAkB,GAEnB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEhD,IAAI,KAAY,CAAC;AACjB,IAAI,YAA0B,CAAC;AAK/B,SAAS,oBAAoB,CAAC,MAA8B;IAC1D,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,UAAU,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,kBAAkB,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;IAC5E,CAAC;AACH,CAAC;AAED,SAAS,aAAa,CAAC,KAAa;IAClC,OAAO,CAAC,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AACvE,CAAC;AAED,SAAS,oBAAoB,CAAC,OAAe;IAC3C,OAAO,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AAC7C,CAAC;AAED,MAAM,UAAU,QAAQ;IACtB,IAAI,CAAC,CAAC,KAAK,IAAI,YAAY,CAAC,EAAE,CAAC;QAC7B,MAAM,OAAO,GAAG,kBAAkB,EAAE,CAAC;QACrC,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC;QACnC,MAAM,YAAY,GAAG,OAAO,CAAC,cAAc,CAAC;QAE5C,KAAK,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC;QAC7D,YAAY,GAAG,oBAAoB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC;IAC7E,CAAC;IAED,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC;AACjC,CAAC;AAED,MAAM,UAAU,QAAQ,CAAC,KAAY,EAAE,OAAqB;IAC1D,KAAK,GAAG,KAAK,CAAC;IACd,YAAY,GAAG,OAAO,CAAC;AACzB,CAAC;AAYD,MAAM,UAAU,cAAc,CAAC,CAAQ,EAAE,IAAkB,OAAO;IAChE,IAAI,aAAa,CAAC,CAAC,CAAC,IAAI,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;QAChD,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACf,oBAAoB,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,CAAC;IAChD,CAAC;AACH,CAAC","sourcesContent":["import { isServer } from 'lit';\nimport {\n  CHANGE_THEME_EVENT,\n  type ChangeThemeEventDetail,\n} from './theming-event.js';\nimport type { Theme, ThemeVariant } from './types.js';\nimport { getAllCssVariables } from './utils.js';\n\nlet theme: Theme;\nlet themeVariant: ThemeVariant;\n\n/**\n * Dispatch an \"igc-change-theme\" event to `window` with the given detail.\n */\nfunction dispatchThemingEvent(detail: ChangeThemeEventDetail): void {\n  if (!isServer) {\n    globalThis.dispatchEvent(new CustomEvent(CHANGE_THEME_EVENT, { detail }));\n  }\n}\n\nfunction isOfTypeTheme(theme: string): theme is Theme {\n  return ['bootstrap', 'material', 'indigo', 'fluent'].includes(theme);\n}\n\nfunction isOfTypeThemeVariant(variant: string): variant is ThemeVariant {\n  return ['light', 'dark'].includes(variant);\n}\n\nexport function getTheme() {\n  if (!(theme && themeVariant)) {\n    const cssVars = getAllCssVariables();\n    const foundTheme = cssVars.igTheme;\n    const foundVariant = cssVars.igThemeVariant;\n\n    theme = isOfTypeTheme(foundTheme) ? foundTheme : 'bootstrap';\n    themeVariant = isOfTypeThemeVariant(foundVariant) ? foundVariant : 'light';\n  }\n\n  return { theme, themeVariant };\n}\n\nexport function setTheme(value: Theme, variant: ThemeVariant): void {\n  theme = value;\n  themeVariant = variant;\n}\n\n/**\n * Allows the global configuration of the active theme.\n *\n * Usage:\n *  ```ts\n *  import { configureTheme } from 'igniteui-webcomponents';\n *\n *  configureTheme('material', 'light');\n *  ```\n */\nexport function configureTheme(t: Theme, v: ThemeVariant = 'light'): void {\n  if (isOfTypeTheme(t) && isOfTypeThemeVariant(v)) {\n    setTheme(t, v);\n    dispatchThemingEvent({ theme, themeVariant });\n  }\n}\n"]}

package/theming/theming-controller.d.ts

@@ -1,18 +1,22 @@
 import { type ReactiveController, type ReactiveControllerHost, type ReactiveElement } from 'lit';
-import type { Theme, ThemeChangedCallback, ThemeController, ThemeVariant, Themes } from './types.js';
-declare class ThemingController implements ReactiveController, ThemeController {
-    private themes;
-    private host;
-    theme: Theme;
-    themeVariant: ThemeVariant;
-    onThemeChanged?: ThemeChangedCallback;
-    constructor(host: ReactiveControllerHost & ReactiveElement, themes: Themes);
+import type { Theme, Themes, ThemingControllerConfig } from './types.js';
+declare class ThemingController implements ReactiveController {
+    private readonly _host;
+    private readonly _themes;
+    private readonly _options?;
+    private _theme;
+    private _variant;
+    get theme(): Theme;
+    constructor(host: ReactiveControllerHost & ReactiveElement, themes: Themes, config?: ThemingControllerConfig);
+    /** @internal */
     hostConnected(): void;
+    /** @internal */
     hostDisconnected(): void;
+    /** @internal */
     handleEvent(): void;
-    private getStyles;
-    protected adoptStyles(): void;
-    private themeChanged;
+    private _getStyles;
+    protected _adoptStyles(): void;
+    private _handleThemeChanged;
 }
-export declare function createThemeController(host: ReactiveControllerHost & ReactiveElement, themes: Themes): ThemingController;
-export {};
+export declare function addThemingController(host: ReactiveControllerHost & ReactiveElement, themes: Themes, config?: ThemingControllerConfig): ThemingController;
+export type { ThemingController };

package/theming/theming-controller.js

@@ -1,26 +1,32 @@
 import { adoptStyles, css, } from 'lit';
 import { getTheme } from './config.js';
-import { CHANGED_THEME_EVENT, _themeChangedEmitter } from './theming-event.js';
+import { _themeChangedEmitter, CHANGED_THEME_EVENT } from './theming-event.js';
 class ThemingController {
-    constructor(host, themes) {
-        this.themes = themes;
-        this.host = host;
-        this.host.addController(this);
+    get theme() {
+        return this._theme;
+    }
+    constructor(host, themes, config) {
+        this._theme = 'bootstrap';
+        this._variant = 'light';
+        this._host = host;
+        this._themes = themes;
+        this._options = config;
+        this._host.addController(this);
     }
     hostConnected() {
-        this.themeChanged();
+        this._handleThemeChanged();
         _themeChangedEmitter.addEventListener(CHANGED_THEME_EVENT, this);
     }
     hostDisconnected() {
         _themeChangedEmitter.removeEventListener(CHANGED_THEME_EVENT, this);
     }
     handleEvent() {
-        this.themeChanged();
+        this._handleThemeChanged();
     }
-    getStyles() {
-        const styleSheets = Object.entries(this.themes[this.themeVariant]);
+    _getStyles() {
+        const props = this._themes[this._variant];
         const styles = { shared: css ``, theme: css `` };
-        for (const [name, sheet] of styleSheets) {
+        for (const [name, sheet] of Object.entries(props)) {
             if (name === 'shared') {
                 styles.shared = sheet;
             }
@@ -30,21 +36,21 @@ class ThemingController {
         }
         return styles;
     }
-    adoptStyles() {
-        const { theme, themeVariant } = getTheme();
-        this.theme = theme;
-        this.themeVariant = themeVariant;
-        const ctor = this.host.constructor;
-        const { shared, theme: _theme } = this.getStyles();
-        adoptStyles(this.host.shadowRoot, [...ctor.elementStyles, shared, _theme]);
+    _adoptStyles() {
+        const { theme: currentTheme, themeVariant } = getTheme();
+        this._theme = currentTheme;
+        this._variant = themeVariant;
+        const ctor = this._host.constructor;
+        const { shared, theme } = this._getStyles();
+        adoptStyles(this._host.shadowRoot, [...ctor.elementStyles, shared, theme]);
     }
-    themeChanged() {
-        this.adoptStyles();
-        this.onThemeChanged?.call(this.host, this.theme);
-        this.host.requestUpdate();
+    _handleThemeChanged() {
+        this._adoptStyles();
+        this._options?.themeChange?.call(this._host, this._theme);
+        this._host.requestUpdate();
     }
 }
-export function createThemeController(host, themes) {
-    return new ThemingController(host, themes);
+export function addThemingController(host, themes, config) {
+    return new ThemingController(host, themes, config);
 }
 //# sourceMappingURL=theming-controller.js.map

package/theming/theming-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"theming-controller.js","sourceRoot":"","sources":["../../src/theming/theming-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,WAAW,EACX,GAAG,GACJ,MAAM,KAAK,CAAC;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAS/E,MAAM,iBAAiB;IAQrB,YAAY,IAA8C,EAAE,MAAc;QACxE,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAEM,aAAa;QAClB,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,oBAAoB,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAC;IACnE,CAAC;IAEM,gBAAgB;QACrB,oBAAoB,CAAC,mBAAmB,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAC;IACtE,CAAC;IAEM,WAAW;QAChB,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAEO,SAAS;QACf,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;QACnE,MAAM,MAAM,GAAG,EAAE,MAAM,EAAE,GAAG,CAAA,EAAE,EAAE,KAAK,EAAE,GAAG,CAAA,EAAE,EAAE,CAAC;QAE/C,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,WAAW,EAAE,CAAC;YACxC,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;gBACtB,MAAM,CAAC,MAAM,GAAG,KAAK,CAAC;YACxB,CAAC;YACD,IAAI,IAAI,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;gBACxB,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;YACvB,CAAC;QACH,CAAC;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;IAES,WAAW;QACnB,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,QAAQ,EAAE,CAAC;QAC3C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;QAEjC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,WAAgC,CAAC;QACxD,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QAEnD,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,UAAW,EAAE,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAC9E,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QACjD,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5B,CAAC;CACF;AAED,MAAM,UAAU,qBAAqB,CACnC,IAA8C,EAC9C,MAAc;IAEd,OAAO,IAAI,iBAAiB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;AAC7C,CAAC","sourcesContent":["import {\n  type LitElement,\n  type ReactiveController,\n  type ReactiveControllerHost,\n  type ReactiveElement,\n  adoptStyles,\n  css,\n} from 'lit';\n\nimport { getTheme } from './config.js';\nimport { CHANGED_THEME_EVENT, _themeChangedEmitter } from './theming-event.js';\nimport type {\n  Theme,\n  ThemeChangedCallback,\n  ThemeController,\n  ThemeVariant,\n  Themes,\n} from './types.js';\n\nclass ThemingController implements ReactiveController, ThemeController {\n  private themes: Themes;\n  private host: ReactiveControllerHost & ReactiveElement;\n\n  public theme!: Theme;\n  public themeVariant!: ThemeVariant;\n  public onThemeChanged?: ThemeChangedCallback;\n\n  constructor(host: ReactiveControllerHost & ReactiveElement, themes: Themes) {\n    this.themes = themes;\n    this.host = host;\n    this.host.addController(this);\n  }\n\n  public hostConnected() {\n    this.themeChanged();\n    _themeChangedEmitter.addEventListener(CHANGED_THEME_EVENT, this);\n  }\n\n  public hostDisconnected() {\n    _themeChangedEmitter.removeEventListener(CHANGED_THEME_EVENT, this);\n  }\n\n  public handleEvent() {\n    this.themeChanged();\n  }\n\n  private getStyles() {\n    const styleSheets = Object.entries(this.themes[this.themeVariant]);\n    const styles = { shared: css``, theme: css`` };\n\n    for (const [name, sheet] of styleSheets) {\n      if (name === 'shared') {\n        styles.shared = sheet;\n      }\n      if (name === this.theme) {\n        styles.theme = sheet;\n      }\n    }\n\n    return styles;\n  }\n\n  protected adoptStyles() {\n    const { theme, themeVariant } = getTheme();\n    this.theme = theme;\n    this.themeVariant = themeVariant;\n\n    const ctor = this.host.constructor as typeof LitElement;\n    const { shared, theme: _theme } = this.getStyles();\n\n    adoptStyles(this.host.shadowRoot!, [...ctor.elementStyles, shared, _theme]);\n  }\n\n  private themeChanged() {\n    this.adoptStyles();\n    this.onThemeChanged?.call(this.host, this.theme);\n    this.host.requestUpdate();\n  }\n}\n\nexport function createThemeController(\n  host: ReactiveControllerHost & ReactiveElement,\n  themes: Themes\n) {\n  return new ThemingController(host, themes);\n}\n"]}
+{"version":3,"file":"theming-controller.js","sourceRoot":"","sources":["../../src/theming/theming-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,GAAG,GAKJ,MAAM,KAAK,CAAC;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAQ/E,MAAM,iBAAiB;IAQrB,IAAW,KAAK;QACd,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAED,YACE,IAA8C,EAC9C,MAAc,EACd,MAAgC;QAV1B,WAAM,GAAU,WAAW,CAAC;QAC5B,aAAQ,GAAiB,OAAO,CAAC;QAWvC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QACtB,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;QACvB,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC;IAGM,aAAa;QAClB,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,oBAAoB,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAC;IACnE,CAAC;IAGM,gBAAgB;QACrB,oBAAoB,CAAC,mBAAmB,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAC;IACtE,CAAC;IAGM,WAAW;QAChB,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAEO,UAAU;QAChB,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC1C,MAAM,MAAM,GAAG,EAAE,MAAM,EAAE,GAAG,CAAA,EAAE,EAAE,KAAK,EAAE,GAAG,CAAA,EAAE,EAAE,CAAC;QAE/C,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;YAClD,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;gBACtB,MAAM,CAAC,MAAM,GAAG,KAAK,CAAC;YACxB,CAAC;YACD,IAAI,IAAI,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;gBACxB,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;YACvB,CAAC;QACH,CAAC;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;IAES,YAAY;QACpB,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,QAAQ,EAAE,CAAC;QACzD,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC;QAC3B,IAAI,CAAC,QAAQ,GAAG,YAAY,CAAC;QAE7B,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,WAAgC,CAAC;QACzD,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAE5C,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,UAAW,EAAE,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;IAC9E,CAAC;IAEO,mBAAmB;QACzB,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAC1D,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;IAC7B,CAAC;CACF;AAED,MAAM,UAAU,oBAAoB,CAClC,IAA8C,EAC9C,MAAc,EACd,MAAgC;IAEhC,OAAO,IAAI,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AACrD,CAAC","sourcesContent":["import {\n  adoptStyles,\n  css,\n  type LitElement,\n  type ReactiveController,\n  type ReactiveControllerHost,\n  type ReactiveElement,\n} from 'lit';\n\nimport { getTheme } from './config.js';\nimport { _themeChangedEmitter, CHANGED_THEME_EVENT } from './theming-event.js';\nimport type {\n  Theme,\n  Themes,\n  ThemeVariant,\n  ThemingControllerConfig,\n} from './types.js';\n\nclass ThemingController implements ReactiveController {\n  private readonly _host: ReactiveControllerHost & ReactiveElement;\n  private readonly _themes: Themes;\n  private readonly _options?: ThemingControllerConfig;\n\n  private _theme: Theme = 'bootstrap';\n  private _variant: ThemeVariant = 'light';\n\n  public get theme(): Theme {\n    return this._theme;\n  }\n\n  constructor(\n    host: ReactiveControllerHost & ReactiveElement,\n    themes: Themes,\n    config?: ThemingControllerConfig\n  ) {\n    this._host = host;\n    this._themes = themes;\n    this._options = config;\n    this._host.addController(this);\n  }\n\n  /** @internal */\n  public hostConnected(): void {\n    this._handleThemeChanged();\n    _themeChangedEmitter.addEventListener(CHANGED_THEME_EVENT, this);\n  }\n\n  /** @internal */\n  public hostDisconnected(): void {\n    _themeChangedEmitter.removeEventListener(CHANGED_THEME_EVENT, this);\n  }\n\n  /** @internal */\n  public handleEvent(): void {\n    this._handleThemeChanged();\n  }\n\n  private _getStyles() {\n    const props = this._themes[this._variant];\n    const styles = { shared: css``, theme: css`` };\n\n    for (const [name, sheet] of Object.entries(props)) {\n      if (name === 'shared') {\n        styles.shared = sheet;\n      }\n      if (name === this.theme) {\n        styles.theme = sheet;\n      }\n    }\n\n    return styles;\n  }\n\n  protected _adoptStyles(): void {\n    const { theme: currentTheme, themeVariant } = getTheme();\n    this._theme = currentTheme;\n    this._variant = themeVariant;\n\n    const ctor = this._host.constructor as typeof LitElement;\n    const { shared, theme } = this._getStyles();\n\n    adoptStyles(this._host.shadowRoot!, [...ctor.elementStyles, shared, theme]);\n  }\n\n  private _handleThemeChanged(): void {\n    this._adoptStyles();\n    this._options?.themeChange?.call(this._host, this._theme);\n    this._host.requestUpdate();\n  }\n}\n\nexport function addThemingController(\n  host: ReactiveControllerHost & ReactiveElement,\n  themes: Themes,\n  config?: ThemingControllerConfig\n): ThemingController {\n  return new ThemingController(host, themes, config);\n}\n\nexport type { ThemingController };\n"]}

package/theming/theming-event.d.ts

@@ -1,6 +1,7 @@
 import type { Theme, ThemeVariant } from './types.js';
 declare class ThemeChangedEmitter extends EventTarget {
     constructor();
+    /** @internal */
     handleEvent(): void;
 }
 export declare const CHANGE_THEME_EVENT = "igc-change-theme";

package/theming/theming-event.js.map

@@ -1 +1 @@
-{"version":3,"file":"theming-event.js","sourceRoot":"","sources":["../../src/theming/theming-event.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAG/B,MAAM,mBAAoB,SAAQ,WAAW;IAC3C;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,UAAU,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC;QACxD,CAAC;IACH,CAAC;IAEM,WAAW;QAChB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAC3D,CAAC;CACF;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,kBAAkB,CAAC;AACrD,MAAM,CAAC,MAAM,mBAAmB,GAAG,mBAAmB,CAAC;AACvD,MAAM,CAAC,MAAM,oBAAoB,GAAG,IAAI,mBAAmB,EAAE,CAAC","sourcesContent":["import { isServer } from 'lit';\nimport type { Theme, ThemeVariant } from './types.js';\n\nclass ThemeChangedEmitter extends EventTarget {\n  constructor() {\n    super();\n    if (!isServer) {\n      globalThis.addEventListener(CHANGE_THEME_EVENT, this);\n    }\n  }\n\n  public handleEvent() {\n    this.dispatchEvent(new CustomEvent(CHANGED_THEME_EVENT));\n  }\n}\n\nexport const CHANGE_THEME_EVENT = 'igc-change-theme';\nexport const CHANGED_THEME_EVENT = 'igc-changed-theme';\nexport const _themeChangedEmitter = new ThemeChangedEmitter();\n\ndeclare global {\n  interface WindowEventMap {\n    [CHANGE_THEME_EVENT]: CustomEvent<ChangeThemeEventDetail>;\n  }\n}\n\n/**\n * The possible details of the \"igc-change-theme\" event.\n */\nexport type ChangeThemeEventDetail = {\n  theme: Theme;\n  themeVariant: ThemeVariant;\n};\n"]}
+{"version":3,"file":"theming-event.js","sourceRoot":"","sources":["../../src/theming/theming-event.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAG/B,MAAM,mBAAoB,SAAQ,WAAW;IAC3C;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,UAAU,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC;QACxD,CAAC;IACH,CAAC;IAGM,WAAW;QAChB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAC3D,CAAC;CACF;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,kBAAkB,CAAC;AACrD,MAAM,CAAC,MAAM,mBAAmB,GAAG,mBAAmB,CAAC;AACvD,MAAM,CAAC,MAAM,oBAAoB,GAAG,IAAI,mBAAmB,EAAE,CAAC","sourcesContent":["import { isServer } from 'lit';\nimport type { Theme, ThemeVariant } from './types.js';\n\nclass ThemeChangedEmitter extends EventTarget {\n  constructor() {\n    super();\n    if (!isServer) {\n      globalThis.addEventListener(CHANGE_THEME_EVENT, this);\n    }\n  }\n\n  /** @internal */\n  public handleEvent(): void {\n    this.dispatchEvent(new CustomEvent(CHANGED_THEME_EVENT));\n  }\n}\n\nexport const CHANGE_THEME_EVENT = 'igc-change-theme';\nexport const CHANGED_THEME_EVENT = 'igc-changed-theme';\nexport const _themeChangedEmitter = new ThemeChangedEmitter();\n\ndeclare global {\n  interface WindowEventMap {\n    [CHANGE_THEME_EVENT]: CustomEvent<ChangeThemeEventDetail>;\n  }\n}\n\n/**\n * The possible details of the \"igc-change-theme\" event.\n */\nexport type ChangeThemeEventDetail = {\n  theme: Theme;\n  themeVariant: ThemeVariant;\n};\n"]}

package/theming/types.d.ts

@@ -10,17 +10,6 @@ export type Themes = {
     };
 };
 export type ThemeChangedCallback = (theme: Theme) => unknown;
-/**
- * A controller responsible for adopting various component themes;
- * See also {@link updateWhenThemeChanges}.
- */
-export interface ThemeController {
-    /**
-     * The name of the currently adopted theme. See {@link Theme}.
-     */
-    theme: Theme;
-    /**
-     * Optional callback function to invoke when the theme is changed at runtime.
-     */
-    onThemeChanged?: ThemeChangedCallback;
-}
+export type ThemingControllerConfig = {
+    themeChange?: ThemeChangedCallback;
+};

package/theming/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/theming/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { CSSResult } from 'lit';\n\nexport type Theme = 'material' | 'bootstrap' | 'indigo' | 'fluent';\nexport type ThemeVariant = 'light' | 'dark';\n\nexport type Themes = {\n  light: {\n    [K in Theme | 'shared']?: CSSResult;\n  };\n  dark: {\n    [K in Theme | 'shared']?: CSSResult;\n  };\n};\n\nexport type ThemeChangedCallback = (theme: Theme) => unknown;\n\n/**\n * A controller responsible for adopting various component themes;\n * See also {@link updateWhenThemeChanges}.\n */\nexport interface ThemeController {\n  /**\n   * The name of the currently adopted theme. See {@link Theme}.\n   */\n  theme: Theme;\n\n  /**\n   * Optional callback function to invoke when the theme is changed at runtime.\n   */\n  onThemeChanged?: ThemeChangedCallback;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/theming/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { CSSResult } from 'lit';\n\nexport type Theme = 'material' | 'bootstrap' | 'indigo' | 'fluent';\nexport type ThemeVariant = 'light' | 'dark';\n\nexport type Themes = {\n  light: {\n    [K in Theme | 'shared']?: CSSResult;\n  };\n  dark: {\n    [K in Theme | 'shared']?: CSSResult;\n  };\n};\n\nexport type ThemeChangedCallback = (theme: Theme) => unknown;\nexport type ThemingControllerConfig = {\n  themeChange?: ThemeChangedCallback;\n};\n"]}

package/theming/utils.js

@@ -1,42 +1,43 @@
 import { isServer } from 'lit';
-import { isDefined } from '../components/common/util.js';
 function isStyleRule(rule) {
-    return !!rule && 'style' in rule;
+    return rule != null && 'style' in rule;
 }
 function cssKeyToJsKey(key) {
-    return key.replace('--', '').replace(/-./g, (x) => x.toUpperCase()[1]);
+    return key.replace(/^--|-./g, (match) => {
+        return match.startsWith('--') ? '' : match.charAt(1).toUpperCase();
+    });
 }
 function getAllCssVariableNames() {
     const cssVars = new Set();
-    if (isServer || !isDefined(globalThis.document)) {
-        return cssVars;
-    }
-    const styleSheets = Array.from(globalThis.document.styleSheets).filter((sheet) => {
+    const styleSheets = Array.from(document.styleSheets);
+    for (const sheet of styleSheets) {
+        let rules;
         try {
-            return sheet.cssRules;
+            rules = sheet.cssRules;
         }
         catch {
-            return false;
+            continue;
         }
-    });
-    for (const sheet of styleSheets) {
-        const rules = Array.from(sheet.cssRules).filter(isStyleRule);
-        for (const rule of rules) {
-            Array.from(rule.style).forEach((style) => {
-                if (style.startsWith('--')) {
-                    cssVars.add(style);
+        if (!rules) {
+            continue;
+        }
+        for (const rule of Array.from(rules)) {
+            if (isStyleRule(rule)) {
+                const length = rule.style.length;
+                for (let i = 0; i < length; i++) {
+                    const style = rule.style[i];
+                    if (style.startsWith('--')) {
+                        cssVars.add(style);
+                    }
                 }
-            });
+            }
         }
     }
     return cssVars;
 }
 function getElementCssVariables(allCssVars, element, pseudo) {
     const cssVars = {};
-    if (!isDefined(globalThis.getComputedStyle)) {
-        return cssVars;
-    }
-    const styles = globalThis.getComputedStyle(element, pseudo);
+    const styles = getComputedStyle(element, pseudo);
     for (const key of allCssVars) {
         const value = styles.getPropertyValue(key);
         if (value) {
@@ -46,8 +47,8 @@ function getElementCssVariables(allCssVars, element, pseudo) {
     return cssVars;
 }
 export function getAllCssVariables() {
-    return isServer || !isDefined(globalThis.document)
+    return isServer
         ? {}
-        : getElementCssVariables(getAllCssVariableNames(), globalThis.document.documentElement);
+        : getElementCssVariables(getAllCssVariableNames(), document.documentElement);
 }
 //# sourceMappingURL=utils.js.map

package/theming/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/theming/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,SAAS,WAAW,CAAC,IAAa;IAChC,OAAO,CAAC,CAAC,IAAI,IAAI,OAAO,IAAI,IAAI,CAAC;AACnC,CAAC;AAED,SAAS,aAAa,CAAC,GAAW;IAChC,OAAO,GAAG,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AACzE,CAAC;AAED,SAAS,sBAAsB;IAC7B,MAAM,OAAO,GAAG,IAAI,GAAG,EAAU,CAAC;IAGlC,IAAI,QAAQ,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;QAChD,OAAO,OAAO,CAAC;IACjB,CAAC;IAGD,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,MAAM,CACpE,CAAC,KAAK,EAAE,EAAE;QACR,IAAI,CAAC;YACH,OAAO,KAAK,CAAC,QAAQ,CAAC;QACxB,CAAC;QAAC,MAAM,CAAC;YACP,OAAO,KAAK,CAAC;QACf,CAAC;IACH,CAAC,CACF,CAAC;IAEF,KAAK,MAAM,KAAK,IAAI,WAAW,EAAE,CAAC;QAChC,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;QAE7D,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;YACzB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;gBACvC,IAAI,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;oBAC3B,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;gBACrB,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,SAAS,sBAAsB,CAC7B,UAAuB,EACvB,OAAoB,EACpB,MAAe;IAEf,MAAM,OAAO,GAA2B,EAAE,CAAC;IAG3C,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,gBAAgB,CAAC,EAAE,CAAC;QAC5C,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,MAAM,MAAM,GAAG,UAAU,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAE5D,KAAK,MAAM,GAAG,IAAI,UAAU,EAAE,CAAC;QAC7B,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;QAE3C,IAAI,KAAK,EAAE,CAAC;YACV,OAAO,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;QAC7C,CAAC;IACH,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,kBAAkB;IAEhC,OAAO,QAAQ,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,QAAQ,CAAC;QAChD,CAAC,CAAC,EAAE;QACJ,CAAC,CAAC,sBAAsB,CACpB,sBAAsB,EAAE,EACxB,UAAU,CAAC,QAAQ,CAAC,eAAe,CACpC,CAAC;AACR,CAAC","sourcesContent":["import { isServer } from 'lit';\n\nimport { isDefined } from '../components/common/util.js';\n\nfunction isStyleRule(rule: CSSRule): rule is CSSStyleRule {\n  return !!rule && 'style' in rule;\n}\n\nfunction cssKeyToJsKey(key: string): string {\n  return key.replace('--', '').replace(/-./g, (x) => x.toUpperCase()[1]);\n}\n\nfunction getAllCssVariableNames(): Set<string> {\n  const cssVars = new Set<string>();\n\n  /* c8 ignore next 3 */\n  if (isServer || !isDefined(globalThis.document)) {\n    return cssVars;\n  }\n\n  // Filter out any external stylesheets which throw CORS errors\n  const styleSheets = Array.from(globalThis.document.styleSheets).filter(\n    (sheet) => {\n      try {\n        return sheet.cssRules;\n      } catch {\n        return false;\n      }\n    }\n  );\n\n  for (const sheet of styleSheets) {\n    const rules = Array.from(sheet.cssRules).filter(isStyleRule);\n\n    for (const rule of rules) {\n      Array.from(rule.style).forEach((style) => {\n        if (style.startsWith('--')) {\n          cssVars.add(style);\n        }\n      });\n    }\n  }\n\n  return cssVars;\n}\n\nfunction getElementCssVariables(\n  allCssVars: Set<string>,\n  element: HTMLElement,\n  pseudo?: string\n): Record<string, string> {\n  const cssVars: Record<string, string> = {};\n\n  /* c8 ignore next 3 */\n  if (!isDefined(globalThis.getComputedStyle)) {\n    return cssVars;\n  }\n\n  const styles = globalThis.getComputedStyle(element, pseudo);\n\n  for (const key of allCssVars) {\n    const value = styles.getPropertyValue(key);\n\n    if (value) {\n      cssVars[cssKeyToJsKey(key)] = value.trim();\n    }\n  }\n\n  return cssVars;\n}\n\nexport function getAllCssVariables(): Record<string, string> {\n  /* c8 ignore next 2 */\n  return isServer || !isDefined(globalThis.document)\n    ? {}\n    : getElementCssVariables(\n        getAllCssVariableNames(),\n        globalThis.document.documentElement\n      );\n}\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/theming/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAE/B,SAAS,WAAW,CAAC,IAAa;IAChC,OAAO,IAAI,IAAI,IAAI,IAAI,OAAO,IAAI,IAAI,CAAC;AACzC,CAAC;AAED,SAAS,aAAa,CAAC,GAAW;IAChC,OAAO,GAAG,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;QACtC,OAAO,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IACrE,CAAC,CAAC,CAAC;AACL,CAAC;AAED,SAAS,sBAAsB;IAC7B,MAAM,OAAO,GAAG,IAAI,GAAG,EAAU,CAAC;IAClC,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IAErD,KAAK,MAAM,KAAK,IAAI,WAAW,EAAE,CAAC;QAChC,IAAI,KAA8B,CAAC;QAGnC,IAAI,CAAC;YACH,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC;QACzB,CAAC;QAAC,MAAM,CAAC;YACP,SAAS;QACX,CAAC;QAED,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,SAAS;QACX,CAAC;QAED,KAAK,MAAM,IAAI,IAAI,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YACrC,IAAI,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC;gBACtB,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;gBAEjC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;oBAChC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;oBAE5B,IAAI,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;wBAC3B,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;oBACrB,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,SAAS,sBAAsB,CAC7B,UAAuB,EACvB,OAAoB,EACpB,MAAe;IAEf,MAAM,OAAO,GAA2B,EAAE,CAAC;IAC3C,MAAM,MAAM,GAAG,gBAAgB,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAEjD,KAAK,MAAM,GAAG,IAAI,UAAU,EAAE,CAAC;QAC7B,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;QAE3C,IAAI,KAAK,EAAE,CAAC;YACV,OAAO,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;QAC7C,CAAC;IACH,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,kBAAkB;IAEhC,OAAO,QAAQ;QACb,CAAC,CAAC,EAAE;QACJ,CAAC,CAAC,sBAAsB,CACpB,sBAAsB,EAAE,EACxB,QAAQ,CAAC,eAAe,CACzB,CAAC;AACR,CAAC","sourcesContent":["import { isServer } from 'lit';\n\nfunction isStyleRule(rule: CSSRule): rule is CSSStyleRule {\n  return rule != null && 'style' in rule;\n}\n\nfunction cssKeyToJsKey(key: string): string {\n  return key.replace(/^--|-./g, (match) => {\n    return match.startsWith('--') ? '' : match.charAt(1).toUpperCase();\n  });\n}\n\nfunction getAllCssVariableNames(): Set<string> {\n  const cssVars = new Set<string>();\n  const styleSheets = Array.from(document.styleSheets);\n\n  for (const sheet of styleSheets) {\n    let rules: CSSRuleList | undefined;\n\n    // Potential CORS or access errors\n    try {\n      rules = sheet.cssRules;\n    } catch {\n      continue;\n    }\n\n    if (!rules) {\n      continue;\n    }\n\n    for (const rule of Array.from(rules)) {\n      if (isStyleRule(rule)) {\n        const length = rule.style.length;\n\n        for (let i = 0; i < length; i++) {\n          const style = rule.style[i];\n\n          if (style.startsWith('--')) {\n            cssVars.add(style);\n          }\n        }\n      }\n    }\n  }\n\n  return cssVars;\n}\n\nfunction getElementCssVariables(\n  allCssVars: Set<string>,\n  element: HTMLElement,\n  pseudo?: string\n): Record<string, string> {\n  const cssVars: Record<string, string> = {};\n  const styles = getComputedStyle(element, pseudo);\n\n  for (const key of allCssVars) {\n    const value = styles.getPropertyValue(key);\n\n    if (value) {\n      cssVars[cssKeyToJsKey(key)] = value.trim();\n    }\n  }\n\n  return cssVars;\n}\n\nexport function getAllCssVariables(): Record<string, string> {\n  /* c8 ignore next 2 */\n  return isServer\n    ? {}\n    : getElementCssVariables(\n        getAllCssVariableNames(),\n        document.documentElement\n      );\n}\n"]}