@taiga-ui/kit/fesm2015/taiga-ui-kit-directives-highlight.js

Taiga UI Angular main components kit

import { __decorate, __param } from 'tslib';
import { DOCUMENT } from '@angular/common';
import { Inject, ElementRef, Renderer2, Input, Directive, NgModule } from '@angular/core';
import { svgNodeFilter, px, TuiResizeService, tuiDefaultProp, TuiDestroyService } from '@taiga-ui/cdk';
import { Observable } from 'rxjs';

// @dynamic
let TuiHighlightDirective = class TuiHighlightDirective {
    constructor(documentRef, elementRef, renderer, resize$) {
        this.documentRef = documentRef;
        this.elementRef = elementRef;
        this.renderer = renderer;
        this.tuiHighlight = '';
        this.highlight = this.setUpHighlight();
        this.treeWalker = this.documentRef.createTreeWalker(this.elementRef.nativeElement, NodeFilter.SHOW_TEXT, svgNodeFilter, false);
        resize$.subscribe(() => {
            this.updateStyles();
        });
    }
    get match() {
        return this.indexOf(this.elementRef.nativeElement.textContent) !== -1;
    }
    ngOnChanges() {
        this.updateStyles();
    }
    updateStyles() {
        this.highlight.style.display = 'none';
        if (!this.match) {
            return;
        }
        this.treeWalker.currentNode = this.elementRef.nativeElement;
        do {
            const index = this.indexOf(this.treeWalker.currentNode.nodeValue);
            if (index === -1) {
                continue;
            }
            const range = this.documentRef.createRange();
            range.setStart(this.treeWalker.currentNode, index);
            range.setEnd(this.treeWalker.currentNode, index + this.tuiHighlight.length);
            const hostRect = this.elementRef.nativeElement.getBoundingClientRect();
            const { left, top, width, height } = range.getBoundingClientRect();
            const { style } = this.highlight;
            style.left = px(left - hostRect.left);
            style.top = px(top - hostRect.top);
            style.width = px(width);
            style.height = px(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.renderer.createElement('div');
        const { style } = highlight;
        style.background = 'var(--tui-selection)';
        style.zIndex = '-1';
        style.position = 'absolute';
        this.renderer.appendChild(this.elementRef.nativeElement, highlight);
        return highlight;
    }
};
TuiHighlightDirective.ctorParameters = () => [
    { type: Document, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
    { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
    { type: Renderer2, decorators: [{ type: Inject, args: [Renderer2,] }] },
    { type: Observable, decorators: [{ type: Inject, args: [TuiResizeService,] }] }
];
__decorate([
    Input(),
    tuiDefaultProp()
], TuiHighlightDirective.prototype, "tuiHighlight", void 0);
TuiHighlightDirective = __decorate([
    Directive({
        selector: '[tuiHighlight]',
        host: {
            '[style.position]': '"relative"',
            '[style.zIndex]': '0',
        },
        providers: [TuiDestroyService, TuiResizeService],
    }),
    __param(0, Inject(DOCUMENT)),
    __param(1, Inject(ElementRef)),
    __param(2, Inject(Renderer2)),
    __param(3, Inject(TuiResizeService))
], TuiHighlightDirective);

let TuiHighlightModule = class TuiHighlightModule {
};
TuiHighlightModule = __decorate([
    NgModule({
        declarations: [TuiHighlightDirective],
        exports: [TuiHighlightDirective],
    })
], TuiHighlightModule);

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

export { TuiHighlightDirective, TuiHighlightModule };
//# sourceMappingURL=taiga-ui-kit-directives-highlight.js.map