@leanix/components 0.2.250 → 0.2.251

package/fesm2015/leanix-components.mjs

@@ -7,13 +7,13 @@ import { ComponentPortal, CdkPortal, PortalModule } from '@angular/cdk/portal';
 import * as i1 from '@angular/cdk/overlay';
 import { OverlayModule, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { __decorate, __awaiter } from 'tslib';
+import { escape, trimEnd, sortBy, get, isEqual, toLower, some, padCharsStart, toString, isNaN as isNaN$1, toNumber, includes, last, findIndex, filter as filter$1, isObject, find, uniqueId } from 'lodash/fp';
 import * as i6 from 'rxjs';
 import { BehaviorSubject, timer, Subject, combineLatest, merge, concat, fromEvent, Observable, ReplaySubject, of } from 'rxjs';
 import { skipWhile, map, switchMap, startWith, pairwise, filter, take, debounceTime, skip, withLatestFrom, distinctUntilChanged, takeUntil, first, delay, mapTo, tap } from 'rxjs/operators';
 import * as i1$1 from '@ngx-translate/core';
 import { TranslatePipe, TranslateModule } from '@ngx-translate/core';
 import * as i1$2 from '@angular/platform-browser';
-import { trimEnd, sortBy, get, isEqual, toLower, some, padCharsStart, toString, isNaN as isNaN$1, toNumber, includes, last, findIndex, filter as filter$1, isObject, find, uniqueId } from 'lodash/fp';
 import Color from 'color';
 import { format, distanceInWords, startOfDay } from 'date-fns';
 import _, { curry } from 'lodash';
@@ -606,10 +606,21 @@ class EllipsisComponent {
         this.resizeObserverService = resizeObserverService;
         this.translateService = translateService;
         this.content = '';
+        /**
+         * Only set this to false if the content is not a user provided string
+         * or if you sanitize the provided content yourself.
+         */
+        this.escapeHtmlInContent = true;
         this.isShowingMore$ = new BehaviorSubject(false);
         this.destroyed$ = new Subject();
     }
     ngOnInit() {
+        this.sanitizedContent$ = this.content$.pipe(map((content) => {
+            if (this.escapeHtmlInContent && typeof content === 'string') {
+                return escape(content);
+            }
+            return content;
+        }));
         this.showMoreButtonLabel$ = this.isShowingMore$.pipe(switchMap((isShowingMore) => {
             const translationKey = isShowingMore ? 'common.showLess' : 'common.showMore';
             return this.translateService.get(translationKey);
@@ -678,7 +689,7 @@ class EllipsisComponent {
 }
 EllipsisComponent.DEFAULT_RESIZE_DEBOUNCE_MS = 500;
 EllipsisComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: EllipsisComponent, deps: [{ token: LX_ELLIPSIS_DEBOUNCE_ON_RESIZE }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: ResizeObserverService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-EllipsisComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: EllipsisComponent, selector: "lx-ellipsis", inputs: { content: "content" }, viewQueries: [{ propertyName: "contentSpanEl", first: true, predicate: ["contentEl"], descendants: true }, { propertyName: "showMoreButtonEl", first: true, predicate: ["showMoreButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<span #contentEl [class.showMore]=\"isShowingMore$ | async\" class=\"content truncate lx-margin-right\" [innerHtml]=\"content\"></span>\n<button *ngIf=\"showButton$ | async\" (click)=\"onShowMoreToggle()\" lx-button #showMoreButton size=\"auto\" mode=\"link\" color=\"primary\">\n  {{ showMoreButtonLabel$ | async }}\n</button>\n", styles: [":host{display:block}.content{display:inline-block}.truncate:not(.showMore){width:calc(100% - 140px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.content.showMore+button{margin-top:4px;display:block}button{white-space:nowrap;vertical-align:top}\n"], components: [{ type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+EllipsisComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: EllipsisComponent, selector: "lx-ellipsis", inputs: { content: "content", escapeHtmlInContent: "escapeHtmlInContent" }, viewQueries: [{ propertyName: "contentSpanEl", first: true, predicate: ["contentEl"], descendants: true }, { propertyName: "showMoreButtonEl", first: true, predicate: ["showMoreButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<span\n  #contentEl\n  [class.showMore]=\"isShowingMore$ | async\"\n  class=\"content truncate lx-margin-right\"\n  [innerHtml]=\"sanitizedContent$ | async\"\n></span>\n<button *ngIf=\"showButton$ | async\" (click)=\"onShowMoreToggle()\" lx-button #showMoreButton size=\"auto\" mode=\"link\" color=\"primary\">\n  {{ showMoreButtonLabel$ | async }}\n</button>\n", styles: [":host{display:block}.content{display:inline-block}.truncate:not(.showMore){width:calc(100% - 140px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.content.showMore+button{margin-top:4px;display:block}button{white-space:nowrap;vertical-align:top}\n"], components: [{ type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
     Observe('contentSpanEl')
 ], EllipsisComponent.prototype, "contentSpanEl$", void 0);
@@ -690,7 +701,7 @@ __decorate([
 ], EllipsisComponent.prototype, "content$", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: EllipsisComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-ellipsis', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span #contentEl [class.showMore]=\"isShowingMore$ | async\" class=\"content truncate lx-margin-right\" [innerHtml]=\"content\"></span>\n<button *ngIf=\"showButton$ | async\" (click)=\"onShowMoreToggle()\" lx-button #showMoreButton size=\"auto\" mode=\"link\" color=\"primary\">\n  {{ showMoreButtonLabel$ | async }}\n</button>\n", styles: [":host{display:block}.content{display:inline-block}.truncate:not(.showMore){width:calc(100% - 140px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.content.showMore+button{margin-top:4px;display:block}button{white-space:nowrap;vertical-align:top}\n"] }]
+            args: [{ selector: 'lx-ellipsis', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  #contentEl\n  [class.showMore]=\"isShowingMore$ | async\"\n  class=\"content truncate lx-margin-right\"\n  [innerHtml]=\"sanitizedContent$ | async\"\n></span>\n<button *ngIf=\"showButton$ | async\" (click)=\"onShowMoreToggle()\" lx-button #showMoreButton size=\"auto\" mode=\"link\" color=\"primary\">\n  {{ showMoreButtonLabel$ | async }}\n</button>\n", styles: [":host{display:block}.content{display:inline-block}.truncate:not(.showMore){width:calc(100% - 140px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.content.showMore+button{margin-top:4px;display:block}button{white-space:nowrap;vertical-align:top}\n"] }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Inject,
@@ -698,6 +709,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                     }] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: ResizeObserverService }, { type: i1$1.TranslateService }];
     }, propDecorators: { content: [{
                 type: Input
+            }], escapeHtmlInContent: [{
+                type: Input
             }], contentSpanEl$: [], contentSpanEl: [{
                 type: ViewChild,
                 args: ['contentEl']
@@ -1040,174 +1053,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 type: Input
             }] } });
 
-class BrPipe {
-    transform(input, options = {}) {
-        if (input) {
-            if (options.isTrimEnd) {
-                input = trimEnd(input);
-            }
-            return input.replace(/[\n\r]/g, '<br/>');
-        }
-        return input;
-    }
-}
-BrPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: BrPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-BrPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: BrPipe, name: "lxBr" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: BrPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'lxBr'
-                }]
-        }] });
-
-/**
- * Compute the most eligible text color for a given background color (black or white), depending on the luminance of the
- * background color. In case the provided color is undefined or invalid, white (#FFFFFF) is returned.
- *
- * @param colorHex Color string in hexadecimal encoding.
- * @returns Equivalent contrast color in hexadecimal encoding.
- */
-function getContrastColor(colorHex) {
-    try {
-        const color = Color(colorHex || '#000');
-        // Check http://codepen.io/WebSeed/pen/pvgqEq
-        const a = 1 - (0.299 * color.red() + 0.587 * color.green() + 0.114 * color.blue()) / 255;
-        const d = a < 0.4 ? 0 : 255;
-        return Color({ r: d, g: d, b: d }).hex();
-    }
-    catch (_a) {
-        return '#FFFFFF';
-    }
-}
-function shorthandHexHandle(hex) {
-    const shorthandRegex = /^(#)([a-f\d])([a-f\d])([a-f\d])$/i;
-    const shorthand = hex.match(shorthandRegex);
-    if (shorthand) {
-        const convertedHex = shorthand[1] + shorthand[2] + shorthand[2] + shorthand[3] + shorthand[3] + shorthand[4] + shorthand[4];
-        return convertedHex;
-    }
-    else {
-        return hex;
-    }
-}
-function isValidHexColor(color) {
-    return /^#[0-9A-F]{6}$/i.test(color);
-}
-
-class ContrastColorPipe {
-    transform(color) {
-        if (color) {
-            return isValidHexColor(shorthandHexHandle(color)) ? getContrastColor(color) : '';
-        }
-        return '';
-    }
-}
-ContrastColorPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: ContrastColorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-ContrastColorPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: ContrastColorPipe, name: "lxContrastColor" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: ContrastColorPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'lxContrastColor'
-                }]
-        }] });
-
-const DATE_FORMATS = new InjectionToken('DATE_FORMATS', {
-    providedIn: 'root',
-    factory: () => ({
-        getDateFormat: () => 'YYYY-MM-DD',
-        getDateTimeFormat: () => 'YYYY-MM-DD HH:mm',
-        getDateTimeFormatWithSeconds: () => 'YYYY-MM-DD HH:mm:ss'
-    })
-});
-const DATE_FN_LOCALE = new InjectionToken('DATE_FN_LOCALE');
-const LOCALE_FN = new InjectionToken('LOCALE_FN');
-const GLOBAL_TRANSLATION_OPTIONS = new InjectionToken('GLOBAL_TRANSLATION_OPTIONS');
-
-class CustomDatePipe {
-    constructor(getDateFnLocale) {
-        this.getDateFnLocale = getDateFnLocale;
-    }
-    transform(value, f) {
-        const locale = this.getDateFnLocale ? this.getDateFnLocale() : null;
-        return value ? format(value, f, { locale }) : '';
-    }
-}
-CustomDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: CustomDatePipe, deps: [{ token: DATE_FN_LOCALE, optional: true }], target: i0.ɵɵFactoryTarget.Pipe });
-CustomDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: CustomDatePipe, name: "lxDate" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: CustomDatePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'lxDate'
-                }]
-        }], ctorParameters: function () {
-        return [{ type: Function, decorators: [{
-                        type: Optional
-                    }, {
-                        type: Inject,
-                        args: [DATE_FN_LOCALE]
-                    }] }];
-    } });
-
-class HighlightRangePipe {
-    transform(text, offset = 0, length = 0) {
-        if (!text || offset < 0 || length < 0 || offset >= (text === null || text === void 0 ? void 0 : text.length) || offset + length > (text === null || text === void 0 ? void 0 : text.length)) {
-            return '';
-        }
-        const highlightedPart = text.slice(offset, offset + length);
-        return text.slice(0, offset) + (highlightedPart.length !== 0 ? this.highlight(highlightedPart) : '') + text.slice(offset + length);
-    }
-    highlight(text) {
-        return `<span class="termHighlight">${text}</span>`;
-    }
-}
-HighlightRangePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: HighlightRangePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-HighlightRangePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: HighlightRangePipe, name: "lxHighlightRange" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: HighlightRangePipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'lxHighlightRange' }]
-        }] });
-
-/**
- * These characters are treated as seperators by
- * elasticsearch and split the input into search tokens
- * which are used to find matches.
- */
-const STANDARD_TOKENIZER_SEPERATORS = /[^a-zA-Z\d\s]/g;
-class HighlightTermPipe {
-    transform(text, search) {
-        if (search && text) {
-            let pattern = search
-                .replace(STANDARD_TOKENIZER_SEPERATORS, ' ')
-                // replace special chars for a backslash for RegExp
-                .replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
-            pattern = pattern
-                .split(' ')
-                .filter((t) => {
-                return t.length > 0;
-            })
-                .join('|');
-            const regex = new RegExp(pattern, 'gi');
-            text = _.escape(text);
-            return text.replace(regex, (match) => `<span class="termHighlight">${match}</span>`); // add highlighting to matched regex pattern
-        }
-        else {
-            return text;
-        }
-    }
-}
-HighlightTermPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: HighlightTermPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-HighlightTermPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: HighlightTermPipe, name: "lxHighlightTerm" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: HighlightTermPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'lxHighlightTerm' }]
-        }] });
-
 /**
  * This pipe transforms...
  * - "raw" http(s) links
  * - markdown link syntax
  * ... into clickable anchor elements.
  *
+ * The characters "<" and ">" are escaped with their HTML entities &lt; and &gt;.
+ *
  * You have an user interface where you don't want clickable links but also
  * don't want users to see the "ugly" markdown link syntax?
  * -> Use the 'lxUnlikify' pipe to replace markdown link syntax with just the link name
@@ -1215,7 +1068,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 class LxLinkifyPipe {
     transform(text) {
         if (text && typeof text === 'string') {
-            const textWithRawLinks = this.wrapRawHttpLinksWithAnchorTags(text);
+            const escapedText = this.escapeHtmlInUserProvidedString(text);
+            const textWithRawLinks = this.wrapRawHttpLinksWithAnchorTags(escapedText);
             const textWithRawAndNamedLinks = this.turnMarkdownStyleLinksIntoAnchorTags(textWithRawLinks);
             return textWithRawAndNamedLinks;
         }
@@ -1294,6 +1148,17 @@ class LxLinkifyPipe {
         }
         return matches;
     }
+    /**
+     * We assume that lxLinkify is exclusively used on user provided strings.
+     * This is why we want to escape any other HTML tags that are already present in the string.
+     * The logic implemented here has been used with no issues for three years in our Fact Sheet comments. See https://github.com/gregjacobs/Autolinker.js/pull/313
+     *
+     * When using lxLinkify in conjunction with other pipes that add HTML, make sure to use lxLinkify first,
+     * so that it doesn't escape the HTML of any previous pipes.
+     */
+    escapeHtmlInUserProvidedString(input) {
+        return input.replace(/<|>/gi, (match) => '&' + (match === '>' ? 'g' : 'l') + 't;');
+    }
 }
 /**
  * This is not the "one URL regex to rule them all", but a more realistic one which should work
@@ -1375,6 +1240,168 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
             args: [{ name: 'lxUnlinkify' }]
         }] });
 
+class BrPipe {
+    transform(input, options = {}) {
+        if (input) {
+            if (options.isTrimEnd) {
+                input = trimEnd(input);
+            }
+            return input.replace(/[\n\r]/g, '<br/>');
+        }
+        return input;
+    }
+}
+BrPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: BrPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+BrPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: BrPipe, name: "lxBr" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: BrPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'lxBr'
+                }]
+        }] });
+
+/**
+ * Compute the most eligible text color for a given background color (black or white), depending on the luminance of the
+ * background color. In case the provided color is undefined or invalid, white (#FFFFFF) is returned.
+ *
+ * @param colorHex Color string in hexadecimal encoding.
+ * @returns Equivalent contrast color in hexadecimal encoding.
+ */
+function getContrastColor(colorHex) {
+    try {
+        const color = Color(colorHex || '#000');
+        // Check http://codepen.io/WebSeed/pen/pvgqEq
+        const a = 1 - (0.299 * color.red() + 0.587 * color.green() + 0.114 * color.blue()) / 255;
+        const d = a < 0.4 ? 0 : 255;
+        return Color({ r: d, g: d, b: d }).hex();
+    }
+    catch (_a) {
+        return '#FFFFFF';
+    }
+}
+function shorthandHexHandle(hex) {
+    const shorthandRegex = /^(#)([a-f\d])([a-f\d])([a-f\d])$/i;
+    const shorthand = hex.match(shorthandRegex);
+    if (shorthand) {
+        const convertedHex = shorthand[1] + shorthand[2] + shorthand[2] + shorthand[3] + shorthand[3] + shorthand[4] + shorthand[4];
+        return convertedHex;
+    }
+    else {
+        return hex;
+    }
+}
+function isValidHexColor(color) {
+    return /^#[0-9A-F]{6}$/i.test(color);
+}
+
+class ContrastColorPipe {
+    transform(color) {
+        if (color) {
+            return isValidHexColor(shorthandHexHandle(color)) ? getContrastColor(color) : '';
+        }
+        return '';
+    }
+}
+ContrastColorPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: ContrastColorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+ContrastColorPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: ContrastColorPipe, name: "lxContrastColor" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: ContrastColorPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'lxContrastColor'
+                }]
+        }] });
+
+const DATE_FORMATS = new InjectionToken('DATE_FORMATS', {
+    providedIn: 'root',
+    factory: () => ({
+        getDateFormat: () => 'YYYY-MM-DD',
+        getDateTimeFormat: () => 'YYYY-MM-DD HH:mm',
+        getDateTimeFormatWithSeconds: () => 'YYYY-MM-DD HH:mm:ss'
+    })
+});
+const DATE_FN_LOCALE = new InjectionToken('DATE_FN_LOCALE');
+const LOCALE_FN = new InjectionToken('LOCALE_FN');
+const GLOBAL_TRANSLATION_OPTIONS = new InjectionToken('GLOBAL_TRANSLATION_OPTIONS');
+
+class CustomDatePipe {
+    constructor(getDateFnLocale) {
+        this.getDateFnLocale = getDateFnLocale;
+    }
+    transform(value, f) {
+        const locale = this.getDateFnLocale ? this.getDateFnLocale() : null;
+        return value ? format(value, f, { locale }) : '';
+    }
+}
+CustomDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: CustomDatePipe, deps: [{ token: DATE_FN_LOCALE, optional: true }], target: i0.ɵɵFactoryTarget.Pipe });
+CustomDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: CustomDatePipe, name: "lxDate" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: CustomDatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'lxDate'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: Function, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATE_FN_LOCALE]
+                    }] }];
+    } });
+
+class HighlightRangePipe {
+    transform(text, offset = 0, length = 0) {
+        if (!text || offset < 0 || length < 0 || offset >= (text === null || text === void 0 ? void 0 : text.length) || offset + length > (text === null || text === void 0 ? void 0 : text.length)) {
+            return '';
+        }
+        const highlightedPart = text.slice(offset, offset + length);
+        return text.slice(0, offset) + (highlightedPart.length !== 0 ? this.highlight(highlightedPart) : '') + text.slice(offset + length);
+    }
+    highlight(text) {
+        return `<span class="termHighlight">${text}</span>`;
+    }
+}
+HighlightRangePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: HighlightRangePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+HighlightRangePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: HighlightRangePipe, name: "lxHighlightRange" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: HighlightRangePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'lxHighlightRange' }]
+        }] });
+
+/**
+ * These characters are treated as seperators by
+ * elasticsearch and split the input into search tokens
+ * which are used to find matches.
+ */
+const STANDARD_TOKENIZER_SEPERATORS = /[^a-zA-Z\d\s]/g;
+class HighlightTermPipe {
+    transform(text, search) {
+        if (search && text) {
+            let pattern = search
+                .replace(STANDARD_TOKENIZER_SEPERATORS, ' ')
+                // replace special chars for a backslash for RegExp
+                .replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
+            pattern = pattern
+                .split(' ')
+                .filter((t) => {
+                return t.length > 0;
+            })
+                .join('|');
+            const regex = new RegExp(pattern, 'gi');
+            text = _.escape(text);
+            return text.replace(regex, (match) => `<span class="termHighlight">${match}</span>`); // add highlighting to matched regex pattern
+        }
+        else {
+            return text;
+        }
+    }
+}
+HighlightTermPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: HighlightTermPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+HighlightTermPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: HighlightTermPipe, name: "lxHighlightTerm" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: HighlightTermPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'lxHighlightTerm' }]
+        }] });
+
 function isUuid(s) {
     const uuidRegEx = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/;
     return uuidRegEx.test(s);