npm - igniteui-webcomponents - Versions diffs - 4.4.0 → 4.5.0 - Mend

igniteui-webcomponents 4.4.0 → 4.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (831) hide show

package/theming/theming-controller.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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;AACb,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAGxD,MAAM,mBAAmB;IAAzB;QACmB,cAAS,GAAG,IAAI,GAAG,EAAY,CAAC;QAc1C,gBAAW,GAAG,GAAG,EAAE;YACxB,KAAK,MAAM,QAAQ,IAAI,IAAI,CAAC,SAAS,EAAE;gBACrC,QAAQ,EAAE,CAAC;aACZ;QACH,CAAC,CAAC;IACJ,CAAC;IAjBQ,GAAG,CAAC,QAAkB;QAC3B,MAAM,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC;QAClD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAC/B,CAAC;IAEM,MAAM,CAAC,QAAkB;QAC9B,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAChC,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,EAAE;YAC3B,MAAM,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC;SACtD;IACH,CAAC;CAOF;AAED,MAAM,sBAAsB,GAAG,IAAI,mBAAmB,EAAE,CAAC;AAEzD,MAAM,iBAAiB;~~IAKrB~~,YAAY,IAA8C,EAAE,MAAc;~~QA2BlE~~,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;QAC5B,CAAC,CAAC;~~QA7BA~~,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAEM,aAAa;QAClB,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,sBAAsB,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAChD,CAAC;IAEM,gBAAgB;QACrB,sBAAsB,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACnD,CAAC;IAES,WAAW;;QACnB,~~IAAI~~,~~CAAC~~,KAAK,GAAG,QAAQ,EAAE,CAAC;~~QACxB~~,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,WAAgC,CAAC;QAExD,MAAM,CAAC,CAAC,EAAE,SAAS,CAAC,GAClB,MAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,~~IAAI~~,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,~~CAAC~~,mCAAI,EAAE,CAAC;~~QAE1E~~,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,UAAwB,EAAE;YAC9C,GAAG,IAAI,CAAC,aAAa;YACrB,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,GAAG,CAAA,EAAE;SACnB,CAAC,CAAC;IACL,CAAC;CAMF;AAED,MAAM,uBAAuB,GAAG,CAC9B,IAA8C,EAC9C,MAAc,EACd,WAAqB,EACrB,EAAE;IACF,MAAM,UAAU,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IACvD,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAE/B,IAAI,WAAW,EAAE;QACf,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,WAAW,EAAE;YACvC,GAAG;gBACD,OAAO,UAAU,CAAC,KAAK,CAAC;YAC1B,CAAC;YACD,YAAY,EAAE,IAAI;YAClB,UAAU,EAAE,KAAK;SAClB,CAAC,CAAC;KACJ;IAED,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAE/B,uBAAuB,CAAC;AAE5B,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,sBAAsB,CAAC,CAAC","sourcesContent":["import {\n adoptStyles,\n css,\n LitElement,\n ReactiveController,\n ReactiveControllerHost,\n ReactiveElement,\n} from 'lit';\nimport { getTheme } from './config.js';\nimport { CHANGE_THEME_EVENT } from './theming-event.js';\nimport type { Theme, ThemeController, Themes } from './types.js';\n\nclass ThemeEventListeners {\n private readonly listeners = new Set<Function>();\n\n public add(listener: Function) {\n window.addEventListener(CHANGE_THEME_EVENT, this);\n this.listeners.add(listener);\n }\n\n public remove(listener: Function) {\n this.listeners.delete(listener);\n if (this.listeners.size < 1) {\n window.removeEventListener(CHANGE_THEME_EVENT, this);\n }\n }\n\n public handleEvent = () => {\n for (const listener of this.listeners) {\n listener();\n }\n };\n}\n\nconst _themingEventListeners = new ThemeEventListeners();\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 public hostConnected() {\n this.adoptStyles();\n _themingEventListeners.add(this.themeChanged);\n }\n\n public hostDisconnected() {\n _themingEventListeners.remove(this.themeChanged);\n }\n\n protected adoptStyles() {\n ~~this.~~theme = getTheme();\n const ctor = this.host.constructor as typeof LitElement;\n\n const [_, cssResult] =\n Object.entries(this.themes).find(([name]) => name === this.theme) ?? [];\n\n adoptStyles(this.host.shadowRoot as ShadowRoot, [\n ...ctor.elementStyles,\n cssResult ?? css``,\n ]);\n }\n\n private themeChanged = () => {\n this.adoptStyles();\n this.host.requestUpdate();\n };\n}\n\nconst _updateWhenThemeChanges = (\n host: ReactiveControllerHost & ReactiveElement,\n themes: Themes,\n exposeTheme?: boolean\n) => {\n const controller = new ThemingController(host, themes);\n host.addController(controller);\n\n if (exposeTheme) {\n Object.defineProperty(host, themeSymbol, {\n get() {\n return controller.theme;\n },\n configurable: true,\n enumerable: false,\n });\n }\n\n return controller;\n};\n\nexport const updateWhenThemeChanges: typeof _updateWhenThemeChanges & {\n _THEMING_CONTROLLER_FN_?: never;\n} = _updateWhenThemeChanges;\n\nexport const themeSymbol = Symbol('Current active theme');\n"]}
1	+ {"version":3,"file":"theming-controller.js","sourceRoot":"","sources":["../../src/theming/theming-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n adoptStyles,\n css,\n LitElement,\n ReactiveController,\n ReactiveControllerHost,\n ReactiveElement,\n} from 'lit';\nimport { getTheme } from './config.js';\nimport { CHANGE_THEME_EVENT } from './theming-event.js';\nimport type { Theme, ThemeController, Themes, ThemeVariant } from './types.js';\n\nclass ThemeEventListeners {\n private readonly listeners = new Set<Function>();\n\n public add(listener: Function) {\n window.addEventListener(CHANGE_THEME_EVENT, this);\n this.listeners.add(listener);\n }\n\n public remove(listener: Function) {\n this.listeners.delete(listener);\n if (this.listeners.size < 1) {\n window.removeEventListener(CHANGE_THEME_EVENT, this);\n }\n }\n\n public handleEvent = () => {\n for (const listener of this.listeners) {\n listener();\n }\n };\n}\n\nconst _themingEventListeners = new ThemeEventListeners();\n\nclass ThemingController implements ReactiveController, ThemeController {\n private themes: Themes;\n private host: ReactiveControllerHost & ReactiveElement;\n public theme!: Theme;\n public themeVariant!: ThemeVariant;\n\n constructor(host: ReactiveControllerHost & ReactiveElement, themes: Themes) {\n this.host = host;\n this.themes = themes;\n }\n\n public hostConnected() {\n this.adoptStyles();\n _themingEventListeners.add(this.themeChanged);\n }\n\n public hostDisconnected() {\n _themingEventListeners.remove(this.themeChanged);\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\n const [_, cssResult] =\n Object.entries(this.themes[themeVariant]).find(\n ([name]) => name === this.theme\n ) ?? [];\n\n adoptStyles(this.host.shadowRoot as ShadowRoot, [\n ...ctor.elementStyles,\n cssResult ?? css``,\n ]);\n }\n\n private themeChanged = () => {\n this.adoptStyles();\n this.host.requestUpdate();\n };\n}\n\nconst _updateWhenThemeChanges = (\n host: ReactiveControllerHost & ReactiveElement,\n themes: Themes,\n exposeTheme?: boolean\n) => {\n const controller = new ThemingController(host, themes);\n host.addController(controller);\n\n if (exposeTheme) {\n Object.defineProperty(host, themeSymbol, {\n get() {\n return controller.theme;\n },\n configurable: true,\n enumerable: false,\n });\n }\n\n return controller;\n};\n\nexport const updateWhenThemeChanges: typeof _updateWhenThemeChanges & {\n _THEMING_CONTROLLER_FN_?: never;\n} = _updateWhenThemeChanges;\n\nexport const themeSymbol = Symbol('Current active theme');\n"]}

package/theming/theming-event.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import type { Theme } from './types.js';
+import type { Theme, ThemeVariant } from './types.js';
 export declare const CHANGE_THEME_EVENT = "igc-change-theme";
 declare global {
     interface WindowEventMap {
@@ -10,4 +10,5 @@ declare global {
  */
 export type ChangeThemeEventDetail = {
     theme: Theme;
+    themeVariant: ThemeVariant;
 };

package/theming/theming-event.js.map CHANGED Viewed

	@@ -1 +1 @@
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 type { Theme } from './types.js';\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"]}
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 type { Theme, ThemeVariant } from './types.js';\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 themeVariant: ThemeVariant;\n};\n"]}

package/theming/types.d.ts CHANGED Viewed

@@ -1,7 +1,13 @@
 import { CSSResult } from 'lit';
 export type Theme = 'material' | 'bootstrap' | 'indigo' | 'fluent';
+export type ThemeVariant = 'light' | 'dark';
 export type Themes = {
-    [K in Theme]?: CSSResult;
+    light: {
+        [K in Theme]?: CSSResult;
+    };
+    dark: {
+        [K in Theme]?: CSSResult;
+    };
 };
 /**
  * A controller responsible for adopting various component themes;

package/theming/types.js.map CHANGED Viewed

	@@ -1 +1 @@
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 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"]}
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';\nexport type ThemeVariant = 'light' \| 'dark';\n\nexport type Themes = {\n light: {\n [K in Theme]?: CSSResult;\n };\n dark: {\n [K in Theme]?: CSSResult;\n };\n};\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"]}