igniteui-webcomponents 7.0.1 → 7.1.0

package/components/highlight/service.js

@@ -0,0 +1,132 @@
+import { isServer } from 'lit';
+import { escapeRegex, iterNodes, nanoid, scrollIntoView, wrap, } from '../common/util.js';
+function* matchText(nodes, regexp) {
+    for (const node of nodes) {
+        if (node.textContent) {
+            for (const match of node.textContent.matchAll(regexp)) {
+                const [[start, end]] = match.indices;
+                yield { node, indices: [start, end] };
+            }
+        }
+    }
+}
+class HighlightService {
+    get size() {
+        return this._ranges.length;
+    }
+    get current() {
+        return this._current;
+    }
+    constructor(host) {
+        this._ranges = [];
+        this._current = 0;
+        this._host = host;
+        this._host.addController(this);
+        this._id = `igc-highlight-${nanoid()}`;
+        this._activeId = `${this._id}-active`;
+        this._styles = `
+      ::highlight(${this._id}) {
+        background-color: var(--background, var(--ig-secondary-700));
+        color: var(--foreground, var(--ig-secondary-700-contrast));
+      }
+      ::highlight(${this._activeId}) {
+        background-color: var(--background-active, var(--ig-primary-500));
+        color: var(--foreground-active, var(--ig-primary-500-contrast));
+      }`;
+        if (!isServer) {
+            this._styleSheet = new CSSStyleSheet();
+            this._styleSheet.replaceSync(this._styles);
+        }
+    }
+    hostConnected() {
+        this._createHighlightEntries();
+        this.find(this._host.searchText);
+    }
+    hostDisconnected() {
+        this._removeHighlightEntries();
+        this._removeStyleSheet();
+    }
+    _removeStyleSheet() {
+        const root = this._host.renderRoot;
+        if (this._styleSheet) {
+            root.adoptedStyleSheets = root.adoptedStyleSheets.filter((sheet) => sheet !== this._styleSheet);
+        }
+    }
+    _createHighlightEntries() {
+        this._highlight = new Highlight();
+        this._highlight.priority = 0;
+        this._activeHighlight = new Highlight();
+        this._activeHighlight.priority = 1;
+        CSS.highlights.set(this._id, this._highlight);
+        CSS.highlights.set(this._activeId, this._activeHighlight);
+    }
+    _removeHighlightEntries() {
+        CSS.highlights.delete(this._id);
+        CSS.highlights.delete(this._activeId);
+        this._ranges.length = 0;
+    }
+    _createRegex(value) {
+        return new RegExp(escapeRegex(value), this._host.caseSensitive ? 'dg' : 'dgi');
+    }
+    _updateActiveHighlight() {
+        if (this.size) {
+            this._activeHighlight.clear();
+            this._activeHighlight.add(this._ranges[this._current]);
+        }
+    }
+    _goTo(index, options) {
+        if (!this.size) {
+            return;
+        }
+        this._current = wrap(0, this.size - 1, index);
+        const range = this._ranges[this._current];
+        this._activeHighlight.clear();
+        this._activeHighlight.add(range);
+        if (!options?.preventScroll) {
+            scrollIntoView(range.commonAncestorContainer.parentElement, {
+                block: 'center',
+                inline: 'center',
+            });
+        }
+    }
+    attachStylesheet() {
+        const adoptedSheets = this._host.renderRoot
+            .adoptedStyleSheets;
+        if (this._styleSheet && !adoptedSheets.includes(this._styleSheet)) {
+            adoptedSheets.push(this._styleSheet);
+        }
+    }
+    find(value) {
+        if (!value?.trim()) {
+            return;
+        }
+        const iterator = matchText(iterNodes(this._host, { show: 'SHOW_TEXT' }), this._createRegex(value));
+        for (const { node, indices: [start, end], } of iterator) {
+            const range = new Range();
+            range.setStart(node, start);
+            range.setEnd(node, end);
+            this._ranges.push(range);
+            this._highlight.add(range);
+        }
+        this._updateActiveHighlight();
+    }
+    next(options) {
+        this._goTo(this._current + 1, options);
+    }
+    previous(options) {
+        this._goTo(this._current - 1, options);
+    }
+    setActive(index, options) {
+        this._goTo(index, options);
+    }
+    clear() {
+        this._activeHighlight.clear();
+        this._highlight.clear();
+        this._ranges.length = 0;
+        this._current = 0;
+    }
+}
+export function createHighlightController(host) {
+    return new HighlightService(host);
+}
+//# sourceMappingURL=service.js.map

package/components/highlight/service.js.map

@@ -0,0 +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/**\n * Options for controlling navigation behavior when moving the active highlight.\n */\nexport type 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!;\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"]}

package/components/highlight/themes/dark/highlight.bootstrap.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{--resting-background: var(--ig-highlight-resting-background, var(--ig-gray-200));--resting-color: var(--ig-highlight-resting-color, var(--ig-gray-200-contrast));--active-background: var(--ig-highlight-active-background, var(--ig-primary-A100));--active-color: var(--ig-highlight-active-color, var(--ig-primary-A100-contrast));--ig-theme: bootstrap;--ig-theme-variant: dark}`;
+//# sourceMappingURL=highlight.bootstrap.css.js.map

package/components/highlight/themes/dark/highlight.bootstrap.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/highlight/themes/dark/highlight.bootstrap.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,6XAA6X,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--resting-background: var(--ig-highlight-resting-background, var(--ig-gray-200));--resting-color: var(--ig-highlight-resting-color, var(--ig-gray-200-contrast));--active-background: var(--ig-highlight-active-background, var(--ig-primary-A100));--active-color: var(--ig-highlight-active-color, var(--ig-primary-A100-contrast));--ig-theme: bootstrap;--ig-theme-variant: dark}`;\n  "]}

package/components/highlight/themes/dark/highlight.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/highlight/themes/dark/highlight.fluent.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{--resting-background: var(--ig-highlight-resting-background, var(--ig-gray-200));--resting-color: var(--ig-highlight-resting-color, var(--ig-gray-200-contrast));--ig-theme: fluent;--ig-theme-variant: dark}`;
+//# sourceMappingURL=highlight.fluent.css.js.map

package/components/highlight/themes/dark/highlight.fluent.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/highlight/themes/dark/highlight.fluent.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,qNAAqN,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--resting-background: var(--ig-highlight-resting-background, var(--ig-gray-200));--resting-color: var(--ig-highlight-resting-color, var(--ig-gray-200-contrast));--ig-theme: fluent;--ig-theme-variant: dark}`;\n  "]}

package/components/highlight/themes/dark/highlight.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/highlight/themes/dark/highlight.indigo.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{--resting-background: var(--ig-highlight-resting-background, var(--ig-gray-200));--resting-color: var(--ig-highlight-resting-color, var(--ig-gray-200-contrast));--active-background: var(--ig-highlight-active-background, var(--ig-primary-500));--active-color: var(--ig-highlight-active-color, var(--ig-primary-500-contrast));--ig-theme: indigo;--ig-theme-variant: dark}`;
+//# sourceMappingURL=highlight.indigo.css.js.map

package/components/highlight/themes/dark/highlight.indigo.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/highlight/themes/dark/highlight.indigo.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,wXAAwX,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--resting-background: var(--ig-highlight-resting-background, var(--ig-gray-200));--resting-color: var(--ig-highlight-resting-color, var(--ig-gray-200-contrast));--active-background: var(--ig-highlight-active-background, var(--ig-primary-500));--active-color: var(--ig-highlight-active-color, var(--ig-primary-500-contrast));--ig-theme: indigo;--ig-theme-variant: dark}`;\n  "]}

package/components/highlight/themes/dark/highlight.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/highlight/themes/dark/highlight.material.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{--resting-background: var(--ig-highlight-resting-background, var(--ig-gray-200));--resting-color: var(--ig-highlight-resting-color, var(--ig-gray-200-contrast));--ig-theme: material;--ig-theme-variant: dark}`;
+//# sourceMappingURL=highlight.material.css.js.map

package/components/highlight/themes/dark/highlight.material.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.material.css.js","sourceRoot":"","sources":["../../../../../src/components/highlight/themes/dark/highlight.material.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,uNAAuN,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--resting-background: var(--ig-highlight-resting-background, var(--ig-gray-200));--resting-color: var(--ig-highlight-resting-color, var(--ig-gray-200-contrast));--ig-theme: material;--ig-theme-variant: dark}`;\n  "]}

package/components/highlight/themes/dark/highlight.shared.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/highlight/themes/dark/highlight.shared.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{--resting-background: var(--ig-highlight-resting-background, var(--ig-gray-200));--resting-color: var(--ig-highlight-resting-color, var(--ig-gray-200-contrast));--ig-theme-variant: dark}`;
+//# sourceMappingURL=highlight.shared.css.js.map

package/components/highlight/themes/dark/highlight.shared.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.shared.css.js","sourceRoot":"","sources":["../../../../../src/components/highlight/themes/dark/highlight.shared.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,kMAAkM,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--resting-background: var(--ig-highlight-resting-background, var(--ig-gray-200));--resting-color: var(--ig-highlight-resting-color, var(--ig-gray-200-contrast));--ig-theme-variant: dark}`;\n  "]}

package/components/highlight/themes/light/highlight.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/highlight/themes/light/highlight.bootstrap.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{--ig-theme: bootstrap;--ig-theme-variant: light}`;
+//# sourceMappingURL=highlight.bootstrap.css.js.map

package/components/highlight/themes/light/highlight.bootstrap.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/highlight/themes/light/highlight.bootstrap.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,wDAAwD,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--ig-theme: bootstrap;--ig-theme-variant: light}`;\n  "]}

package/components/highlight/themes/light/highlight.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/highlight/themes/light/highlight.fluent.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{--ig-theme: fluent;--ig-theme-variant: light}`;
+//# sourceMappingURL=highlight.fluent.css.js.map

package/components/highlight/themes/light/highlight.fluent.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/highlight/themes/light/highlight.fluent.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,qDAAqD,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--ig-theme: fluent;--ig-theme-variant: light}`;\n  "]}

package/components/highlight/themes/light/highlight.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/highlight/themes/light/highlight.indigo.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{--active-background: var(--ig-highlight-active-background, var(--ig-primary-500));--active-color: var(--ig-highlight-active-color, var(--ig-primary-500-contrast));--ig-theme: indigo;--ig-theme-variant: light}`;
+//# sourceMappingURL=highlight.indigo.css.js.map

package/components/highlight/themes/light/highlight.indigo.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/highlight/themes/light/highlight.indigo.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,wNAAwN,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--active-background: var(--ig-highlight-active-background, var(--ig-primary-500));--active-color: var(--ig-highlight-active-color, var(--ig-primary-500-contrast));--ig-theme: indigo;--ig-theme-variant: light}`;\n  "]}

package/components/highlight/themes/light/highlight.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/highlight/themes/light/highlight.material.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{--ig-theme: material;--ig-theme-variant: light}`;
+//# sourceMappingURL=highlight.material.css.js.map

package/components/highlight/themes/light/highlight.material.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.material.css.js","sourceRoot":"","sources":["../../../../../src/components/highlight/themes/light/highlight.material.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,uDAAuD,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--ig-theme: material;--ig-theme-variant: light}`;\n  "]}

package/components/highlight/themes/light/highlight.shared.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/highlight/themes/light/highlight.shared.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{--resting-background: var(--ig-highlight-resting-background, var(--ig-gray-300));--resting-color: var(--ig-highlight-resting-color, var(--ig-gray-300-contrast));--active-background: var(--ig-highlight-active-background, var(--ig-secondary-A100));--active-color: var(--ig-highlight-active-color, var(--ig-secondary-A100-contrast));--ig-theme-variant: light}`;
+//# sourceMappingURL=highlight.shared.css.js.map

package/components/highlight/themes/light/highlight.shared.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.shared.css.js","sourceRoot":"","sources":["../../../../../src/components/highlight/themes/light/highlight.shared.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,4WAA4W,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--resting-background: var(--ig-highlight-resting-background, var(--ig-gray-300));--resting-color: var(--ig-highlight-resting-color, var(--ig-gray-300-contrast));--active-background: var(--ig-highlight-active-background, var(--ig-secondary-A100));--active-color: var(--ig-highlight-active-color, var(--ig-secondary-A100-contrast));--ig-theme-variant: light}`;\n  "]}

package/components/highlight/themes/shared/highlight.common.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/highlight/themes/shared/highlight.common.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{--background: var(--resting-background);--foreground: var(--resting-color);--background-active: var(--active-background);--foreground-active: var(--active-color);display:contents}`;
+//# sourceMappingURL=highlight.common.css.js.map

package/components/highlight/themes/shared/highlight.common.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.common.css.js","sourceRoot":"","sources":["../../../../../src/components/highlight/themes/shared/highlight.common.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,2LAA2L,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--background: var(--resting-background);--foreground: var(--resting-color);--background-active: var(--active-background);--foreground-active: var(--active-color);display:contents}`;\n  "]}

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

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

package/components/highlight/themes/themes.js

@@ -0,0 +1,47 @@
+import { css } from 'lit';
+import { styles as bootstrapDark } from './dark/highlight.bootstrap.css.js';
+import { styles as fluentDark } from './dark/highlight.fluent.css.js';
+import { styles as indigoDark } from './dark/highlight.indigo.css.js';
+import { styles as materialDark } from './dark/highlight.material.css.js';
+import { styles as sharedDark } from './dark/highlight.shared.css.js';
+import { styles as bootstrapLight } from './light/highlight.bootstrap.css.js';
+import { styles as fluentLight } from './light/highlight.fluent.css.js';
+import { styles as indigoLight } from './light/highlight.indigo.css.js';
+import { styles as materialLight } from './light/highlight.material.css.js';
+import { styles as sharedLight } from './light/highlight.shared.css.js';
+const light = {
+    shared: css `
+    ${sharedLight}
+  `,
+    bootstrap: css `
+    ${bootstrapLight}
+  `,
+    material: css `
+    ${materialLight}
+  `,
+    indigo: css `
+    ${indigoLight}
+  `,
+    fluent: css `
+    ${fluentLight}
+  `,
+};
+const dark = {
+    shared: css `
+    ${sharedDark}
+  `,
+    bootstrap: css `
+    ${bootstrapDark}
+  `,
+    material: css `
+    ${materialDark}
+  `,
+    indigo: css `
+    ${indigoDark}
+  `,
+    fluent: css `
+    ${fluentDark}
+  `,
+};
+export const all = { light, dark };
+//# sourceMappingURL=themes.js.map

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

@@ -0,0 +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"]}

package/components/splitter/splitter.d.ts

@@ -0,0 +1,240 @@
+import { LitElement, type PropertyValues } from 'lit';
+import type { Constructor } from '../common/mixins/constructor.js';
+import type { SplitterOrientation } from '../types.js';
+import type { IgcSplitterComponentEventMap, IgcSplitterResizeEventDetail, PanePosition } from './types.js';
+declare const IgcSplitterComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcSplitterComponentEventMap>> & Constructor<LitElement>;
+/**
+ * The `igc-splitter` component provides a resizable split-pane layout that divides the view
+ * into two panels — *start* and *end* — separated by a draggable bar.
+ *
+ * Panels can be resized by dragging the bar, using keyboard shortcuts, or collapsed/expanded
+ * using the built-in collapse buttons or the programmatic `toggle()` API.
+ * Nested splitters are supported for more complex layouts.
+ *
+ * @example
+ * ```html
+ * <!-- Basic horizontal splitter -->
+ * <igc-splitter>
+ *   <div slot="start">Start panel</div>
+ *   <div slot="end">End panel</div>
+ * </igc-splitter>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Vertical splitter with size constraints -->
+ * <igc-splitter orientation="vertical" start-min-size="100px" end-min-size="100px">
+ *   <div slot="start">Top panel</div>
+ *   <div slot="end">Bottom panel</div>
+ * </igc-splitter>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Nested splitters for a multi-pane layout -->
+ * <igc-splitter style="height: 600px;">
+ *   <igc-splitter slot="start" orientation="vertical">
+ *     <div slot="start">Top left</div>
+ *     <div slot="end">Bottom left</div>
+ *   </igc-splitter>
+ *   <div slot="end">Right panel</div>
+ * </igc-splitter>
+ * ```
+ *
+ * @example
+ * ```ts
+ * // Programmatically collapse/expand a pane
+ * const splitter = document.querySelector('igc-splitter');
+ * splitter.toggle('start'); // collapse start pane
+ * splitter.toggle('start'); // expand start pane
+ * ```
+ *
+ * ## Keyboard interactions
+ *
+ * When the splitter bar is focused:
+ *
+ * | Key | Action |
+ * |---|---|
+ * | `Arrow Left` / `Arrow Right` | Resize panes (horizontal orientation) |
+ * | `Arrow Up` / `Arrow Down` | Resize panes (vertical orientation) |
+ * | `Home` | Snap start pane to its minimum size |
+ * | `End` | Snap start pane to its maximum size |
+ * | `Ctrl + Arrow Left` / `Ctrl + Arrow Up` | Collapse or expand the start pane |
+ * | `Ctrl + Arrow Right` / `Ctrl + Arrow Down` | Collapse or expand the end pane |
+ *
+ * @element igc-splitter
+ *
+ * @fires igcResizeStart - Emitted once when a resize operation begins (pointer drag or keyboard).
+ * @fires igcResizing - Emitted continuously while a pane is being resized.
+ * @fires igcResizeEnd - Emitted once when a resize operation completes.
+ *
+ * @slot start - Content projected into the start (left/top) panel.
+ * @slot end - Content projected into the end (right/bottom) panel.
+ *
+ * @csspart splitter-bar - The resizable bar element between the two panels.
+ * @csspart drag-handle - The drag handle icon/element on the splitter bar.
+ * @csspart start-pane - The container for the start panel content.
+ * @csspart end-pane - The container for the end panel content.
+ * @csspart start-collapse-btn - The button to collapse the start panel.
+ * @csspart end-collapse-btn - The button to collapse the end panel.
+ * @csspart start-expand-btn - The button to expand the start panel when collapsed.
+ * @csspart end-expand-btn - The button to expand the end panel when collapsed.
+ */
+export default class IgcSplitterComponent extends IgcSplitterComponent_base {
+    static readonly tagName = "igc-splitter";
+    static styles: import("lit").CSSResult[];
+    static register(): void;
+    private readonly _internals;
+    private readonly _separatorRef;
+    private _startPaneState;
+    private _endPaneState;
+    private _collapsedPane;
+    private _resizeState;
+    private readonly _base;
+    private readonly _startPane;
+    private readonly _endPane;
+    private get _separator();
+    private get _resizeDisallowed();
+    private get _isHorizontal();
+    private get _separatorCursor();
+    /**
+     * The orientation of the splitter, which determines the direction of resizing and collapsing.
+     *
+     * @attr orientation
+     * @default 'horizontal'
+     */
+    orientation: SplitterOrientation;
+    /**
+     * When true, prevents the user from collapsing either pane.
+     * This also hides the expand/collapse buttons on the splitter bar.
+     *
+     * @attr disable-collapse
+     * @default false
+     */
+    disableCollapse: boolean;
+    /**
+     * When true, prevents the user from resizing the panes by dragging the splitter bar or using keyboard shortcuts.
+     * This also hides the drag handle on the splitter bar.
+     *
+     * @attr disable-resize
+     * @default false
+     */
+    disableResize: boolean;
+    /**
+     * When true, hides the expand/collapse buttons on the splitter bar.
+     *
+     * Note that the buttons will also be hidden if `disable-collapse` is true or
+     * if a pane is currently collapsed.
+     *
+     * @attr hide-collapse-buttons
+     * @default false
+     */
+    hideCollapseButtons: boolean;
+    /**
+     * When true, hides the drag handle on the splitter bar.
+     *
+     * Note that the drag handle will also be hidden if `disable-resize` is true.
+     *
+     * @attr hide-drag-handle
+     * @default false
+     */
+    hideDragHandle: boolean;
+    /**
+     * The minimum size of the start pane.
+     *
+     * @attr start-min-size
+     */
+    set startMinSize(value: string | undefined);
+    get startMinSize(): string | undefined;
+    /**
+     * The minimum size of the end pane.
+     *
+     * @attr end-min-size
+     */
+    set endMinSize(value: string | undefined);
+    get endMinSize(): string | undefined;
+    /**
+     * The maximum size of the start pane.
+     *
+     * @attr start-max-size
+     */
+    set startMaxSize(value: string | undefined);
+    get startMaxSize(): string | undefined;
+    /**
+     * The maximum size of the end pane.
+     *
+     * @attr end-max-size
+     */
+    set endMaxSize(value: string | undefined);
+    get endMaxSize(): string | undefined;
+    /**
+     * The size of the start pane.
+     *
+     * @attr start-size
+     */
+    set startSize(value: string | undefined);
+    get startSize(): string | undefined;
+    /**
+     * The size of the end pane.
+     *
+     * @attr end-size
+     */
+    set endSize(value: string | undefined);
+    get endSize(): string | undefined;
+    constructor();
+    protected update(changed: PropertyValues<this>): void;
+    protected updated(): void;
+    private _handleBarPointerDown;
+    private _getDragDelta;
+    private _handleBarPointerMove;
+    private _handleEndDrag;
+    private _endDrag;
+    /** Toggles the collapsed state of the specified pane. */
+    toggle(position: PanePosition): void;
+    private _savePaneSizes;
+    private _restoreSizesOnExpandCollapse;
+    /** Measures the actual rendered size of a pane and returns it as a percentage of total size. */
+    private _paneRectAsPercent;
+    /** Converts a CSS size string (px or %) to a percentage of total size. */
+    private _sizeToPercent;
+    private _getStartPaneSizePercent;
+    private _getMinMaxAsPercent;
+    private _isCollapsed;
+    private _updateBarAria;
+    private _getPaneState;
+    private _isPercentageSize;
+    private _isAutoSize;
+    private _normalizeValue;
+    private _getFlex;
+    private _handleResizePanes;
+    private _preventDefaultForEvent;
+    private _resolveDelta;
+    private _handleMinMaxResize;
+    private _handleExpanderAction;
+    private _handleArrowsExpandCollapse;
+    private _resizeStart;
+    private _createPaneState;
+    private _setMinMaxInPx;
+    private _resizing;
+    private _computeSize;
+    private _resizeEnd;
+    private _rectSize;
+    private _calcNewSizes;
+    private _getTotalSize;
+    private _updatePanes;
+    private _updatePaneStyles;
+    private _setPaneMinMaxSizes;
+    private _ensureMinConstraintIsWithinBounds;
+    private _handleExpanderClick;
+    private _resolvePartNames;
+    private _renderBarControls;
+    private _renderAccessibleLabel;
+    private _renderSeparator;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export type { IgcSplitterComponentEventMap, IgcSplitterResizeEventDetail };
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-splitter': IgcSplitterComponent;
+    }
+}