igniteui-webcomponents 7.3.0 → 7.3.2

package/internals/utils/events.d.ts

@@ -19,6 +19,8 @@ export declare function getElementFromPath<K extends keyof HTMLElementTagNameMap
 export declare function getElementFromPath<T extends Element>(predicate: string | ((element: Element) => boolean), event: Event): T | undefined;
 /** Reusable event listener that just stops the propagation of the event. */
 export declare function stopPropagation(event: Event): void;
+/** Reusable event listener that just prevents the default action of the event. */
+export declare function preventDefault(event: Event): void;
 /**
  * Returns whether focus has moved outside of the given host element for
  * a `focusout`/`blur` event, that is the element gaining focus is not

package/internals/utils/events.js

@@ -10,6 +10,9 @@ export function getElementFromPath(predicate, event) {
 export function stopPropagation(event) {
     event.stopPropagation();
 }
+export function preventDefault(event) {
+    event.preventDefault();
+}
 export function focusLeftHost(host, event) {
     return !host.contains(event.relatedTarget);
 }

package/internals/utils/events.js.map

@@ -1 +1 @@
-{"version":3,"file":"events.js","sourceRoot":"","sources":["../../../src/internals/utils/events.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AA2B7D,MAAM,UAAU,kBAAkB,CAChC,SAAmD,EACnD,KAAY;IAEZ,MAAM,IAAI,GAAG,QAAQ,CAAC,SAAS,CAAC;QAC9B,CAAC,CAAC,CAAC,CAAU,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC;QACtC,CAAC,CAAC,CAAC,CAAU,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAEjC,OAAO,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,CAAC,IAAI,CAC7C,CAAC,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,CACjB,CAAC;AAC3B,CAAC;AAGD,MAAM,UAAU,eAAe,CAAC,KAAY;IAC1C,KAAK,CAAC,eAAe,EAAE,CAAC;AAC1B,CAAC;AAOD,MAAM,UAAU,aAAa,CAAC,IAAa,EAAE,KAAiB;IAC5D,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,aAA4B,CAAC,CAAC;AAC5D,CAAC;AAMD,MAAM,UAAU,oBAAoB,CAClC,OAAgB,EAChB,KAAa,EACb,QAA4C,EAC5C,OAA2C;IAE3C,MAAM,OAAO,GAAG,IAAI,OAAO,CAAC,QAAQ,CAAC,CAAC;IACtC,MAAM,OAAO,GAAG,CAAC,GAAU,EAAE,EAAE;QAC7B,MAAM,OAAO,GAAG,OAAO,CAAC,KAAK,EAAE,CAAC;QAEhC,IAAI,CAAC,OAAO,EAAE,CAAC;YAEb,OAAO,CAAC,mBAAmB,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;YACrD,OAAO;QACT,CAAC;QAED,OAAO,qBAAqB,CAAC,OAAO,CAAC;YACnC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,GAAG,CAAC;YAC1B,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,OAAO,CAAC,gBAAgB,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;AACpD,CAAC;AAWD,MAAM,UAAU,oBAAoB,CAGlC,MAAmB,EACnB,SAAY,EACZ,OAA2C,EAC3C,OAA2C;IAE3C,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO;IACT,CAAC;IAED,MAAM,YAAY,GAAG,CAAC,KAAY,EAAE,EAAE,CACpC,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,KAAuB,CAAC,CAAC;IAEhD,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,YAAY,EAAE,OAAO,CAAC,CAAC;AAC5D,CAAC","sourcesContent":["import { isServer } from 'lit';\nimport { isElement } from './dom.js';\nimport { isEventListenerObject, isString } from './types.js';\n\n/**\n * Finds the first element in the event's composed path that matches the provided predicate, which can be either a string selector or a function.\n *\n * @param predicate - A string representing a CSS selector or a function that takes an Element and returns a boolean indicating a match.\n * @param event - The event whose composed path will be searched for the matching element.\n * @returns The first Element that matches the predicate, or undefined if no match is found.\n *\n * @example\n * ```typescript\n * // Using a string selector\n * const button = getElementFromPath('button', event);\n * ```\n * ```typescript\n * // Using a predicate function\n * const customElement = getElementFromPath((el) => el.tagName === 'MY-ELEMENT', event);\n * ```\n */\nexport function getElementFromPath<K extends keyof HTMLElementTagNameMap>(\n  predicate: K,\n  event: Event\n): HTMLElementTagNameMap[K] | undefined;\nexport function getElementFromPath<T extends Element>(\n  predicate: string | ((element: Element) => boolean),\n  event: Event\n): T | undefined;\nexport function getElementFromPath(\n  predicate: string | ((element: Element) => boolean),\n  event: Event\n) {\n  const func = isString(predicate)\n    ? (e: Element) => e.matches(predicate)\n    : (e: Element) => predicate(e);\n\n  return Iterator.from(event.composedPath()).find(\n    (item) => isElement(item) && func(item)\n  ) as Element | undefined;\n}\n\n/** Reusable event listener that just stops the propagation of the event. */\nexport function stopPropagation(event: Event): void {\n  event.stopPropagation();\n}\n\n/**\n * Returns whether focus has moved outside of the given host element for\n * a `focusout`/`blur` event, that is the element gaining focus is not\n * a descendant of the host.\n */\nexport function focusLeftHost(host: Element, event: FocusEvent): boolean {\n  return !host.contains(event.relatedTarget as Node | null);\n}\n\n/**\n * Adds an event listener that holds only a weak reference to the passed\n * `listener`, thus not preventing it from being garbage collected.\n */\nexport function addWeakEventListener(\n  element: Element,\n  event: string,\n  listener: EventListenerOrEventListenerObject,\n  options?: AddEventListenerOptions | boolean\n): void {\n  const weakRef = new WeakRef(listener);\n  const wrapped = (evt: Event) => {\n    const handler = weakRef.deref();\n\n    if (!handler) {\n      // The listener has been garbage collected - detach the wrapper as well\n      element.removeEventListener(event, wrapped, options);\n      return;\n    }\n\n    return isEventListenerObject(handler)\n      ? handler.handleEvent(evt)\n      : handler(evt);\n  };\n\n  element.addEventListener(event, wrapped, options);\n}\n\ntype EventTypeOf<T extends keyof HTMLElementEventMap | keyof WindowEventMap> =\n  (HTMLElementEventMap & WindowEventMap)[T];\n\n/**\n * Safely adds an event listener to an HTMLElement, automatically handling\n * server-side rendering environments by doing nothing if `isServer` is true.\n * This function also correctly binds the `handler`'s `this` context to the `target` element\n * and ensures proper event type inference.\n */\nexport function addSafeEventListener<\n  E extends keyof HTMLElementEventMap | keyof WindowEventMap,\n>(\n  target: HTMLElement,\n  eventName: E,\n  handler: (event: EventTypeOf<E>) => unknown,\n  options?: boolean | AddEventListenerOptions\n): void {\n  if (isServer) {\n    return;\n  }\n\n  const boundHandler = (event: Event) =>\n    handler.call(target, event as EventTypeOf<E>);\n\n  target.addEventListener(eventName, boundHandler, options);\n}\n"]}
+{"version":3,"file":"events.js","sourceRoot":"","sources":["../../../src/internals/utils/events.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AA2B7D,MAAM,UAAU,kBAAkB,CAChC,SAAmD,EACnD,KAAY;IAEZ,MAAM,IAAI,GAAG,QAAQ,CAAC,SAAS,CAAC;QAC9B,CAAC,CAAC,CAAC,CAAU,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC;QACtC,CAAC,CAAC,CAAC,CAAU,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAEjC,OAAO,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,CAAC,IAAI,CAC7C,CAAC,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,CACjB,CAAC;AAC3B,CAAC;AAGD,MAAM,UAAU,eAAe,CAAC,KAAY;IAC1C,KAAK,CAAC,eAAe,EAAE,CAAC;AAC1B,CAAC;AAGD,MAAM,UAAU,cAAc,CAAC,KAAY;IACzC,KAAK,CAAC,cAAc,EAAE,CAAC;AACzB,CAAC;AAOD,MAAM,UAAU,aAAa,CAAC,IAAa,EAAE,KAAiB;IAC5D,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,aAA4B,CAAC,CAAC;AAC5D,CAAC;AAMD,MAAM,UAAU,oBAAoB,CAClC,OAAgB,EAChB,KAAa,EACb,QAA4C,EAC5C,OAA2C;IAE3C,MAAM,OAAO,GAAG,IAAI,OAAO,CAAC,QAAQ,CAAC,CAAC;IACtC,MAAM,OAAO,GAAG,CAAC,GAAU,EAAE,EAAE;QAC7B,MAAM,OAAO,GAAG,OAAO,CAAC,KAAK,EAAE,CAAC;QAEhC,IAAI,CAAC,OAAO,EAAE,CAAC;YAEb,OAAO,CAAC,mBAAmB,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;YACrD,OAAO;QACT,CAAC;QAED,OAAO,qBAAqB,CAAC,OAAO,CAAC;YACnC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,GAAG,CAAC;YAC1B,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,OAAO,CAAC,gBAAgB,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;AACpD,CAAC;AAWD,MAAM,UAAU,oBAAoB,CAGlC,MAAmB,EACnB,SAAY,EACZ,OAA2C,EAC3C,OAA2C;IAE3C,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO;IACT,CAAC;IAED,MAAM,YAAY,GAAG,CAAC,KAAY,EAAE,EAAE,CACpC,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,KAAuB,CAAC,CAAC;IAEhD,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,YAAY,EAAE,OAAO,CAAC,CAAC;AAC5D,CAAC","sourcesContent":["import { isServer } from 'lit';\nimport { isElement } from './dom.js';\nimport { isEventListenerObject, isString } from './types.js';\n\n/**\n * Finds the first element in the event's composed path that matches the provided predicate, which can be either a string selector or a function.\n *\n * @param predicate - A string representing a CSS selector or a function that takes an Element and returns a boolean indicating a match.\n * @param event - The event whose composed path will be searched for the matching element.\n * @returns The first Element that matches the predicate, or undefined if no match is found.\n *\n * @example\n * ```typescript\n * // Using a string selector\n * const button = getElementFromPath('button', event);\n * ```\n * ```typescript\n * // Using a predicate function\n * const customElement = getElementFromPath((el) => el.tagName === 'MY-ELEMENT', event);\n * ```\n */\nexport function getElementFromPath<K extends keyof HTMLElementTagNameMap>(\n  predicate: K,\n  event: Event\n): HTMLElementTagNameMap[K] | undefined;\nexport function getElementFromPath<T extends Element>(\n  predicate: string | ((element: Element) => boolean),\n  event: Event\n): T | undefined;\nexport function getElementFromPath(\n  predicate: string | ((element: Element) => boolean),\n  event: Event\n) {\n  const func = isString(predicate)\n    ? (e: Element) => e.matches(predicate)\n    : (e: Element) => predicate(e);\n\n  return Iterator.from(event.composedPath()).find(\n    (item) => isElement(item) && func(item)\n  ) as Element | undefined;\n}\n\n/** Reusable event listener that just stops the propagation of the event. */\nexport function stopPropagation(event: Event): void {\n  event.stopPropagation();\n}\n\n/** Reusable event listener that just prevents the default action of the event. */\nexport function preventDefault(event: Event): void {\n  event.preventDefault();\n}\n\n/**\n * Returns whether focus has moved outside of the given host element for\n * a `focusout`/`blur` event, that is the element gaining focus is not\n * a descendant of the host.\n */\nexport function focusLeftHost(host: Element, event: FocusEvent): boolean {\n  return !host.contains(event.relatedTarget as Node | null);\n}\n\n/**\n * Adds an event listener that holds only a weak reference to the passed\n * `listener`, thus not preventing it from being garbage collected.\n */\nexport function addWeakEventListener(\n  element: Element,\n  event: string,\n  listener: EventListenerOrEventListenerObject,\n  options?: AddEventListenerOptions | boolean\n): void {\n  const weakRef = new WeakRef(listener);\n  const wrapped = (evt: Event) => {\n    const handler = weakRef.deref();\n\n    if (!handler) {\n      // The listener has been garbage collected - detach the wrapper as well\n      element.removeEventListener(event, wrapped, options);\n      return;\n    }\n\n    return isEventListenerObject(handler)\n      ? handler.handleEvent(evt)\n      : handler(evt);\n  };\n\n  element.addEventListener(event, wrapped, options);\n}\n\ntype EventTypeOf<T extends keyof HTMLElementEventMap | keyof WindowEventMap> =\n  (HTMLElementEventMap & WindowEventMap)[T];\n\n/**\n * Safely adds an event listener to an HTMLElement, automatically handling\n * server-side rendering environments by doing nothing if `isServer` is true.\n * This function also correctly binds the `handler`'s `this` context to the `target` element\n * and ensures proper event type inference.\n */\nexport function addSafeEventListener<\n  E extends keyof HTMLElementEventMap | keyof WindowEventMap,\n>(\n  target: HTMLElement,\n  eventName: E,\n  handler: (event: EventTypeOf<E>) => unknown,\n  options?: boolean | AddEventListenerOptions\n): void {\n  if (isServer) {\n    return;\n  }\n\n  const boundHandler = (event: Event) =>\n    handler.call(target, event as EventTypeOf<E>);\n\n  target.addEventListener(eventName, boundHandler, options);\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-webcomponents",
-  "version": "7.3.0",
+  "version": "7.3.2",
   "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": "MIT",

package/skills/README.md

@@ -15,6 +15,7 @@ Skills are structured instructions that help AI agents understand and execute co
 | [igniteui-wc-customize-component-theme](./igniteui-wc-customize-component-theme/SKILL.md)   | Customize styling using CSS custom properties, parts, and theming system           | Applying custom brand colors/styles   |
 | [igniteui-wc-generate-from-image-design](./igniteui-wc-generate-from-image-design/SKILL.md) | Implement a view from a screenshot or mockup using Ignite UI Web Components        | Converting a design image into UI     |
 | [igniteui-wc-optimize-bundle-size](./igniteui-wc-optimize-bundle-size/SKILL.md)             | Reduce bundle size by importing only needed components and lazy loading            | Optimizing production performance     |
+| [igniteui-wc-migrate-grid-lite-to-premium](./igniteui-wc-migrate-grid-lite-to-premium/SKILL.md) | Migrate from Grid Lite to the premium Data Grid                                 | Adopting enterprise grid features     |
 
 ## How to Use
 

package/skills/igniteui-wc-generate-from-image-design/references/gotchas.md

@@ -134,6 +134,27 @@ For core UI component theming, prefer `create_component_theme` and apply the ret
 ### Grid theming is package-specific
 `igniteui-grid-lite` and the premium grid packages do not map to Angular's `igx-grid__*` internal class structure. Use `get_component_design_tokens("grid")`, the exact grid package docs, and exposed tokens or parts for the package present in the workspace.
 
+### `igniteui-webcomponents-grids` theme must be injected into the shadow root
+
+A bare CSS import (`import '...material.css'`) lands in the document head and selector rules outside a Shadow root never reach inside it. When the grid is rendered inside a Shadow root, the theme must be injected there too — it targets the grid's internal structure and elements. Without it, internal grid elements render with broken dimensions; checkboxes can expand to 1,100 px wide and collapse the entire grid UI.
+
+Import the theme as an inline string (requires bundler support for `?inline`, e.g. Vite) and inject it as a `<style>` tag inside the shadow root. The exact approach depends on the framework — for a LitElement component, render it at the top of `render()`:
+
+```typescript
+import { html } from 'lit';
+import gridTheme from 'igniteui-webcomponents-grids/grids/themes/light/material.css?inline';
+
+// LitElement example — adapt to your Shadow DOM approach (Stencil, FAST, vanilla attachShadow, etc.)
+render() {
+  return html`
+    <style>${gridTheme}</style>
+    <igc-grid ...></igc-grid>
+  `;
+}
+```
+
+Apply the same `?inline` + `<style>` approach for dark or other theme variants.
+
 ### Read luminance warnings from palette generation
 If palette generation returns a luminance warning for a generated surface, do not ignore it. If the design needs multiple surface depths, use `create_custom_palette` or define semantic CSS variables such as `--surface-1` and `--surface-2` in the main stylesheet instead of relying on a single generated surface color.
 

package/skills/igniteui-wc-integrate-with-framework/SKILL.md

@@ -96,7 +96,8 @@ Before loading a reference, identify the target framework from the project conte
 - No major framework found in `package.json`
 - Plain `.html` files reference a `<script type="module">`
 - Entry point is a plain `.js` or `.ts` file with no framework imports
-- User explicitly asks for vanilla JS or HTML integration
+- `package.json` contains "lit" — start with the vanilla JS reference; if using Shadow DOM, follow the Shadow root theming note for grids
+- User explicitly asks for vanilla JS, HTML, or LitElement integration
 
 → **Load:** [vanilla-js.md](./references/vanilla-js.md)
 
@@ -106,7 +107,7 @@ Before loading a reference, identify the target framework from the project conte
 
 Ask the user directly:
 
-> "What framework or platform are you using? (React, Angular, Vue 3, or Vanilla JS / HTML)"
+> "What framework or platform are you using? (React, Angular, Vue 3, Vanilla JS / HTML, or LitElement)"
 
 Then load the matching reference from the options above.
 
@@ -119,7 +120,7 @@ Then load the matching reference from the options above.
 | React | [react.md](./references/react.md) |
 | Angular | [angular.md](./references/angular.md) |
 | Vue 3 | [vue.md](./references/vue.md) |
-| Vanilla JS / HTML | [vanilla-js.md](./references/vanilla-js.md) |
+| Vanilla JS / HTML / LitElement | [vanilla-js.md](./references/vanilla-js.md) |
 
 Each reference covers:
 

package/skills/igniteui-wc-integrate-with-framework/references/vanilla-js.md

@@ -113,6 +113,20 @@ document.body.innerHTML = '<igc-button>Click</igc-button>';
 
 Ensure you import a theme CSS file in your entry point. Without it, components render unstyled.
 
+**`igniteui-webcomponents-grids` inside a Shadow root:** A bare `import '...css'` lands in the document head and never reaches inside a Shadow root — the grid's internal structure and elements receive no styles and render with incorrect dimensions. Import the theme as an inline string and inject it as a `<style>` tag inside the shadow root (requires bundler support for `?inline`, e.g. Vite). For a LitElement component:
+
+```typescript
+import { html } from 'lit';
+import gridTheme from 'igniteui-webcomponents-grids/grids/themes/light/material.css?inline';
+
+render() {
+  return html`
+    <style>${gridTheme}</style>
+    <igc-grid ...></igc-grid>
+  `;
+}
+```
+
 ## Next Steps
 
 - [Optimize bundle size](../../igniteui-wc-optimize-bundle-size/SKILL.md) — import only the components you use

package/skills/igniteui-wc-migrate-grid-lite-to-premium/SKILL.md

@@ -108,11 +108,21 @@ import {
   IgcNoopFilteringStrategy,
 } from 'igniteui-webcomponents-grids';
 
-// Theme - change to the grids-specific path
+// Theme — import as an inline string so it can be injected into the shadow root (requires bundler support for ?inline, e.g. Vite)
 // Available: light|dark x bootstrap|material|fluent|indigo
-import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';
+import gridTheme from 'igniteui-webcomponents-grids/grids/themes/light/material.css?inline';
 ```
 
+> **Grid inside a Shadow root — required step:** A bare CSS import lands in the document head and never reaches inside a Shadow root — the grid's internal structure and elements get no styles. Inject the theme as a `<style>` tag inside the shadow root. For a LitElement component, at the top of `render()`:
+> ```typescript
+> render() {
+>   return html`
+>     <style>${gridTheme}</style>
+>     <igc-grid ...></igc-grid>
+>   `;
+> }
+> ```
+
 ## Step 3 - Update HTML Tags
 
 | Grid Lite | Premium Grid |