igniteui-webcomponents 2.0.0 → 2.1.0-beta.0

package/theming/theming-controlller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theming-controlller.js","sourceRoot":"","sources":["../../src/theming/theming-controlller.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,GAAG,GAKJ,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAGrD,MAAM,iBAAiB;IAKrB,YAAY,IAA8C,EAAE,MAAc;QAKzD,0BAAqB,GAAG,GAAG,EAAE;YAC5C,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;QAC5B,CAAC,CAAC;QAPA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAOM,aAAa;QAClB,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,MAAM,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;IAC1E,CAAC;IAEM,gBAAgB;QACrB,MAAM,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;IAC7E,CAAC;IAES,WAAW;QACnB,IAAI,CAAC,KAAK,GAAG,QAAQ,EAAE,CAAC;QACxB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,WAAgC,CAAC;QACxD,MAAM,2BAA2B,GAC/B,MAAM,CAAC,UAAU;YACjB,oBAAoB,IAAI,QAAQ,CAAC,SAAS;YAC1C,SAAS,IAAI,aAAa,CAAC,SAAS,CAAC;QAEvC,IAAI,UAAU,GAAG,GAAG,CAAA,EAAE,CAAC;QAEvB,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAChD,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,CAChC,CAAC;QAEF,IAAI,KAAK,EAAE;YACT,MAAM,CAAC,CAAC,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC;YAC7B,UAAU,GAAG,SAAS,CAAC;SACxB;QAOD,IAAI,CAAC,2BAA2B,EAAE;YAChC,CAAC,GAAG,IAAI,CAAC,IAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;iBACjD,KAAK,CAAC,CAAC,CAAC;iBACR,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC;SACnC;QAED,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,UAAwB,EAAE;YAC9C,GAAG,IAAI,CAAC,aAAa;YACrB,UAAU;SACX,CAAC,CAAC;IACL,CAAC;CACF;AAED,MAAM,uBAAuB,GAAG,CAC9B,IAA8C,EAC9C,MAAc,EACd,EAAE;IACF,MAAM,UAAU,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IACvD,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAC/B,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAE/B,uBAAuB,CAAC","sourcesContent":["import {\n  adoptStyles,\n  css,\n  LitElement,\n  ReactiveController,\n  ReactiveControllerHost,\n  ReactiveElement,\n} from 'lit';\nimport { getTheme } from './config';\nimport { CHANGE_THEME_EVENT } from './theming-event';\nimport { Theme, ThemeController, Themes } from './types';\n\nclass ThemingController implements ReactiveController, ThemeController {\n  private themes: Themes;\n  private host: ReactiveControllerHost & ReactiveElement;\n  public theme!: Theme;\n\n  constructor(host: ReactiveControllerHost & ReactiveElement, themes: Themes) {\n    this.host = host;\n    this.themes = themes;\n  }\n\n  private readonly __themingEventHandler = () => {\n    this.adoptStyles();\n    this.host.requestUpdate();\n  };\n\n  public hostConnected() {\n    this.adoptStyles();\n    window.addEventListener(CHANGE_THEME_EVENT, this.__themingEventHandler);\n  }\n\n  public hostDisconnected() {\n    window.removeEventListener(CHANGE_THEME_EVENT, this.__themingEventHandler);\n  }\n\n  protected adoptStyles() {\n    this.theme = getTheme();\n    const ctor = this.host.constructor as typeof LitElement;\n    const supportsAdoptingStyleSheets =\n      window.ShadowRoot &&\n      'adoptedStyleSheets' in Document.prototype &&\n      'replace' in CSSStyleSheet.prototype;\n\n    let styleSheet = css``;\n\n    const [theme] = Object.entries(this.themes).filter(\n      ([name]) => name === this.theme\n    );\n\n    if (theme) {\n      const [_, cssResult] = theme;\n      styleSheet = cssResult;\n    }\n\n    // Firefox and Safari don't support the adoptedStyleSheets API yet,\n    // and the lit framework appends the resolved stylesheets indiscriminately\n    // when using the adoptStyles API below. Hence, we need to remove all previously\n    // defined style tags in the shadow root as changing the themes at runtime just\n    // keeps stacking the resolved styles one over the other, resulting in broken themes.\n    if (!supportsAdoptingStyleSheets) {\n      [...this.host!.renderRoot.querySelectorAll('style')]\n        .slice(1)\n        .forEach((tag) => tag.remove());\n    }\n\n    adoptStyles(this.host.shadowRoot as ShadowRoot, [\n      ...ctor.elementStyles,\n      styleSheet,\n    ]);\n  }\n}\n\nconst _updateWhenThemeChanges = (\n  host: ReactiveControllerHost & ReactiveElement,\n  themes: Themes\n) => {\n  const controller = new ThemingController(host, themes);\n  host.addController(controller);\n  return controller;\n};\n\nexport const updateWhenThemeChanges: typeof _updateWhenThemeChanges & {\n  _THEMING_CONTROLLER_FN_?: never;\n} = _updateWhenThemeChanges;\n"]}

package/theming/theming-decorator.d.ts

@@ -0,0 +1,24 @@
+import { Themes } from './types';
+/**
+ * Class decorator to enable multiple theme support for a component.
+ * The component will re-render on theme changes.
+ *
+ * See also {@link updateWhenThemeChanges} for the same functionallity
+ * without the use of this decorator.
+ *
+ * Usage:
+ *  ```ts
+ *  import { LitElement, html } from 'lit';
+ *  import { themes } from 'igniteui-webcomponents/themes';
+ *  import { styles } from './themes/my-element.base.css';
+ *  import { styles as material } from './themes/my-element.material.css';
+ *  import { styles as bootstrap } from './themes/my-element.bootstrap.css';
+ *  import { styles as indigo } from './themes/my-element.indigo.css';
+ *
+ *  @themes({ material, bootstrap, indigo })
+ *  class MyElement extends LitElement {
+ *    public static styles = styles;
+ *  }
+ *  ```
+ */
+export declare function themes(themes: Themes): (clazz: any) => any;

package/theming/theming-decorator.js

@@ -0,0 +1,13 @@
+import { updateWhenThemeChanges } from './theming-controlller';
+export function themes(themes) {
+    return (clazz) => {
+        clazz.addInitializer((instance) => {
+            const controller = updateWhenThemeChanges(instance, themes);
+            if ('themeAdopted' in instance) {
+                instance.themeAdopted(controller);
+            }
+        });
+        return clazz;
+    };
+}
+//# sourceMappingURL=theming-decorator.js.map

package/theming/theming-decorator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theming-decorator.js","sourceRoot":"","sources":["../../src/theming/theming-decorator.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAyB/D,MAAM,UAAU,MAAM,CAAC,MAAc;IACnC,OAAO,CAAC,KAAU,EAAE,EAAE;QACpB,KAAK,CAAC,cAAc,CAAC,CAAC,QAAyC,EAAE,EAAE;YACjE,MAAM,UAAU,GAAG,sBAAsB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;YAE5D,IAAI,cAAc,IAAI,QAAQ,EAAE;gBAC9B,QAAQ,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;aACnC;QACH,CAAC,CAAC,CAAC;QACH,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import { ReactiveElement } from 'lit';\nimport { updateWhenThemeChanges } from './theming-controlller';\nimport { ReactiveTheme, Themes } from './types';\n\n/**\n * Class decorator to enable multiple theme support for a component.\n * The component will re-render on theme changes.\n *\n * See also {@link updateWhenThemeChanges} for the same functionallity\n * without the use of this decorator.\n *\n * Usage:\n *  ```ts\n *  import { LitElement, html } from 'lit';\n *  import { themes } from 'igniteui-webcomponents/themes';\n *  import { styles } from './themes/my-element.base.css';\n *  import { styles as material } from './themes/my-element.material.css';\n *  import { styles as bootstrap } from './themes/my-element.bootstrap.css';\n *  import { styles as indigo } from './themes/my-element.indigo.css';\n *\n *  @themes({ material, bootstrap, indigo })\n *  class MyElement extends LitElement {\n *    public static styles = styles;\n *  }\n *  ```\n */\nexport function themes(themes: Themes) {\n  return (clazz: any) => {\n    clazz.addInitializer((instance: ReactiveElement & ReactiveTheme) => {\n      const controller = updateWhenThemeChanges(instance, themes);\n\n      if ('themeAdopted' in instance) {\n        instance.themeAdopted(controller);\n      }\n    });\n    return clazz;\n  };\n}\n"]}

package/theming/theming-event.d.ts

@@ -0,0 +1,13 @@
+import { Theme } from './types';
+export declare const CHANGE_THEME_EVENT = "igc-change-theme";
+declare global {
+    interface WindowEventMap {
+        [CHANGE_THEME_EVENT]: CustomEvent<ChangeThemeEventDetail>;
+    }
+}
+/**
+ * The possible details of the "igc-change-theme" event.
+ */
+export declare type ChangeThemeEventDetail = {
+    theme: Theme;
+};

package/theming/theming-event.js

@@ -0,0 +1,2 @@
+export const CHANGE_THEME_EVENT = 'igc-change-theme';
+//# sourceMappingURL=theming-event.js.map

package/theming/theming-event.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theming-event.js","sourceRoot":"","sources":["../../src/theming/theming-event.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,kBAAkB,GAAG,kBAAkB,CAAC","sourcesContent":["import { Theme } from './types';\n\nexport const CHANGE_THEME_EVENT = 'igc-change-theme';\n\n// Misfiring eslint rule\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\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};\n"]}

package/theming/types.d.ts

@@ -0,0 +1,23 @@
+import { CSSResult } from 'lit';
+export declare type Theme = 'material' | 'bootstrap' | 'indigo' | 'fluent';
+export declare type Themes = {
+    [K in Theme]?: CSSResult;
+};
+/**
+ * A controller responsible for adopting various comopnent themes;
+ * See also {@link updateWhenThemeChanges}.
+ */
+export interface ThemeController {
+    /**
+     * The name of the currently adopted theme. See {@link Theme}.
+     */
+    theme: Theme;
+}
+export interface ReactiveTheme {
+    /**
+     *  Provides the attached ThemeController to the component instance.
+     *  Can be used to get the currently adopted theme name.
+     *  See also {@link ThemeController}
+     */
+    themeAdopted(controller: ThemeController): void;
+}

package/theming/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/theming/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/theming/types.ts"],"names":[],"mappings":"","sourcesContent":["import { CSSResult } from 'lit';\n\nexport type Theme = 'material' | 'bootstrap' | 'indigo' | 'fluent';\n\nexport type Themes = {\n  [K in Theme]?: CSSResult;\n};\n\n/**\n * A controller responsible for adopting various comopnent 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\nexport interface ReactiveTheme {\n  /**\n   *  Provides the attached ThemeController to the component instance.\n   *  Can be used to get the currently adopted theme name.\n   *  See also {@link ThemeController}\n   */\n  themeAdopted(controller: ThemeController): void;\n}\n"]}

package/theming/utils.d.ts

@@ -0,0 +1 @@
+export declare const getAllCSSVariables: () => Record<string, string>;

package/theming/utils.js

@@ -0,0 +1,36 @@
+const CssKeyToJsKey = (key) => key.replace('--', '').replace(/-./g, (x) => x.toUpperCase()[1]);
+const getAllCSSVariableNames = (styleSheets = document.styleSheets) => {
+    const cssVars = [];
+    Array.from(styleSheets).forEach((styleSheet) => {
+        try {
+            Array.from(styleSheet.cssRules).forEach((rule) => {
+                if (!rule || !rule['style']) {
+                    return;
+                }
+                Array.from(rule['style']).forEach((style) => {
+                    if (style.startsWith('--') && cssVars.indexOf(style) == -1) {
+                        cssVars.push(style);
+                    }
+                });
+            });
+        }
+        catch (e) { }
+    });
+    return cssVars;
+};
+const getElementCSSVariables = (allCSSVars, element = document.body, pseudo = '') => {
+    const elStyles = window.getComputedStyle(element, pseudo);
+    const cssVars = {};
+    allCSSVars.forEach((key) => {
+        const value = elStyles.getPropertyValue(key);
+        if (value) {
+            cssVars[CssKeyToJsKey(key)] = value.trim();
+        }
+    });
+    return cssVars;
+};
+export const getAllCSSVariables = () => {
+    const cssVars = getAllCSSVariableNames();
+    return getElementCSSVariables(cssVars, document.documentElement);
+};
+//# sourceMappingURL=utils.js.map

package/theming/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/theming/utils.ts"],"names":[],"mappings":"AACA,MAAM,aAAa,GAAG,CAAC,GAAW,EAAE,EAAE,CACpC,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;AAElE,MAAM,sBAAsB,GAAG,CAC7B,cAA8B,QAAQ,CAAC,WAAW,EAClD,EAAE;IACF,MAAM,OAAO,GAAa,EAAE,CAAC;IAE7B,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,EAAE;QAC7C,IAAI;YACF,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAS,EAAE,EAAE;gBACpD,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;oBAC3B,OAAO;iBACR;gBAED,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,KAAU,EAAE,EAAE;oBAC/C,IAAI,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE;wBAC1D,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;qBACrB;gBACH,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;SACJ;QAAC,OAAO,CAAC,EAAE,GAAE;IAChB,CAAC,CAAC,CAAC;IAEH,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,sBAAsB,GAAG,CAC7B,UAAyB,EACzB,UAAuB,QAAQ,CAAC,IAAI,EACpC,SAA6B,EAAE,EAC/B,EAAE;IACF,MAAM,QAAQ,GAAG,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAC1D,MAAM,OAAO,GAAG,EAAE,CAAC;IAEnB,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QACzB,MAAM,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;QAE7C,IAAI,KAAK,EAAE;YACR,OAAe,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;SACrD;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAA2B,EAAE;IAC7D,MAAM,OAAO,GAAG,sBAAsB,EAAE,CAAC;IACzC,OAAO,sBAAsB,CAAC,OAAO,EAAE,QAAQ,CAAC,eAAe,CAAC,CAAC;AACnE,CAAC,CAAC","sourcesContent":["/*eslint no-empty: ['error', {allowEmptyCatch: true}]*/\nconst CssKeyToJsKey = (key: string) =>\n  key.replace('--', '').replace(/-./g, (x) => x.toUpperCase()[1]);\n\nconst getAllCSSVariableNames = (\n  styleSheets: StyleSheetList = document.styleSheets\n) => {\n  const cssVars: string[] = [];\n\n  Array.from(styleSheets).forEach((styleSheet) => {\n    try {\n      Array.from(styleSheet.cssRules).forEach((rule: any) => {\n        if (!rule || !rule['style']) {\n          return;\n        }\n\n        Array.from(rule['style']).forEach((style: any) => {\n          if (style.startsWith('--') && cssVars.indexOf(style) == -1) {\n            cssVars.push(style);\n          }\n        });\n      });\n    } catch (e) {}\n  });\n\n  return cssVars;\n};\n\nconst getElementCSSVariables = (\n  allCSSVars: Array<string>,\n  element: HTMLElement = document.body,\n  pseudo: string | undefined = ''\n) => {\n  const elStyles = window.getComputedStyle(element, pseudo);\n  const cssVars = {};\n\n  allCSSVars.forEach((key) => {\n    const value = elStyles.getPropertyValue(key);\n\n    if (value) {\n      (cssVars as any)[CssKeyToJsKey(key)] = value.trim();\n    }\n  });\n\n  return cssVars;\n};\n\nexport const getAllCSSVariables = (): Record<string, string> => {\n  const cssVars = getAllCSSVariableNames();\n  return getElementCSSVariables(cssVars, document.documentElement);\n};\n"]}