apex-grid 1.0.1 → 2.0.0

package/internal/theming.js

@@ -0,0 +1,123 @@
+import { adoptStyles, css, isServer } from 'lit';
+const CHANGE_THEME_EVENT = 'igc-change-theme';
+let theme;
+let themeVariant;
+function isStyleRule(rule) {
+    return rule != null && 'style' in rule;
+}
+function cssKeyToJsKey(key) {
+    return key.replace(/^--|-./g, (match) => {
+        return match.startsWith('--') ? '' : match.charAt(1).toUpperCase();
+    });
+}
+function getAllCssVariableNames() {
+    const cssVars = new Set();
+    const styleSheets = Array.from(document.styleSheets);
+    for (const sheet of styleSheets) {
+        let rules;
+        try {
+            rules = sheet.cssRules;
+        }
+        catch {
+            continue;
+        }
+        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 = {};
+    const styles = getComputedStyle(element, pseudo);
+    for (const key of allCssVars) {
+        const value = styles.getPropertyValue(key);
+        if (value) {
+            cssVars[cssKeyToJsKey(key)] = value.trim();
+        }
+    }
+    return cssVars;
+}
+function getAllCssVariables() {
+    return isServer ? {} : getElementCssVariables(getAllCssVariableNames(), document.documentElement);
+}
+function isOfTypeTheme(theme) {
+    return ['bootstrap', 'material', 'indigo', 'fluent'].includes(theme);
+}
+function isOfTypeThemeVariant(variant) {
+    return ['light', 'dark'].includes(variant);
+}
+function getTheme() {
+    if (!(theme && themeVariant)) {
+        const cssVars = getAllCssVariables();
+        const foundTheme = cssVars.igTheme;
+        const foundVariant = cssVars.igThemeVariant;
+        theme = isOfTypeTheme(foundTheme) ? foundTheme : 'bootstrap';
+        themeVariant = isOfTypeThemeVariant(foundVariant) ? foundVariant : 'light';
+    }
+    return { theme, themeVariant };
+}
+class ThemingController {
+    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._handleThemeChanged();
+        globalThis.addEventListener(CHANGE_THEME_EVENT, this);
+    }
+    hostDisconnected() {
+        globalThis.removeEventListener(CHANGE_THEME_EVENT, this);
+    }
+    handleEvent() {
+        this._handleThemeChanged();
+    }
+    _getStyles() {
+        const props = this._themes[this._variant];
+        const styles = { shared: css ``, theme: css `` };
+        for (const [name, sheet] of Object.entries(props)) {
+            if (name === 'shared') {
+                styles.shared = sheet;
+            }
+            if (name === this.theme) {
+                styles.theme = sheet;
+            }
+        }
+        return styles;
+    }
+    _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]);
+    }
+    _handleThemeChanged() {
+        this._adoptStyles();
+        this._options?.themeChange?.call(this._host, this._theme);
+        this._host.requestUpdate();
+    }
+}
+export function addThemingController(host, themes, config) {
+    return new ThemingController(host, themes, config);
+}
+//# sourceMappingURL=theming.js.map

package/internal/theming.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theming.js","sourceRoot":"","sources":["../../src/internal/theming.ts"],"names":[],"mappings":"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","sourcesContent":["import type {\n  CSSResult,\n  LitElement,\n  ReactiveController,\n  ReactiveControllerHost,\n  ReactiveElement,\n} from 'lit';\nimport { adoptStyles, css, isServer } from 'lit';\n\ntype Theme = 'material' | 'bootstrap' | 'indigo' | 'fluent';\ntype ThemeVariant = 'light' | 'dark';\n\ntype Themes = {\n  light: {\n    [K in Theme | 'shared']?: CSSResult;\n  };\n  dark: {\n    [K in Theme | 'shared']?: CSSResult;\n  };\n};\n\ntype ThemeChangedCallback = (theme: Theme) => unknown;\ntype ThemingControllerConfig = {\n  themeChange?: ThemeChangedCallback;\n};\n\nconst CHANGE_THEME_EVENT = 'igc-change-theme';\nlet theme: Theme;\nlet themeVariant: ThemeVariant;\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\nfunction getAllCssVariables(): Record<string, string> {\n  /* c8 ignore next 2 */\n  return isServer ? {} : getElementCssVariables(getAllCssVariableNames(), document.documentElement);\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\nfunction 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\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    globalThis.addEventListener(CHANGE_THEME_EVENT, this);\n  }\n\n  /** @internal */\n  public hostDisconnected(): void {\n    globalThis.removeEventListener(CHANGE_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"]}