|
| 1 | +import { html, LitElement } from 'lit'; |
| 2 | +import { property } from 'lit/decorators.js'; |
| 3 | +import { addThemingController } from '../../theming/theming-controller.js'; |
| 4 | +import { registerComponent } from '../common/definitions/register.js'; |
| 5 | +import { |
| 6 | + createHighlightController, |
| 7 | + type HighlightNavigation, |
| 8 | +} from './service.js'; |
| 9 | +import { styles as shared } from './themes/shared/highlight.common.css.js'; |
| 10 | +import { all } from './themes/themes.js'; |
| 11 | + |
| 12 | +/** |
| 13 | + * The highlight component provides efficient searching and highlighting of text |
| 14 | + * projected into it via its default slot. It uses the native CSS Custom Highlight API |
| 15 | + * to apply highlight styles to matched text nodes without modifying the DOM. |
| 16 | + * |
| 17 | + * The component supports case-sensitive matching, programmatic navigation between |
| 18 | + * matches, and automatic scroll-into-view of the active match. |
| 19 | + * |
| 20 | + * @element igc-highlight |
| 21 | + * |
| 22 | + * @slot - The default slot. Place the text content you want to search and highlight here. |
| 23 | + * |
| 24 | + * @cssproperty --foreground - The text color for a highlighted text node. |
| 25 | + * @cssproperty --background - The background color for a highlighted text node. |
| 26 | + * @cssproperty --foreground-active - The text color for the active highlighted text node. |
| 27 | + * @cssproperty --background-active - The background color for the active highlighted text node. |
| 28 | + * |
| 29 | + * @example |
| 30 | + * Basic usage — wrap your text and set the `search-text` attribute: |
| 31 | + * ```html |
| 32 | + * <igc-highlight search-text="world"> |
| 33 | + * <p>Hello, world! The world is a wonderful place.</p> |
| 34 | + * </igc-highlight> |
| 35 | + * ``` |
| 36 | + * |
| 37 | + * @example |
| 38 | + * Case-sensitive search: |
| 39 | + * ```html |
| 40 | + * <igc-highlight search-text="Hello" case-sensitive> |
| 41 | + * <p>Hello hello HELLO — only the first one matches.</p> |
| 42 | + * </igc-highlight> |
| 43 | + * ``` |
| 44 | + * |
| 45 | + * @example |
| 46 | + * Navigating between matches programmatically: |
| 47 | + * ```typescript |
| 48 | + * const highlight = document.querySelector('igc-highlight'); |
| 49 | + * |
| 50 | + * highlight.searchText = 'world'; |
| 51 | + * console.log(highlight.size); // total number of matches |
| 52 | + * console.log(highlight.current); // index of the active match (0-based) |
| 53 | + * |
| 54 | + * highlight.next(); // move to the next match |
| 55 | + * highlight.previous(); // move to the previous match |
| 56 | + * highlight.setActive(2); // jump to a specific match by index |
| 57 | + * ``` |
| 58 | + * |
| 59 | + * @example |
| 60 | + * Prevent scroll-into-view when navigating: |
| 61 | + * ```typescript |
| 62 | + * const highlight = document.querySelector('igc-highlight'); |
| 63 | + * highlight.next({ preventScroll: true }); |
| 64 | + * ``` |
| 65 | + * |
| 66 | + * @example |
| 67 | + * Re-run search after dynamic content changes (e.g. lazy-loaded text): |
| 68 | + * ```typescript |
| 69 | + * const highlight = document.querySelector('igc-highlight'); |
| 70 | + * // After slotted content has been updated: |
| 71 | + * highlight.search(); |
| 72 | + * ``` |
| 73 | + */ |
| 74 | +export default class IgcHighlightComponent extends LitElement { |
| 75 | + public static readonly tagName = 'igc-highlight'; |
| 76 | + public static override styles = [shared]; |
| 77 | + |
| 78 | + /* blazorSuppress */ |
| 79 | + public static register(): void { |
| 80 | + registerComponent(IgcHighlightComponent); |
| 81 | + } |
| 82 | + |
| 83 | + //#region Internal properties and state |
| 84 | + |
| 85 | + private readonly _service = createHighlightController(this); |
| 86 | + |
| 87 | + private _caseSensitive = false; |
| 88 | + private _searchText = ''; |
| 89 | + |
| 90 | + //#endregion |
| 91 | + |
| 92 | + //#region Public properties and attributes |
| 93 | + |
| 94 | + /** |
| 95 | + * Whether to match the searched text with case sensitivity in mind. |
| 96 | + * When `true`, only exact-case occurrences of `searchText` are highlighted. |
| 97 | + * |
| 98 | + * @attr case-sensitive |
| 99 | + * @default false |
| 100 | + */ |
| 101 | + @property({ type: Boolean, reflect: true, attribute: 'case-sensitive' }) |
| 102 | + public set caseSensitive(value: boolean) { |
| 103 | + this._caseSensitive = value; |
| 104 | + this.search(); |
| 105 | + } |
| 106 | + |
| 107 | + public get caseSensitive(): boolean { |
| 108 | + return this._caseSensitive; |
| 109 | + } |
| 110 | + |
| 111 | + /** |
| 112 | + * The string to search and highlight in the DOM content of the component. |
| 113 | + * Setting this property triggers a new search automatically. |
| 114 | + * An empty string clears all highlights. |
| 115 | + * |
| 116 | + * @attr search-text |
| 117 | + */ |
| 118 | + @property({ attribute: 'search-text' }) |
| 119 | + public set searchText(value: string) { |
| 120 | + this._searchText = value; |
| 121 | + this.search(); |
| 122 | + } |
| 123 | + |
| 124 | + public get searchText(): string { |
| 125 | + return this._searchText; |
| 126 | + } |
| 127 | + |
| 128 | + /** The total number of matches found for the current `searchText`. Returns `0` when there are no matches or `searchText` is empty. */ |
| 129 | + public get size(): number { |
| 130 | + return this._service.size; |
| 131 | + } |
| 132 | + |
| 133 | + /** The zero-based index of the currently active (focused) match. Returns `0` when there are no matches. */ |
| 134 | + public get current(): number { |
| 135 | + return this._service.current; |
| 136 | + } |
| 137 | + |
| 138 | + //#endregion |
| 139 | + |
| 140 | + constructor() { |
| 141 | + super(); |
| 142 | + |
| 143 | + addThemingController(this, all, { |
| 144 | + themeChange: this._addStylesheet, |
| 145 | + }); |
| 146 | + } |
| 147 | + |
| 148 | + //#region Internal methods |
| 149 | + |
| 150 | + private _addStylesheet(): void { |
| 151 | + this._service.attachStylesheet(); |
| 152 | + } |
| 153 | + |
| 154 | + //#endregion |
| 155 | + |
| 156 | + //#region Public methods |
| 157 | + |
| 158 | + /** |
| 159 | + * Moves the active highlight to the next match. |
| 160 | + * Wraps around to the first match after the last one. |
| 161 | + * |
| 162 | + * @param options - Optional navigation options (e.g. `preventScroll`). |
| 163 | + */ |
| 164 | + public next(options?: HighlightNavigation): void { |
| 165 | + this._service.next(options); |
| 166 | + } |
| 167 | + |
| 168 | + /** |
| 169 | + * Moves the active highlight to the previous match. |
| 170 | + * Wraps around to the last match when going back from the first one. |
| 171 | + * |
| 172 | + * @param options - Optional navigation options (e.g. `preventScroll`). |
| 173 | + */ |
| 174 | + public previous(options?: HighlightNavigation): void { |
| 175 | + this._service.previous(options); |
| 176 | + } |
| 177 | + |
| 178 | + /** |
| 179 | + * Moves the active highlight to the match at the specified zero-based index. |
| 180 | + * |
| 181 | + * @param index - The zero-based index of the match to activate. |
| 182 | + * @param options - Optional navigation options (e.g. `preventScroll`). |
| 183 | + */ |
| 184 | + public setActive(index: number, options?: HighlightNavigation): void { |
| 185 | + this._service.setActive(index, options); |
| 186 | + } |
| 187 | + |
| 188 | + /** |
| 189 | + * Re-runs the highlight search based on the current `searchText` and `caseSensitive` values. |
| 190 | + * |
| 191 | + * Call this method after the slotted content changes dynamically (e.g. after lazy loading |
| 192 | + * or programmatic DOM mutations) to ensure all matches are up to date. |
| 193 | + */ |
| 194 | + public search(): void { |
| 195 | + if (this.hasUpdated) { |
| 196 | + this._service.clear(); |
| 197 | + this._service.find(this.searchText); |
| 198 | + } |
| 199 | + } |
| 200 | + |
| 201 | + //#endregion |
| 202 | + |
| 203 | + protected override render() { |
| 204 | + return html`<slot></slot>`; |
| 205 | + } |
| 206 | +} |
| 207 | + |
| 208 | +declare global { |
| 209 | + interface HTMLElementTagNameMap { |
| 210 | + 'igc-highlight': IgcHighlightComponent; |
| 211 | + } |
| 212 | +} |
0 commit comments