@hxui/angular
Version:
An Angular library based on the [HXUI design system](https://hxui.io).
66 lines • 8.93 kB
JavaScript
import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
/**
* A component that helps with text highlighting.
*
* If splits the `result` text into parts that contain the searched `term` and generates the HTML markup to simplify
* highlighting:
*
* Ex. `result="Alaska"` and `term="as"` will produce `Al<span class="ngb-highlight">as</span>ka`.
*/
export class TypeaheadHighlightComponent {
constructor() {
/**
* The CSS class for `<span>` elements wrapping the `term` inside the `result`.
*/
this.highlightClass = 'highlight';
}
toString(value) {
return value !== undefined && value !== null ? `${value}` : '';
}
regExpEscape(text) {
return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
}
ngOnChanges(changes) {
const result = this.toString(this.result);
const terms = Array.isArray(this.term) ? this.term : [this.term];
const escapedTerms = terms
.map(term => this.regExpEscape(this.toString(term)))
.filter(term => term);
this.parts = escapedTerms.length
? result.split(new RegExp(`(${escapedTerms.join('|')})`, 'gmi'))
: [result];
}
}
TypeaheadHighlightComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TypeaheadHighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
TypeaheadHighlightComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TypeaheadHighlightComponent, selector: "hxa-highlight", inputs: { highlightClass: "highlightClass", result: "result", term: "term" }, usesOnChanges: true, ngImport: i0, template: `
<ng-template ngFor [ngForOf]="parts" let-part let-isOdd="odd">
<span *ngIf="isOdd; else even" [class]="highlightClass">{{ part }}</span
><ng-template #even>{{ part }}</ng-template>
</ng-template>
`, isInline: true, styles: [".highlight{background:rgba(35,49,43,.23);border-radius:1px;font-weight:700}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TypeaheadHighlightComponent, decorators: [{
type: Component,
args: [{
selector: 'hxa-highlight',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
template: `
<ng-template ngFor [ngForOf]="parts" let-part let-isOdd="odd">
<span *ngIf="isOdd; else even" [class]="highlightClass">{{ part }}</span
><ng-template #even>{{ part }}</ng-template>
</ng-template>
`,
styles: [
'.highlight { background: rgba(35, 49, 43, 0.23); border-radius: 1px; font-weight: bold; }'
]
}]
}], propDecorators: { highlightClass: [{
type: Input
}], result: [{
type: Input
}], term: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZWFoZWFkLWhpZ2hsaWdodC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9oeC11aS9zcmMvbGliL3R5cGVhaGVhZC90eXBlYWhlYWQtaGlnaGxpZ2h0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxLQUFLLEVBR0wsaUJBQWlCLEVBQ2xCLE1BQU0sZUFBZSxDQUFDOzs7QUFFdkI7Ozs7Ozs7R0FPRztBQWVILE1BQU0sT0FBTywyQkFBMkI7SUFkeEM7UUFpQkU7O1dBRUc7UUFDTSxtQkFBYyxHQUFHLFdBQVcsQ0FBQztLQW9DdkM7SUFwQkMsUUFBUSxDQUFDLEtBQWM7UUFDckIsT0FBTyxLQUFLLEtBQUssU0FBUyxJQUFJLEtBQUssS0FBSyxJQUFJLENBQUMsQ0FBQyxDQUFDLEdBQUcsS0FBSyxFQUFFLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztJQUNqRSxDQUFDO0lBRUQsWUFBWSxDQUFDLElBQVk7UUFDdkIsT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDLDBCQUEwQixFQUFFLE1BQU0sQ0FBQyxDQUFDO0lBQzFELENBQUM7SUFFRCxXQUFXLENBQUMsT0FBc0I7UUFDaEMsTUFBTSxNQUFNLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7UUFFMUMsTUFBTSxLQUFLLEdBQWEsS0FBSyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQzNFLE1BQU0sWUFBWSxHQUFHLEtBQUs7YUFDdkIsR0FBRyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUM7YUFDbkQsTUFBTSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLENBQUM7UUFFeEIsSUFBSSxDQUFDLEtBQUssR0FBRyxZQUFZLENBQUMsTUFBTTtZQUM5QixDQUFDLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxJQUFJLE1BQU0sQ0FBQyxJQUFJLFlBQVksQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEdBQUcsRUFBRSxLQUFLLENBQUMsQ0FBQztZQUNoRSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUNmLENBQUM7O3lIQXpDVSwyQkFBMkI7NkdBQTNCLDJCQUEyQix3SkFWNUI7Ozs7O0dBS1Q7NEZBS1UsMkJBQTJCO2tCQWR2QyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxlQUFlO29CQUN6QixlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtvQkFDL0MsYUFBYSxFQUFFLGlCQUFpQixDQUFDLElBQUk7b0JBQ3JDLFFBQVEsRUFBRTs7Ozs7R0FLVDtvQkFDRCxNQUFNLEVBQUU7d0JBQ04sMkZBQTJGO3FCQUM1RjtpQkFDRjs4QkFPVSxjQUFjO3NCQUF0QixLQUFLO2dCQVFHLE1BQU07c0JBQWQsS0FBSztnQkFNRyxJQUFJO3NCQUFaLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xyXG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxyXG4gIENvbXBvbmVudCxcclxuICBJbnB1dCxcclxuICBPbkNoYW5nZXMsXHJcbiAgU2ltcGxlQ2hhbmdlcyxcclxuICBWaWV3RW5jYXBzdWxhdGlvblxyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuLyoqXHJcbiAqIEEgY29tcG9uZW50IHRoYXQgaGVscHMgd2l0aCB0ZXh0IGhpZ2hsaWdodGluZy5cclxuICpcclxuICogSWYgc3BsaXRzIHRoZSBgcmVzdWx0YCB0ZXh0IGludG8gcGFydHMgdGhhdCBjb250YWluIHRoZSBzZWFyY2hlZCBgdGVybWAgYW5kIGdlbmVyYXRlcyB0aGUgSFRNTCBtYXJrdXAgdG8gc2ltcGxpZnlcclxuICogaGlnaGxpZ2h0aW5nOlxyXG4gKlxyXG4gKiBFeC4gYHJlc3VsdD1cIkFsYXNrYVwiYCBhbmQgYHRlcm09XCJhc1wiYCB3aWxsIHByb2R1Y2UgYEFsPHNwYW4gY2xhc3M9XCJuZ2ItaGlnaGxpZ2h0XCI+YXM8L3NwYW4+a2FgLlxyXG4gKi9cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdoeGEtaGlnaGxpZ2h0JyxcclxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcclxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxyXG4gIHRlbXBsYXRlOiBgXHJcbiAgICA8bmctdGVtcGxhdGUgbmdGb3IgW25nRm9yT2ZdPVwicGFydHNcIiBsZXQtcGFydCBsZXQtaXNPZGQ9XCJvZGRcIj5cclxuICAgICAgPHNwYW4gKm5nSWY9XCJpc09kZDsgZWxzZSBldmVuXCIgW2NsYXNzXT1cImhpZ2hsaWdodENsYXNzXCI+e3sgcGFydCB9fTwvc3BhblxyXG4gICAgICA+PG5nLXRlbXBsYXRlICNldmVuPnt7IHBhcnQgfX08L25nLXRlbXBsYXRlPlxyXG4gICAgPC9uZy10ZW1wbGF0ZT5cclxuICBgLCAvLyB0ZW1wbGF0ZSBuZWVkcyB0byBiZSBmb3JtYXR0ZWQgaW4gYSBjZXJ0YWluIHdheSBzbyB3ZSBkb24ndCBhZGQgZW1wdHkgdGV4dCBub2Rlc1xyXG4gIHN0eWxlczogW1xyXG4gICAgJy5oaWdobGlnaHQgeyBiYWNrZ3JvdW5kOiByZ2JhKDM1LCA0OSwgNDMsIDAuMjMpOyBib3JkZXItcmFkaXVzOiAxcHg7IGZvbnQtd2VpZ2h0OiBib2xkOyB9J1xyXG4gIF1cclxufSlcclxuZXhwb3J0IGNsYXNzIFR5cGVhaGVhZEhpZ2hsaWdodENvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XHJcbiAgcGFydHM6IHN0cmluZ1tdO1xyXG5cclxuICAvKipcclxuICAgKiBUaGUgQ1NTIGNsYXNzIGZvciBgPHNwYW4+YCBlbGVtZW50cyB3cmFwcGluZyB0aGUgYHRlcm1gIGluc2lkZSB0aGUgYHJlc3VsdGAuXHJcbiAgICovXHJcbiAgQElucHV0KCkgaGlnaGxpZ2h0Q2xhc3MgPSAnaGlnaGxpZ2h0JztcclxuXHJcbiAgLyoqXHJcbiAgICogVGhlIHRleHQgaGlnaGxpZ2h0aW5nIGlzIGFkZGVkIHRvLlxyXG4gICAqXHJcbiAgICogSWYgdGhlIGB0ZXJtYCBpcyBmb3VuZCBpbnNpZGUgdGhpcyB0ZXh0LCBpdCB3aWxsIGJlIGhpZ2hsaWdodGVkLlxyXG4gICAqIElmIHRoZSBgdGVybWAgY29udGFpbnMgYXJyYXkgdGhlbiBhbGwgdGhlIGl0ZW1zIGZyb20gaXQgd2lsbCBiZSBoaWdobGlnaHRlZCBpbnNpZGUgdGhlIHRleHQuXHJcbiAgICovXHJcbiAgQElucHV0KCkgcmVzdWx0Pzogc3RyaW5nIHwgbnVsbDtcclxuXHJcbiAgLyoqXHJcbiAgICogVGhlIHRlcm0gb3IgYXJyYXkgb2YgdGVybXMgdG8gYmUgaGlnaGxpZ2h0ZWQuXHJcbiAgICogU2luY2UgdmVyc2lvbiBgdjQuMi4wYCB0ZXJtIGNvdWxkIGJlIGEgYHN0cmluZ1tdYFxyXG4gICAqL1xyXG4gIEBJbnB1dCgpIHRlcm06IHN0cmluZyB8IHN0cmluZ1tdO1xyXG5cclxuICB0b1N0cmluZyh2YWx1ZTogdW5rbm93bik6IHN0cmluZyB7XHJcbiAgICByZXR1cm4gdmFsdWUgIT09IHVuZGVmaW5lZCAmJiB2YWx1ZSAhPT0gbnVsbCA/IGAke3ZhbHVlfWAgOiAnJztcclxuICB9XHJcblxyXG4gIHJlZ0V4cEVzY2FwZSh0ZXh0OiBzdHJpbmcpOiBzdHJpbmcge1xyXG4gICAgcmV0dXJuIHRleHQucmVwbGFjZSgvWy1bXFxde30oKSorPy4sXFxcXF4kfCNcXHNdL2csICdcXFxcJCYnKTtcclxuICB9XHJcblxyXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcclxuICAgIGNvbnN0IHJlc3VsdCA9IHRoaXMudG9TdHJpbmcodGhpcy5yZXN1bHQpO1xyXG5cclxuICAgIGNvbnN0IHRlcm1zOiBzdHJpbmdbXSA9IEFycmF5LmlzQXJyYXkodGhpcy50ZXJtKSA/IHRoaXMudGVybSA6IFt0aGlzLnRlcm1dO1xyXG4gICAgY29uc3QgZXNjYXBlZFRlcm1zID0gdGVybXNcclxuICAgICAgLm1hcCh0ZXJtID0+IHRoaXMucmVnRXhwRXNjYXBlKHRoaXMudG9TdHJpbmcodGVybSkpKVxyXG4gICAgICAuZmlsdGVyKHRlcm0gPT4gdGVybSk7XHJcblxyXG4gICAgdGhpcy5wYXJ0cyA9IGVzY2FwZWRUZXJtcy5sZW5ndGhcclxuICAgICAgPyByZXN1bHQuc3BsaXQobmV3IFJlZ0V4cChgKCR7ZXNjYXBlZFRlcm1zLmpvaW4oJ3wnKX0pYCwgJ2dtaScpKVxyXG4gICAgICA6IFtyZXN1bHRdO1xyXG4gIH1cclxufVxyXG4iXX0=