@leanix/components 0.2.248 → 0.2.251

package/fesm2020/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 } 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';
@@ -604,10 +604,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);
@@ -676,7 +687,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);
@@ -688,12 +699,14 @@ __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,
                     args: [LX_ELLIPSIS_DEBOUNCE_ON_RESIZE]
                 }] }, { 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']
@@ -1033,172 +1046,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 {
-        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?.length || offset + length > 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
@@ -1206,7 +1061,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;
         }
@@ -1285,6 +1141,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
@@ -1366,6 +1233,166 @@ 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 {
+        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?.length || offset + length > 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);
@@ -6099,6 +6126,7 @@ class PopoverComponent {
     constructor() {
         this.noMargin = false;
         this.allowOverflow = false;
+        this.autoFocus = false;
         /**
          * If you have a popover, that should usually be displayed above or below its anchor,
          * and this anchor is in a scrollable container, you should set this to true.
@@ -6207,10 +6235,10 @@ class PopoverComponent {
     }
 }
 PopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: PopoverComponent, selector: "lx-popover", inputs: { trigger: "trigger", horizontalAlign: "horizontalAlign", verticalAlign: "verticalAlign", noMargin: "noMargin", allowOverflow: "allowOverflow", adaptMarginsForViewportAlignChange: "adaptMarginsForViewportAlignChange" }, outputs: { opened: "opened", closed: "closed" }, queries: [{ propertyName: "explicitContent", first: true, predicate: PopoverContentDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "satPopover", first: true, predicate: SatPopover, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<sat-popover\n  [anchor]=\"trigger.anchor\"\n  [horizontalAlign]=\"horizontalAlign\"\n  [verticalAlign]=\"verticalAlign\"\n  [restoreFocus]=\"false\"\n  [lockAlignment]=\"true\"\n  [autoFocus]=\"false\"\n  openTransition=\"0ms\"\n  closeTransition=\"0ms\"\n  (opened)=\"onOpen()\"\n  (afterOpen)=\"onAfterOpen()\"\n  (closed)=\"onClose()\"\n>\n  <div\n    class=\"popoverContainer\"\n    [ngClass]=\"marginClasses\"\n    [class.overflowHidden]=\"!allowOverflow\"\n    (mouseenter)=\"trigger.showPopover(true)\"\n    (mouseleave)=\"trigger.closePopover(true)\"\n  >\n    <ng-container *ngIf=\"isOpen\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </ng-container>\n  </div>\n</sat-popover>\n<ng-template #implicitContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.popoverContainer{position:relative;box-shadow:0 8px 12px 2px #00000026;max-width:600px;max-height:80vh;border-radius:3px;background-color:#fff;-webkit-hyphens:auto;hyphens:auto;animation:subtleScaleUpKeyFrames .2s ease}.popoverContainer.overflowHidden{overflow:hidden}.right{margin-left:18px}.left{margin-right:18px}.bottom{margin-top:18px}.top{margin-bottom:18px}\n"], components: [{ type: i1$6.SatPopover, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: PopoverComponent, selector: "lx-popover", inputs: { trigger: "trigger", horizontalAlign: "horizontalAlign", verticalAlign: "verticalAlign", noMargin: "noMargin", allowOverflow: "allowOverflow", autoFocus: "autoFocus", adaptMarginsForViewportAlignChange: "adaptMarginsForViewportAlignChange" }, outputs: { opened: "opened", closed: "closed" }, queries: [{ propertyName: "explicitContent", first: true, predicate: PopoverContentDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "satPopover", first: true, predicate: SatPopover, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<sat-popover\n  [anchor]=\"trigger.anchor\"\n  [horizontalAlign]=\"horizontalAlign\"\n  [verticalAlign]=\"verticalAlign\"\n  [restoreFocus]=\"false\"\n  [lockAlignment]=\"true\"\n  [autoFocus]=\"autoFocus\"\n  openTransition=\"0ms\"\n  closeTransition=\"0ms\"\n  (opened)=\"onOpen()\"\n  (afterOpen)=\"onAfterOpen()\"\n  (closed)=\"onClose()\"\n>\n  <div\n    class=\"popoverContainer\"\n    [ngClass]=\"marginClasses\"\n    [class.overflowHidden]=\"!allowOverflow\"\n    (mouseenter)=\"trigger.showPopover(true)\"\n    (mouseleave)=\"trigger.closePopover(true)\"\n    (keydown.escape)=\"$event.stopPropagation(); trigger.closePopover(true)\"\n  >\n    <ng-container *ngIf=\"isOpen\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </ng-container>\n  </div>\n</sat-popover>\n<ng-template #implicitContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.popoverContainer{position:relative;box-shadow:0 8px 12px 2px #00000026;max-width:600px;max-height:80vh;border-radius:3px;background-color:#fff;-webkit-hyphens:auto;hyphens:auto;animation:subtleScaleUpKeyFrames .2s ease}.popoverContainer.overflowHidden{overflow:hidden}.right{margin-left:18px}.left{margin-right:18px}.bottom{margin-top:18px}.top{margin-bottom:18px}\n"], components: [{ type: i1$6.SatPopover, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: PopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-popover', template: "<sat-popover\n  [anchor]=\"trigger.anchor\"\n  [horizontalAlign]=\"horizontalAlign\"\n  [verticalAlign]=\"verticalAlign\"\n  [restoreFocus]=\"false\"\n  [lockAlignment]=\"true\"\n  [autoFocus]=\"false\"\n  openTransition=\"0ms\"\n  closeTransition=\"0ms\"\n  (opened)=\"onOpen()\"\n  (afterOpen)=\"onAfterOpen()\"\n  (closed)=\"onClose()\"\n>\n  <div\n    class=\"popoverContainer\"\n    [ngClass]=\"marginClasses\"\n    [class.overflowHidden]=\"!allowOverflow\"\n    (mouseenter)=\"trigger.showPopover(true)\"\n    (mouseleave)=\"trigger.closePopover(true)\"\n  >\n    <ng-container *ngIf=\"isOpen\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </ng-container>\n  </div>\n</sat-popover>\n<ng-template #implicitContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.popoverContainer{position:relative;box-shadow:0 8px 12px 2px #00000026;max-width:600px;max-height:80vh;border-radius:3px;background-color:#fff;-webkit-hyphens:auto;hyphens:auto;animation:subtleScaleUpKeyFrames .2s ease}.popoverContainer.overflowHidden{overflow:hidden}.right{margin-left:18px}.left{margin-right:18px}.bottom{margin-top:18px}.top{margin-bottom:18px}\n"] }]
+            args: [{ selector: 'lx-popover', template: "<sat-popover\n  [anchor]=\"trigger.anchor\"\n  [horizontalAlign]=\"horizontalAlign\"\n  [verticalAlign]=\"verticalAlign\"\n  [restoreFocus]=\"false\"\n  [lockAlignment]=\"true\"\n  [autoFocus]=\"autoFocus\"\n  openTransition=\"0ms\"\n  closeTransition=\"0ms\"\n  (opened)=\"onOpen()\"\n  (afterOpen)=\"onAfterOpen()\"\n  (closed)=\"onClose()\"\n>\n  <div\n    class=\"popoverContainer\"\n    [ngClass]=\"marginClasses\"\n    [class.overflowHidden]=\"!allowOverflow\"\n    (mouseenter)=\"trigger.showPopover(true)\"\n    (mouseleave)=\"trigger.closePopover(true)\"\n    (keydown.escape)=\"$event.stopPropagation(); trigger.closePopover(true)\"\n  >\n    <ng-container *ngIf=\"isOpen\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </ng-container>\n  </div>\n</sat-popover>\n<ng-template #implicitContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.popoverContainer{position:relative;box-shadow:0 8px 12px 2px #00000026;max-width:600px;max-height:80vh;border-radius:3px;background-color:#fff;-webkit-hyphens:auto;hyphens:auto;animation:subtleScaleUpKeyFrames .2s ease}.popoverContainer.overflowHidden{overflow:hidden}.right{margin-left:18px}.left{margin-right:18px}.bottom{margin-top:18px}.top{margin-bottom:18px}\n"] }]
         }], propDecorators: { trigger: [{
                 type: Input
             }], horizontalAlign: [{
@@ -6221,6 +6249,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 type: Input
             }], allowOverflow: [{
                 type: Input
+            }], autoFocus: [{
+                type: Input
             }], adaptMarginsForViewportAlignChange: [{
                 type: Input
             }], opened: [{