@taiga-ui/kit/fesm5/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
var TuiHighlightDirective = /** @class */ (function () {
    function TuiHighlightDirective(documentRef, elementRef, renderer, resize$) {
        var _this = this;
        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(function () {
            _this.updateStyles();
        });
    }
    Object.defineProperty(TuiHighlightDirective.prototype, "match", {
        get: function () {
            return this.indexOf(this.elementRef.nativeElement.textContent) !== -1;
        },
        enumerable: true,
        configurable: true
    });
    TuiHighlightDirective.prototype.ngOnChanges = function () {
        this.updateStyles();
    };
    TuiHighlightDirective.prototype.updateStyles = function () {
        this.highlight.style.display = 'none';
        if (!this.match) {
            return;
        }
        this.treeWalker.currentNode = this.elementRef.nativeElement;
        do {
            var index = this.indexOf(this.treeWalker.currentNode.nodeValue);
            if (index === -1) {
                continue;
            }
            var range = this.documentRef.createRange();
            range.setStart(this.treeWalker.currentNode, index);
            range.setEnd(this.treeWalker.currentNode, index + this.tuiHighlight.length);
            var hostRect = this.elementRef.nativeElement.getBoundingClientRect();
            var _a = range.getBoundingClientRect(), left = _a.left, top_1 = _a.top, width = _a.width, height = _a.height;
            var style = this.highlight.style;
            style.left = px(left - hostRect.left);
            style.top = px(top_1 - hostRect.top);
            style.width = px(width);
            style.height = px(height);
            style.display = 'block';
            return;
        } while (this.treeWalker.nextNode());
    };
    TuiHighlightDirective.prototype.indexOf = function (source) {
        return !source || !this.tuiHighlight
            ? -1
            : source.toLowerCase().indexOf(this.tuiHighlight.toLowerCase());
    };
    TuiHighlightDirective.prototype.setUpHighlight = function () {
        var highlight = this.renderer.createElement('div');
        var style = highlight.style;
        style.background = 'var(--tui-selection)';
        style.zIndex = '-1';
        style.position = 'absolute';
        this.renderer.appendChild(this.elementRef.nativeElement, highlight);
        return highlight;
    };
    TuiHighlightDirective.ctorParameters = function () { return [
        { 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);
    return TuiHighlightDirective;
}());

var TuiHighlightModule = /** @class */ (function () {
    function TuiHighlightModule() {
    }
    TuiHighlightModule = __decorate([
        NgModule({
            declarations: [TuiHighlightDirective],
            exports: [TuiHighlightDirective],
        })
    ], TuiHighlightModule);
    return TuiHighlightModule;
}());

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

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