Skip to content

Commit

Permalink
feat(kit): add an options token for customizing TuiHighlight (#8812)
Browse files Browse the repository at this point in the history
  • Loading branch information
al-march authored Sep 24, 2024
1 parent dc80717 commit 21a80c7
Showing 2 changed files with 28 additions and 2 deletions.
22 changes: 21 additions & 1 deletion projects/demo/src/modules/directives/highlight/index.html
Original file line number Diff line number Diff line change
@@ -4,7 +4,27 @@
type="directives"
>
<ng-template pageTab>
<p>Directive is used to highlight text in element</p>
<p>Directive is used to highlight text in element.</p>

<p>
You can configure the directive with
<code>TUI_HIGHLIGHT_OPTIONS</code>
token.
<br />
Allowed options:
</p>
<dl>
<dt>
<strong>highlightColor:</strong>
</dt>
<dd>The default color for the highlight.</dd>
</dl>

<p class="tui-space_bottom-0">
Use function
<code>tuiHighlightOptionsProvider</code>
to provide new value of this token.
</p>

<tui-doc-example
id="usage"
8 changes: 7 additions & 1 deletion projects/kit/directives/highlight/highlight.directive.ts
Original file line number Diff line number Diff line change
@@ -6,6 +6,11 @@ import {ResizeObserverService} from '@ng-web-apis/resize-observer';
import {svgNodeFilter} from '@taiga-ui/cdk/constants';
import {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';
import {tuiPx} from '@taiga-ui/cdk/utils/miscellaneous';
import {tuiCreateOptions} from '@taiga-ui/cdk/utils/di';

export const [TUI_HIGHLIGHT_OPTIONS, tuiHighlightOptionsProvider] = tuiCreateOptions({
highlightColor: 'var(--tui-service-selection-background)',
});

@Directive({
standalone: true,
@@ -20,6 +25,7 @@ export class TuiHighlight implements OnChanges {
private readonly el = tuiInjectElement();
private readonly renderer = inject(Renderer2);
private readonly doc = inject(DOCUMENT);

private readonly highlight: HTMLElement = this.setUpHighlight();
private readonly treeWalker = this.doc.createTreeWalker(
this.el,
@@ -31,7 +37,7 @@ export class TuiHighlight implements OnChanges {
public tuiHighlight = '';

@Input()
public tuiHighlightColor = 'var(--tui-service-selection-background)';
public tuiHighlightColor = inject(TUI_HIGHLIGHT_OPTIONS).highlightColor;

constructor() {
inject(ResizeObserverService, {self: true})

0 comments on commit 21a80c7

Please sign in to comment.