igniteui-webcomponents 4.8.2 → 4.9.0

package/custom-elements.json

@@ -1287,6 +1287,11 @@
               "name": "handleErrorState",
               "privacy": "protected"
             },
+            {
+              "kind": "method",
+              "name": "handleError",
+              "privacy": "protected"
+            },
             {
               "kind": "field",
               "name": "role",
@@ -4366,10 +4371,7 @@
               "parameters": [
                 {
                   "name": "activeDate",
-                  "optional": true,
-                  "type": {
-                    "text": "Date"
-                  }
+                  "default": "this.activeDate"
                 },
                 {
                   "name": "renderButtons",
@@ -10291,7 +10293,7 @@
         },
         {
           "kind": "function",
-          "name": "format",
+          "name": "formatString",
           "return": {
             "type": {
               "text": "string"
@@ -10307,11 +10309,11 @@
             {
               "name": "params",
               "type": {
-                "text": "string[]"
+                "text": "unknown[]"
               }
             }
           ],
-          "description": "Builds a string from format specifiers and replacement parameters."
+          "description": "Builds a string from format specifiers and replacement parameters.\nWill coerce non-string parameters to their string representations."
         },
         {
           "kind": "function",
@@ -10533,9 +10535,9 @@
         },
         {
           "kind": "js",
-          "name": "format",
+          "name": "formatString",
           "declaration": {
-            "name": "format",
+            "name": "formatString",
             "module": "src/components/common/util.ts"
           }
         },
@@ -10647,7 +10649,7 @@
           "type": {
             "text": "Validator<{\n  minLength: number;\n  value: string;\n}>"
           },
-          "default": "{\n  key: 'tooShort',\n  message: ({ minLength }) =>\n    format(validatorMessages.minLength, `${minLength}`),\n  isValid: ({ minLength, value }) =>\n    minLength ? value.length >= minLength : true,\n}"
+          "default": "{\n  key: 'tooShort',\n  message: ({ minLength }) =>\n    formatString(validatorMessages.minLength, minLength),\n  isValid: ({ minLength, value }) =>\n    minLength ? value.length >= minLength : true,\n}"
         },
         {
           "kind": "variable",
@@ -10655,7 +10657,7 @@
           "type": {
             "text": "Validator<{\n  maxLength: number;\n  value: string;\n}>"
           },
-          "default": "{\n  key: 'tooLong',\n  message: ({ maxLength }) =>\n    format(validatorMessages.maxLength, `${maxLength}`),\n  isValid: ({ maxLength, value }) =>\n    maxLength ? value.length <= maxLength : true,\n}"
+          "default": "{\n  key: 'tooLong',\n  message: ({ maxLength }) =>\n    formatString(validatorMessages.maxLength, maxLength),\n  isValid: ({ maxLength, value }) =>\n    maxLength ? value.length <= maxLength : true,\n}"
         },
         {
           "kind": "variable",
@@ -10671,7 +10673,7 @@
           "type": {
             "text": "Validator<{\n  min: number | string;\n  value: number | string;\n}>"
           },
-          "default": "{\n  key: 'rangeUnderflow',\n  message: ({ min }) => format(validatorMessages.min, `${min}`),\n  isValid: ({ min, value }) =>\n    isDefined(min)\n      ? isDefined(value) && asNumber(value) >= asNumber(min)\n      : true,\n}"
+          "default": "{\n  key: 'rangeUnderflow',\n  message: ({ min }) => formatString(validatorMessages.min, min),\n  isValid: ({ min, value }) =>\n    isDefined(min)\n      ? isDefined(value) && asNumber(value) >= asNumber(min)\n      : true,\n}"
         },
         {
           "kind": "variable",
@@ -10679,7 +10681,7 @@
           "type": {
             "text": "Validator<{\n  max: number | string;\n  value: number | string;\n}>"
           },
-          "default": "{\n  key: 'rangeOverflow',\n  message: ({ max }) => format(validatorMessages.max, `${max}`),\n  isValid: ({ max, value }) =>\n    isDefined(max)\n      ? isDefined(value) && asNumber(value) <= asNumber(max)\n      : true,\n}"
+          "default": "{\n  key: 'rangeOverflow',\n  message: ({ max }) => formatString(validatorMessages.max, max),\n  isValid: ({ max, value }) =>\n    isDefined(max)\n      ? isDefined(value) && asNumber(value) <= asNumber(max)\n      : true,\n}"
         },
         {
           "kind": "variable",
@@ -10870,7 +10872,7 @@
                 "text": "Validator[]"
               },
               "privacy": "protected",
-              "default": "[\n    {\n      key: 'valueMissing',\n      message: messages.required,\n      isValid: () => (this.required ? !!this.value : true),\n    },\n    {\n      key: 'rangeUnderflow',\n      message: () => format(messages.min, `${this.min}`),\n      isValid: () =>\n        this.min\n          ? !DateTimeUtil.lessThanMinValue(\n              this.value || new Date(),\n              this.min,\n              this.hasTimeParts,\n              this.hasDateParts\n            )\n          : true,\n    },\n    {\n      key: 'rangeOverflow',\n      message: () => format(messages.max, `${this.max}`),\n      isValid: () =>\n        this.max\n          ? !DateTimeUtil.greaterThanMaxValue(\n              this.value || new Date(),\n              this.max,\n              this.hasTimeParts,\n              this.hasDateParts\n            )\n          : true,\n    },\n  ]",
+              "default": "[\n    {\n      key: 'valueMissing',\n      message: messages.required,\n      isValid: () => (this.required ? !!this.value : true),\n    },\n    {\n      key: 'rangeUnderflow',\n      message: () => formatString(messages.min, this.min),\n      isValid: () =>\n        this.min\n          ? !DateTimeUtil.lessThanMinValue(\n              this.value || new Date(),\n              this.min,\n              this.hasTimeParts,\n              this.hasDateParts\n            )\n          : true,\n    },\n    {\n      key: 'rangeOverflow',\n      message: () => formatString(messages.max, this.max),\n      isValid: () =>\n        this.max\n          ? !DateTimeUtil.greaterThanMaxValue(\n              this.value || new Date(),\n              this.max,\n              this.hasTimeParts,\n              this.hasDateParts\n            )\n          : true,\n    },\n  ]",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/components/common/mixins/form-associated.ts"
@@ -11321,7 +11323,7 @@
               },
               "parameters": [
                 {
-                  "name": "val",
+                  "name": "string",
                   "type": {
                     "text": "string"
                   }
@@ -14679,6 +14681,7 @@
               "privacy": "public",
               "default": "'absolute'",
               "description": "Sets the component's positioning strategy.",
+              "deprecated": "since v4.9.0 - Stacking context is now handled through the popover API.",
               "attribute": "position-strategy"
             },
             {
@@ -15375,6 +15378,7 @@
               },
               "default": "'absolute'",
               "description": "Sets the component's positioning strategy.",
+              "deprecated": "since v4.9.0 - Stacking context is now handled through the popover API.",
               "fieldName": "positionStrategy",
               "attribute": "position-strategy"
             },
@@ -17883,6 +17887,18 @@
               "description": "The autocomplete attribute of the control.",
               "attribute": "autocomplete"
             },
+            {
+              "kind": "field",
+              "name": "validateOnly",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Enables validation rules to be evaluated without restricting user input. This applies to the `maxLength` property for\nstring-type inputs or allows spin buttons to exceed the predefined `min/max` limits for number-type inputs.",
+              "attribute": "validate-only",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "constraintsChanged",
@@ -18947,6 +18963,16 @@
               "fieldName": "autocomplete",
               "attribute": "autocomplete"
             },
+            {
+              "name": "validate-only",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enables validation rules to be evaluated without restricting user input. This applies to the `maxLength` property for\nstring-type inputs or allows spin buttons to exceed the predefined `min/max` limits for number-type inputs.",
+              "fieldName": "validateOnly",
+              "attribute": "validate-only"
+            },
             {
               "name": "required",
               "type": {
@@ -22212,7 +22238,7 @@
             },
             {
               "kind": "method",
-              "name": "getMaskLiterals",
+              "name": "parseMaskLiterals",
               "privacy": "protected"
             },
             {
@@ -22328,8 +22354,10 @@
               "privacy": "public",
               "parameters": [
                 {
-                  "name": "masked",
-                  "default": "''"
+                  "name": "maskString",
+                  "type": {
+                    "text": "string"
+                  }
                 },
                 {
                   "name": "value",
@@ -22984,17 +23012,6 @@
               "attribute": "shift",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "strategy",
-              "type": {
-                "text": "'absolute' | 'fixed'"
-              },
-              "privacy": "public",
-              "default": "'absolute'",
-              "description": "The type of CSS position property to use.",
-              "attribute": "strategy"
-            },
             {
               "kind": "method",
               "name": "anchorChange",
@@ -23025,6 +23042,16 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "_showPopover",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_hidePopover",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "_createMiddleware",
@@ -23113,15 +23140,6 @@
               "default": "false",
               "description": "When enabled this tries to shift the floating element along the main axis\nkeeping it in view, preventing overflow while maintaining the desired placement.",
               "fieldName": "shift"
-            },
-            {
-              "name": "strategy",
-              "type": {
-                "text": "'absolute' | 'fixed'"
-              },
-              "default": "'absolute'",
-              "description": "The type of CSS position property to use.",
-              "fieldName": "strategy"
             }
           ],
           "superclass": {
@@ -26062,6 +26080,16 @@
               "name": "handleSlotChange",
               "privacy": "protected"
             },
+            {
+              "kind": "method",
+              "name": "handleHoverEnabled",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "handleHoverDisabled",
+              "privacy": "protected"
+            },
             {
               "kind": "method",
               "name": "calcNewValue",
@@ -31433,11 +31461,6 @@
               "name": "register",
               "privacy": "public",
               "static": true
-            },
-            {
-              "kind": "method",
-              "name": "createRenderRoot",
-              "privacy": "protected"
             }
           ],
           "superclass": {
@@ -35993,6 +36016,18 @@
               "description": "Indicates how the control should wrap the value for form submission.\nRefer to [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes)\nfor explanation of the available values.",
               "attribute": "wrap"
             },
+            {
+              "kind": "field",
+              "name": "validateOnly",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Enables validation rules to be evaluated without restricting user input. This applies to the `maxLength` property\nwhen it is defined.",
+              "attribute": "validate-only",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "select",
@@ -36862,6 +36897,16 @@
               "fieldName": "wrap",
               "attribute": "wrap"
             },
+            {
+              "name": "validate-only",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enables validation rules to be evaluated without restricting user input. This applies to the `maxLength` property\nwhen it is defined.",
+              "fieldName": "validateOnly",
+              "attribute": "validate-only"
+            },
             {
               "name": "required",
               "type": {
@@ -39753,7 +39798,9 @@
           "parameters": [
             {
               "name": "start",
-              "default": "0"
+              "type": {
+                "text": "number"
+              }
             },
             {
               "name": "stop",
@@ -42896,7 +42943,7 @@
               "privacy": "protected",
               "parameters": [
                 {
-                  "name": "str",
+                  "name": "string",
                   "type": {
                     "text": "string"
                   }
@@ -43491,7 +43538,7 @@
             {
               "name": "_constructor",
               "type": {
-                "text": "Function"
+                "text": "Constructor | AbstractConstructor"
               }
             }
           ],
@@ -43546,7 +43593,7 @@
             {
               "name": "_constructor",
               "type": {
-                "text": "Function"
+                "text": "Constructor | AbstractConstructor"
               }
             }
           ],
@@ -43601,7 +43648,7 @@
             {
               "name": "_constructor",
               "type": {
-                "text": "Function"
+                "text": "Constructor | AbstractConstructor"
               }
             }
           ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-webcomponents",
-  "version": "4.8.2",
+  "version": "4.9.0",
   "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.js

@@ -1,6 +1,6 @@
-import { CHANGE_THEME_EVENT } from './theming-event.js';
-import { getAllCSSVariables } from './utils.js';
 import { isDefined } from '../components/common/util.js';
+import { CHANGE_THEME_EVENT, } from './theming-event.js';
+import { getAllCSSVariables } from './utils.js';
 let theme;
 let themeVariant;
 function dispatchThemingEvent(detail) {
@@ -18,11 +18,11 @@ export const getTheme = () => {
     if (!theme || !themeVariant) {
         const [_theme, _variant] = Object.entries(getAllCSSVariables()).filter(([v]) => v === 'igTheme' || v === 'igThemeVariant') || [];
         theme =
-            _theme && _theme[1] && isOfTypeTheme(_theme[1])
+            _theme?.[1] && isOfTypeTheme(_theme[1])
                 ? _theme[1]
                 : 'bootstrap';
         themeVariant =
-            _variant && _variant[1] && isOfTypeThemeVariant(_variant[1])
+            _variant?.[1] && isOfTypeThemeVariant(_variant[1])
                 ? _variant[1]
                 : 'light';
     }

package/theming/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sourceRoot":"","sources":["../../src/theming/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAA0B,MAAM,oBAAoB,CAAC;AAEhF,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,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,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;QAC5B,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,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;gBAC7C,CAAC,CAAE,MAAM,CAAC,CAAC,CAAW;gBACtB,CAAC,CAAC,WAAW,CAAC;QAElB,YAAY;YACV,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,oBAAoB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gBAC1D,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 { CHANGE_THEME_EVENT, ChangeThemeEventDetail } from './theming-event.js';\nimport type { Theme, ThemeVariant } from './types.js';\nimport { getAllCSSVariables } from './utils.js';\nimport { isDefined } from '../components/common/util.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 && _theme[1] && isOfTypeTheme(_theme[1])\n        ? (_theme[1] as Theme)\n        : 'bootstrap';\n\n    themeVariant =\n      _variant && _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,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,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;QAC5B,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"]}

package/theming/theming-controller.d.ts

@@ -1,4 +1,4 @@
-import { ReactiveController, ReactiveControllerHost, ReactiveElement } from 'lit';
+import { type ReactiveController, type ReactiveControllerHost, type ReactiveElement } from 'lit';
 import type { Theme, ThemeController, ThemeVariant, Themes } from './types.js';
 declare class ThemingController implements ReactiveController, ThemeController {
     private themes;

package/theming/theming-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"theming-controller.js","sourceRoot":"","sources":["../../src/theming/theming-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  LitElement,\n  ReactiveController,\n  ReactiveControllerHost,\n  ReactiveElement,\n  adoptStyles,\n  css,\n} from 'lit';\n\nimport { getTheme } from './config.js';\nimport { CHANGE_THEME_EVENT } from './theming-event.js';\nimport type { Theme, ThemeController, ThemeVariant, Themes } from './types.js';\n\nclass ThemeEventListeners {\n  private readonly listeners = new Set<Function>();\n\n  public add(listener: Function) {\n    globalThis.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      globalThis.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    const stylesheets = Object.entries(this.themes[themeVariant]);\n\n    const [_unused, sharedStyles] =\n      stylesheets.find(([name]) => name === 'shared') ?? [];\n    const [_, themeStyles] =\n      stylesheets.find(([name]) => name === this.theme) ?? [];\n\n    adoptStyles(this.host.shadowRoot as ShadowRoot, [\n      ...ctor.elementStyles,\n      sharedStyles ?? css``,\n      themeStyles ?? 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"]}
+{"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,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAKxD,MAAM,mBAAmB;IAAzB;QACmB,cAAS,GAAG,IAAI,GAAG,EAAiB,CAAC;QAc/C,gBAAW,GAAG,GAAG,EAAE;YACxB,KAAK,MAAM,QAAQ,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBACtC,QAAQ,EAAE,CAAC;YACb,CAAC;QACH,CAAC,CAAC;IACJ,CAAC;IAjBQ,GAAG,CAAC,QAAuB;QAChC,UAAU,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC;QACtD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAC/B,CAAC;IAEM,MAAM,CAAC,QAAuB;QACnC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAChC,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC;YAC5B,UAAU,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC;QAC3D,CAAC;IACH,CAAC;CAOF;AAED,MAAM,sBAAsB,GAAG,IAAI,mBAAmB,EAAE,CAAC;AAEzD,MAAM,iBAAiB;IAMrB,YAAY,IAA8C,EAAE,MAAc;QAkClE,iBAAY,GAAkB,GAAG,EAAE;YACzC,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;QAC5B,CAAC,CAAC;QApCA,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,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,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;QAE9D,MAAM,CAAC,OAAO,EAAE,YAAY,CAAC,GAC3B,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,IAAI,KAAK,QAAQ,CAAC,IAAI,EAAE,CAAC;QACxD,MAAM,CAAC,CAAC,EAAE,WAAW,CAAC,GACpB,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QAE1D,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,UAAwB,EAAE;YAC9C,GAAG,IAAI,CAAC,aAAa;YACrB,YAAY,IAAI,GAAG,CAAA,EAAE;YACrB,WAAW,IAAI,GAAG,CAAA,EAAE;SACrB,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,CAAC;QAChB,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;IACL,CAAC;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  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 { CHANGE_THEME_EVENT } from './theming-event.js';\nimport type { Theme, ThemeController, ThemeVariant, Themes } from './types.js';\n\ntype ThemeCallback = () => void;\n\nclass ThemeEventListeners {\n  private readonly listeners = new Set<ThemeCallback>();\n\n  public add(listener: ThemeCallback) {\n    globalThis.addEventListener(CHANGE_THEME_EVENT, this);\n    this.listeners.add(listener);\n  }\n\n  public remove(listener: ThemeCallback) {\n    this.listeners.delete(listener);\n    if (this.listeners.size < 1) {\n      globalThis.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    const stylesheets = Object.entries(this.themes[themeVariant]);\n\n    const [_unused, sharedStyles] =\n      stylesheets.find(([name]) => name === 'shared') ?? [];\n    const [_, themeStyles] =\n      stylesheets.find(([name]) => name === this.theme) ?? [];\n\n    adoptStyles(this.host.shadowRoot as ShadowRoot, [\n      ...ctor.elementStyles,\n      sharedStyles ?? css``,\n      themeStyles ?? css``,\n    ]);\n  }\n\n  private themeChanged: ThemeCallback = () => {\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-decorator.js.map

@@ -1 +1 @@
-{"version":3,"file":"theming-decorator.js","sourceRoot":"","sources":["../../src/theming/theming-decorator.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAyBjE,MAAM,UAAU,MAAM,CAAC,MAAc,EAAE,WAAW,GAAG,KAAK;IACxD,OAAO,CAAC,KAAU,EAAE,EAAE;QACpB,KAAK,CAAC,cAAc,CAAC,CAAC,QAAyB,EAAE,EAAE;YACjD,sBAAsB,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC;QACxD,CAAC,CAAC,CAAC;QAEH,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["import { ReactiveElement } from 'lit';\n\nimport { updateWhenThemeChanges } from './theming-controller.js';\nimport type { 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 * See also {@link updateWhenThemeChanges} for the same functionality\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, exposeTheme = false) {\n  return (clazz: any) => {\n    clazz.addInitializer((instance: ReactiveElement) => {\n      updateWhenThemeChanges(instance, themes, exposeTheme);\n    });\n\n    return clazz;\n  };\n}\n\nexport { themeSymbol } from './theming-controller.js';\n"]}
+{"version":3,"file":"theming-decorator.js","sourceRoot":"","sources":["../../src/theming/theming-decorator.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAyBjE,MAAM,UAAU,MAAM,CAAC,MAAc,EAAE,WAAW,GAAG,KAAK;IACxD,OAAO,CAAC,KAAU,EAAE,EAAE;QACpB,KAAK,CAAC,cAAc,CAAC,CAAC,QAAyB,EAAE,EAAE;YACjD,sBAAsB,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC;QACxD,CAAC,CAAC,CAAC;QAEH,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["import type { ReactiveElement } from 'lit';\n\nimport { updateWhenThemeChanges } from './theming-controller.js';\nimport type { 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 * See also {@link updateWhenThemeChanges} for the same functionality\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, exposeTheme = false) {\n  return (clazz: any) => {\n    clazz.addInitializer((instance: ReactiveElement) => {\n      updateWhenThemeChanges(instance, themes, exposeTheme);\n    });\n\n    return clazz;\n  };\n}\n\nexport { themeSymbol } from './theming-controller.js';\n"]}

package/theming/types.d.ts

@@ -1,4 +1,4 @@
-import { CSSResult } from 'lit';
+import type { CSSResult } from 'lit';
 export type Theme = 'material' | 'bootstrap' | 'indigo' | 'fluent';
 export type ThemeVariant = 'light' | 'dark';
 export type Themes = {

package/theming/types.js.map

@@ -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';\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"]}
+{"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]?: 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"]}