Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(kit): add an options token for customizing TuiHighlight #8812

Merged
merged 9 commits into from
Sep 24, 2024
Merged

feat(kit): add an options token for customizing TuiHighlight #8812

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
cca7762
feat(kit): add an options token for customizing TuiHighlight
al-march Sep 3, 2024
ea99443
feat(kit): fix lint errors
al-march Sep 3, 2024
23c4ab5
feat(kit): fix eslint errors
al-march Sep 11, 2024
5391e44
feat(kit): review fixes
al-march Sep 12, 2024
095753e
feat(kit): update token
al-march Sep 13, 2024
7ac086a
feat(kit): use directly { highlightColor: 'var(--tui-service-selectio…
al-march Sep 13, 2024
ae91511
feat(kit): tuiCreateOptions as const
al-march Sep 13, 2024
b15a38a
feat(kit): drop TuiHighlightOptions interface
al-march Sep 15, 2024
9156cb0
feat(kit): review fixes
al-march Sep 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 21 additions & 1 deletion projects/demo/src/modules/directives/highlight/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
8 changes: 7 additions & 1 deletion projects/kit/directives/highlight/highlight.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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})
Expand Down
Loading