ng-devui
Version:
DevUI components based on Angular
76 lines • 9.48 kB
JavaScript
import { DOCUMENT } from '@angular/common';
import { ChangeDetectionStrategy, Component, ElementRef, HostBinding, Inject, Input } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import * as i0 from "@angular/core";
import * as i1 from "@angular/platform-browser";
export class HighlightComponent {
constructor(translateHtml, eleRef, doc) {
this.translateHtml = translateHtml;
this.eleRef = eleRef;
this.doc = doc;
this.display = 'inline';
/**
* @deprecated
*/
this.highlightClass = 'devui-match-highlight';
this.document = this.doc;
}
ngOnChanges(changes) {
this.addDom(this.value, this.term);
}
addDom(value, term) {
if (value && term) {
this.highlight(value, term);
}
else {
const container = this.eleRef.nativeElement;
this.emptyChildren(container);
container.textContent = value;
}
}
emptyChildren(container) {
while (container.hasChildNodes()) {
container.removeChild(container.firstChild);
}
}
highlight(value, term) {
const container = this.eleRef.nativeElement;
this.emptyChildren(container);
const reg = (str) => str.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
const regExp = new RegExp('(' + reg(term) + ')', 'gi');
const temp = value.split(regExp);
const createHighLight = (text) => {
const spanDOM = this.document.createElement('span');
spanDOM.classList.add('devui-match-highlight');
spanDOM.textContent = text;
return spanDOM;
};
temp.forEach((element, index) => {
if (index % 2 === 0) {
container.appendChild(this.document.createTextNode(element));
}
else {
container.appendChild(createHighLight(element));
}
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HighlightComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HighlightComponent, selector: "d-highlight", inputs: { value: "value", term: "term", highlightClass: "highlightClass" }, host: { properties: { "style.display": "this.display" } }, usesOnChanges: true, ngImport: i0, template: ``, isInline: true, styles: [":host ::ng-deep .devui-match-highlight{font-weight:700}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HighlightComponent, decorators: [{
type: Component,
args: [{ selector: 'd-highlight', template: ``, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host ::ng-deep .devui-match-highlight{font-weight:700}\n"] }]
}], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: i0.ElementRef }, { type: undefined, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }], propDecorators: { display: [{
type: HostBinding,
args: ['style.display']
}], value: [{
type: Input
}], term: [{
type: Input
}], highlightClass: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGlnaGxpZ2h0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2RldnVpL3V0aWxzL2hpZ2hsaWdodC9oaWdobGlnaHQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMzQyxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFVBQVUsRUFBRSxXQUFXLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBNEIsTUFBTSxlQUFlLENBQUM7QUFDckksT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLDJCQUEyQixDQUFDOzs7QUFRekQsTUFBTSxPQUFPLGtCQUFrQjtJQVU3QixZQUFvQixhQUEyQixFQUFVLE1BQWtCLEVBQTRCLEdBQVE7UUFBM0Ysa0JBQWEsR0FBYixhQUFhLENBQWM7UUFBVSxXQUFNLEdBQU4sTUFBTSxDQUFZO1FBQTRCLFFBQUcsR0FBSCxHQUFHLENBQUs7UUFUakYsWUFBTyxHQUFHLFFBQVEsQ0FBQztRQUdqRDs7V0FFRztRQUNNLG1CQUFjLEdBQUcsdUJBQXVCLENBQUM7UUFJaEQsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDO0lBQzNCLENBQUM7SUFDRCxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUNyQyxDQUFDO0lBQ0QsTUFBTSxDQUFDLEtBQWEsRUFBRSxJQUFZO1FBQ2hDLElBQUksS0FBSyxJQUFJLElBQUksRUFBRSxDQUFDO1lBQ2xCLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxDQUFDO1FBQzlCLENBQUM7YUFBTSxDQUFDO1lBQ04sTUFBTSxTQUFTLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxhQUFhLENBQUM7WUFDNUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxTQUFTLENBQUMsQ0FBQztZQUM5QixTQUFTLENBQUMsV0FBVyxHQUFHLEtBQUssQ0FBQztRQUNoQyxDQUFDO0lBQ0gsQ0FBQztJQUNELGFBQWEsQ0FBQyxTQUFTO1FBQ3JCLE9BQU8sU0FBUyxDQUFDLGFBQWEsRUFBRSxFQUFFLENBQUM7WUFDakMsU0FBUyxDQUFDLFdBQVcsQ0FBQyxTQUFTLENBQUMsVUFBVSxDQUFDLENBQUM7UUFDOUMsQ0FBQztJQUNILENBQUM7SUFFRCxTQUFTLENBQUMsS0FBYSxFQUFFLElBQVk7UUFDbkMsTUFBTSxTQUFTLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxhQUFhLENBQUM7UUFDNUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUM5QixNQUFNLEdBQUcsR0FBRyxDQUFDLEdBQUcsRUFBRSxFQUFFLENBQUMsR0FBRyxDQUFDLE9BQU8sQ0FBQywwQkFBMEIsRUFBRSxNQUFNLENBQUMsQ0FBQztRQUNyRSxNQUFNLE1BQU0sR0FBRyxJQUFJLE1BQU0sQ0FBQyxHQUFHLEdBQUcsR0FBRyxDQUFDLElBQUksQ0FBQyxHQUFHLEdBQUcsRUFBRSxJQUFJLENBQUMsQ0FBQztRQUN2RCxNQUFNLElBQUksR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQ2pDLE1BQU0sZUFBZSxHQUFHLENBQUMsSUFBSSxFQUFFLEVBQUU7WUFDL0IsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxhQUFhLENBQUMsTUFBTSxDQUFDLENBQUM7WUFDcEQsT0FBTyxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsdUJBQXVCLENBQUMsQ0FBQztZQUMvQyxPQUFPLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQztZQUMzQixPQUFPLE9BQU8sQ0FBQztRQUNqQixDQUFDLENBQUM7UUFFRixJQUFJLENBQUMsT0FBTyxDQUFDLENBQUMsT0FBTyxFQUFFLEtBQUssRUFBRSxFQUFFO1lBQzlCLElBQUksS0FBSyxHQUFHLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQztnQkFDcEIsU0FBUyxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLGNBQWMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDO1lBQy9ELENBQUM7aUJBQU0sQ0FBQztnQkFDTixTQUFTLENBQUMsV0FBVyxDQUFDLGVBQWUsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDO1lBQ2xELENBQUM7UUFDSCxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7K0dBbkRVLGtCQUFrQix3RUFVd0QsUUFBUTttR0FWbEYsa0JBQWtCLCtNQUpuQixFQUFFOzs0RkFJRCxrQkFBa0I7a0JBTjlCLFNBQVM7K0JBQ0UsYUFBYSxZQUNiLEVBQUUsbUJBRUssdUJBQXVCLENBQUMsTUFBTTs7MEJBWStCLE1BQU07MkJBQUMsUUFBUTt5Q0FUL0QsT0FBTztzQkFBcEMsV0FBVzt1QkFBQyxlQUFlO2dCQUNuQixLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUlHLGNBQWM7c0JBQXRCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBET0NVTUVOVCB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBIb3N0QmluZGluZywgSW5qZWN0LCBJbnB1dCwgT25DaGFuZ2VzLCBTaW1wbGVDaGFuZ2VzIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBEb21TYW5pdGl6ZXIgfSBmcm9tICdAYW5ndWxhci9wbGF0Zm9ybS1icm93c2VyJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZC1oaWdobGlnaHQnLFxuICB0ZW1wbGF0ZTogYGAsXG4gIHN0eWxlVXJsczogWycuL2hpZ2hsaWdodC5jb21wb25lbnQuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgSGlnaGxpZ2h0Q29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcbiAgQEhvc3RCaW5kaW5nKCdzdHlsZS5kaXNwbGF5JykgZGlzcGxheSA9ICdpbmxpbmUnO1xuICBASW5wdXQoKSB2YWx1ZTogc3RyaW5nO1xuICBASW5wdXQoKSB0ZXJtOiBzdHJpbmc7XG4gIC8qKlxuICAgKiBAZGVwcmVjYXRlZFxuICAgKi9cbiAgQElucHV0KCkgaGlnaGxpZ2h0Q2xhc3MgPSAnZGV2dWktbWF0Y2gtaGlnaGxpZ2h0JztcbiAgZG9jdW1lbnQ6IERvY3VtZW50O1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgdHJhbnNsYXRlSHRtbDogRG9tU2FuaXRpemVyLCBwcml2YXRlIGVsZVJlZjogRWxlbWVudFJlZiwgQEluamVjdChET0NVTUVOVCkgcHJpdmF0ZSBkb2M6IGFueSkge1xuICAgIHRoaXMuZG9jdW1lbnQgPSB0aGlzLmRvYztcbiAgfVxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgdGhpcy5hZGREb20odGhpcy52YWx1ZSwgdGhpcy50ZXJtKTtcbiAgfVxuICBhZGREb20odmFsdWU6IHN0cmluZywgdGVybTogc3RyaW5nKTogYW55IHtcbiAgICBpZiAodmFsdWUgJiYgdGVybSkge1xuICAgICAgdGhpcy5oaWdobGlnaHQodmFsdWUsIHRlcm0pO1xuICAgIH0gZWxzZSB7XG4gICAgICBjb25zdCBjb250YWluZXIgPSB0aGlzLmVsZVJlZi5uYXRpdmVFbGVtZW50O1xuICAgICAgdGhpcy5lbXB0eUNoaWxkcmVuKGNvbnRhaW5lcik7XG4gICAgICBjb250YWluZXIudGV4dENvbnRlbnQgPSB2YWx1ZTtcbiAgICB9XG4gIH1cbiAgZW1wdHlDaGlsZHJlbihjb250YWluZXIpIHtcbiAgICB3aGlsZSAoY29udGFpbmVyLmhhc0NoaWxkTm9kZXMoKSkge1xuICAgICAgY29udGFpbmVyLnJlbW92ZUNoaWxkKGNvbnRhaW5lci5maXJzdENoaWxkKTtcbiAgICB9XG4gIH1cblxuICBoaWdobGlnaHQodmFsdWU6IHN0cmluZywgdGVybTogc3RyaW5nKSB7XG4gICAgY29uc3QgY29udGFpbmVyID0gdGhpcy5lbGVSZWYubmF0aXZlRWxlbWVudDtcbiAgICB0aGlzLmVtcHR5Q2hpbGRyZW4oY29udGFpbmVyKTtcbiAgICBjb25zdCByZWcgPSAoc3RyKSA9PiBzdHIucmVwbGFjZSgvWy1bXFxde30oKSorPy4sXFxcXF4kfCNcXHNdL2csICdcXFxcJCYnKTtcbiAgICBjb25zdCByZWdFeHAgPSBuZXcgUmVnRXhwKCcoJyArIHJlZyh0ZXJtKSArICcpJywgJ2dpJyk7XG4gICAgY29uc3QgdGVtcCA9IHZhbHVlLnNwbGl0KHJlZ0V4cCk7XG4gICAgY29uc3QgY3JlYXRlSGlnaExpZ2h0ID0gKHRleHQpID0+IHtcbiAgICAgIGNvbnN0IHNwYW5ET00gPSB0aGlzLmRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3NwYW4nKTtcbiAgICAgIHNwYW5ET00uY2xhc3NMaXN0LmFkZCgnZGV2dWktbWF0Y2gtaGlnaGxpZ2h0Jyk7XG4gICAgICBzcGFuRE9NLnRleHRDb250ZW50ID0gdGV4dDtcbiAgICAgIHJldHVybiBzcGFuRE9NO1xuICAgIH07XG5cbiAgICB0ZW1wLmZvckVhY2goKGVsZW1lbnQsIGluZGV4KSA9PiB7XG4gICAgICBpZiAoaW5kZXggJSAyID09PSAwKSB7XG4gICAgICAgIGNvbnRhaW5lci5hcHBlbmRDaGlsZCh0aGlzLmRvY3VtZW50LmNyZWF0ZVRleHROb2RlKGVsZW1lbnQpKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIGNvbnRhaW5lci5hcHBlbmRDaGlsZChjcmVhdGVIaWdoTGlnaHQoZWxlbWVudCkpO1xuICAgICAgfVxuICAgIH0pO1xuICB9XG59XG4iXX0=