feat(kit): highlight improvements

1. Adding support for multiple occurrences
2. Adding support for multiple highlights
3. Adding support for case-sensitive mode
4. Adding support for regexp

projects/demo/src/modules/directives/highlight/examples/1/index.html

@@ -4,7 +4,11 @@
 >
     Search
 </tui-input>
-<table class="tui-space_top-4">
+<table
+    class="tui-space_top-4"
+    [tuiHighlight]="search"
+    [tuiHighlightColor]="'#228B22'"
+>
     <thead>
         <tr>
             <th>Member</th>
@@ -14,11 +18,7 @@
     </thead>
     <tbody>
         <tr *ngFor="let row of rows">
-            <td
-                *ngFor="let cell of row"
-                [tuiHighlight]="search"
-                [tuiHighlightColor]="'#228B22'"
-            >
+            <td *ngFor="let cell of row">
                 {{ cell }}
             </td>
         </tr>

projects/demo/src/modules/directives/highlight/examples/2/index.html

@@ -0,0 +1,27 @@
+<tui-input
+    tuiTextfieldIconLeft="tuiIconSearchLarge"
+    [(ngModel)]="search"
+>
+    Search
+</tui-input>
+<table
+    class="tui-space_top-4"
+    [tuiHighlight]="search"
+    [tuiHighlightColor]="'#228B22'"
+    [tuiHighlightMultiOccurrences]="true"
+>
+    <thead>
+        <tr>
+            <th>Member</th>
+            <th>Nickname</th>
+            <th>Fate</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr *ngFor="let row of rows">
+            <td *ngFor="let cell of row">
+                {{ cell }}
+            </td>
+        </tr>
+    </tbody>
+</table>

projects/demo/src/modules/directives/highlight/examples/2/index.less

@@ -0,0 +1,17 @@
+:host {
+    display: block;
+}
+
+table {
+    width: 100%;
+    border-spacing: 0;
+}
+
+th,
+td {
+    text-align: left;
+    border: 1px solid var(--tui-base-03);
+    height: 3.375rem;
+    padding: 0 1rem;
+    vertical-align: middle;
+}

projects/demo/src/modules/directives/highlight/examples/2/index.ts

@@ -0,0 +1,22 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-highlight-example-2',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    encapsulation,
+})
+export class TuiHighlightExample2 {
+    search = '';
+
+    readonly rows = [
+        ['King Arthur', '-', 'Arrested'],
+        ['Sir Bedevere', 'The Wise', 'Arrested'],
+        ['Sir Lancelot', 'The Brave', 'Arrested'],
+        ['Sir Galahad', 'The Chaste', 'Killed'],
+        ['Sir Robin', 'The Not-Quite-So-Brave-As-Sir-Lancelot', 'Killed'],
+    ];
+}

projects/demo/src/modules/directives/highlight/examples/3/index.html

@@ -0,0 +1,21 @@
+<table
+    class="tui-space_top-4"
+    [tuiHighlight]="regexp"
+    [tuiHighlightColor]="'#228B22'"
+    [tuiHighlightMultiOccurrences]="true"
+>
+    <thead>
+        <tr>
+            <th>Member</th>
+            <th>Nickname</th>
+            <th>Fate</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr *ngFor="let row of rows">
+            <td *ngFor="let cell of row">
+                {{ cell }}
+            </td>
+        </tr>
+    </tbody>
+</table>

projects/demo/src/modules/directives/highlight/examples/3/index.less

@@ -0,0 +1,17 @@
+:host {
+    display: block;
+}
+
+table {
+    width: 100%;
+    border-spacing: 0;
+}
+
+th,
+td {
+    text-align: left;
+    border: 1px solid var(--tui-base-03);
+    height: 3.375rem;
+    padding: 0 1rem;
+    vertical-align: middle;
+}

projects/demo/src/modules/directives/highlight/examples/3/index.ts

@@ -0,0 +1,22 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-highlight-example-3',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    encapsulation,
+})
+export class TuiHighlightExample3 {
+    readonly rows = [
+        ['King Arthur', '-', 'Arrested'],
+        ['Sir Bedevere', 'The Wise', 'Arrested'],
+        ['Sir Lancelot', 'The Brave', 'Arrested'],
+        ['Sir Galahad', 'The Chaste', 'Killed'],
+        ['Sir Robin', 'The Not-Quite-So-Brave-As-Sir-Lancelot', 'Killed'],
+    ];
+
+    readonly regexp = [/S[a-z]+/g, /A[a-z]+/g];
+}

projects/demo/src/modules/directives/highlight/highlight.component.ts

@@ -15,4 +15,14 @@ export class ExampleTuiHighlightComponent {
         TypeScript: import('./examples/1/index.ts?raw'),
         HTML: import('./examples/1/index.html?raw'),
     };
+
+    readonly example2: TuiDocExample = {
+        TypeScript: import('./examples/2/index.ts?raw'),
+        HTML: import('./examples/2/index.html?raw'),
+    };
+
+    readonly example3: TuiDocExample = {
+        TypeScript: import('./examples/3/index.ts?raw'),
+        HTML: import('./examples/3/index.html?raw'),
+    };
 }

projects/demo/src/modules/directives/highlight/highlight.module.ts

@@ -7,6 +7,8 @@ import {TuiTextfieldControllerModule} from '@taiga-ui/core';
 import {TuiHighlightModule, TuiInputModule} from '@taiga-ui/kit';
 
 import {TuiHighlightExample1} from './examples/1';
+import {TuiHighlightExample2} from './examples/2';
+import {TuiHighlightExample3} from './examples/3';
 import {ExampleTuiHighlightComponent} from './highlight.component';
 
 @NgModule({
@@ -19,7 +21,12 @@ import {ExampleTuiHighlightComponent} from './highlight.component';
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiHighlightComponent)),
         TuiTextfieldControllerModule,
     ],
-    declarations: [ExampleTuiHighlightComponent, TuiHighlightExample1],
+    declarations: [
+        ExampleTuiHighlightComponent,
+        TuiHighlightExample1,
+        TuiHighlightExample2,
+        TuiHighlightExample3,
+    ],
     exports: [ExampleTuiHighlightComponent],
 })
 export class ExampleTuiHighlightModule {}

projects/demo/src/modules/directives/highlight/highlight.template.html

@@ -7,12 +7,28 @@
         <p>Directive is used to highlight text in element</p>
 
         <tui-doc-example
-            id="usage"
-            heading="Usage"
+            id="single-occurrence-usage"
+            heading="Single Occurrence Usage"
             [content]="example1"
         >
             <tui-highlight-example-1></tui-highlight-example-1>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="multi-occurrences-usage"
+            heading="Multi Occurrences Usage"
+            [content]="example2"
+        >
+            <tui-highlight-example-2></tui-highlight-example-2>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="regexp-usage"
+            heading="Regexp Usage"
+            [content]="example3"
+        >
+            <tui-highlight-example-3></tui-highlight-example-3>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab="Setup">

projects/kit/directives/highlight/highlight.component.ts

@@ -0,0 +1,21 @@
+import {ChangeDetectionStrategy, Component, HostBinding} from '@angular/core';
+
+@Component({
+    selector: 'tui-highlight',
+    template: '',
+    styleUrls: ['./highlight.style.less'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TuiHighlightComponent {
+    @HostBinding('style.left.px')
+    left = NaN;
+
+    @HostBinding('style.top.px')
+    top = NaN;
+
+    @HostBinding('style.width.px')
+    width = NaN;
+
+    @HostBinding('style.height.px')
+    height = NaN;
+}