igniteui-angular/lib/directives/text-highlight/text-highlight.directive.d.ts

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

import { AfterViewInit, ElementRef, OnChanges, OnDestroy, Renderer2, SimpleChanges, AfterViewChecked } from '@angular/core';
import { IgxTextHighlightService } from './text-highlight.service';
import * as i0 from "@angular/core";
export interface IBaseSearchInfo {
    searchText: string;
    caseSensitive: boolean;
    exactMatch: boolean;
    matchCount: number;
    content: string;
}
/**
 * An interface describing information for the active highlight.
 */
export interface IActiveHighlightInfo {
    /**
     * The row of the highlight.
     */
    row?: any;
    /**
     * The column of the highlight.
     */
    column?: any;
    /**
     * The index of the highlight.
     */
    index: number;
    /**
     * Additional, custom checks to perform prior an element highlighting.
     */
    metadata?: Map<string, any>;
}
export declare class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecked, OnDestroy, OnChanges {
    private element;
    private service;
    private renderer;
    /**
     * Determines the `CSS` class of the highlight elements.
     * This allows the developer to provide custom `CSS` to customize the highlight.
     *
     * ```html
     * <div
     *   igxTextHighlight
     *   [cssClass]="myClass">
     * </div>
     * ```
     */
    cssClass: string;
    /**
     * Determines the `CSS` class of the active highlight element.
     * This allows the developer to provide custom `CSS` to customize the highlight.
     *
     * ```html
     * <div
     *   igxTextHighlight
     *   [activeCssClass]="activeHighlightClass">
     * </div>
     * ```
     */
    activeCssClass: string;
    /**
     * @hidden
     */
    containerClass: string;
    /**
     * Identifies the highlight within a unique group.
     * This allows it to have several different highlight groups,
     * with each of them having their own active highlight.
     *
     * ```html
     * <div
     *   igxTextHighlight
     *   [groupName]="myGroupName">
     * </div>
     * ```
     */
    groupName: string;
    /**
     * The underlying value of the element that will be highlighted.
     *
     * ```typescript
     * // get
     * const elementValue = this.textHighlight.value;
     * ```
     *
     * ```html
     * <!--set-->
     * <div
     *   igxTextHighlight
     *   [value]="newValue">
     * </div>
     * ```
     */
    get value(): any;
    set value(value: any);
    /**
     * The identifier of the row on which the directive is currently on.
     *
     * ```html
     * <div
     *   igxTextHighlight
     *   [row]="0">
     * </div>
     * ```
     */
    row: any;
    /**
     * The identifier of the column on which the directive is currently on.
     *
     * ```html
     * <div
     *   igxTextHighlight
     *   [column]="0">
     * </div>
     * ```
     */
    column: any;
    /**
     * A map that contains all additional conditions, that you need to activate a highlighted
     * element. To activate the condition, you will have to add a new metadata key to
     * the `metadata` property of the IActiveHighlightInfo interface.
     *
     * @example
     * ```typescript
     *  // Set a property, which would disable the highlight for a given element on a certain condition
     *  const metadata = new Map<string, any>();
     *  metadata.set('highlightElement', false);
     * ```
     * ```html
     * <div
     *   igxTextHighlight
     *   [metadata]="metadata">
     * </div>
     * ```
     */
    metadata: Map<string, any>;
    /**
     * @hidden
     */
    get lastSearchInfo(): IBaseSearchInfo;
    /**
     * @hidden
     */
    parentElement: any;
    private _container;
    private destroy$;
    private _value;
    private _lastSearchInfo;
    private _div;
    private _observer;
    private _nodeWasRemoved;
    private _forceEvaluation;
    private _activeElementIndex;
    private _valueChanged;
    private _defaultCssClass;
    private _defaultActiveCssClass;
    constructor(element: ElementRef, service: IgxTextHighlightService, renderer: Renderer2);
    /**
     * @hidden
     */
    ngOnDestroy(): void;
    /**
     * @hidden
     */
    ngOnChanges(changes: SimpleChanges): void;
    /**
     * @hidden
     */
    ngAfterViewInit(): void;
    /**
     * @hidden
     */
    ngAfterViewChecked(): void;
    /**
     * Clears the existing highlight and highlights the searched text.
     * Returns how many times the element contains the searched text.
     */
    highlight(text: string, caseSensitive?: boolean, exactMatch?: boolean): number;
    /**
     * Clears any existing highlight.
     */
    clearHighlight(): void;
    /**
     * Activates the highlight if it is on the currently active row and column.
     */
    activateIfNecessary(): void;
    /**
     * Attaches a MutationObserver to the parentElement and watches for when the container element is removed/readded to the DOM.
     * Should be used only when necessary as using many observers may lead to performance degradation.
     */
    observe(): void;
    private activate;
    private deactivate;
    private clearChildElements;
    private getHighlightedText;
    private appendText;
    private appendSpan;
    private appendDiv;
    private searchNeedsEvaluation;
    static ɵfac: i0.ɵɵFactoryDeclaration<IgxTextHighlightDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<IgxTextHighlightDirective, "[igxTextHighlight]", never, { "cssClass": { "alias": "cssClass"; "required": false; }; "activeCssClass": { "alias": "activeCssClass"; "required": false; }; "containerClass": { "alias": "containerClass"; "required": false; }; "groupName": { "alias": "groupName"; "required": false; }; "value": { "alias": "value"; "required": false; }; "row": { "alias": "row"; "required": false; }; "column": { "alias": "column"; "required": false; }; "metadata": { "alias": "metadata"; "required": false; }; }, {}, never, never, true, never>;
}