@leanix/components 0.2.250 → 0.2.253

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);
@@ -2149,10 +2176,10 @@ class BasicDropdownComponent extends KeyboardSelectDirective {
     }
 }
 BasicDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: BasicDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-BasicDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: BasicDropdownComponent, selector: "lx-basic-dropdown", inputs: { options: "options", initiallySelectedIndex: "initiallySelectedIndex", labelKey: "labelKey", itemKey: "itemKey", placeholder: "placeholder", loading: "loading", newOptionLabel: "newOptionLabel", padding: "padding", showCreateNewOption: "showCreateNewOption", disabledOptions: "disabledOptions" }, outputs: { onItemSelected: "onItemSelected", triggerRequestForMoreEntries: "triggerRequestForMoreEntries", newOptionLabelSelected: "newOptionLabelSelected", createNewOptionSelected: "createNewOptionSelected" }, queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "createNewOptionTemplateRef", first: true, predicate: ["createNewOptionTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ul\n  class=\"options {{ padding }}Padding lxThinScrollbar\"\n  #keyboardSelectContainer\n  infinite-scroll\n  [scrollWindow]=\"false\"\n  [fromRoot]=\"true\"\n  (scrolled)=\"onScroll()\"\n>\n  <li\n    *ngIf=\"newOptionLabel && isNewItem\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    (click)=\"onNewItemSelected()\"\n    (select)=\"onNewItemSelected()\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    class=\"option keyboardSelectable onTheFlyOption\"\n  >\n    <span class=\"newEntryContent\">\n      {{ newOptionLabel }}\n    </span>\n    <lx-badge class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\"></lx-badge>\n  </li>\n  <li\n    *ngIf=\"showCreateNewOption\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    (click)=\"onCreateNewOptionSelected()\"\n    (select)=\"onCreateNewOptionSelected()\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    class=\"option keyboardSelectable newEntryOption\"\n  >\n    <span class=\"newEntryContent\">\n      <ng-container *ngIf=\"createNewOptionTemplateRef; else defaultNewOption\">\n        <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\"></ng-container>\n      </ng-container>\n      <ng-template #defaultNewOption>\n        <span>\n          {{ NAME + '.new' | translate }}\n        </span>\n      </ng-template>\n    </span>\n  </li>\n  <li\n    *ngIf=\"options?.length === 0 && !newOptionLabel && !loading\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    class=\"option keyboardSelectable noOptionsAvailable\"\n  >\n    {{ NAME + '.noResults' | translate }}\n  </li>\n  <li\n    *ngIf=\"placeholder\"\n    class=\"option keyboardSelectable clearSelection\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    (click)=\"selectOption(null)\"\n    (select)=\"selectOption(null)\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n  >\n    {{ placeholder }}\n  </li>\n  <li\n    *ngFor=\"let option of options; let index = index; trackBy: trackByProp(itemKey)\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    class=\"option keyboardSelectable\"\n    (click)=\"selectOption(option)\"\n    (select)=\"selectOption(option)\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    [class.initiallySelected]=\"index === initiallySelectedIndex\"\n    [class.disabledItem]=\"itemKey ? !!disabledOptions[option[itemKey]] : false\"\n  >\n    <ng-container *ngIf=\"optionTemplateRef; else simpleStringDisplay\">\n      <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\"></ng-container>\n    </ng-container>\n    <ng-template #simpleStringDisplay>\n      <span>\n        {{ labelKey ? option[labelKey] : option }}\n      </span>\n    </ng-template>\n  </li>\n  <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\"></lx-spinner>\n</ul>\n", styles: [":host(.noOptionPadding) .options .option{padding:0}.defaultPadding .newEntryOption,.defaultPadding .onTheFlyOption,.defaultPadding .noOptionsAvailable{padding:4px 12px!important}.narrowPadding .newEntryOption,.narrowPadding .onTheFlyOption,.narrowPadding .noOptionsAvailable{padding:4px!important}.options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px}.options.defaultPadding .option{padding:4px 12px}.options.narrowPadding .option{padding:4px}.optionSearch{padding:2px}.option{cursor:pointer;display:block}.option:hover:not(.disabledItem){background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option.initiallySelected{color:var(--lx-primarybutton-backgroundcolor)}.option.disabledItem{cursor:default;opacity:.5}\n"], components: [{ type: BadgeComponent, selector: "lx-badge", inputs: ["content", "size", "color"] }, { type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }], directives: [{ type: i3.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i2.AsyncPipe, "uppercase": i2.UpperCasePipe, "translate": i1$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BasicDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: BasicDropdownComponent, selector: "lx-basic-dropdown", inputs: { options: "options", initiallySelectedIndex: "initiallySelectedIndex", labelKey: "labelKey", itemKey: "itemKey", placeholder: "placeholder", loading: "loading", newOptionLabel: "newOptionLabel", padding: "padding", showCreateNewOption: "showCreateNewOption", disabledOptions: "disabledOptions" }, outputs: { onItemSelected: "onItemSelected", triggerRequestForMoreEntries: "triggerRequestForMoreEntries", newOptionLabelSelected: "newOptionLabelSelected", createNewOptionSelected: "createNewOptionSelected" }, queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "createNewOptionTemplateRef", first: true, predicate: ["createNewOptionTemplate"], descendants: true }, { propertyName: "descriptionTemplateRef", first: true, predicate: ["descriptionTemplateRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ul\n  class=\"options {{ padding }}Padding lxThinScrollbar\"\n  #keyboardSelectContainer\n  infinite-scroll\n  [scrollWindow]=\"false\"\n  [fromRoot]=\"true\"\n  (scrolled)=\"onScroll()\"\n>\n  <li\n    *ngIf=\"newOptionLabel && isNewItem\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    (click)=\"onNewItemSelected()\"\n    (select)=\"onNewItemSelected()\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    class=\"option keyboardSelectable onTheFlyOption\"\n  >\n    <span class=\"newEntryContent\">\n      {{ newOptionLabel }}\n    </span>\n    <lx-badge class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\"></lx-badge>\n  </li>\n  <li\n    *ngIf=\"showCreateNewOption\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    (click)=\"onCreateNewOptionSelected()\"\n    (select)=\"onCreateNewOptionSelected()\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    class=\"option keyboardSelectable newEntryOption\"\n  >\n    <span class=\"newEntryContent\">\n      <ng-container *ngIf=\"createNewOptionTemplateRef; else defaultNewOption\">\n        <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\"></ng-container>\n      </ng-container>\n      <ng-template #defaultNewOption>\n        <span>\n          {{ NAME + '.new' | translate }}\n        </span>\n      </ng-template>\n    </span>\n  </li>\n  <li\n    *ngIf=\"descriptionTemplateRef\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    class=\"option description disabledItem\"\n  >\n    <span class=\"descriptionContent\">\n      <ng-container *ngTemplateOutlet=\"descriptionTemplateRef\"></ng-container>\n    </span>\n  </li>\n  <li\n    *ngIf=\"options?.length === 0 && !newOptionLabel && !loading\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    class=\"option keyboardSelectable noOptionsAvailable\"\n  >\n    {{ NAME + '.noResults' | translate }}\n  </li>\n  <li\n    *ngIf=\"placeholder\"\n    class=\"option keyboardSelectable clearSelection\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    (click)=\"selectOption(null)\"\n    (select)=\"selectOption(null)\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n  >\n    {{ placeholder }}\n  </li>\n  <li\n    *ngFor=\"let option of options; let index = index; trackBy: trackByProp(itemKey)\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    class=\"option keyboardSelectable\"\n    (click)=\"selectOption(option)\"\n    (select)=\"selectOption(option)\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    [class.initiallySelected]=\"index === initiallySelectedIndex\"\n    [class.disabledItem]=\"itemKey ? !!disabledOptions[option[itemKey]] : false\"\n  >\n    <ng-container *ngIf=\"optionTemplateRef; else simpleStringDisplay\">\n      <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\"></ng-container>\n    </ng-container>\n    <ng-template #simpleStringDisplay>\n      <span>\n        {{ labelKey ? option[labelKey] : option }}\n      </span>\n    </ng-template>\n  </li>\n  <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\"></lx-spinner>\n</ul>\n", styles: [":host(.noOptionPadding) .options .option{padding:0}.defaultPadding .newEntryOption,.defaultPadding .onTheFlyOption,.defaultPadding .noOptionsAvailable{padding:4px 12px!important}.narrowPadding .newEntryOption,.narrowPadding .onTheFlyOption,.narrowPadding .noOptionsAvailable{padding:4px!important}.options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px}.options.defaultPadding .option{padding:4px 12px}.options.narrowPadding .option{padding:4px}.optionSearch{padding:2px}.option{cursor:pointer;display:block}.option:hover:not(.disabledItem){background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option.initiallySelected{color:var(--lx-primarybutton-backgroundcolor)}.option.disabledItem{cursor:default;opacity:.5}\n"], components: [{ type: BadgeComponent, selector: "lx-badge", inputs: ["content", "size", "color"] }, { type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }], directives: [{ type: i3.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i2.AsyncPipe, "uppercase": i2.UpperCasePipe, "translate": i1$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: BasicDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-basic-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul\n  class=\"options {{ padding }}Padding lxThinScrollbar\"\n  #keyboardSelectContainer\n  infinite-scroll\n  [scrollWindow]=\"false\"\n  [fromRoot]=\"true\"\n  (scrolled)=\"onScroll()\"\n>\n  <li\n    *ngIf=\"newOptionLabel && isNewItem\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    (click)=\"onNewItemSelected()\"\n    (select)=\"onNewItemSelected()\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    class=\"option keyboardSelectable onTheFlyOption\"\n  >\n    <span class=\"newEntryContent\">\n      {{ newOptionLabel }}\n    </span>\n    <lx-badge class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\"></lx-badge>\n  </li>\n  <li\n    *ngIf=\"showCreateNewOption\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    (click)=\"onCreateNewOptionSelected()\"\n    (select)=\"onCreateNewOptionSelected()\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    class=\"option keyboardSelectable newEntryOption\"\n  >\n    <span class=\"newEntryContent\">\n      <ng-container *ngIf=\"createNewOptionTemplateRef; else defaultNewOption\">\n        <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\"></ng-container>\n      </ng-container>\n      <ng-template #defaultNewOption>\n        <span>\n          {{ NAME + '.new' | translate }}\n        </span>\n      </ng-template>\n    </span>\n  </li>\n  <li\n    *ngIf=\"options?.length === 0 && !newOptionLabel && !loading\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    class=\"option keyboardSelectable noOptionsAvailable\"\n  >\n    {{ NAME + '.noResults' | translate }}\n  </li>\n  <li\n    *ngIf=\"placeholder\"\n    class=\"option keyboardSelectable clearSelection\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    (click)=\"selectOption(null)\"\n    (select)=\"selectOption(null)\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n  >\n    {{ placeholder }}\n  </li>\n  <li\n    *ngFor=\"let option of options; let index = index; trackBy: trackByProp(itemKey)\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    class=\"option keyboardSelectable\"\n    (click)=\"selectOption(option)\"\n    (select)=\"selectOption(option)\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    [class.initiallySelected]=\"index === initiallySelectedIndex\"\n    [class.disabledItem]=\"itemKey ? !!disabledOptions[option[itemKey]] : false\"\n  >\n    <ng-container *ngIf=\"optionTemplateRef; else simpleStringDisplay\">\n      <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\"></ng-container>\n    </ng-container>\n    <ng-template #simpleStringDisplay>\n      <span>\n        {{ labelKey ? option[labelKey] : option }}\n      </span>\n    </ng-template>\n  </li>\n  <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\"></lx-spinner>\n</ul>\n", styles: [":host(.noOptionPadding) .options .option{padding:0}.defaultPadding .newEntryOption,.defaultPadding .onTheFlyOption,.defaultPadding .noOptionsAvailable{padding:4px 12px!important}.narrowPadding .newEntryOption,.narrowPadding .onTheFlyOption,.narrowPadding .noOptionsAvailable{padding:4px!important}.options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px}.options.defaultPadding .option{padding:4px 12px}.options.narrowPadding .option{padding:4px}.optionSearch{padding:2px}.option{cursor:pointer;display:block}.option:hover:not(.disabledItem){background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option.initiallySelected{color:var(--lx-primarybutton-backgroundcolor)}.option.disabledItem{cursor:default;opacity:.5}\n"] }]
+            args: [{ selector: 'lx-basic-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul\n  class=\"options {{ padding }}Padding lxThinScrollbar\"\n  #keyboardSelectContainer\n  infinite-scroll\n  [scrollWindow]=\"false\"\n  [fromRoot]=\"true\"\n  (scrolled)=\"onScroll()\"\n>\n  <li\n    *ngIf=\"newOptionLabel && isNewItem\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    (click)=\"onNewItemSelected()\"\n    (select)=\"onNewItemSelected()\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    class=\"option keyboardSelectable onTheFlyOption\"\n  >\n    <span class=\"newEntryContent\">\n      {{ newOptionLabel }}\n    </span>\n    <lx-badge class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\"></lx-badge>\n  </li>\n  <li\n    *ngIf=\"showCreateNewOption\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    (click)=\"onCreateNewOptionSelected()\"\n    (select)=\"onCreateNewOptionSelected()\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    class=\"option keyboardSelectable newEntryOption\"\n  >\n    <span class=\"newEntryContent\">\n      <ng-container *ngIf=\"createNewOptionTemplateRef; else defaultNewOption\">\n        <ng-container *ngTemplateOutlet=\"createNewOptionTemplateRef\"></ng-container>\n      </ng-container>\n      <ng-template #defaultNewOption>\n        <span>\n          {{ NAME + '.new' | translate }}\n        </span>\n      </ng-template>\n    </span>\n  </li>\n  <li\n    *ngIf=\"descriptionTemplateRef\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    class=\"option description disabledItem\"\n  >\n    <span class=\"descriptionContent\">\n      <ng-container *ngTemplateOutlet=\"descriptionTemplateRef\"></ng-container>\n    </span>\n  </li>\n  <li\n    *ngIf=\"options?.length === 0 && !newOptionLabel && !loading\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    class=\"option keyboardSelectable noOptionsAvailable\"\n  >\n    {{ NAME + '.noResults' | translate }}\n  </li>\n  <li\n    *ngIf=\"placeholder\"\n    class=\"option keyboardSelectable clearSelection\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    (click)=\"selectOption(null)\"\n    (select)=\"selectOption(null)\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n  >\n    {{ placeholder }}\n  </li>\n  <li\n    *ngFor=\"let option of options; let index = index; trackBy: trackByProp(itemKey)\"\n    lxSelectableItem\n    [scrollInContainer]=\"keyboardSelectContainer\"\n    #item\n    class=\"option keyboardSelectable\"\n    (click)=\"selectOption(option)\"\n    (select)=\"selectOption(option)\"\n    [class.selected]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n    [class.initiallySelected]=\"index === initiallySelectedIndex\"\n    [class.disabledItem]=\"itemKey ? !!disabledOptions[option[itemKey]] : false\"\n  >\n    <ng-container *ngIf=\"optionTemplateRef; else simpleStringDisplay\">\n      <ng-container *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index }\"></ng-container>\n    </ng-container>\n    <ng-template #simpleStringDisplay>\n      <span>\n        {{ labelKey ? option[labelKey] : option }}\n      </span>\n    </ng-template>\n  </li>\n  <lx-spinner *ngIf=\"loading\" [fadeBackground]=\"true\"></lx-spinner>\n</ul>\n", styles: [":host(.noOptionPadding) .options .option{padding:0}.defaultPadding .newEntryOption,.defaultPadding .onTheFlyOption,.defaultPadding .noOptionsAvailable{padding:4px 12px!important}.narrowPadding .newEntryOption,.narrowPadding .onTheFlyOption,.narrowPadding .noOptionsAvailable{padding:4px!important}.options{list-style:none;margin:0;padding:0;overflow-y:auto;max-height:250px}.options.defaultPadding .option{padding:4px 12px}.options.narrowPadding .option{padding:4px}.optionSearch{padding:2px}.option{cursor:pointer;display:block}.option:hover:not(.disabledItem){background-color:#e1e5eb!important}.option.selected{background:#eaedf1}.option.initiallySelected{color:var(--lx-primarybutton-backgroundcolor)}.option.disabledItem{cursor:default;opacity:.5}\n"] }]
         }], propDecorators: { options: [{
                 type: Input
             }], initiallySelectedIndex: [{
@@ -2187,6 +2214,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
             }], createNewOptionTemplateRef: [{
                 type: ContentChild,
                 args: ['createNewOptionTemplate']
+            }], descriptionTemplateRef: [{
+                type: ContentChild,
+                args: ['descriptionTemplateRef']
             }] } });
 
 // We can only use 'keyCode' because 'key' depends on the browser and does not work for IE11
@@ -3141,7 +3171,7 @@ DateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versi
 DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DateInputComponent, selector: "lx-date-input", inputs: { date: "date", dateString: "dateString", valueAccessor: "valueAccessor", inputId: "inputId", renderingStyle: "renderingStyle", placeholder: "placeholder", datepickerMode: "datepickerMode", initDateString: "initDateString", minDate: "minDate", maxDate: "maxDate", minMode: "minMode", maxMode: "maxMode", showWeeks: "showWeeks", formatDay: "formatDay", formatMonth: "formatMonth", formatYear: "formatYear", formatDayHeader: "formatDayHeader", formatDayTitle: "formatDayTitle", formatMonthTitle: "formatMonthTitle", startingDay: "startingDay", yearRange: "yearRange", onlyCurrentMonth: "onlyCurrentMonth", shortcutPropagation: "shortcutPropagation", customClass: "customClass", disabled: "disabled", dateDisabled: "dateDisabled" }, outputs: { dateChange: "dateChange", dateStringChange: "dateStringChange" }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true }
-    ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"backdrop\" *ngIf=\"showDatepicker\" (click)=\"hidePopup()\"></div>\n<span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n  <input\n    #input\n    class=\"form-control dateControl\"\n    placeholder=\"{{ placeholder }}\"\n    [id]=\"inputId\"\n    [(ngModel)]=\"dateString\"\n    [disabled]=\"disabled\"\n    (ngModelChange)=\"onDateStringChange($event)\"\n    (focus)=\"showPopup()\"\n    (blur)=\"onBlur()\"\n    (keydown.enter)=\"hidePopup()\"\n    (keydown.escape)=\"hidePopup()\"\n    (keydown.tab)=\"hidePopup()\"\n    (keydown.shift.tab)=\"hidePopup()\"\n    [class.text-danger]=\"hasError\"\n    *ngIf=\"renderingStyle === 'INPUT'\"\n  />\n  <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate: dateFormat }}</a>\n  <div class=\"datepickerContainer\">\n    <div class=\"calendar\">\n      <datepicker\n        class=\"popup\"\n        *ngIf=\"showDatepicker\"\n        (selectionDone)=\"onSelectionDone($event)\"\n        [ngModel]=\"date\"\n        [datepickerMode]=\"datepickerMode\"\n        [initDate]=\"initDate\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [minMode]=\"minMode\"\n        [maxMode]=\"maxMode\"\n        [showWeeks]=\"showWeeks\"\n        [formatDay]=\"formatDay\"\n        [formatMonth]=\"formatMonth\"\n        [formatYear]=\"formatYear\"\n        [formatDayHeader]=\"formatDayHeader\"\n        [formatDayTitle]=\"formatDayTitle\"\n        [formatMonthTitle]=\"formatMonthTitle\"\n        [startingDay]=\"startingDay\"\n        [yearRange]=\"yearRange\"\n        [onlyCurrentMonth]=\"onlyCurrentMonth\"\n        [shortcutPropagation]=\"shortcutPropagation\"\n        [customClass]=\"customClass\"\n        [dateDisabled]=\"dateDisabled\"\n      >\n      </datepicker>\n    </div>\n  </div>\n</span>\n", styles: [".backdrop{position:fixed;top:0;right:0;bottom:0;left:0}.datepickerContainer{position:absolute;z-index:700}.wrapper .forLink .popup{top:15px}.dateControl,.calendar{position:relative}.popup{position:relative;left:0;z-index:700;border-radius:3px}.popup ::ng-deep .text-info{color:#2a303d}.popup ::ng-deep .text-muted{color:#99a5bb}.popup ::ng-deep .btn.active,.popup ::ng-deep .btn.active .text-info{color:#fff;background-color:#2a303d}.popup ::ng-deep .well{margin:0;border:1px solid #2a303d}:host-context(.input-group) .datepickerContainer{top:100%}\n"], components: [{ type: i1$3.DatePickerComponent, selector: "datepicker", inputs: ["datepickerMode", "showWeeks", "activeDate", "initDate", "minDate", "maxDate", "minMode", "maxMode", "formatDay", "formatMonth", "formatYear", "formatDayHeader", "formatDayTitle", "formatMonthTitle", "startingDay", "yearRange", "onlyCurrentMonth", "shortcutPropagation", "monthColLimit", "yearColLimit", "customClass", "dateDisabled", "dayDisabled"], outputs: ["selectionDone", "activeDateChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "lxDate": CustomDatePipe } });
+    ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"backdrop\" *ngIf=\"showDatepicker\" (click)=\"hidePopup()\"></div>\n<span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n  <input\n    #input\n    class=\"form-control dateControl\"\n    placeholder=\"{{ placeholder }}\"\n    [id]=\"inputId\"\n    [(ngModel)]=\"dateString\"\n    [disabled]=\"disabled\"\n    (ngModelChange)=\"onDateStringChange($event)\"\n    (focus)=\"showPopup()\"\n    (blur)=\"onBlur()\"\n    (keydown.enter)=\"hidePopup()\"\n    (keydown.escape)=\"hidePopup()\"\n    (keydown.tab)=\"hidePopup()\"\n    (keydown.shift.tab)=\"hidePopup()\"\n    [class.text-danger]=\"hasError\"\n    *ngIf=\"renderingStyle === 'INPUT'\"\n  />\n  <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate: dateFormat }}</a>\n  <div class=\"datepickerContainer\">\n    <div class=\"calendar\">\n      <datepicker\n        class=\"popup\"\n        *ngIf=\"showDatepicker\"\n        (selectionDone)=\"onSelectionDone($event)\"\n        [ngModel]=\"date\"\n        [datepickerMode]=\"datepickerMode\"\n        [initDate]=\"initDate\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [minMode]=\"minMode\"\n        [maxMode]=\"maxMode\"\n        [showWeeks]=\"showWeeks\"\n        [formatDay]=\"formatDay\"\n        [formatMonth]=\"formatMonth\"\n        [formatYear]=\"formatYear\"\n        [formatDayHeader]=\"formatDayHeader\"\n        [formatDayTitle]=\"formatDayTitle\"\n        [formatMonthTitle]=\"formatMonthTitle\"\n        [startingDay]=\"startingDay\"\n        [yearRange]=\"yearRange\"\n        [onlyCurrentMonth]=\"onlyCurrentMonth\"\n        [shortcutPropagation]=\"shortcutPropagation\"\n        [customClass]=\"customClass\"\n        [dateDisabled]=\"dateDisabled\"\n      >\n      </datepicker>\n    </div>\n  </div>\n</span>\n", styles: [":host.dateControl--border-right-radius-0 input.dateControl{border-top-right-radius:0;border-bottom-right-radius:0}:host.dateControl--border-0 input.dateControl{border:0}:host.dateControl--no-box-shadow input.dateControl{box-shadow:none}.backdrop{position:fixed;z-index:2;top:0;right:0;bottom:0;left:0}.datepickerContainer{position:absolute;z-index:700}.wrapper .forLink .popup{top:15px}.dateControl,.calendar{position:relative}.popup{position:relative;left:0;z-index:700;border-radius:3px}.popup ::ng-deep .text-info{color:#2a303d}.popup ::ng-deep .text-muted{color:#99a5bb}.popup ::ng-deep .btn.active,.popup ::ng-deep .btn.active .text-info{color:#fff;background-color:#2a303d}.popup ::ng-deep .well{margin:0;border:1px solid #2a303d}:host-context(.input-group) .datepickerContainer{top:100%}\n"], components: [{ type: i1$3.DatePickerComponent, selector: "datepicker", inputs: ["datepickerMode", "showWeeks", "activeDate", "initDate", "minDate", "maxDate", "minMode", "maxMode", "formatDay", "formatMonth", "formatYear", "formatDayHeader", "formatDayTitle", "formatMonthTitle", "startingDay", "yearRange", "onlyCurrentMonth", "shortcutPropagation", "monthColLimit", "yearColLimit", "customClass", "dateDisabled", "dayDisabled"], outputs: ["selectionDone", "activeDateChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "lxDate": CustomDatePipe } });
 __decorate([
     Observe('initDateString')
 ], DateInputComponent.prototype, "initDateString$", void 0);
@@ -3150,7 +3180,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
             args: [{ selector: 'lx-date-input', providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true }
-                    ], template: "<div class=\"backdrop\" *ngIf=\"showDatepicker\" (click)=\"hidePopup()\"></div>\n<span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n  <input\n    #input\n    class=\"form-control dateControl\"\n    placeholder=\"{{ placeholder }}\"\n    [id]=\"inputId\"\n    [(ngModel)]=\"dateString\"\n    [disabled]=\"disabled\"\n    (ngModelChange)=\"onDateStringChange($event)\"\n    (focus)=\"showPopup()\"\n    (blur)=\"onBlur()\"\n    (keydown.enter)=\"hidePopup()\"\n    (keydown.escape)=\"hidePopup()\"\n    (keydown.tab)=\"hidePopup()\"\n    (keydown.shift.tab)=\"hidePopup()\"\n    [class.text-danger]=\"hasError\"\n    *ngIf=\"renderingStyle === 'INPUT'\"\n  />\n  <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate: dateFormat }}</a>\n  <div class=\"datepickerContainer\">\n    <div class=\"calendar\">\n      <datepicker\n        class=\"popup\"\n        *ngIf=\"showDatepicker\"\n        (selectionDone)=\"onSelectionDone($event)\"\n        [ngModel]=\"date\"\n        [datepickerMode]=\"datepickerMode\"\n        [initDate]=\"initDate\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [minMode]=\"minMode\"\n        [maxMode]=\"maxMode\"\n        [showWeeks]=\"showWeeks\"\n        [formatDay]=\"formatDay\"\n        [formatMonth]=\"formatMonth\"\n        [formatYear]=\"formatYear\"\n        [formatDayHeader]=\"formatDayHeader\"\n        [formatDayTitle]=\"formatDayTitle\"\n        [formatMonthTitle]=\"formatMonthTitle\"\n        [startingDay]=\"startingDay\"\n        [yearRange]=\"yearRange\"\n        [onlyCurrentMonth]=\"onlyCurrentMonth\"\n        [shortcutPropagation]=\"shortcutPropagation\"\n        [customClass]=\"customClass\"\n        [dateDisabled]=\"dateDisabled\"\n      >\n      </datepicker>\n    </div>\n  </div>\n</span>\n", styles: [".backdrop{position:fixed;top:0;right:0;bottom:0;left:0}.datepickerContainer{position:absolute;z-index:700}.wrapper .forLink .popup{top:15px}.dateControl,.calendar{position:relative}.popup{position:relative;left:0;z-index:700;border-radius:3px}.popup ::ng-deep .text-info{color:#2a303d}.popup ::ng-deep .text-muted{color:#99a5bb}.popup ::ng-deep .btn.active,.popup ::ng-deep .btn.active .text-info{color:#fff;background-color:#2a303d}.popup ::ng-deep .well{margin:0;border:1px solid #2a303d}:host-context(.input-group) .datepickerContainer{top:100%}\n"] }]
+                    ], template: "<div class=\"backdrop\" *ngIf=\"showDatepicker\" (click)=\"hidePopup()\"></div>\n<span class=\"wrapper\" [class.forLink]=\"renderingStyle === 'LINK'\" [class.has-error]=\"hasError\">\n  <input\n    #input\n    class=\"form-control dateControl\"\n    placeholder=\"{{ placeholder }}\"\n    [id]=\"inputId\"\n    [(ngModel)]=\"dateString\"\n    [disabled]=\"disabled\"\n    (ngModelChange)=\"onDateStringChange($event)\"\n    (focus)=\"showPopup()\"\n    (blur)=\"onBlur()\"\n    (keydown.enter)=\"hidePopup()\"\n    (keydown.escape)=\"hidePopup()\"\n    (keydown.tab)=\"hidePopup()\"\n    (keydown.shift.tab)=\"hidePopup()\"\n    [class.text-danger]=\"hasError\"\n    *ngIf=\"renderingStyle === 'INPUT'\"\n  />\n  <a class=\"dateControl\" (click)=\"togglePopup()\" *ngIf=\"renderingStyle === 'LINK'\">{{ date | lxDate: dateFormat }}</a>\n  <div class=\"datepickerContainer\">\n    <div class=\"calendar\">\n      <datepicker\n        class=\"popup\"\n        *ngIf=\"showDatepicker\"\n        (selectionDone)=\"onSelectionDone($event)\"\n        [ngModel]=\"date\"\n        [datepickerMode]=\"datepickerMode\"\n        [initDate]=\"initDate\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [minMode]=\"minMode\"\n        [maxMode]=\"maxMode\"\n        [showWeeks]=\"showWeeks\"\n        [formatDay]=\"formatDay\"\n        [formatMonth]=\"formatMonth\"\n        [formatYear]=\"formatYear\"\n        [formatDayHeader]=\"formatDayHeader\"\n        [formatDayTitle]=\"formatDayTitle\"\n        [formatMonthTitle]=\"formatMonthTitle\"\n        [startingDay]=\"startingDay\"\n        [yearRange]=\"yearRange\"\n        [onlyCurrentMonth]=\"onlyCurrentMonth\"\n        [shortcutPropagation]=\"shortcutPropagation\"\n        [customClass]=\"customClass\"\n        [dateDisabled]=\"dateDisabled\"\n      >\n      </datepicker>\n    </div>\n  </div>\n</span>\n", styles: [":host.dateControl--border-right-radius-0 input.dateControl{border-top-right-radius:0;border-bottom-right-radius:0}:host.dateControl--border-0 input.dateControl{border:0}:host.dateControl--no-box-shadow input.dateControl{box-shadow:none}.backdrop{position:fixed;z-index:2;top:0;right:0;bottom:0;left:0}.datepickerContainer{position:absolute;z-index:700}.wrapper .forLink .popup{top:15px}.dateControl,.calendar{position:relative}.popup{position:relative;left:0;z-index:700;border-radius:3px}.popup ::ng-deep .text-info{color:#2a303d}.popup ::ng-deep .text-muted{color:#99a5bb}.popup ::ng-deep .btn.active,.popup ::ng-deep .btn.active .text-info{color:#fff;background-color:#2a303d}.popup ::ng-deep .well{margin:0;border:1px solid #2a303d}:host-context(.input-group) .datepickerContainer{top:100%}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                         type: Inject,
@@ -5214,7 +5244,7 @@ SingleSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             multi: true,
             useExisting: forwardRef(() => SingleSelectComponent)
         }
-    ], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "explicitSelectedOption", first: true, predicate: SelectedOptionDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "dropdownComponent", first: true, predicate: BasicDropdownComponent, descendants: true }], viewQueries: [{ propertyName: "implicitSelectedOption", first: true, predicate: ["selectedOption"], descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "queryInput", first: true, predicate: ["queryInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"dropdownOpen\" class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer {{ padding }}Padding\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.disabled]=\"disabled\"\n  [class.grayBackground]=\"selectionBackground === 'gray'\"\n  [class.defaultSize]=\"size === 'default'\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.select2Size]=\"size === 'select2'\"\n  [class.largeSize]=\"size === 'large'\"\n  [style.cursor]=\"cursorStyle\"\n  [class.focused]=\"isInputFocused\"\n  (click)=\"handleClick($event.target === toggle)\"\n>\n  <div class=\"selectionContainer\">\n    <div class=\"inputContainer\">\n      <div *ngIf=\"!selection && !queryInput?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n        {{ placeholder }}\n      </div>\n      <div\n        *ngIf=\"!allowQuery || !queryInput?.value\"\n        class=\"selection\"\n        [class.lowerOpacity]=\"allowQuery && !queryInput?.value && dropdownOpen\"\n        [class.lightgrayColor]=\"!allowQuery && dropdownOpen\"\n        (click)=\"$event.stopPropagation(); focus()\"\n      >\n        <ng-container *ngTemplateOutlet=\"selectedOptionTmpl\"></ng-container>\n      </div>\n      <input\n        #queryInput\n        class=\"queryInput\"\n        type=\"text\"\n        [class.isHidden]=\"!allowQuery\"\n        (keydown.enter)=\"$event.preventDefault()\"\n        (focus)=\"isInputFocused = true\"\n        (blur)=\"isInputFocused = false; blur.emit()\"\n        [tabIndex]=\"disabled ? -1 : tabIndex\"\n        [formControl]=\"queryControl\"\n        [readOnly]=\"!allowQuery\"\n      />\n    </div>\n    <div class=\"iconContainer\">\n      <i *ngIf=\"selection && allowClear\" class=\"far fa-times\" (click)=\"!disabled && removeSelection()\"></i>\n      <i #toggle class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n    </div>\n  </div>\n  <div class=\"optionsContainer\" [style.width]=\"dropdownWidth\" #optionsContainer>\n    <ng-container *ngIf=\"dropdownOpen\">\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\"></ng-content>\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}.selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;background:#fff;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px}.selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #5599ff}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}.selectContainer.defaultPadding .selectionContainer{padding-left:12px}.selectContainer.narrowPadding .selectionContainer{padding-left:4px}.selectContainer .lightgrayColor{color:#8594ad}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.queryInput{width:100%;-webkit-appearance:none;appearance:none;border:0;padding-left:0;background:transparent;position:relative;cursor:inherit}.queryInput::-ms-clear{display:none}.queryInput:focus{outline:0}.queryInput.isHidden{opacity:0}.placeholder{position:absolute;width:100%;text-align:left;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.iconContainer{display:flex;align-items:center;text-align:center}.iconContainer .far,.iconContainer .fas{width:10px;cursor:pointer}.disabled .iconContainer .far,.disabled .iconContainer .fas{cursor:inherit}.iconContainer .fa-angle-down{margin:0 12px}.iconContainer .fa-times{margin-left:4px}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;top:0;bottom:0;left:0;right:0;z-index:1048}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}.defaultSize .inputContainer,.defaultSize .queryInput,.defaultSize .selection,.defaultSize .iconContainer{height:29px}.defaultSize .inputContainer{line-height:29px}.defaultSize .selectionContainer{min-height:29px}.smallSize .inputContainer,.smallSize .queryInput,.smallSize .selection,.smallSize .iconContainer{height:22px}.smallSize .inputContainer{line-height:22px}.smallSize .selectionContainer{min-height:22px}.select2Size .inputContainer,.select2Size .queryInput,.select2Size .selection,.select2Size .iconContainer{height:26px}.select2Size .inputContainer{line-height:26px}.select2Size .selectionContainer{min-height:26px}.largeSize .inputContainer,.largeSize .queryInput,.largeSize .selection,.largeSize .iconContainer{height:40px}.largeSize .inputContainer{line-height:40px}.largeSize .selectionContainer{min-height:40px}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i2.AsyncPipe } });
+    ], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "explicitSelectedOption", first: true, predicate: SelectedOptionDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "dropdownComponent", first: true, predicate: BasicDropdownComponent, descendants: true }], viewQueries: [{ propertyName: "implicitSelectedOption", first: true, predicate: ["selectedOption"], descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "queryInput", first: true, predicate: ["queryInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"dropdownOpen\" class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer {{ padding }}Padding\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.disabled]=\"disabled\"\n  [class.grayBackground]=\"selectionBackground === 'gray'\"\n  [class.defaultSize]=\"size === 'default'\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.select2Size]=\"size === 'select2'\"\n  [class.largeSize]=\"size === 'large'\"\n  [style.cursor]=\"cursorStyle\"\n  [class.focused]=\"isInputFocused\"\n  (click)=\"handleClick($event.target === toggle)\"\n>\n  <div class=\"selectionContainer\">\n    <div class=\"inputContainer\">\n      <div *ngIf=\"!selection && !queryInput?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n        {{ placeholder }}\n      </div>\n      <div\n        *ngIf=\"!allowQuery || !queryInput?.value\"\n        class=\"selection\"\n        [class.lowerOpacity]=\"allowQuery && !queryInput?.value && dropdownOpen\"\n        [class.lightgrayColor]=\"!allowQuery && dropdownOpen\"\n        (click)=\"$event.stopPropagation(); focus()\"\n      >\n        <ng-container *ngTemplateOutlet=\"selectedOptionTmpl\"></ng-container>\n      </div>\n      <input\n        #queryInput\n        class=\"queryInput\"\n        type=\"text\"\n        [class.isHidden]=\"!allowQuery\"\n        (keydown.enter)=\"$event.preventDefault()\"\n        (focus)=\"isInputFocused = true\"\n        (blur)=\"isInputFocused = false; blur.emit()\"\n        [tabIndex]=\"disabled ? -1 : tabIndex\"\n        [formControl]=\"queryControl\"\n        [readOnly]=\"!allowQuery\"\n      />\n    </div>\n    <div class=\"iconContainer\">\n      <i *ngIf=\"selection && allowClear\" class=\"far fa-times\" (click)=\"!disabled && removeSelection()\"></i>\n      <i #toggle class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n    </div>\n  </div>\n  <div class=\"optionsContainer\" [style.width]=\"dropdownWidth\" #optionsContainer>\n    <ng-container *ngIf=\"dropdownOpen\">\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\"></ng-content>\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}:host.selectContainer--border-0 .selectContainer{border:0!important}:host.selectContainer--no-box-shadow .selectContainer{box-shadow:none}.selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;background:#fff;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px}.selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #5599ff}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}.selectContainer.defaultPadding .selectionContainer{padding-left:12px}.selectContainer.narrowPadding .selectionContainer{padding-left:4px}.selectContainer .lightgrayColor{color:#8594ad}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.queryInput{width:100%;-webkit-appearance:none;appearance:none;border:0;padding-left:0;background:transparent;position:relative;cursor:inherit}.queryInput::-ms-clear{display:none}.queryInput:focus{outline:0}.queryInput.isHidden{opacity:0}.placeholder{position:absolute;width:100%;text-align:left;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.iconContainer{display:flex;align-items:center;text-align:center}.iconContainer .far,.iconContainer .fas{width:10px;cursor:pointer}.disabled .iconContainer .far,.disabled .iconContainer .fas{cursor:inherit}.iconContainer .fa-angle-down{margin:0 12px}.iconContainer .fa-times{margin-left:4px}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;top:0;bottom:0;left:0;right:0;z-index:1048}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}.defaultSize .inputContainer,.defaultSize .queryInput,.defaultSize .selection,.defaultSize .iconContainer{height:29px}.defaultSize .inputContainer{line-height:29px}.defaultSize .selectionContainer{min-height:29px}.smallSize .inputContainer,.smallSize .queryInput,.smallSize .selection,.smallSize .iconContainer{height:22px}.smallSize .inputContainer{line-height:22px}.smallSize .selectionContainer{min-height:22px}.select2Size .inputContainer,.select2Size .queryInput,.select2Size .selection,.select2Size .iconContainer{height:26px}.select2Size .inputContainer{line-height:26px}.select2Size .selectionContainer{min-height:26px}.largeSize .inputContainer,.largeSize .queryInput,.largeSize .selection,.largeSize .iconContainer{height:40px}.largeSize .inputContainer{line-height:40px}.largeSize .selectionContainer{min-height:40px}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i2.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SingleSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-single-select', providers: [
@@ -5223,7 +5253,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SingleSelectComponent)
                         }
-                    ], template: "<div *ngIf=\"dropdownOpen\" class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer {{ padding }}Padding\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.disabled]=\"disabled\"\n  [class.grayBackground]=\"selectionBackground === 'gray'\"\n  [class.defaultSize]=\"size === 'default'\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.select2Size]=\"size === 'select2'\"\n  [class.largeSize]=\"size === 'large'\"\n  [style.cursor]=\"cursorStyle\"\n  [class.focused]=\"isInputFocused\"\n  (click)=\"handleClick($event.target === toggle)\"\n>\n  <div class=\"selectionContainer\">\n    <div class=\"inputContainer\">\n      <div *ngIf=\"!selection && !queryInput?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n        {{ placeholder }}\n      </div>\n      <div\n        *ngIf=\"!allowQuery || !queryInput?.value\"\n        class=\"selection\"\n        [class.lowerOpacity]=\"allowQuery && !queryInput?.value && dropdownOpen\"\n        [class.lightgrayColor]=\"!allowQuery && dropdownOpen\"\n        (click)=\"$event.stopPropagation(); focus()\"\n      >\n        <ng-container *ngTemplateOutlet=\"selectedOptionTmpl\"></ng-container>\n      </div>\n      <input\n        #queryInput\n        class=\"queryInput\"\n        type=\"text\"\n        [class.isHidden]=\"!allowQuery\"\n        (keydown.enter)=\"$event.preventDefault()\"\n        (focus)=\"isInputFocused = true\"\n        (blur)=\"isInputFocused = false; blur.emit()\"\n        [tabIndex]=\"disabled ? -1 : tabIndex\"\n        [formControl]=\"queryControl\"\n        [readOnly]=\"!allowQuery\"\n      />\n    </div>\n    <div class=\"iconContainer\">\n      <i *ngIf=\"selection && allowClear\" class=\"far fa-times\" (click)=\"!disabled && removeSelection()\"></i>\n      <i #toggle class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n    </div>\n  </div>\n  <div class=\"optionsContainer\" [style.width]=\"dropdownWidth\" #optionsContainer>\n    <ng-container *ngIf=\"dropdownOpen\">\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\"></ng-content>\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}.selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;background:#fff;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px}.selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #5599ff}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}.selectContainer.defaultPadding .selectionContainer{padding-left:12px}.selectContainer.narrowPadding .selectionContainer{padding-left:4px}.selectContainer .lightgrayColor{color:#8594ad}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.queryInput{width:100%;-webkit-appearance:none;appearance:none;border:0;padding-left:0;background:transparent;position:relative;cursor:inherit}.queryInput::-ms-clear{display:none}.queryInput:focus{outline:0}.queryInput.isHidden{opacity:0}.placeholder{position:absolute;width:100%;text-align:left;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.iconContainer{display:flex;align-items:center;text-align:center}.iconContainer .far,.iconContainer .fas{width:10px;cursor:pointer}.disabled .iconContainer .far,.disabled .iconContainer .fas{cursor:inherit}.iconContainer .fa-angle-down{margin:0 12px}.iconContainer .fa-times{margin-left:4px}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;top:0;bottom:0;left:0;right:0;z-index:1048}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}.defaultSize .inputContainer,.defaultSize .queryInput,.defaultSize .selection,.defaultSize .iconContainer{height:29px}.defaultSize .inputContainer{line-height:29px}.defaultSize .selectionContainer{min-height:29px}.smallSize .inputContainer,.smallSize .queryInput,.smallSize .selection,.smallSize .iconContainer{height:22px}.smallSize .inputContainer{line-height:22px}.smallSize .selectionContainer{min-height:22px}.select2Size .inputContainer,.select2Size .queryInput,.select2Size .selection,.select2Size .iconContainer{height:26px}.select2Size .inputContainer{line-height:26px}.select2Size .selectionContainer{min-height:26px}.largeSize .inputContainer,.largeSize .queryInput,.largeSize .selection,.largeSize .iconContainer{height:40px}.largeSize .inputContainer{line-height:40px}.largeSize .selectionContainer{min-height:40px}\n"] }]
+                    ], template: "<div *ngIf=\"dropdownOpen\" class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer {{ padding }}Padding\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.disabled]=\"disabled\"\n  [class.grayBackground]=\"selectionBackground === 'gray'\"\n  [class.defaultSize]=\"size === 'default'\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.select2Size]=\"size === 'select2'\"\n  [class.largeSize]=\"size === 'large'\"\n  [style.cursor]=\"cursorStyle\"\n  [class.focused]=\"isInputFocused\"\n  (click)=\"handleClick($event.target === toggle)\"\n>\n  <div class=\"selectionContainer\">\n    <div class=\"inputContainer\">\n      <div *ngIf=\"!selection && !queryInput?.value\" class=\"placeholder\" [attr.title]=\"placeholder\">\n        {{ placeholder }}\n      </div>\n      <div\n        *ngIf=\"!allowQuery || !queryInput?.value\"\n        class=\"selection\"\n        [class.lowerOpacity]=\"allowQuery && !queryInput?.value && dropdownOpen\"\n        [class.lightgrayColor]=\"!allowQuery && dropdownOpen\"\n        (click)=\"$event.stopPropagation(); focus()\"\n      >\n        <ng-container *ngTemplateOutlet=\"selectedOptionTmpl\"></ng-container>\n      </div>\n      <input\n        #queryInput\n        class=\"queryInput\"\n        type=\"text\"\n        [class.isHidden]=\"!allowQuery\"\n        (keydown.enter)=\"$event.preventDefault()\"\n        (focus)=\"isInputFocused = true\"\n        (blur)=\"isInputFocused = false; blur.emit()\"\n        [tabIndex]=\"disabled ? -1 : tabIndex\"\n        [formControl]=\"queryControl\"\n        [readOnly]=\"!allowQuery\"\n      />\n    </div>\n    <div class=\"iconContainer\">\n      <i *ngIf=\"selection && allowClear\" class=\"far fa-times\" (click)=\"!disabled && removeSelection()\"></i>\n      <i #toggle class=\"fas fa-angle-down\" aria-hidden=\"true\"></i>\n    </div>\n  </div>\n  <div class=\"optionsContainer\" [style.width]=\"dropdownWidth\" #optionsContainer>\n    <ng-container *ngIf=\"dropdownOpen\">\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\"></ng-content>\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\"></ng-content>\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}:host.selectContainer--border-0 .selectContainer{border:0!important}:host.selectContainer--no-box-shadow .selectContainer{box-shadow:none}.selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;background:#fff;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px}.selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #5599ff}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}.selectContainer.defaultPadding .selectionContainer{padding-left:12px}.selectContainer.narrowPadding .selectionContainer{padding-left:4px}.selectContainer .lightgrayColor{color:#8594ad}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.queryInput{width:100%;-webkit-appearance:none;appearance:none;border:0;padding-left:0;background:transparent;position:relative;cursor:inherit}.queryInput::-ms-clear{display:none}.queryInput:focus{outline:0}.queryInput.isHidden{opacity:0}.placeholder{position:absolute;width:100%;text-align:left;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.iconContainer{display:flex;align-items:center;text-align:center}.iconContainer .far,.iconContainer .fas{width:10px;cursor:pointer}.disabled .iconContainer .far,.disabled .iconContainer .fas{cursor:inherit}.iconContainer .fa-angle-down{margin:0 12px}.iconContainer .fa-times{margin-left:4px}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;top:0;bottom:0;left:0;right:0;z-index:1048}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}.defaultSize .inputContainer,.defaultSize .queryInput,.defaultSize .selection,.defaultSize .iconContainer{height:29px}.defaultSize .inputContainer{line-height:29px}.defaultSize .selectionContainer{min-height:29px}.smallSize .inputContainer,.smallSize .queryInput,.smallSize .selection,.smallSize .iconContainer{height:22px}.smallSize .inputContainer{line-height:22px}.smallSize .selectionContainer{min-height:22px}.select2Size .inputContainer,.select2Size .queryInput,.select2Size .selection,.select2Size .iconContainer{height:26px}.select2Size .inputContainer{line-height:26px}.select2Size .selectionContainer{min-height:26px}.largeSize .inputContainer,.largeSize .queryInput,.largeSize .selection,.largeSize .iconContainer{height:40px}.largeSize .inputContainer{line-height:40px}.largeSize .selectionContainer{min-height:40px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selection: [{
                 type: Input
             }], selectionBackground: [{