igniteui-webcomponents 7.2.4 → 7.3.0-beta.0

package/components/highlight/service.js

@@ -1,5 +1,11 @@
 import { isServer } from 'lit';
-import { escapeRegex, iterNodes, nanoid, scrollIntoView, wrap, } from '../common/util.js';
+import { getRoot, iterNodes, scrollIntoView } from '#internals/utils/dom.js';
+import { wrap } from '#internals/utils/math.js';
+import { escapeRegex, nanoid } from '#internals/utils/strings.js';
+function getStyleRoot(host) {
+    const root = getRoot(host);
+    return 'adoptedStyleSheets' in root ? root : null;
+}
 function* matchText(nodes, regexp) {
     for (const node of nodes) {
         if (node.textContent) {
@@ -18,6 +24,7 @@ class HighlightService {
         return this._current;
     }
     constructor(host) {
+        this._attachedRoot = null;
         this._ranges = [];
         this._current = 0;
         this._host = host;
@@ -40,6 +47,7 @@ class HighlightService {
     }
     hostConnected() {
         this._createHighlightEntries();
+        this.attachStylesheet();
         this.find(this._host.searchText);
     }
     hostDisconnected() {
@@ -47,10 +55,11 @@ class HighlightService {
         this._removeStyleSheet();
     }
     _removeStyleSheet() {
-        const root = this._host.renderRoot;
-        if (this._styleSheet) {
+        const root = this._attachedRoot;
+        if (root && this._styleSheet) {
             root.adoptedStyleSheets = root.adoptedStyleSheets.filter((sheet) => sheet !== this._styleSheet);
         }
+        this._attachedRoot = null;
     }
     _createHighlightEntries() {
         this._highlight = new Highlight();
@@ -90,11 +99,18 @@ class HighlightService {
         }
     }
     attachStylesheet() {
-        const adoptedSheets = this._host.renderRoot
-            .adoptedStyleSheets;
-        if (this._styleSheet && !adoptedSheets.includes(this._styleSheet)) {
-            adoptedSheets.push(this._styleSheet);
+        if (!this._styleSheet) {
+            return;
+        }
+        const root = getStyleRoot(this._host);
+        if (this._attachedRoot !== root) {
+            this._removeStyleSheet();
+        }
+        if (!root || root.adoptedStyleSheets.includes(this._styleSheet)) {
+            return;
         }
+        root.adoptedStyleSheets.push(this._styleSheet);
+        this._attachedRoot = root;
     }
     find(value) {
         if (!value?.trim()) {

package/components/highlight/service.js.map

@@ -1 +1 @@
-{"version":3,"file":"service.js","sourceRoot":"","sources":["../../../src/components/highlight/service.ts"],"names":[],"mappings":"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","sourcesContent":["import { isServer, type ReactiveController } from 'lit';\nimport {\n  escapeRegex,\n  iterNodes,\n  nanoid,\n  scrollIntoView,\n  wrap,\n} from '../common/util.js';\nimport type IgcHighlightComponent from './highlight.js';\n\ntype Match = { node: Node; indices: [start: number, end: number] };\n\n/* jsonAPIPlainObject */\n/* marshalByValue */\n/**\n * Options for controlling navigation behavior when moving the active highlight.\n */\nexport interface HighlightNavigation {\n  /** If true, prevents the component from scrolling the new active match into view. */\n  preventScroll?: boolean;\n}\n\nfunction* matchText(\n  nodes: IterableIterator<Node>,\n  regexp: RegExp\n): Generator<Match> {\n  for (const node of nodes) {\n    if (node.textContent) {\n      for (const match of node.textContent.matchAll(regexp)) {\n        const [start, end] = match.indices![0]!;\n        yield { node, indices: [start, end] } satisfies Match;\n      }\n    }\n  }\n}\n\nclass HighlightService implements ReactiveController {\n  //#region Private properties\n\n  private readonly _host: IgcHighlightComponent;\n  private readonly _id: string;\n  private readonly _activeId: string;\n  private readonly _styles: string;\n  private readonly _styleSheet?: CSSStyleSheet;\n\n  private _highlight!: Highlight;\n  private _activeHighlight!: Highlight;\n  private _ranges: Range[] = [];\n\n  private _current = 0;\n\n  //#endregion\n\n  //#region Public properties\n\n  /**\n   * The total number of matches found in the component's content.\n   */\n  public get size(): number {\n    return this._ranges.length;\n  }\n\n  /**\n   * The index of the currently active match. Returns 0 if there are no matches.\n   */\n  public get current(): number {\n    return this._current;\n  }\n\n  //#endregion\n\n  constructor(host: IgcHighlightComponent) {\n    this._host = host;\n    this._host.addController(this);\n    this._id = `igc-highlight-${nanoid()}`;\n    this._activeId = `${this._id}-active`;\n\n    this._styles = `\n      ::highlight(${this._id}) {\n        background-color: var(--background, var(--ig-secondary-700));\n        color: var(--foreground, var(--ig-secondary-700-contrast));\n      }\n      ::highlight(${this._activeId}) {\n        background-color: var(--background-active, var(--ig-primary-500));\n        color: var(--foreground-active, var(--ig-primary-500-contrast));\n      }`;\n\n    if (!isServer) {\n      this._styleSheet = new CSSStyleSheet();\n      this._styleSheet.replaceSync(this._styles);\n    }\n  }\n\n  //#region Controller life-cycle\n\n  /** @internal */\n  public hostConnected(): void {\n    this._createHighlightEntries();\n    this.find(this._host.searchText);\n  }\n\n  /** @internal */\n  public hostDisconnected(): void {\n    this._removeHighlightEntries();\n    this._removeStyleSheet();\n  }\n\n  //#endregion\n\n  //#region Private methods\n\n  private _removeStyleSheet(): void {\n    const root = this._host.renderRoot as ShadowRoot;\n\n    if (this._styleSheet) {\n      root.adoptedStyleSheets = root.adoptedStyleSheets.filter(\n        (sheet) => sheet !== this._styleSheet\n      );\n    }\n  }\n\n  private _createHighlightEntries(): void {\n    this._highlight = new Highlight();\n    this._highlight.priority = 0;\n\n    this._activeHighlight = new Highlight();\n    this._activeHighlight.priority = 1;\n\n    CSS.highlights.set(this._id, this._highlight);\n    CSS.highlights.set(this._activeId, this._activeHighlight);\n  }\n\n  private _removeHighlightEntries(): void {\n    CSS.highlights.delete(this._id);\n    CSS.highlights.delete(this._activeId);\n    this._ranges.length = 0;\n  }\n\n  private _createRegex(value: string): RegExp {\n    return new RegExp(\n      escapeRegex(value),\n      this._host.caseSensitive ? 'dg' : 'dgi'\n    );\n  }\n\n  private _updateActiveHighlight(): void {\n    if (this.size) {\n      this._activeHighlight.clear();\n      this._activeHighlight.add(this._ranges[this._current]);\n    }\n  }\n\n  private _goTo(index: number, options?: HighlightNavigation): void {\n    if (!this.size) {\n      return;\n    }\n\n    this._current = wrap(0, this.size - 1, index);\n    const range = this._ranges[this._current];\n\n    this._activeHighlight.clear();\n    this._activeHighlight.add(range);\n\n    if (!options?.preventScroll) {\n      scrollIntoView(range.commonAncestorContainer.parentElement, {\n        block: 'center',\n        inline: 'center',\n      });\n    }\n  }\n\n  //#endregion\n\n  //#region Public methods\n\n  /**\n   * Attaches the service's stylesheet to the render root.\n   * Necessary for the component to apply highlight styles to its content.\n   */\n  public attachStylesheet(): void {\n    const adoptedSheets = (this._host.renderRoot as ShadowRoot)\n      .adoptedStyleSheets;\n\n    if (this._styleSheet && !adoptedSheets.includes(this._styleSheet)) {\n      adoptedSheets.push(this._styleSheet);\n    }\n  }\n\n  /**\n   * Finds matches for the given search text in the component's content and creates highlight ranges for them.\n   */\n  public find(value: string): void {\n    if (!value?.trim()) {\n      return;\n    }\n\n    const iterator = matchText(\n      iterNodes(this._host, { show: 'SHOW_TEXT' }),\n      this._createRegex(value)\n    );\n\n    for (const {\n      node,\n      indices: [start, end],\n    } of iterator) {\n      const range = new Range();\n      range.setStart(node, start);\n      range.setEnd(node, end);\n\n      this._ranges.push(range);\n      this._highlight.add(range);\n    }\n\n    this._updateActiveHighlight();\n  }\n\n  /** Moves the active state to the next match. */\n  public next(options?: HighlightNavigation): void {\n    this._goTo(this._current + 1, options);\n  }\n\n  /** Moves the active state to the previous match. */\n  public previous(options?: HighlightNavigation): void {\n    this._goTo(this._current - 1, options);\n  }\n\n  /** Moves the active state to the given index. */\n  public setActive(index: number, options?: HighlightNavigation): void {\n    this._goTo(index, options);\n  }\n\n  /** Clears highlight collections. */\n  public clear(): void {\n    this._activeHighlight.clear();\n    this._highlight.clear();\n    this._ranges.length = 0;\n    this._current = 0;\n  }\n\n  //#endregion\n}\n\nexport function createHighlightController(\n  host: IgcHighlightComponent\n): HighlightService {\n  return new HighlightService(host);\n}\n"]}
+{"version":3,"file":"service.js","sourceRoot":"","sources":["../../../src/components/highlight/service.ts"],"names":[],"mappings":"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","sourcesContent":["import { isServer, type ReactiveController } from 'lit';\nimport { getRoot, iterNodes, scrollIntoView } from '#internals/utils/dom.js';\nimport { wrap } from '#internals/utils/math.js';\nimport { escapeRegex, nanoid } from '#internals/utils/strings.js';\nimport type IgcHighlightComponent from './highlight.js';\n\ntype Match = { node: Node; indices: [start: number, end: number] };\n\n/**\n * Resolves the tree scope that must own the `::highlight()` rules.\n *\n * Highlight pseudo-element rules are tree-scoped - they only style text nodes living in the\n * same tree scope as the stylesheet. Since the component highlights slotted content, the\n * relevant scope is the host's root node (the document or an outer shadow root), *not* the\n * component's own render root. Firefox enforces this, Chromium currently does not.\n *\n * Returns `null` while the host is detached or inside a non-styleable fragment.\n */\nfunction getStyleRoot(\n  host: IgcHighlightComponent\n): (DocumentOrShadowRoot & Node) | null {\n  const root = getRoot(host);\n  return 'adoptedStyleSheets' in root ? root : null;\n}\n\n/* jsonAPIPlainObject */\n/* marshalByValue */\n/**\n * Options for controlling navigation behavior when moving the active highlight.\n */\nexport interface HighlightNavigation {\n  /** If true, prevents the component from scrolling the new active match into view. */\n  preventScroll?: boolean;\n}\n\nfunction* matchText(\n  nodes: IterableIterator<Node>,\n  regexp: RegExp\n): Generator<Match> {\n  for (const node of nodes) {\n    if (node.textContent) {\n      for (const match of node.textContent.matchAll(regexp)) {\n        const [start, end] = match.indices![0]!;\n        yield { node, indices: [start, end] } satisfies Match;\n      }\n    }\n  }\n}\n\nclass HighlightService implements ReactiveController {\n  //#region Private properties\n\n  private readonly _host: IgcHighlightComponent;\n  private readonly _id: string;\n  private readonly _activeId: string;\n  private readonly _styles: string;\n  private readonly _styleSheet?: CSSStyleSheet;\n\n  private _attachedRoot: (DocumentOrShadowRoot & Node) | null = null;\n\n  private _highlight!: Highlight;\n  private _activeHighlight!: Highlight;\n  private _ranges: Range[] = [];\n\n  private _current = 0;\n\n  //#endregion\n\n  //#region Public properties\n\n  /**\n   * The total number of matches found in the component's content.\n   */\n  public get size(): number {\n    return this._ranges.length;\n  }\n\n  /**\n   * The index of the currently active match. Returns 0 if there are no matches.\n   */\n  public get current(): number {\n    return this._current;\n  }\n\n  //#endregion\n\n  constructor(host: IgcHighlightComponent) {\n    this._host = host;\n    this._host.addController(this);\n    this._id = `igc-highlight-${nanoid()}`;\n    this._activeId = `${this._id}-active`;\n\n    this._styles = `\n      ::highlight(${this._id}) {\n        background-color: var(--background, var(--ig-secondary-700));\n        color: var(--foreground, var(--ig-secondary-700-contrast));\n      }\n      ::highlight(${this._activeId}) {\n        background-color: var(--background-active, var(--ig-primary-500));\n        color: var(--foreground-active, var(--ig-primary-500-contrast));\n      }`;\n\n    if (!isServer) {\n      this._styleSheet = new CSSStyleSheet();\n      this._styleSheet.replaceSync(this._styles);\n    }\n  }\n\n  //#region Controller life-cycle\n\n  /** @internal */\n  public hostConnected(): void {\n    this._createHighlightEntries();\n    this.attachStylesheet();\n    this.find(this._host.searchText);\n  }\n\n  /** @internal */\n  public hostDisconnected(): void {\n    this._removeHighlightEntries();\n    this._removeStyleSheet();\n  }\n\n  //#endregion\n\n  //#region Private methods\n\n  private _removeStyleSheet(): void {\n    const root = this._attachedRoot;\n\n    if (root && this._styleSheet) {\n      root.adoptedStyleSheets = root.adoptedStyleSheets.filter(\n        (sheet) => sheet !== this._styleSheet\n      );\n    }\n\n    this._attachedRoot = null;\n  }\n\n  private _createHighlightEntries(): void {\n    this._highlight = new Highlight();\n    this._highlight.priority = 0;\n\n    this._activeHighlight = new Highlight();\n    this._activeHighlight.priority = 1;\n\n    CSS.highlights.set(this._id, this._highlight);\n    CSS.highlights.set(this._activeId, this._activeHighlight);\n  }\n\n  private _removeHighlightEntries(): void {\n    CSS.highlights.delete(this._id);\n    CSS.highlights.delete(this._activeId);\n    this._ranges.length = 0;\n  }\n\n  private _createRegex(value: string): RegExp {\n    return new RegExp(\n      escapeRegex(value),\n      this._host.caseSensitive ? 'dg' : 'dgi'\n    );\n  }\n\n  private _updateActiveHighlight(): void {\n    if (this.size) {\n      this._activeHighlight.clear();\n      this._activeHighlight.add(this._ranges[this._current]);\n    }\n  }\n\n  private _goTo(index: number, options?: HighlightNavigation): void {\n    if (!this.size) {\n      return;\n    }\n\n    this._current = wrap(0, this.size - 1, index);\n    const range = this._ranges[this._current];\n\n    this._activeHighlight.clear();\n    this._activeHighlight.add(range);\n\n    if (!options?.preventScroll) {\n      scrollIntoView(range.commonAncestorContainer.parentElement, {\n        block: 'center',\n        inline: 'center',\n      });\n    }\n  }\n\n  //#endregion\n\n  //#region Public methods\n\n  /**\n   * Attaches the service's stylesheet to the tree scope of the host's slotted content.\n   * Necessary for the component to apply highlight styles to its content.\n   *\n   * Idempotent, and re-targets the stylesheet if the host has moved to another tree scope.\n   */\n  public attachStylesheet(): void {\n    if (!this._styleSheet) {\n      return;\n    }\n\n    const root = getStyleRoot(this._host);\n\n    if (this._attachedRoot !== root) {\n      this._removeStyleSheet();\n    }\n\n    if (!root || root.adoptedStyleSheets.includes(this._styleSheet)) {\n      return;\n    }\n\n    root.adoptedStyleSheets.push(this._styleSheet);\n    this._attachedRoot = root;\n  }\n\n  /**\n   * Finds matches for the given search text in the component's content and creates highlight ranges for them.\n   */\n  public find(value: string): void {\n    if (!value?.trim()) {\n      return;\n    }\n\n    const iterator = matchText(\n      iterNodes(this._host, { show: 'SHOW_TEXT' }),\n      this._createRegex(value)\n    );\n\n    for (const {\n      node,\n      indices: [start, end],\n    } of iterator) {\n      const range = new Range();\n      range.setStart(node, start);\n      range.setEnd(node, end);\n\n      this._ranges.push(range);\n      this._highlight.add(range);\n    }\n\n    this._updateActiveHighlight();\n  }\n\n  /** Moves the active state to the next match. */\n  public next(options?: HighlightNavigation): void {\n    this._goTo(this._current + 1, options);\n  }\n\n  /** Moves the active state to the previous match. */\n  public previous(options?: HighlightNavigation): void {\n    this._goTo(this._current - 1, options);\n  }\n\n  /** Moves the active state to the given index. */\n  public setActive(index: number, options?: HighlightNavigation): void {\n    this._goTo(index, options);\n  }\n\n  /** Clears highlight collections. */\n  public clear(): void {\n    this._activeHighlight.clear();\n    this._highlight.clear();\n    this._ranges.length = 0;\n    this._current = 0;\n  }\n\n  //#endregion\n}\n\nexport function createHighlightController(\n  host: IgcHighlightComponent\n): HighlightService {\n  return new HighlightService(host);\n}\n"]}

package/components/highlight/themes/themes.d.ts

@@ -1,2 +1,2 @@
-import type { Themes } from '../../../theming/types.js';
+import type { Themes } from '#theming/types.js';
 export declare const all: Themes;

package/components/highlight/themes/themes.js.map

@@ -1 +1 @@
-{"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../../src/components/highlight/themes/themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAK1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC5E,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAC1E,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAEtE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAC9E,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC5E,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAExE,MAAM,KAAK,GAAG;IACZ,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;IACD,SAAS,EAAE,GAAG,CAAA;MACV,cAAc;GACjB;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,aAAa;GAChB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;IACD,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;IACD,SAAS,EAAE,GAAG,CAAA;MACV,aAAa;GAChB;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,YAAY;GACf;IACD,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;IACD,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport type { Themes } from '../../../theming/types.js';\n\n// Dark Overrides\nimport { styles as bootstrapDark } from './dark/highlight.bootstrap.css.js';\nimport { styles as fluentDark } from './dark/highlight.fluent.css.js';\nimport { styles as indigoDark } from './dark/highlight.indigo.css.js';\nimport { styles as materialDark } from './dark/highlight.material.css.js';\nimport { styles as sharedDark } from './dark/highlight.shared.css.js';\n// Light Overrides\nimport { styles as bootstrapLight } from './light/highlight.bootstrap.css.js';\nimport { styles as fluentLight } from './light/highlight.fluent.css.js';\nimport { styles as indigoLight } from './light/highlight.indigo.css.js';\nimport { styles as materialLight } from './light/highlight.material.css.js';\nimport { styles as sharedLight } from './light/highlight.shared.css.js';\n\nconst light = {\n  shared: css`\n    ${sharedLight}\n  `,\n  bootstrap: css`\n    ${bootstrapLight}\n  `,\n  material: css`\n    ${materialLight}\n  `,\n  indigo: css`\n    ${indigoLight}\n  `,\n  fluent: css`\n    ${fluentLight}\n  `,\n};\n\nconst dark = {\n  shared: css`\n    ${sharedDark}\n  `,\n  bootstrap: css`\n    ${bootstrapDark}\n  `,\n  material: css`\n    ${materialDark}\n  `,\n  indigo: css`\n    ${indigoDark}\n  `,\n  fluent: css`\n    ${fluentDark}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}
+{"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../../src/components/highlight/themes/themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAK1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC5E,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAC1E,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAEtE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAC9E,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC5E,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAExE,MAAM,KAAK,GAAG;IACZ,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;IACD,SAAS,EAAE,GAAG,CAAA;MACV,cAAc;GACjB;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,aAAa;GAChB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;IACD,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;IACD,SAAS,EAAE,GAAG,CAAA;MACV,aAAa;GAChB;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,YAAY;GACf;IACD,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;IACD,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport type { Themes } from '#theming/types.js';\n\n// Dark Overrides\nimport { styles as bootstrapDark } from './dark/highlight.bootstrap.css.js';\nimport { styles as fluentDark } from './dark/highlight.fluent.css.js';\nimport { styles as indigoDark } from './dark/highlight.indigo.css.js';\nimport { styles as materialDark } from './dark/highlight.material.css.js';\nimport { styles as sharedDark } from './dark/highlight.shared.css.js';\n// Light Overrides\nimport { styles as bootstrapLight } from './light/highlight.bootstrap.css.js';\nimport { styles as fluentLight } from './light/highlight.fluent.css.js';\nimport { styles as indigoLight } from './light/highlight.indigo.css.js';\nimport { styles as materialLight } from './light/highlight.material.css.js';\nimport { styles as sharedLight } from './light/highlight.shared.css.js';\n\nconst light = {\n  shared: css`\n    ${sharedLight}\n  `,\n  bootstrap: css`\n    ${bootstrapLight}\n  `,\n  material: css`\n    ${materialLight}\n  `,\n  indigo: css`\n    ${indigoLight}\n  `,\n  fluent: css`\n    ${fluentLight}\n  `,\n};\n\nconst dark = {\n  shared: css`\n    ${sharedDark}\n  `,\n  bootstrap: css`\n    ${bootstrapDark}\n  `,\n  material: css`\n    ${materialDark}\n  `,\n  indigo: css`\n    ${indigoDark}\n  `,\n  fluent: css`\n    ${fluentDark}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}

package/components/icon/icon-references.d.ts

@@ -24,5 +24,6 @@
  * To get acquainted with which component uses what icon, please make sure to read the
  * [docs](https://infragistics.com/products/ignite-ui-angular/Angular/components/icon-service#internal-usage).
  */
-import type { IconReference } from './registry/types.js';
-export declare const ICON_REFERENCES: IconReference[];
+import type { IconMeta, IconThemeKey } from './registry/types.js';
+/** Resolved alias name -> theme -> target icon. */
+export declare const ICON_REFERENCES: ReadonlyMap<string, ReadonlyMap<IconThemeKey, IconMeta>>;