igniteui-webcomponents 4.0.0-alpha.2 → 4.0.0

package/themes/light/indigo.css

@@ -1,17 +1,85 @@
-/* stylelint-disable max-line-length */
-/* stylelint-disable-next-line max-line-length */
-.igc-scrollbar {
-  --scrolbar-size: 1rem;
-  --igc-scrollbar-track-color: hsla(var(--ig-gray-200), var(--ig-gray-a));
-  --igc-scrollbar-thumb-color: hsla(var(--ig-gray-400), var(--ig-gray-a));
+/**
+ * @sass-export-section="light-material"
+ */
+/**
+ * @sass-export-section="light-bootstrap"
+ */
+/**
+ * @sass-export-section="light-fluent"
+ */
+/**
+ * @sass-export-section="light-indigo"
+ */
+/**
+ * @sass-export-section="light"
+ */
+/**
+ * @sass-export-section="dark-material"
+ */
+/**
+ * @sass-export-section="dark-bootstrap"
+ */
+/**
+ * @sass-export-section="dark-fluent"
+ */
+/**
+ * @sass-export-section="dark-indigo"
+ */
+/**
+ * @sass-export-section="dark"
+ */
+/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
+/**
+ * @sass-export-section="bootstrap"
+ */
+/**
+ * @sass-export-section="material"
+ */
+/**
+ * @sass-export-section="fluent"
+ */
+/**
+ * @sass-export-section="indigo"
+ */
+/**
+ * @sass-export-section="material"
+ */
+.ig-scrollbar {
+  --size: var(--ig-scrollbar-size, 1rem);
+  --thumb-background: var(--ig-scrollbar-thumb-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --track-background: var(--ig-scrollbar-track-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  scrollbar-width: var(--size);
+  scrollbar-color: var(--thumb-background) var(--track-background);
 }
 
+.ig-scrollbar ::-webkit-scrollbar {
+  width: var(--size);
+  height: var(--size);
+  background: var(--track-background);
+}
+
+.ig-scrollbar ::-webkit-scrollbar-thumb {
+  background: var(--thumb-background);
+}
+
+@media (hover: none) {
+  .ig-scrollbar ::-webkit-scrollbar {
+    width: auto;
+    height: auto;
+  }
+}
 :root {
-  --igc-theme: indigo;
+  --ig-theme: indigo;
   --ig-radius-factor: 1;
-  --igc-spacing-small: 0.125rem;
-  --igc-spacing-medium: 0.25rem;
-  --igc-spacing-large: 0.5rem;
+  --ig-spacing: 1;
+  --ig-spacing-inline: 1;
+  --ig-spacing-block: 1;
+  --ig-size-small: 1;
+  --ig-size-medium: 2;
+  --ig-size-large: 3;
+  --ig-scrollbar-size: 1rem;
+  --ig-scrollbar-thumb-background: hsla(var(--ig-gray-400), var(--ig-gray-a));
+  --ig-scrollbar-track-background: hsla(var(--ig-gray-200), var(--ig-gray-a));
 }
 :root {
   --ig-primary-50-contrast: black;

package/themes/light/material.css

@@ -1,17 +1,85 @@
-/* stylelint-disable max-line-length */
-/* stylelint-disable-next-line max-line-length */
-.igc-scrollbar {
-  --scrolbar-size: 1rem;
-  --igc-scrollbar-track-color: hsla(var(--ig-gray-100), var(--ig-gray-a));
-  --igc-scrollbar-thumb-color: hsla(var(--ig-gray-400), var(--ig-gray-a));
+/**
+ * @sass-export-section="light-material"
+ */
+/**
+ * @sass-export-section="light-bootstrap"
+ */
+/**
+ * @sass-export-section="light-fluent"
+ */
+/**
+ * @sass-export-section="light-indigo"
+ */
+/**
+ * @sass-export-section="light"
+ */
+/**
+ * @sass-export-section="dark-material"
+ */
+/**
+ * @sass-export-section="dark-bootstrap"
+ */
+/**
+ * @sass-export-section="dark-fluent"
+ */
+/**
+ * @sass-export-section="dark-indigo"
+ */
+/**
+ * @sass-export-section="dark"
+ */
+/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
+/**
+ * @sass-export-section="bootstrap"
+ */
+/**
+ * @sass-export-section="material"
+ */
+/**
+ * @sass-export-section="fluent"
+ */
+/**
+ * @sass-export-section="indigo"
+ */
+/**
+ * @sass-export-section="material"
+ */
+.ig-scrollbar {
+  --size: var(--ig-scrollbar-size, 1rem);
+  --thumb-background: var(--ig-scrollbar-thumb-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --track-background: var(--ig-scrollbar-track-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  scrollbar-width: var(--size);
+  scrollbar-color: var(--thumb-background) var(--track-background);
 }
 
+.ig-scrollbar ::-webkit-scrollbar {
+  width: var(--size);
+  height: var(--size);
+  background: var(--track-background);
+}
+
+.ig-scrollbar ::-webkit-scrollbar-thumb {
+  background: var(--thumb-background);
+}
+
+@media (hover: none) {
+  .ig-scrollbar ::-webkit-scrollbar {
+    width: auto;
+    height: auto;
+  }
+}
 :root {
-  --igc-theme: material;
+  --ig-theme: material;
   --ig-radius-factor: 1;
-  --igc-spacing-small: 0.125rem;
-  --igc-spacing-medium: 0.25rem;
-  --igc-spacing-large: 0.5rem;
+  --ig-spacing: 1;
+  --ig-spacing-inline: 1;
+  --ig-spacing-block: 1;
+  --ig-size-small: 1;
+  --ig-size-medium: 2;
+  --ig-size-large: 3;
+  --ig-scrollbar-size: 1rem;
+  --ig-scrollbar-thumb-background: hsla(var(--ig-gray-400), var(--ig-gray-a));
+  --ig-scrollbar-track-background: hsla(var(--ig-gray-100), var(--ig-gray-a));
 }
 
 :root {
@@ -211,7 +279,7 @@
   --ig-warn-400: var(--ig-warn-h), calc(var(--ig-warn-s) * 0.875), calc(var(--ig-warn-l) * 1.08);
   --ig-warn-h: 37deg;
   --ig-warn-s: 96%;
-  --ig-warn-l: 61%;
+  --ig-warn-l: 54%;
   --ig-warn-a: 1;
   --ig-warn-500-contrast: black;
   --ig-warn-500: var(--ig-warn-h), calc(var(--ig-warn-s) * 1), calc(var(--ig-warn-l) * 1);
@@ -414,7 +482,7 @@
   --ig-overline-margin-bottom: 0;
 }
 
-.ig-typography__h1 {
+.ig-typography h1 {
   font-family: var(--ig-h1-font-family);
   font-size: var(--ig-h1-font-size);
   font-weight: var(--ig-h1-font-weight);
@@ -425,7 +493,7 @@
   margin-top: var(--ig-h1-margin-top);
   margin-bottom: var(--ig-h1-margin-bottom);
 }
-.ig-typography__h2 {
+.ig-typography h2 {
   font-family: var(--ig-h2-font-family);
   font-size: var(--ig-h2-font-size);
   font-weight: var(--ig-h2-font-weight);
@@ -436,7 +504,7 @@
   margin-top: var(--ig-h2-margin-top);
   margin-bottom: var(--ig-h2-margin-bottom);
 }
-.ig-typography__h3 {
+.ig-typography h3 {
   font-family: var(--ig-h3-font-family);
   font-size: var(--ig-h3-font-size);
   font-weight: var(--ig-h3-font-weight);
@@ -447,7 +515,7 @@
   margin-top: var(--ig-h3-margin-top);
   margin-bottom: var(--ig-h3-margin-bottom);
 }
-.ig-typography__h4 {
+.ig-typography h4 {
   font-family: var(--ig-h4-font-family);
   font-size: var(--ig-h4-font-size);
   font-weight: var(--ig-h4-font-weight);
@@ -458,7 +526,7 @@
   margin-top: var(--ig-h4-margin-top);
   margin-bottom: var(--ig-h4-margin-bottom);
 }
-.ig-typography__h5 {
+.ig-typography h5 {
   font-family: var(--ig-h5-font-family);
   font-size: var(--ig-h5-font-size);
   font-weight: var(--ig-h5-font-weight);
@@ -469,7 +537,7 @@
   margin-top: var(--ig-h5-margin-top);
   margin-bottom: var(--ig-h5-margin-bottom);
 }
-.ig-typography__h6 {
+.ig-typography h6 {
   font-family: var(--ig-h6-font-family);
   font-size: var(--ig-h6-font-size);
   font-weight: var(--ig-h6-font-weight);
@@ -480,29 +548,7 @@
   margin-top: var(--ig-h6-margin-top);
   margin-bottom: var(--ig-h6-margin-bottom);
 }
-.ig-typography__subtitle-1 {
-  font-family: var(--ig-subtitle-1-font-family);
-  font-size: var(--ig-subtitle-1-font-size);
-  font-weight: var(--ig-subtitle-1-font-weight);
-  font-style: var(--ig-subtitle-1-font-style);
-  line-height: var(--ig-subtitle-1-line-height);
-  letter-spacing: var(--ig-subtitle-1-letter-spacing);
-  text-transform: var(--ig-subtitle-1-text-transform);
-  margin-top: var(--ig-subtitle-1-margin-top);
-  margin-bottom: var(--ig-subtitle-1-margin-bottom);
-}
-.ig-typography__subtitle-2 {
-  font-family: var(--ig-subtitle-2-font-family);
-  font-size: var(--ig-subtitle-2-font-size);
-  font-weight: var(--ig-subtitle-2-font-weight);
-  font-style: var(--ig-subtitle-2-font-style);
-  line-height: var(--ig-subtitle-2-line-height);
-  letter-spacing: var(--ig-subtitle-2-letter-spacing);
-  text-transform: var(--ig-subtitle-2-text-transform);
-  margin-top: var(--ig-subtitle-2-margin-top);
-  margin-bottom: var(--ig-subtitle-2-margin-bottom);
-}
-.ig-typography__body-1 {
+.ig-typography p {
   font-family: var(--ig-body-1-font-family);
   font-size: var(--ig-body-1-font-size);
   font-weight: var(--ig-body-1-font-weight);
@@ -513,51 +559,7 @@
   margin-top: var(--ig-body-1-margin-top);
   margin-bottom: var(--ig-body-1-margin-bottom);
 }
-.ig-typography__body-2 {
-  font-family: var(--ig-body-2-font-family);
-  font-size: var(--ig-body-2-font-size);
-  font-weight: var(--ig-body-2-font-weight);
-  font-style: var(--ig-body-2-font-style);
-  line-height: var(--ig-body-2-line-height);
-  letter-spacing: var(--ig-body-2-letter-spacing);
-  text-transform: var(--ig-body-2-text-transform);
-  margin-top: var(--ig-body-2-margin-top);
-  margin-bottom: var(--ig-body-2-margin-bottom);
-}
-.ig-typography__button {
-  font-family: var(--ig-button-font-family);
-  font-size: var(--ig-button-font-size);
-  font-weight: var(--ig-button-font-weight);
-  font-style: var(--ig-button-font-style);
-  line-height: var(--ig-button-line-height);
-  letter-spacing: var(--ig-button-letter-spacing);
-  text-transform: var(--ig-button-text-transform);
-  margin-top: var(--ig-button-margin-top);
-  margin-bottom: var(--ig-button-margin-bottom);
-}
-.ig-typography__caption {
-  font-family: var(--ig-caption-font-family);
-  font-size: var(--ig-caption-font-size);
-  font-weight: var(--ig-caption-font-weight);
-  font-style: var(--ig-caption-font-style);
-  line-height: var(--ig-caption-line-height);
-  letter-spacing: var(--ig-caption-letter-spacing);
-  text-transform: var(--ig-caption-text-transform);
-  margin-top: var(--ig-caption-margin-top);
-  margin-bottom: var(--ig-caption-margin-bottom);
-}
-.ig-typography__overline {
-  font-family: var(--ig-overline-font-family);
-  font-size: var(--ig-overline-font-size);
-  font-weight: var(--ig-overline-font-weight);
-  font-style: var(--ig-overline-font-style);
-  line-height: var(--ig-overline-line-height);
-  letter-spacing: var(--ig-overline-letter-spacing);
-  text-transform: var(--ig-overline-text-transform);
-  margin-top: var(--ig-overline-margin-top);
-  margin-bottom: var(--ig-overline-margin-bottom);
-}
-.ig-typography h1 {
+.ig-typography .ig-typography__h1 {
   font-family: var(--ig-h1-font-family);
   font-size: var(--ig-h1-font-size);
   font-weight: var(--ig-h1-font-weight);
@@ -568,7 +570,7 @@
   margin-top: var(--ig-h1-margin-top);
   margin-bottom: var(--ig-h1-margin-bottom);
 }
-.ig-typography h2 {
+.ig-typography .ig-typography__h2 {
   font-family: var(--ig-h2-font-family);
   font-size: var(--ig-h2-font-size);
   font-weight: var(--ig-h2-font-weight);
@@ -579,7 +581,7 @@
   margin-top: var(--ig-h2-margin-top);
   margin-bottom: var(--ig-h2-margin-bottom);
 }
-.ig-typography h3 {
+.ig-typography .ig-typography__h3 {
   font-family: var(--ig-h3-font-family);
   font-size: var(--ig-h3-font-size);
   font-weight: var(--ig-h3-font-weight);
@@ -590,7 +592,7 @@
   margin-top: var(--ig-h3-margin-top);
   margin-bottom: var(--ig-h3-margin-bottom);
 }
-.ig-typography h4 {
+.ig-typography .ig-typography__h4 {
   font-family: var(--ig-h4-font-family);
   font-size: var(--ig-h4-font-size);
   font-weight: var(--ig-h4-font-weight);
@@ -601,7 +603,7 @@
   margin-top: var(--ig-h4-margin-top);
   margin-bottom: var(--ig-h4-margin-bottom);
 }
-.ig-typography h5 {
+.ig-typography .ig-typography__h5 {
   font-family: var(--ig-h5-font-family);
   font-size: var(--ig-h5-font-size);
   font-weight: var(--ig-h5-font-weight);
@@ -612,7 +614,7 @@
   margin-top: var(--ig-h5-margin-top);
   margin-bottom: var(--ig-h5-margin-bottom);
 }
-.ig-typography h6 {
+.ig-typography .ig-typography__h6 {
   font-family: var(--ig-h6-font-family);
   font-size: var(--ig-h6-font-size);
   font-weight: var(--ig-h6-font-weight);
@@ -623,7 +625,29 @@
   margin-top: var(--ig-h6-margin-top);
   margin-bottom: var(--ig-h6-margin-bottom);
 }
-.ig-typography p {
+.ig-typography .ig-typography__subtitle-1 {
+  font-family: var(--ig-subtitle-1-font-family);
+  font-size: var(--ig-subtitle-1-font-size);
+  font-weight: var(--ig-subtitle-1-font-weight);
+  font-style: var(--ig-subtitle-1-font-style);
+  line-height: var(--ig-subtitle-1-line-height);
+  letter-spacing: var(--ig-subtitle-1-letter-spacing);
+  text-transform: var(--ig-subtitle-1-text-transform);
+  margin-top: var(--ig-subtitle-1-margin-top);
+  margin-bottom: var(--ig-subtitle-1-margin-bottom);
+}
+.ig-typography .ig-typography__subtitle-2 {
+  font-family: var(--ig-subtitle-2-font-family);
+  font-size: var(--ig-subtitle-2-font-size);
+  font-weight: var(--ig-subtitle-2-font-weight);
+  font-style: var(--ig-subtitle-2-font-style);
+  line-height: var(--ig-subtitle-2-line-height);
+  letter-spacing: var(--ig-subtitle-2-letter-spacing);
+  text-transform: var(--ig-subtitle-2-text-transform);
+  margin-top: var(--ig-subtitle-2-margin-top);
+  margin-bottom: var(--ig-subtitle-2-margin-bottom);
+}
+.ig-typography .ig-typography__body-1 {
   font-family: var(--ig-body-1-font-family);
   font-size: var(--ig-body-1-font-size);
   font-weight: var(--ig-body-1-font-weight);
@@ -633,4 +657,48 @@
   text-transform: var(--ig-body-1-text-transform);
   margin-top: var(--ig-body-1-margin-top);
   margin-bottom: var(--ig-body-1-margin-bottom);
+}
+.ig-typography .ig-typography__body-2 {
+  font-family: var(--ig-body-2-font-family);
+  font-size: var(--ig-body-2-font-size);
+  font-weight: var(--ig-body-2-font-weight);
+  font-style: var(--ig-body-2-font-style);
+  line-height: var(--ig-body-2-line-height);
+  letter-spacing: var(--ig-body-2-letter-spacing);
+  text-transform: var(--ig-body-2-text-transform);
+  margin-top: var(--ig-body-2-margin-top);
+  margin-bottom: var(--ig-body-2-margin-bottom);
+}
+.ig-typography .ig-typography__button {
+  font-family: var(--ig-button-font-family);
+  font-size: var(--ig-button-font-size);
+  font-weight: var(--ig-button-font-weight);
+  font-style: var(--ig-button-font-style);
+  line-height: var(--ig-button-line-height);
+  letter-spacing: var(--ig-button-letter-spacing);
+  text-transform: var(--ig-button-text-transform);
+  margin-top: var(--ig-button-margin-top);
+  margin-bottom: var(--ig-button-margin-bottom);
+}
+.ig-typography .ig-typography__caption {
+  font-family: var(--ig-caption-font-family);
+  font-size: var(--ig-caption-font-size);
+  font-weight: var(--ig-caption-font-weight);
+  font-style: var(--ig-caption-font-style);
+  line-height: var(--ig-caption-line-height);
+  letter-spacing: var(--ig-caption-letter-spacing);
+  text-transform: var(--ig-caption-text-transform);
+  margin-top: var(--ig-caption-margin-top);
+  margin-bottom: var(--ig-caption-margin-bottom);
+}
+.ig-typography .ig-typography__overline {
+  font-family: var(--ig-overline-font-family);
+  font-size: var(--ig-overline-font-size);
+  font-weight: var(--ig-overline-font-weight);
+  font-style: var(--ig-overline-font-style);
+  line-height: var(--ig-overline-line-height);
+  letter-spacing: var(--ig-overline-letter-spacing);
+  text-transform: var(--ig-overline-text-transform);
+  margin-top: var(--ig-overline-margin-top);
+  margin-bottom: var(--ig-overline-margin-bottom);
 }

package/theming/config.d.ts

@@ -1,4 +1,4 @@
-import type { Theme } from './types';
+import type { Theme } from './types.js';
 export declare const getTheme: () => Theme;
 export declare const setTheme: (value: Theme) => void;
 /**

package/theming/config.js

@@ -9,8 +9,7 @@ function isOfTypeTheme(theme) {
 }
 export const getTheme = () => {
     if (!theme) {
-        const [_, t] = Object.entries(getAllCSSVariables()).find(([v]) => v === 'igcTheme') ||
-            [];
+        const [_, t] = Object.entries(getAllCSSVariables()).find(([v]) => v === 'igTheme') || [];
         theme = t && isOfTypeTheme(t) ? t : 'bootstrap';
     }
     return theme;

package/theming/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sourceRoot":"","sources":["../../src/theming/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0B,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAEhF,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEhD,IAAI,KAAY,CAAC;AAKjB,SAAS,oBAAoB,CAAC,MAA8B;IAC1D,MAAM,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,kBAAkB,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;AACxE,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,MAAM,CAAC,MAAM,QAAQ,GAAgB,GAAG,EAAE;IACxC,IAAI,CAAC,KAAK,EAAE;QACV,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,GACV,MAAM,CAAC,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,UAAU,CAAC;YACpE,EAAE,CAAC;QAEL,KAAK,GAAG,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,CAAW,CAAC,CAAC,CAAC,WAAW,CAAC;KAC5D;IAED,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;IACvC,KAAK,GAAG,KAAK,CAAC;AAChB,CAAC,CAAC;AAYF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,CAAQ,EAAE,EAAE;IACzC,IAAI,aAAa,CAAC,CAAC,CAAC,EAAE;QACpB,QAAQ,CAAC,CAAC,CAAC,CAAC;KACb;IAED,oBAAoB,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;AAClC,CAAC,CAAC","sourcesContent":["import { ChangeThemeEventDetail, CHANGE_THEME_EVENT } from './theming-event.js';\nimport type { Theme } from './types';\nimport { getAllCSSVariables } from './utils.js';\n\nlet theme: Theme;\n\n/**\n * Dispatch an \"igc-change-theme\" event to `window` with the given detail.\n */\nfunction dispatchThemingEvent(detail: ChangeThemeEventDetail) {\n  window.dispatchEvent(new CustomEvent(CHANGE_THEME_EVENT, { detail }));\n}\n\nfunction isOfTypeTheme(theme: string): theme is Theme {\n  return ['bootstrap', 'material', 'indigo', 'fluent'].includes(theme);\n}\n\nexport const getTheme: () => Theme = () => {\n  if (!theme) {\n    const [_, t] =\n      Object.entries(getAllCSSVariables()).find(([v]) => v === 'igcTheme') ||\n      [];\n\n    theme = t && isOfTypeTheme(t) ? (t as Theme) : 'bootstrap';\n  }\n\n  return theme;\n};\n\nexport const setTheme = (value: Theme) => {\n  theme = value;\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({ theme: 'material' });\n *  ```\n */\nexport const configureTheme = (t: Theme) => {\n  if (isOfTypeTheme(t)) {\n    setTheme(t);\n  }\n\n  dispatchThemingEvent({ theme });\n};\n"]}
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../../src/theming/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0B,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAEhF,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEhD,IAAI,KAAY,CAAC;AAKjB,SAAS,oBAAoB,CAAC,MAA8B;IAC1D,MAAM,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,kBAAkB,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;AACxE,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,MAAM,CAAC,MAAM,QAAQ,GAAgB,GAAG,EAAE;IACxC,IAAI,CAAC,KAAK,EAAE;QACV,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,GACV,MAAM,CAAC,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,SAAS,CAAC,IAAI,EAAE,CAAC;QAE5E,KAAK,GAAG,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,CAAW,CAAC,CAAC,CAAC,WAAW,CAAC;KAC5D;IAED,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;IACvC,KAAK,GAAG,KAAK,CAAC;AAChB,CAAC,CAAC;AAYF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,CAAQ,EAAE,EAAE;IACzC,IAAI,aAAa,CAAC,CAAC,CAAC,EAAE;QACpB,QAAQ,CAAC,CAAC,CAAC,CAAC;KACb;IAED,oBAAoB,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;AAClC,CAAC,CAAC","sourcesContent":["import { ChangeThemeEventDetail, CHANGE_THEME_EVENT } from './theming-event.js';\nimport type { Theme } from './types.js';\nimport { getAllCSSVariables } from './utils.js';\n\nlet theme: Theme;\n\n/**\n * Dispatch an \"igc-change-theme\" event to `window` with the given detail.\n */\nfunction dispatchThemingEvent(detail: ChangeThemeEventDetail) {\n  window.dispatchEvent(new CustomEvent(CHANGE_THEME_EVENT, { detail }));\n}\n\nfunction isOfTypeTheme(theme: string): theme is Theme {\n  return ['bootstrap', 'material', 'indigo', 'fluent'].includes(theme);\n}\n\nexport const getTheme: () => Theme = () => {\n  if (!theme) {\n    const [_, t] =\n      Object.entries(getAllCSSVariables()).find(([v]) => v === 'igTheme') || [];\n\n    theme = t && isOfTypeTheme(t) ? (t as Theme) : 'bootstrap';\n  }\n\n  return theme;\n};\n\nexport const setTheme = (value: Theme) => {\n  theme = value;\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({ theme: 'material' });\n *  ```\n */\nexport const configureTheme = (t: Theme) => {\n  if (isOfTypeTheme(t)) {\n    setTheme(t);\n  }\n\n  dispatchThemingEvent({ theme });\n};\n"]}

package/theming/index.d.ts

@@ -1,4 +1,4 @@
 export * from './config.js';
 export * from './theming-controller.js';
 export * from './theming-decorator.js';
-export * from './types';
+export * from './types.js';

package/theming/index.js

@@ -1,5 +1,5 @@
 export * from './config.js';
 export * from './theming-controller.js';
 export * from './theming-decorator.js';
-export * from './types';
+export * from './types.js';
 //# sourceMappingURL=index.js.map

package/theming/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theming/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,SAAS,CAAC","sourcesContent":["export * from './config.js';\nexport * from './theming-controller.js';\nexport * from './theming-decorator.js';\nexport * from './types';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theming/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,YAAY,CAAC","sourcesContent":["export * from './config.js';\nexport * from './theming-controller.js';\nexport * from './theming-decorator.js';\nexport * from './types.js';\n"]}

package/theming/theming-controller.d.ts

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

package/theming/theming-controller.js.map

@@ -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,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.js';\nimport { CHANGE_THEME_EVENT } from './theming-event.js';\nimport type { 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"]}
+{"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,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.js';\nimport { CHANGE_THEME_EVENT } from './theming-event.js';\nimport type { Theme, ThemeController, Themes } from './types.js';\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

@@ -1,4 +1,4 @@
-import { Themes } from './types';
+import { Themes } from './types.js';
 /**
  * Class decorator to enable multiple theme support for a component.
  * The component will re-render on theme changes.

package/theming/theming-decorator.js.map

@@ -1 +1 @@
-{"version":3,"file":"theming-decorator.js","sourceRoot":"","sources":["../../src/theming/theming-decorator.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAyBjE,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-controller.js';\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"]}
+{"version":3,"file":"theming-decorator.js","sourceRoot":"","sources":["../../src/theming/theming-decorator.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAyBjE,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-controller.js';\nimport { ReactiveTheme, 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 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

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

package/theming/theming-event.js.map

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

package/vscode-html-custom-data.json

@@ -431,7 +431,7 @@
     },
     {
       "name": "igc-days-view",
-      "description": "Instantiate a days view as a separate component in the calendar.\n\nEvents:\n\n  * `igcActiveDateChange` {} - Emitted when the active date changes.\n\n  * `igcRangePreviewDateChange` {} - Emitted when the range preview date changes.\n\nAttributes:\n\n  * `hide-leading-days` {`boolean`} - Controls the visibility of the leading dates that do not belong to the current month.\n\n  * `hide-trailing-days` {`boolean`} - Controls the visibility of the trailing dates that do not belong to the current month.\n\n  * `active` {`boolean`} - Gets/sets the active state of the days view.\n\n  * `week-day-format` {`\"long\" | \"short\" | \"narrow\" | undefined`} - The format of the days. Defaults to narrow.\n\n  * `value` {`Date | undefined`} - Тhe current value of the calendar.\nUsed when selection is set to single.\n\n  * `values` {`Date[] | undefined`} - Тhe current values of the calendar.\nUsed when selection is set to multiple or range.\n\n  * `selection` {`\"single\" | \"multiple\" | \"range\"`} - Sets the type of date selection.\n\n  * `show-week-numbers` {`boolean`} - Show/hide the week numbers.\n\n  * `week-start` {`\"sunday\" | \"monday\" | \"tuesday\" | \"wednesday\" | \"thursday\" | \"friday\" | \"saturday\"`} - Sets the start day of the week.\n\n  * `active-date` {`Date`} - Sets the date which is shown in view and is highlighted. By default it is the current date.\n\n  * `locale` {`string`} - Sets the locale used for formatting and displaying the dates in the calendar.\n\nProperties:\n\n  * `tagName` {`\"igc-days-view\"`} - \n\n  * `styles` - \n\n  * `formatterWeekday` {`DateTimeFormat`} - \n\n  * `dates` {`ICalendarDate[][]`} - \n\n  * `activeDay` {`HTMLElement`} - \n\n  * `hideLeadingDays` {`boolean`} - Controls the visibility of the leading dates that do not belong to the current month.\n\n  * `hideTrailingDays` {`boolean`} - Controls the visibility of the trailing dates that do not belong to the current month.\n\n  * `active` {`boolean`} - Gets/sets the active state of the days view.\n\n  * `rangePreviewDate` {`Date | undefined`} - The range preview date.\n\n  * `weekDayFormat` {`\"long\" | \"short\" | \"narrow\" | undefined`} - The format of the days. Defaults to narrow.\n\n  * `resourceStrings` {`IgcCalendarResourceStrings`} - The resource strings.\n\n  * `isSingleSelection` {`boolean`} - \n\n  * `calendarModel` - \n\n  * `value` {`Date | undefined`} - Тhe current value of the calendar.\nUsed when selection is set to single.\n\n  * `values` {`Date[] | undefined`} - Тhe current values of the calendar.\nUsed when selection is set to multiple or range.\n\n  * `selection` {`\"single\" | \"multiple\" | \"range\"`} - Sets the type of date selection.\n\n  * `showWeekNumbers` {`boolean`} - Show/hide the week numbers.\n\n  * `weekStart` {`\"sunday\" | \"monday\" | \"tuesday\" | \"wednesday\" | \"thursday\" | \"friday\" | \"saturday\"`} - Sets the start day of the week.\n\n  * `activeDate` {`Date`} - Sets the date which is shown in view and is highlighted. By default it is the current date.\n\n  * `locale` {`string`} - Sets the locale used for formatting and displaying the dates in the calendar.\n\n  * `disabledDates` {`DateRangeDescriptor[]`} - Gets/sets disabled dates.\n\n  * `specialDates` {`DateRangeDescriptor[]`} - Gets/sets special dates.",
+      "description": "Instantiate a days view as a separate component in the calendar.\n\nEvents:\n\n  * `igcActiveDateChange` {} - Emitted when the active date changes.\n\n  * `igcRangePreviewDateChange` {} - Emitted when the range preview date changes.\n\nAttributes:\n\n  * `hide-leading-days` {`boolean`} - Controls the visibility of the leading dates that do not belong to the current month.\n\n  * `hide-trailing-days` {`boolean`} - Controls the visibility of the trailing dates that do not belong to the current month.\n\n  * `active` {`boolean`} - Gets/sets the active state of the days view.\n\n  * `week-day-format` {`\"long\" | \"short\" | \"narrow\" | undefined`} - The format of the days. Defaults to narrow.\n\n  * `value` {`Date | undefined`} - Тhe current value of the calendar.\nUsed when selection is set to single.\n\n  * `values` {`Date[] | undefined`} - Тhe current values of the calendar.\nUsed when selection is set to multiple or range.\n\n  * `selection` {`\"single\" | \"multiple\" | \"range\"`} - Sets the type of date selection.\n\n  * `show-week-numbers` {`boolean`} - Show/hide the week numbers.\n\n  * `week-start` {`\"sunday\" | \"monday\" | \"tuesday\" | \"wednesday\" | \"thursday\" | \"friday\" | \"saturday\"`} - Sets the start day of the week.\n\n  * `active-date` {`Date`} - Sets the date which is shown in view and is highlighted. By default it is the current date.\n\n  * `locale` {`string`} - Sets the locale used for formatting and displaying the dates in the calendar.\n\nProperties:\n\n  * `tagName` {`\"igc-days-view\"`} - \n\n  * `styles` - \n\n  * `labelFormatter` {`DateTimeFormat`} - \n\n  * `formatterWeekday` {`DateTimeFormat`} - \n\n  * `dates` {`ICalendarDate[][]`} - \n\n  * `activeDay` {`HTMLElement`} - \n\n  * `hideLeadingDays` {`boolean`} - Controls the visibility of the leading dates that do not belong to the current month.\n\n  * `hideTrailingDays` {`boolean`} - Controls the visibility of the trailing dates that do not belong to the current month.\n\n  * `active` {`boolean`} - Gets/sets the active state of the days view.\n\n  * `rangePreviewDate` {`Date | undefined`} - The range preview date.\n\n  * `weekDayFormat` {`\"long\" | \"short\" | \"narrow\" | undefined`} - The format of the days. Defaults to narrow.\n\n  * `resourceStrings` {`IgcCalendarResourceStrings`} - The resource strings.\n\n  * `isSingleSelection` {`boolean`} - \n\n  * `calendarModel` - \n\n  * `value` {`Date | undefined`} - Тhe current value of the calendar.\nUsed when selection is set to single.\n\n  * `values` {`Date[] | undefined`} - Тhe current values of the calendar.\nUsed when selection is set to multiple or range.\n\n  * `selection` {`\"single\" | \"multiple\" | \"range\"`} - Sets the type of date selection.\n\n  * `showWeekNumbers` {`boolean`} - Show/hide the week numbers.\n\n  * `weekStart` {`\"sunday\" | \"monday\" | \"tuesday\" | \"wednesday\" | \"thursday\" | \"friday\" | \"saturday\"`} - Sets the start day of the week.\n\n  * `activeDate` {`Date`} - Sets the date which is shown in view and is highlighted. By default it is the current date.\n\n  * `locale` {`string`} - Sets the locale used for formatting and displaying the dates in the calendar.\n\n  * `disabledDates` {`DateRangeDescriptor[]`} - Gets/sets disabled dates.\n\n  * `specialDates` {`DateRangeDescriptor[]`} - Gets/sets special dates.",
       "attributes": [
         {
           "name": "hide-leading-days",
@@ -925,6 +925,44 @@
         }
       ]
     },
+    {
+      "name": "igc-dialog",
+      "description": "Represents a Dialog component.\n\nEvents:\n\n  * `igcClosing` {} - Emitter just before the dialog is closed.\n\n  * `igcClosed` {} - Emitted after closing the dialog.\n\nSlots:\n\n  * ` ` {} - Renders content inside the default slot.\n\n  * `title` {} - Renders the title of the dialog header.\n\n  * `footer` {} - Renders the dialog footer.\n\nAttributes:\n\n  * `close-on-escape` {`boolean`} - Whether the dialog should be closed when pressing the 'ESCAPE' button.\n\n  * `close-on-outside-click` {`boolean`} - Whether the dialog should be closed when clicking outside of it.\n\n  * `hide-default-action` {`boolean`} - Whether to hide the default action button for the dialog.\n\nWhen there is projected content in the `footer` slot this property\nhas no effect.\n\n  * `open` {`boolean`} - Whether the dialog is opened.\n\n  * `title` {`string`} - Sets the title of the dialog.\n\nProperties:\n\n  * `tagName` {`\"igc-dialog\"`} - \n\n  * `styles` {`CSSResult[]`} - \n\n  * `increment` - \n\n  * `titleId` {`string`} - \n\n  * `dialog` {`HTMLDialogElement`} - \n\n  * `closeOnEscape` {`boolean`} - Whether the dialog should be closed when pressing the 'ESCAPE' button.\n\n  * `closeOnOutsideClick` {`boolean`} - Whether the dialog should be closed when clicking outside of it.\n\n  * `hideDefaultAction` {`boolean`} - Whether to hide the default action button for the dialog.\n\nWhen there is projected content in the `footer` slot this property\nhas no effect.\n\n  * `open` {`boolean`} - Whether the dialog is opened.\n\n  * `title` {`string`} - Sets the title of the dialog.\n\n  * `returnValue` {`string`} - Sets the return value for the dialog.\n\n  * `formSubmitHandler` - ",
+      "attributes": [
+        {
+          "name": "close-on-escape",
+          "description": "`close-on-escape` {`boolean`} - Whether the dialog should be closed when pressing the 'ESCAPE' button.\n\nProperty: closeOnEscape\n\nDefault: true",
+          "valueSet": "v"
+        },
+        {
+          "name": "close-on-outside-click",
+          "description": "`close-on-outside-click` {`boolean`} - Whether the dialog should be closed when clicking outside of it.\n\nProperty: closeOnOutsideClick\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "hide-default-action",
+          "description": "`hide-default-action` {`boolean`} - Whether to hide the default action button for the dialog.\n\nWhen there is projected content in the `footer` slot this property\nhas no effect.\n\nProperty: hideDefaultAction\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "open",
+          "description": "`open` {`boolean`} - Whether the dialog is opened.\n\nProperty: open\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "title",
+          "description": "`title` {`string`} - Sets the title of the dialog.\n\nProperty: title"
+        },
+        {
+          "name": "onigcClosing",
+          "description": "`igcClosing` {} - Emitter just before the dialog is closed."
+        },
+        {
+          "name": "onigcClosed",
+          "description": "`igcClosed` {} - Emitted after closing the dialog."
+        }
+      ]
+    },
     {
       "name": "igc-dropdown-group",
       "description": "Slots:\n\n  * `label` {} - Contains the group's label.\n\n  * ` ` {} - Intended to contain the items belonging to this group.\n\nProperties:\n\n  * `tagName` {`string`} - \n\n  * `styles` - \n\n  * `parent` - \n\n  * `items` {`IgcDropdownItemComponent[]`} - All child `igc-dropdown-item`s.",