igniteui-webcomponents 6.1.0 → 6.1.1

package/theming/theming-decorator.d.ts

@@ -1,43 +0,0 @@
-import type { LitElement } from 'lit';
-import type { ThemeController, Themes } from './types.js';
-/**
- * Class decorator to enable multiple theme support for a component.
- * The component will re-render on theme changes.
- *
- * Passing `{ exposeController: true }` in the decorator options will create an internal symbol
- * which can be used by {@link getThemeController} to additionally query and modify the component
- * based on the themes.
- *
- * Usage:
- *  ```ts
- *  import { LitElement, html } from 'lit';
- *  import { themes } from 'igniteui-webcomponents/themes';
- *  import { styles } from './themes/my-element.base.css.js';
- *  import { styles as shared } from './themes/shared/my-picker.common.css.js';
- *  import { all } from './themes/themes.js';
- *
- *  @themes(all)
- *  class MyElement extends LitElement {
- *    public static styles = [styles, shared];
- *  }
- *
- *  @themes(all, { exposeController: true })
- *  class MyElementWithExposedTheming extends LitElement {
- *    ...
- *
- *    render() {
- *      const theme = getThemeController(this)?.theme;
- *      ...
- *    }
- *  }
- *  ```
- */
-export declare function themes(themes: Themes, options?: ThemeOptions): (proto: unknown) => void;
-/**
- * Returns the theming controller for the given element if exposed.
- */
-export declare function getThemeController(host: LitElement): ThemeController | undefined;
-type ThemeOptions = {
-    exposeController?: boolean;
-};
-export {};

package/theming/theming-decorator.js

@@ -1,25 +0,0 @@
-import { createThemeController } from './theming-controller.js';
-export function themes(themes, options) {
-    return (proto) => {
-        proto.addInitializer((instance) => {
-            const controller = createThemeController(instance, themes);
-            if (options?.exposeController) {
-                Object.defineProperty(instance, themeSymbol, {
-                    get() {
-                        return controller;
-                    },
-                    configurable: true,
-                    enumerable: false,
-                });
-            }
-        });
-    };
-}
-export function getThemeController(host) {
-    return isControllerExposed(host) ? host[themeSymbol] : undefined;
-}
-function isControllerExposed(host) {
-    return Object.getOwnPropertySymbols(host).includes(themeSymbol);
-}
-const themeSymbol = Symbol('Theming Controller');
-//# sourceMappingURL=theming-decorator.js.map

package/theming/theming-decorator.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"theming-decorator.js","sourceRoot":"","sources":["../../src/theming/theming-decorator.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAmChE,MAAM,UAAU,MAAM,CAAC,MAAc,EAAE,OAAsB;IAC3D,OAAO,CAAC,KAAc,EAAE,EAAE;QACvB,KAA2B,CAAC,cAAc,CAAC,CAAC,QAAQ,EAAE,EAAE;YACvD,MAAM,UAAU,GAAG,qBAAqB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;YAE3D,IAAI,OAAO,EAAE,gBAAgB,EAAE,CAAC;gBAC9B,MAAM,CAAC,cAAc,CAAC,QAAQ,EAAE,WAAW,EAAE;oBAC3C,GAAG;wBACD,OAAO,UAAU,CAAC;oBACpB,CAAC;oBACD,YAAY,EAAE,IAAI;oBAClB,UAAU,EAAE,KAAK;iBAClB,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC;AAKD,MAAM,UAAU,kBAAkB,CAAC,IAAgB;IACjD,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;AACnE,CAAC;AAED,SAAS,mBAAmB,CAC1B,IAAgB;IAEhB,OAAO,MAAM,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;AAClE,CAAC;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,oBAAoB,CAAC,CAAC","sourcesContent":["import type { LitElement } from 'lit';\n\nimport { createThemeController } from './theming-controller.js';\nimport type { ThemeController, Themes } from './types.js';\n\n/**\n * Class decorator to enable multiple theme support for a component.\n * The component will re-render on theme changes.\n *\n * Passing `{ exposeController: true }` in the decorator options will create an internal symbol\n * which can be used by {@link getThemeController} to additionally query and modify the component\n * based on the themes.\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.js';\n *  import { styles as shared } from './themes/shared/my-picker.common.css.js';\n *  import { all } from './themes/themes.js';\n *\n *  @themes(all)\n *  class MyElement extends LitElement {\n *    public static styles = [styles, shared];\n *  }\n *\n *  @themes(all, { exposeController: true })\n *  class MyElementWithExposedTheming extends LitElement {\n *    ...\n *\n *    render() {\n *      const theme = getThemeController(this)?.theme;\n *      ...\n *    }\n *  }\n *  ```\n */\nexport function themes(themes: Themes, options?: ThemeOptions) {\n  return (proto: unknown) => {\n    (proto as typeof LitElement).addInitializer((instance) => {\n      const controller = createThemeController(instance, themes);\n\n      if (options?.exposeController) {\n        Object.defineProperty(instance, themeSymbol, {\n          get() {\n            return controller;\n          },\n          configurable: true,\n          enumerable: false,\n        });\n      }\n    });\n  };\n}\n\n/**\n * Returns the theming controller for the given element if exposed.\n */\nexport function getThemeController(host: LitElement) {\n  return isControllerExposed(host) ? host[themeSymbol] : undefined;\n}\n\nfunction isControllerExposed(\n  host: LitElement\n): host is LitElement & { [themeSymbol]: ThemeController } {\n  return Object.getOwnPropertySymbols(host).includes(themeSymbol);\n}\n\nconst themeSymbol = Symbol('Theming Controller');\ntype ThemeOptions = { exposeController?: boolean };\n"]}