@taiga-ui/kit/fesm2022/taiga-ui-kit-directives-highlight.mjs

Taiga UI Angular main components kit

import { DOCUMENT } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, input, Directive } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { WaResizeObserverService } from '@ng-web-apis/resize-observer';
import { svgNodeFilter } from '@taiga-ui/cdk/constants';
import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { tuiPx } from '@taiga-ui/cdk/utils/miscellaneous';

const [TUI_HIGHLIGHT_OPTIONS, tuiHighlightOptionsProvider] = tuiCreateOptions({
    highlightColor: 'var(--tui-service-selection-background)',
});
class TuiHighlight {
    constructor() {
        this.el = tuiInjectElement();
        this.options = inject(TUI_HIGHLIGHT_OPTIONS);
        this.doc = inject(DOCUMENT);
        this.highlight = this.setUpHighlight();
        this.treeWalker = this.doc.createTreeWalker(this.el, NodeFilter.SHOW_TEXT, svgNodeFilter);
        this.tuiHighlight = input('');
        this.tuiHighlightColor = input(this.options.highlightColor);
        inject(WaResizeObserverService, { self: true })
            .pipe(takeUntilDestroyed())
            .subscribe(() => this.updateStyles());
    }
    ngOnChanges() {
        this.updateStyles();
    }
    get match() {
        return this.indexOf(this.el.textContent) !== -1;
    }
    updateStyles() {
        this.highlight.style.display = 'none';
        if (!this.match) {
            return;
        }
        this.treeWalker.currentNode = this.el;
        do {
            const index = this.indexOf(this.treeWalker.currentNode.nodeValue);
            if (index === -1) {
                continue;
            }
            const range = this.doc.createRange();
            range.setStart(this.treeWalker.currentNode, index);
            range.setEnd(this.treeWalker.currentNode, index + this.tuiHighlight().length);
            const hostRect = this.el.getBoundingClientRect();
            const { left, top, width, height } = range.getBoundingClientRect();
            const { style } = this.highlight;
            style.background = this.tuiHighlightColor();
            style.left = tuiPx(left - hostRect.left);
            style.top = tuiPx(top - hostRect.top);
            style.width = tuiPx(width);
            style.height = tuiPx(height);
            style.display = 'block';
            return;
        } while (this.treeWalker.nextNode());
    }
    indexOf(source) {
        return !source || !this.tuiHighlight()
            ? -1
            : source.toLowerCase().indexOf(this.tuiHighlight().toLowerCase());
    }
    setUpHighlight() {
        const highlight = this.doc.createElement('div');
        const { style } = highlight;
        style.background = this.options.highlightColor;
        style.zIndex = '-1';
        style.position = 'absolute';
        this.el.appendChild(highlight);
        return highlight;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiHighlight, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: TuiHighlight, isStandalone: true, selector: "[tuiHighlight]", inputs: { tuiHighlight: { classPropertyName: "tuiHighlight", publicName: "tuiHighlight", isSignal: true, isRequired: false, transformFunction: null }, tuiHighlightColor: { classPropertyName: "tuiHighlightColor", publicName: "tuiHighlightColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.position": "\"relative\"", "style.z-index": "0" } }, providers: [WaResizeObserverService], usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiHighlight, decorators: [{
            type: Directive,
            args: [{
                    selector: '[tuiHighlight]',
                    providers: [WaResizeObserverService],
                    host: {
                        '[style.position]': '"relative"',
                        '[style.z-index]': '0',
                    },
                }]
        }], ctorParameters: () => [] });

/**
 * Generated bundle index. Do not edit.
 */

export { TUI_HIGHLIGHT_OPTIONS, TuiHighlight, tuiHighlightOptionsProvider };
//# sourceMappingURL=taiga-ui-kit-directives-highlight.mjs.map