From 2cefdcdb1f09589c319f277f8745782f23287b17 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Fri, 16 Feb 2024 13:57:01 +0200 Subject: [PATCH] feat(text-highlight): updating docs for 17.1 --- en/components/texthighlight.md | 194 ++++++++++++++++++--------------- package-lock.json | 72 ++++++------ 2 files changed, 138 insertions(+), 128 deletions(-) diff --git a/en/components/texthighlight.md b/en/components/texthighlight.md index 757c6b0d70..67866961fe 100644 --- a/en/components/texthighlight.md +++ b/en/components/texthighlight.md @@ -6,7 +6,7 @@ _keywords: Angular TextHighlight Directive, Angular Text Highlight Directive, Ig # Angular Text Highlight Directive Overview -The [`IgxTextHighlight`]({environment:angularApiUrl}/classes/igxtexthighlightdirective.html) directive in Ignite UI for Angular is used to highlight parts of a text, providing options for case sensitive searches and to highlight only exact matches. It also allows the developer to keep an active highlight, which can be any of the already highlighted parts. +The [`IgxTextHighlightDirective`]({environment:angularApiUrl}/classes/igxtexthighlightdirective.html) and `IgxTextHighlightService` in Ignite UI for Angular are used to highlight parts of a text, providing options for case sensitive searches and to highlight only exact matches. They allow the developer to keep an active highlight, which can be any of the already highlighted parts. ## Angular Text Highlight Directive Example @@ -49,8 +49,8 @@ Alternatively, as of `16.0.0` you can import the `IgxTextHighlightDirective` as ```typescript // home.component.ts -import { IgxTextHighlightDirective } from 'igniteui-angular'; -// import { IgxTextHighlightDirective } from '@infragistics/igniteui-angular'; for licensed package +import { IgxTextHighlightDirective, IgxTextHighlightService } from 'igniteui-angular'; +// import { IgxTextHighlightDirective, IgxTextHighlightService } from '@infragistics/igniteui-angular'; for licensed package @Component({ selector: 'app-home', @@ -67,10 +67,12 @@ import { IgxTextHighlightDirective } from 'igniteui-angular'; standalone: true, imports: [IgxTextHighlightDirective] }) -export class HomeComponent {} +export class HomeComponent { + constructor(public textHighlightService: IgxTextHighlightService) {} +} ``` -Now that you have the Ignite UI for Angular Text Highlight module or directive imported, you can start using the `igxTextHighlight` directive. +Now that you have the Ignite UI for Angular Text Highlight module or directive imported, you can start using the `igxTextHighlight`. ## Using the Angular Text Highlight Directive @@ -131,78 +133,89 @@ Then, we will add a div with text and the IgxTextHighlight directive. Note that, In the .ts file of our component first we need to add the following fields, that are used for bindings in our component's template: ``` typescript -public html = '...'; - -@ViewChild(IgxTextHighlightDirective, {read: IgxTextHighlightDirective}) -public highlight: IgxTextHighlightDirective; +@Component({ + ... +}) +export class HomeComponent { + public html = '...'; -public searchText: string = ''; -public matchCount: number = 0; -public caseSensitive: boolean = false; -public index: number = 0; + @ViewChild(IgxTextHighlightDirective, {read: IgxTextHighlightDirective}) + public highlight: IgxTextHighlightDirective; + public searchText: string = ''; + public matchCount: number = 0; + public caseSensitive: boolean = false; + public index: number = 0; -public get canMoveHighlight() { - return this.matchCount > 1; + public get canMoveHighlight() { + return this.matchCount > 1; + } } ``` Then we need to add the following methods which will allow the user to apply the highlights for the text they have typed in the search box and to move the active highlight around. ``` typescript -public searchKeyDown(ev) { - if (this.searchText) { - if (ev.key === 'Enter' || ev.key === 'ArrowDown' || ev.key === 'ArrowRight') { - ev.preventDefault(); - this.findNext(); - } else if (ev.key === 'ArrowUp' || ev.key === 'ArrowLeft') { - ev.preventDefault(); - this.findPrev(); +@Component({ + ... +}) +export class HomeComponent { + constructor(public textHighlightService: IgxTextHighlightService) {} + + public searchKeyDown(ev) { + if (this.searchText) { + if (ev.key === 'Enter' || ev.key === 'ArrowDown' || ev.key === 'ArrowRight') { + ev.preventDefault(); + this.findNext(); + } else if (ev.key === 'ArrowUp' || ev.key === 'ArrowLeft') { + ev.preventDefault(); + this.findPrev(); + } } } -} - -public onTextboxChange() { - this.index = 0; - this.find(0); -} - -public updateSearch() { - this.caseSensitive = !this.caseSensitive; - this.find(0); -} -public clearSearch() { - this.searchText = ''; - this.find(0); -} + public onTextboxChange() { + this.index = 0; + this.find(0); + } -private findNext() { - this.find(1); -} + public updateSearch() { + this.caseSensitive = !this.caseSensitive; + this.find(0); + } -private findPrev() { - this.find(-1); -} + public clearSearch() { + this.searchText = ''; + this.find(0); + } -private find(increment: number) { - if (this.searchText) { - this.matchCount = this.highlight.highlight(this.searchText, this.caseSensitive); - this.index += increment; + private findNext() { + this.find(1); + } - this.index = this.index < 0 ? this.matchCount - 1 : this.index; - this.index = this.index > this.matchCount - 1 ? 0 : this.index; + private findPrev() { + this.find(-1); + } - if (this.matchCount) { - IgxTextHighlightDirective.setActiveHighlight('group1', { - columnIndex: 0, - index: this.index, - page: 0, - rowIndex: 0 - }); + private find(increment: number) { + if (this.searchText) { + this.matchCount = this.highlight.highlight(this.searchText, this.caseSensitive); + this.index += increment; + + this.index = this.index < 0 ? this.matchCount - 1 : this.index; + this.index = this.index > this.matchCount - 1 ? 0 : this.index; + + if (this.matchCount) { + this.textHighlightService.setActiveHighlight('group1', { + columnIndex: 0, + index: this.index, + page: 0, + rowIndex: 0 + }); + } + } else { + this.highlight.clearHighlight(); } - } else { - this.highlight.clearHighlight(); } } ``` @@ -252,44 +265,51 @@ public highlights; All the rest of the code in the .ts file is identical to the single element example with the exception of the find method. Changes to this method are necessary since we now have multiple elements, but the code there can be used regardless of the number of TextHighlight directives you have on your page. ```typescript -private find(increment: number) { - if (this.searchText) { - let count = 0; - const matchesArray = []; +@Component({ + ... +}) +export class HomeComponent { + constructor(public textHighlightService: IgxTextHighlightService) {} - this.highlights.forEach((h) => { - count += h.highlight(this.searchText, this.caseSensitive); - matchesArray.push(count); - }); + private find(increment: number) { + if (this.searchText) { + let count = 0; + const matchesArray = []; - this.matchCount = count; + this.highlights.forEach((h) => { + count += h.highlight(this.searchText, this.caseSensitive); + matchesArray.push(count); + }); + + this.matchCount = count; - this.index += increment; - this.index = this.index < 0 ? this.matchCount - 1 : this.index; - this.index = this.index > this.matchCount - 1 ? 0 : this.index; + this.index += increment; + this.index = this.index < 0 ? this.matchCount - 1 : this.index; + this.index = this.index > this.matchCount - 1 ? 0 : this.index; - if (this.matchCount) { - let row; + if (this.matchCount) { + let row; - for (let i = 0; i < matchesArray.length; i++) { - if (this.index < matchesArray[i]) { - row = i; - break; + for (let i = 0; i < matchesArray.length; i++) { + if (this.index < matchesArray[i]) { + row = i; + break; + } } - } - const actualIndex = row === 0 ? this.index : this.index - matchesArray[row - 1]; + const actualIndex = row === 0 ? this.index : this.index - matchesArray[row - 1]; - IgxTextHighlightDirective.setActiveHighlight('group1', { - index: actualIndex, - rowIndex: row + this.textHighlightService.setActiveHighlight('group1', { + index: actualIndex, + rowIndex: row + }); + } + } else { + this.highlights.forEach((h) => { + h.clearHighlight(); }); + this.matchCount = 0; } - } else { - this.highlights.forEach((h) => { - h.clearHighlight(); - }); - this.matchCount = 0; } } ``` diff --git a/package-lock.json b/package-lock.json index 75a5ce96ec..aa48a31074 100644 --- a/package-lock.json +++ b/package-lock.json @@ -193,6 +193,7 @@ "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, "dependencies": { "color-convert": "^2.0.1" }, @@ -552,7 +553,8 @@ "node_modules/balanced-match": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", + "dev": true }, "node_modules/base": { "version": "0.11.2", @@ -680,6 +682,7 @@ "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dev": true, "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -875,6 +878,7 @@ "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" @@ -1080,6 +1084,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, "dependencies": { "color-name": "~1.1.4" }, @@ -1090,7 +1095,8 @@ "node_modules/color-name": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true }, "node_modules/color-support": { "version": "1.1.3", @@ -1116,7 +1122,8 @@ "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", + "dev": true }, "node_modules/concat-stream": { "version": "1.6.2", @@ -3394,7 +3401,8 @@ "node_modules/ini": { "version": "1.3.8", "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz", - "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==" + "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", + "dev": true }, "node_modules/interpret": { "version": "1.4.0", @@ -4321,6 +4329,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, "dependencies": { "brace-expansion": "^1.1.7" }, @@ -4639,10 +4648,6 @@ "node": ">=0.1.90" } }, - "node_modules/npm/node_modules/@gar/promisify": { - "version": "1.1.3", - "license": "MIT" - }, "node_modules/npm/node_modules/@isaacs/cliui": { "version": "8.0.2", "inBundle": true, @@ -4857,17 +4862,6 @@ "node": "^14.17.0 || ^16.13.0 || >=18.0.0" } }, - "node_modules/npm/node_modules/@npmcli/move-file": { - "version": "2.0.1", - "license": "MIT", - "dependencies": { - "mkdirp": "^1.0.4", - "rimraf": "^3.0.2" - }, - "engines": { - "node": "^12.13.0 || ^14.15.0 || >=16.0.0" - } - }, "node_modules/npm/node_modules/@npmcli/name-from-folder": { "version": "2.0.0", "inBundle": true, @@ -5725,10 +5719,6 @@ "node": ">=8" } }, - "node_modules/npm/node_modules/infer-owner": { - "version": "1.0.4", - "license": "ISC" - }, "node_modules/npm/node_modules/inflight": { "version": "1.0.6", "inBundle": true, @@ -8991,6 +8981,7 @@ "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, "dependencies": { "has-flag": "^4.0.0" }, @@ -9002,6 +8993,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, "engines": { "node": ">=8" } @@ -9809,6 +9801,7 @@ "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, "requires": { "color-convert": "^2.0.1" } @@ -10090,7 +10083,8 @@ "balanced-match": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", + "dev": true }, "base": { "version": "0.11.2", @@ -10190,6 +10184,7 @@ "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dev": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -10349,6 +10344,7 @@ "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, "requires": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" @@ -10508,6 +10504,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, "requires": { "color-name": "~1.1.4" } @@ -10515,7 +10512,8 @@ "color-name": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true }, "color-support": { "version": "1.1.3", @@ -10538,7 +10536,8 @@ "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", + "dev": true }, "concat-stream": { "version": "1.6.2", @@ -12435,7 +12434,8 @@ "ini": { "version": "1.3.8", "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz", - "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==" + "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", + "dev": true }, "interpret": { "version": "1.4.0", @@ -13169,6 +13169,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, "requires": { "brace-expansion": "^1.1.7" } @@ -13376,9 +13377,6 @@ "bundled": true, "optional": true }, - "@gar/promisify": { - "version": "1.1.3" - }, "@isaacs/cliui": { "version": "8.0.2", "bundled": true, @@ -13530,13 +13528,6 @@ "semver": "^7.3.5" } }, - "@npmcli/move-file": { - "version": "2.0.1", - "requires": { - "mkdirp": "^1.0.4", - "rimraf": "^3.0.2" - } - }, "@npmcli/name-from-folder": { "version": "2.0.0", "bundled": true @@ -14057,9 +14048,6 @@ "version": "4.0.0", "bundled": true }, - "infer-owner": { - "version": "1.0.4" - }, "inflight": { "version": "1.0.6", "bundled": true, @@ -16436,6 +16424,7 @@ "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, "requires": { "has-flag": "^4.0.0" }, @@ -16443,7 +16432,8 @@ "has-flag": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==" + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true } } },