@leanix/components 0.3.49 → 0.3.51

package/esm2020/lib/core-ui/pipes/highlight-range.pipe.mjs

@@ -1,7 +1,12 @@
 import { Pipe } from '@angular/core';
+import { sanitize } from 'dompurify';
 import * as i0 from "@angular/core";
 export class HighlightRangePipe {
     transform(text, offset = 0, length = 0) {
+        const highlightedMarkup = this.doTransform(text, offset, length);
+        return sanitize(highlightedMarkup, { ALLOWED_TAGS: ['span'], ALLOWED_ATTR: ['class'] });
+    }
+    doTransform(text, offset, length) {
         if (!text || offset < 0 || length < 0 || offset >= text?.length || offset + length > text?.length) {
             return '';
         }
@@ -18,4 +23,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
             type: Pipe,
             args: [{ name: 'lxHighlightRange' }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGlnaGxpZ2h0LXJhbmdlLnBpcGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvc3JjL2xpYi9jb3JlLXVpL3BpcGVzL2hpZ2hsaWdodC1yYW5nZS5waXBlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxJQUFJLEVBQWlCLE1BQU0sZUFBZSxDQUFDOztBQUdwRCxNQUFNLE9BQU8sa0JBQWtCO0lBQzdCLFNBQVMsQ0FBQyxJQUFZLEVBQUUsU0FBaUIsQ0FBQyxFQUFFLFNBQWlCLENBQUM7UUFDNUQsSUFBSSxDQUFDLElBQUksSUFBSSxNQUFNLEdBQUcsQ0FBQyxJQUFJLE1BQU0sR0FBRyxDQUFDLElBQUksTUFBTSxJQUFJLElBQUksRUFBRSxNQUFNLElBQUksTUFBTSxHQUFHLE1BQU0sR0FBRyxJQUFJLEVBQUUsTUFBTSxFQUFFO1lBQ2pHLE9BQU8sRUFBRSxDQUFDO1NBQ1g7UUFDRCxNQUFNLGVBQWUsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sRUFBRSxNQUFNLEdBQUcsTUFBTSxDQUFDLENBQUM7UUFDNUQsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxNQUFNLENBQUMsR0FBRyxDQUFDLGVBQWUsQ0FBQyxNQUFNLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLGVBQWUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sR0FBRyxNQUFNLENBQUMsQ0FBQztJQUNySSxDQUFDO0lBRUQsU0FBUyxDQUFDLElBQVk7UUFDcEIsT0FBTywrQkFBK0IsSUFBSSxTQUFTLENBQUM7SUFDdEQsQ0FBQzs7K0dBWFUsa0JBQWtCOzZHQUFsQixrQkFBa0I7MkZBQWxCLGtCQUFrQjtrQkFEOUIsSUFBSTttQkFBQyxFQUFFLElBQUksRUFBRSxrQkFBa0IsRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFBpcGUsIFBpcGVUcmFuc2Zvcm0gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQFBpcGUoeyBuYW1lOiAnbHhIaWdobGlnaHRSYW5nZScgfSlcbmV4cG9ydCBjbGFzcyBIaWdobGlnaHRSYW5nZVBpcGUgaW1wbGVtZW50cyBQaXBlVHJhbnNmb3JtIHtcbiAgdHJhbnNmb3JtKHRleHQ6IHN0cmluZywgb2Zmc2V0OiBudW1iZXIgPSAwLCBsZW5ndGg6IG51bWJlciA9IDApOiBzdHJpbmcge1xuICAgIGlmICghdGV4dCB8fCBvZmZzZXQgPCAwIHx8IGxlbmd0aCA8IDAgfHwgb2Zmc2V0ID49IHRleHQ/Lmxlbmd0aCB8fCBvZmZzZXQgKyBsZW5ndGggPiB0ZXh0Py5sZW5ndGgpIHtcbiAgICAgIHJldHVybiAnJztcbiAgICB9XG4gICAgY29uc3QgaGlnaGxpZ2h0ZWRQYXJ0ID0gdGV4dC5zbGljZShvZmZzZXQsIG9mZnNldCArIGxlbmd0aCk7XG4gICAgcmV0dXJuIHRleHQuc2xpY2UoMCwgb2Zmc2V0KSArIChoaWdobGlnaHRlZFBhcnQubGVuZ3RoICE9PSAwID8gdGhpcy5oaWdobGlnaHQoaGlnaGxpZ2h0ZWRQYXJ0KSA6ICcnKSArIHRleHQuc2xpY2Uob2Zmc2V0ICsgbGVuZ3RoKTtcbiAgfVxuXG4gIGhpZ2hsaWdodCh0ZXh0OiBzdHJpbmcpOiBzdHJpbmcge1xuICAgIHJldHVybiBgPHNwYW4gY2xhc3M9XCJ0ZXJtSGlnaGxpZ2h0XCI+JHt0ZXh0fTwvc3Bhbj5gO1xuICB9XG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGlnaGxpZ2h0LXJhbmdlLnBpcGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvc3JjL2xpYi9jb3JlLXVpL3BpcGVzL2hpZ2hsaWdodC1yYW5nZS5waXBlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxJQUFJLEVBQWlCLE1BQU0sZUFBZSxDQUFDO0FBQ3BELE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxXQUFXLENBQUM7O0FBR3JDLE1BQU0sT0FBTyxrQkFBa0I7SUFDN0IsU0FBUyxDQUFDLElBQVksRUFBRSxTQUFpQixDQUFDLEVBQUUsU0FBaUIsQ0FBQztRQUM1RCxNQUFNLGlCQUFpQixHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxFQUFFLE1BQU0sRUFBRSxNQUFNLENBQUMsQ0FBQztRQUNqRSxPQUFPLFFBQVEsQ0FBQyxpQkFBaUIsRUFBRSxFQUFFLFlBQVksRUFBRSxDQUFDLE1BQU0sQ0FBQyxFQUFFLFlBQVksRUFBRSxDQUFDLE9BQU8sQ0FBQyxFQUFFLENBQUMsQ0FBQztJQUMxRixDQUFDO0lBRU8sV0FBVyxDQUFDLElBQW1CLEVBQUUsTUFBYyxFQUFFLE1BQWM7UUFDckUsSUFBSSxDQUFDLElBQUksSUFBSSxNQUFNLEdBQUcsQ0FBQyxJQUFJLE1BQU0sR0FBRyxDQUFDLElBQUksTUFBTSxJQUFJLElBQUksRUFBRSxNQUFNLElBQUksTUFBTSxHQUFHLE1BQU0sR0FBRyxJQUFJLEVBQUUsTUFBTSxFQUFFO1lBQ2pHLE9BQU8sRUFBRSxDQUFDO1NBQ1g7UUFDRCxNQUFNLGVBQWUsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sRUFBRSxNQUFNLEdBQUcsTUFBTSxDQUFDLENBQUM7UUFDNUQsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxNQUFNLENBQUMsR0FBRyxDQUFDLGVBQWUsQ0FBQyxNQUFNLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLGVBQWUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sR0FBRyxNQUFNLENBQUMsQ0FBQztJQUNySSxDQUFDO0lBRU8sU0FBUyxDQUFDLElBQVk7UUFDNUIsT0FBTywrQkFBK0IsSUFBSSxTQUFTLENBQUM7SUFDdEQsQ0FBQzs7K0dBaEJVLGtCQUFrQjs2R0FBbEIsa0JBQWtCOzJGQUFsQixrQkFBa0I7a0JBRDlCLElBQUk7bUJBQUMsRUFBRSxJQUFJLEVBQUUsa0JBQWtCLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQaXBlLCBQaXBlVHJhbnNmb3JtIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBzYW5pdGl6ZSB9IGZyb20gJ2RvbXB1cmlmeSc7XG5cbkBQaXBlKHsgbmFtZTogJ2x4SGlnaGxpZ2h0UmFuZ2UnIH0pXG5leHBvcnQgY2xhc3MgSGlnaGxpZ2h0UmFuZ2VQaXBlIGltcGxlbWVudHMgUGlwZVRyYW5zZm9ybSB7XG4gIHRyYW5zZm9ybSh0ZXh0OiBzdHJpbmcsIG9mZnNldDogbnVtYmVyID0gMCwgbGVuZ3RoOiBudW1iZXIgPSAwKTogc3RyaW5nIHtcbiAgICBjb25zdCBoaWdobGlnaHRlZE1hcmt1cCA9IHRoaXMuZG9UcmFuc2Zvcm0odGV4dCwgb2Zmc2V0LCBsZW5ndGgpO1xuICAgIHJldHVybiBzYW5pdGl6ZShoaWdobGlnaHRlZE1hcmt1cCwgeyBBTExPV0VEX1RBR1M6IFsnc3BhbiddLCBBTExPV0VEX0FUVFI6IFsnY2xhc3MnXSB9KTtcbiAgfVxuXG4gIHByaXZhdGUgZG9UcmFuc2Zvcm0odGV4dDogc3RyaW5nIHwgbnVsbCwgb2Zmc2V0OiBudW1iZXIsIGxlbmd0aDogbnVtYmVyKTogc3RyaW5nIHtcbiAgICBpZiAoIXRleHQgfHwgb2Zmc2V0IDwgMCB8fCBsZW5ndGggPCAwIHx8IG9mZnNldCA+PSB0ZXh0Py5sZW5ndGggfHwgb2Zmc2V0ICsgbGVuZ3RoID4gdGV4dD8ubGVuZ3RoKSB7XG4gICAgICByZXR1cm4gJyc7XG4gICAgfVxuICAgIGNvbnN0IGhpZ2hsaWdodGVkUGFydCA9IHRleHQuc2xpY2Uob2Zmc2V0LCBvZmZzZXQgKyBsZW5ndGgpO1xuICAgIHJldHVybiB0ZXh0LnNsaWNlKDAsIG9mZnNldCkgKyAoaGlnaGxpZ2h0ZWRQYXJ0Lmxlbmd0aCAhPT0gMCA/IHRoaXMuaGlnaGxpZ2h0KGhpZ2hsaWdodGVkUGFydCkgOiAnJykgKyB0ZXh0LnNsaWNlKG9mZnNldCArIGxlbmd0aCk7XG4gIH1cblxuICBwcml2YXRlIGhpZ2hsaWdodCh0ZXh0OiBzdHJpbmcpOiBzdHJpbmcge1xuICAgIHJldHVybiBgPHNwYW4gY2xhc3M9XCJ0ZXJtSGlnaGxpZ2h0XCI+JHt0ZXh0fTwvc3Bhbj5gO1xuICB9XG59XG4iXX0=

package/esm2020/lib/core-ui/pipes/highlight-term.pipe.mjs

@@ -1,5 +1,5 @@
 import { Pipe } from '@angular/core';
-import { escape } from 'lodash/fp';
+import { sanitize } from 'dompurify';
 import * as i0 from "@angular/core";
 /**
  * These characters are treated as seperators by
@@ -16,12 +16,21 @@ export class HighlightTermPipe {
      * @returns The transformed text with highlighted search term.
      */
     transform(text, search, options = { exactMatch: false }) {
-        if (search && text) {
+        if (text) {
+            const highlightedMarkup = this.doTransform(text, search, options);
+            return highlightedMarkup ? sanitize(highlightedMarkup, { ALLOWED_TAGS: ['span'], ALLOWED_ATTR: ['class'] }) : undefined;
+        }
+        else {
+            return undefined;
+        }
+    }
+    doTransform(text, search, options) {
+        if (search) {
             let pattern = options.exactMatch ? search.trim() : search.replace(STANDARD_TOKENIZER_SEPERATORS, ' ');
             // replace special chars for a backslash for RegExp
             pattern = pattern.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
             pattern = options.exactMatch
-                ? escape(pattern)
+                ? pattern
                 : pattern
                     .split(' ')
                     .filter((t) => {
@@ -29,7 +38,6 @@ export class HighlightTermPipe {
                 })
                     .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 {
@@ -43,4 +51,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
             type: Pipe,
             args: [{ name: 'lxHighlightTerm' }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGlnaGxpZ2h0LXRlcm0ucGlwZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9zcmMvbGliL2NvcmUtdWkvcGlwZXMvaGlnaGxpZ2h0LXRlcm0ucGlwZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsSUFBSSxFQUFpQixNQUFNLGVBQWUsQ0FBQztBQUNwRCxPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0sV0FBVyxDQUFDOztBQVVuQzs7OztHQUlHO0FBQ0gsTUFBTSw2QkFBNkIsR0FBRyxnQkFBZ0IsQ0FBQztBQUd2RCxNQUFNLE9BQU8saUJBQWlCO0lBQzVCOzs7Ozs7T0FNRztJQUNILFNBQVMsQ0FBQyxJQUFhLEVBQUUsTUFBc0IsRUFBRSxVQUFzQyxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUU7UUFDMUcsSUFBSSxNQUFNLElBQUksSUFBSSxFQUFFO1lBQ2xCLElBQUksT0FBTyxHQUFHLE9BQU8sQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxJQUFJLEVBQUUsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyw2QkFBNkIsRUFBRSxHQUFHLENBQUMsQ0FBQztZQUV0RyxtREFBbUQ7WUFDbkQsT0FBTyxHQUFHLE9BQU8sQ0FBQyxPQUFPLENBQUMscUNBQXFDLEVBQUUsTUFBTSxDQUFDLENBQUM7WUFFekUsT0FBTyxHQUFHLE9BQU8sQ0FBQyxVQUFVO2dCQUMxQixDQUFDLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQztnQkFDakIsQ0FBQyxDQUFDLE9BQU87cUJBQ0osS0FBSyxDQUFDLEdBQUcsQ0FBQztxQkFDVixNQUFNLENBQUMsQ0FBQyxDQUFDLEVBQUUsRUFBRTtvQkFDWixPQUFPLENBQUMsQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDO2dCQUN0QixDQUFDLENBQUM7cUJBQ0QsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1lBRWpCLE1BQU0sS0FBSyxHQUFHLElBQUksTUFBTSxDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsQ0FBQztZQUN4QyxJQUFJLEdBQUcsTUFBTSxDQUFDLElBQUksQ0FBQyxDQUFDO1lBQ3BCLE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLEVBQUUsQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDLCtCQUErQixLQUFLLFNBQVMsQ0FBQyxDQUFDLENBQUMsNENBQTRDO1NBQ25JO2FBQU07WUFDTCxPQUFPLElBQUksQ0FBQztTQUNiO0lBQ0gsQ0FBQzs7OEdBOUJVLGlCQUFpQjs0R0FBakIsaUJBQWlCOzJGQUFqQixpQkFBaUI7a0JBRDdCLElBQUk7bUJBQUMsRUFBRSxJQUFJLEVBQUUsaUJBQWlCLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQaXBlLCBQaXBlVHJhbnNmb3JtIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBlc2NhcGUgfSBmcm9tICdsb2Rhc2gvZnAnO1xuXG5leHBvcnQgaW50ZXJmYWNlIEhpZ2hsaWdodFRlcm1TZWFyY2hPcHRpb25zIHtcbiAgLyoqXG4gICAqIFdoZXRoZXIgdGhlIHNlYXJjaCB0ZXJtIHNob3VsZCBiZSBleGFjdGx5IG1hdGNoZWQgaW4gdGhlIGdpdmVuIHRleHQuIFdoZW4gc2V0IHRvIHRydWUsIHRoZSBmb2xsb3dpbmdcbiAgICogY2hhcmFjdGVycyBhbmQgc3BhY2VzIGJldHdlZW4gd29yZHMgYXJlIGluY2x1ZGVkIGluIHRoZSBzZWFyY2g6IC0gWyBdIC8geyB9ICggKSAqICsgPyAuIF4gJCB8XG4gICAqL1xuICBleGFjdE1hdGNoOiBib29sZWFuO1xufVxuXG4vKipcbiAqIFRoZXNlIGNoYXJhY3RlcnMgYXJlIHRyZWF0ZWQgYXMgc2VwZXJhdG9ycyBieVxuICogZWxhc3RpY3NlYXJjaCBhbmQgc3BsaXQgdGhlIGlucHV0IGludG8gc2VhcmNoIHRva2Vuc1xuICogd2hpY2ggYXJlIHVzZWQgdG8gZmluZCBtYXRjaGVzLlxuICovXG5jb25zdCBTVEFOREFSRF9UT0tFTklaRVJfU0VQRVJBVE9SUyA9IC9bXmEtekEtWlxcZFxcc10vZztcblxuQFBpcGUoeyBuYW1lOiAnbHhIaWdobGlnaHRUZXJtJyB9KVxuZXhwb3J0IGNsYXNzIEhpZ2hsaWdodFRlcm1QaXBlIGltcGxlbWVudHMgUGlwZVRyYW5zZm9ybSB7XG4gIC8qKlxuICAgKiBUcmFuc2Zvcm1zIHRoZSBpbnB1dCB0ZXh0IHdpdGggaGlnaGxpZ2h0ZWQgdGV4dCBhY2NvcmRpbmcgdG8gdGhlIHByb3ZpZGVkIHNlYXJjaCB0ZXJtLlxuICAgKiBAcGFyYW0gdGV4dCBUaGUgaW5wdXQgdGV4dC5cbiAgICogQHBhcmFtIHNlYXJjaCBUaGUgc2VhcmNoIHRlcm0gdG8gaGlnaGxpZ2h0LlxuICAgKiBAcGFyYW0gb3B0aW9ucyBUaGUgaGlnaGxpZ2h0IHRlcm0gc2VhcmNoIG9wdGlvbnMuXG4gICAqIEByZXR1cm5zIFRoZSB0cmFuc2Zvcm1lZCB0ZXh0IHdpdGggaGlnaGxpZ2h0ZWQgc2VhcmNoIHRlcm0uXG4gICAqL1xuICB0cmFuc2Zvcm0odGV4dD86IHN0cmluZywgc2VhcmNoPzogc3RyaW5nIHwgbnVsbCwgb3B0aW9uczogSGlnaGxpZ2h0VGVybVNlYXJjaE9wdGlvbnMgPSB7IGV4YWN0TWF0Y2g6IGZhbHNlIH0pOiBzdHJpbmcgfCB1bmRlZmluZWQge1xuICAgIGlmIChzZWFyY2ggJiYgdGV4dCkge1xuICAgICAgbGV0IHBhdHRlcm4gPSBvcHRpb25zLmV4YWN0TWF0Y2ggPyBzZWFyY2gudHJpbSgpIDogc2VhcmNoLnJlcGxhY2UoU1RBTkRBUkRfVE9LRU5JWkVSX1NFUEVSQVRPUlMsICcgJyk7XG5cbiAgICAgIC8vIHJlcGxhY2Ugc3BlY2lhbCBjaGFycyBmb3IgYSBiYWNrc2xhc2ggZm9yIFJlZ0V4cFxuICAgICAgcGF0dGVybiA9IHBhdHRlcm4ucmVwbGFjZSgvW1xcLVxcW1xcXVxcL1xce1xcfVxcKFxcKVxcKlxcK1xcP1xcLlxcXFxcXF5cXCRcXHxdL2csICdcXFxcJCYnKTtcblxuICAgICAgcGF0dGVybiA9IG9wdGlvbnMuZXhhY3RNYXRjaFxuICAgICAgICA/IGVzY2FwZShwYXR0ZXJuKVxuICAgICAgICA6IHBhdHRlcm5cbiAgICAgICAgICAgIC5zcGxpdCgnICcpXG4gICAgICAgICAgICAuZmlsdGVyKCh0KSA9PiB7XG4gICAgICAgICAgICAgIHJldHVybiB0Lmxlbmd0aCA+IDA7XG4gICAgICAgICAgICB9KVxuICAgICAgICAgICAgLmpvaW4oJ3wnKTtcblxuICAgICAgY29uc3QgcmVnZXggPSBuZXcgUmVnRXhwKHBhdHRlcm4sICdnaScpO1xuICAgICAgdGV4dCA9IGVzY2FwZSh0ZXh0KTtcbiAgICAgIHJldHVybiB0ZXh0LnJlcGxhY2UocmVnZXgsIChtYXRjaCkgPT4gYDxzcGFuIGNsYXNzPVwidGVybUhpZ2hsaWdodFwiPiR7bWF0Y2h9PC9zcGFuPmApOyAvLyBhZGQgaGlnaGxpZ2h0aW5nIHRvIG1hdGNoZWQgcmVnZXggcGF0dGVyblxuICAgIH0gZWxzZSB7XG4gICAgICByZXR1cm4gdGV4dDtcbiAgICB9XG4gIH1cbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGlnaGxpZ2h0LXRlcm0ucGlwZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9zcmMvbGliL2NvcmUtdWkvcGlwZXMvaGlnaGxpZ2h0LXRlcm0ucGlwZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsSUFBSSxFQUFpQixNQUFNLGVBQWUsQ0FBQztBQUNwRCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sV0FBVyxDQUFDOztBQVVyQzs7OztHQUlHO0FBQ0gsTUFBTSw2QkFBNkIsR0FBRyxnQkFBZ0IsQ0FBQztBQUd2RCxNQUFNLE9BQU8saUJBQWlCO0lBQzVCOzs7Ozs7T0FNRztJQUNILFNBQVMsQ0FBQyxJQUFhLEVBQUUsTUFBc0IsRUFBRSxVQUFzQyxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUU7UUFDMUcsSUFBSSxJQUFJLEVBQUU7WUFDUixNQUFNLGlCQUFpQixHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxFQUFFLE1BQU0sRUFBRSxPQUFPLENBQUMsQ0FBQztZQUNsRSxPQUFPLGlCQUFpQixDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUMsaUJBQWlCLEVBQUUsRUFBRSxZQUFZLEVBQUUsQ0FBQyxNQUFNLENBQUMsRUFBRSxZQUFZLEVBQUUsQ0FBQyxPQUFPLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQztTQUN6SDthQUFNO1lBQ0wsT0FBTyxTQUFTLENBQUM7U0FDbEI7SUFDSCxDQUFDO0lBRU8sV0FBVyxDQUFDLElBQVksRUFBRSxNQUFpQyxFQUFFLE9BQW1DO1FBQ3RHLElBQUksTUFBTSxFQUFFO1lBQ1YsSUFBSSxPQUFPLEdBQUcsT0FBTyxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLElBQUksRUFBRSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLDZCQUE2QixFQUFFLEdBQUcsQ0FBQyxDQUFDO1lBRXRHLG1EQUFtRDtZQUNuRCxPQUFPLEdBQUcsT0FBTyxDQUFDLE9BQU8sQ0FBQyxxQ0FBcUMsRUFBRSxNQUFNLENBQUMsQ0FBQztZQUV6RSxPQUFPLEdBQUcsT0FBTyxDQUFDLFVBQVU7Z0JBQzFCLENBQUMsQ0FBQyxPQUFPO2dCQUNULENBQUMsQ0FBQyxPQUFPO3FCQUNKLEtBQUssQ0FBQyxHQUFHLENBQUM7cUJBQ1YsTUFBTSxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUU7b0JBQ1osT0FBTyxDQUFDLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQztnQkFDdEIsQ0FBQyxDQUFDO3FCQUNELElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztZQUVqQixNQUFNLEtBQUssR0FBRyxJQUFJLE1BQU0sQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLENBQUM7WUFDeEMsT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDLEtBQUssRUFBRSxDQUFDLEtBQUssRUFBRSxFQUFFLENBQUMsK0JBQStCLEtBQUssU0FBUyxDQUFDLENBQUMsQ0FBQyw0Q0FBNEM7U0FDbkk7YUFBTTtZQUNMLE9BQU8sSUFBSSxDQUFDO1NBQ2I7SUFDSCxDQUFDOzs4R0F0Q1UsaUJBQWlCOzRHQUFqQixpQkFBaUI7MkZBQWpCLGlCQUFpQjtrQkFEN0IsSUFBSTttQkFBQyxFQUFFLElBQUksRUFBRSxpQkFBaUIsRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFBpcGUsIFBpcGVUcmFuc2Zvcm0gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IHNhbml0aXplIH0gZnJvbSAnZG9tcHVyaWZ5JztcblxuZXhwb3J0IGludGVyZmFjZSBIaWdobGlnaHRUZXJtU2VhcmNoT3B0aW9ucyB7XG4gIC8qKlxuICAgKiBXaGV0aGVyIHRoZSBzZWFyY2ggdGVybSBzaG91bGQgYmUgZXhhY3RseSBtYXRjaGVkIGluIHRoZSBnaXZlbiB0ZXh0LiBXaGVuIHNldCB0byB0cnVlLCB0aGUgZm9sbG93aW5nXG4gICAqIGNoYXJhY3RlcnMgYW5kIHNwYWNlcyBiZXR3ZWVuIHdvcmRzIGFyZSBpbmNsdWRlZCBpbiB0aGUgc2VhcmNoOiAtIFsgXSAvIHsgfSAoICkgKiArID8gLiBeICQgfFxuICAgKi9cbiAgZXhhY3RNYXRjaDogYm9vbGVhbjtcbn1cblxuLyoqXG4gKiBUaGVzZSBjaGFyYWN0ZXJzIGFyZSB0cmVhdGVkIGFzIHNlcGVyYXRvcnMgYnlcbiAqIGVsYXN0aWNzZWFyY2ggYW5kIHNwbGl0IHRoZSBpbnB1dCBpbnRvIHNlYXJjaCB0b2tlbnNcbiAqIHdoaWNoIGFyZSB1c2VkIHRvIGZpbmQgbWF0Y2hlcy5cbiAqL1xuY29uc3QgU1RBTkRBUkRfVE9LRU5JWkVSX1NFUEVSQVRPUlMgPSAvW15hLXpBLVpcXGRcXHNdL2c7XG5cbkBQaXBlKHsgbmFtZTogJ2x4SGlnaGxpZ2h0VGVybScgfSlcbmV4cG9ydCBjbGFzcyBIaWdobGlnaHRUZXJtUGlwZSBpbXBsZW1lbnRzIFBpcGVUcmFuc2Zvcm0ge1xuICAvKipcbiAgICogVHJhbnNmb3JtcyB0aGUgaW5wdXQgdGV4dCB3aXRoIGhpZ2hsaWdodGVkIHRleHQgYWNjb3JkaW5nIHRvIHRoZSBwcm92aWRlZCBzZWFyY2ggdGVybS5cbiAgICogQHBhcmFtIHRleHQgVGhlIGlucHV0IHRleHQuXG4gICAqIEBwYXJhbSBzZWFyY2ggVGhlIHNlYXJjaCB0ZXJtIHRvIGhpZ2hsaWdodC5cbiAgICogQHBhcmFtIG9wdGlvbnMgVGhlIGhpZ2hsaWdodCB0ZXJtIHNlYXJjaCBvcHRpb25zLlxuICAgKiBAcmV0dXJucyBUaGUgdHJhbnNmb3JtZWQgdGV4dCB3aXRoIGhpZ2hsaWdodGVkIHNlYXJjaCB0ZXJtLlxuICAgKi9cbiAgdHJhbnNmb3JtKHRleHQ/OiBzdHJpbmcsIHNlYXJjaD86IHN0cmluZyB8IG51bGwsIG9wdGlvbnM6IEhpZ2hsaWdodFRlcm1TZWFyY2hPcHRpb25zID0geyBleGFjdE1hdGNoOiBmYWxzZSB9KTogc3RyaW5nIHwgdW5kZWZpbmVkIHtcbiAgICBpZiAodGV4dCkge1xuICAgICAgY29uc3QgaGlnaGxpZ2h0ZWRNYXJrdXAgPSB0aGlzLmRvVHJhbnNmb3JtKHRleHQsIHNlYXJjaCwgb3B0aW9ucyk7XG4gICAgICByZXR1cm4gaGlnaGxpZ2h0ZWRNYXJrdXAgPyBzYW5pdGl6ZShoaWdobGlnaHRlZE1hcmt1cCwgeyBBTExPV0VEX1RBR1M6IFsnc3BhbiddLCBBTExPV0VEX0FUVFI6IFsnY2xhc3MnXSB9KSA6IHVuZGVmaW5lZDtcbiAgICB9IGVsc2Uge1xuICAgICAgcmV0dXJuIHVuZGVmaW5lZDtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIGRvVHJhbnNmb3JtKHRleHQ6IHN0cmluZywgc2VhcmNoOiBzdHJpbmcgfCBudWxsIHwgdW5kZWZpbmVkLCBvcHRpb25zOiBIaWdobGlnaHRUZXJtU2VhcmNoT3B0aW9ucyk6IHN0cmluZyB8IHVuZGVmaW5lZCB7XG4gICAgaWYgKHNlYXJjaCkge1xuICAgICAgbGV0IHBhdHRlcm4gPSBvcHRpb25zLmV4YWN0TWF0Y2ggPyBzZWFyY2gudHJpbSgpIDogc2VhcmNoLnJlcGxhY2UoU1RBTkRBUkRfVE9LRU5JWkVSX1NFUEVSQVRPUlMsICcgJyk7XG5cbiAgICAgIC8vIHJlcGxhY2Ugc3BlY2lhbCBjaGFycyBmb3IgYSBiYWNrc2xhc2ggZm9yIFJlZ0V4cFxuICAgICAgcGF0dGVybiA9IHBhdHRlcm4ucmVwbGFjZSgvW1xcLVxcW1xcXVxcL1xce1xcfVxcKFxcKVxcKlxcK1xcP1xcLlxcXFxcXF5cXCRcXHxdL2csICdcXFxcJCYnKTtcblxuICAgICAgcGF0dGVybiA9IG9wdGlvbnMuZXhhY3RNYXRjaFxuICAgICAgICA/IHBhdHRlcm5cbiAgICAgICAgOiBwYXR0ZXJuXG4gICAgICAgICAgICAuc3BsaXQoJyAnKVxuICAgICAgICAgICAgLmZpbHRlcigodCkgPT4ge1xuICAgICAgICAgICAgICByZXR1cm4gdC5sZW5ndGggPiAwO1xuICAgICAgICAgICAgfSlcbiAgICAgICAgICAgIC5qb2luKCd8Jyk7XG5cbiAgICAgIGNvbnN0IHJlZ2V4ID0gbmV3IFJlZ0V4cChwYXR0ZXJuLCAnZ2knKTtcbiAgICAgIHJldHVybiB0ZXh0LnJlcGxhY2UocmVnZXgsIChtYXRjaCkgPT4gYDxzcGFuIGNsYXNzPVwidGVybUhpZ2hsaWdodFwiPiR7bWF0Y2h9PC9zcGFuPmApOyAvLyBhZGQgaGlnaGxpZ2h0aW5nIHRvIG1hdGNoZWQgcmVnZXggcGF0dGVyblxuICAgIH0gZWxzZSB7XG4gICAgICByZXR1cm4gdGV4dDtcbiAgICB9XG4gIH1cbn1cbiJdfQ==

package/esm2020/lib/forms-ui/components/date-input/date-input.component.mjs

@@ -184,7 +184,7 @@ DateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versi
 DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", 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", autoFocus: "autoFocus" }, outputs: { dateChange: "dateChange", dateStringChange: "dateStringChange", closeDateInput: "closeDateInput" }, 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    [lxAutofocus]=\"autoFocus\"\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-radius-0 input.dateControl{border-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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.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"] }, { kind: "directive", type: i4.AutofocusDirective, selector: "[lxAutofocus]", inputs: ["lxAutofocus", "lxAutofocusPreventScroll"] }, { kind: "pipe", type: i5.CustomDatePipe, name: "lxDate" }] });
+    ], 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    [lxAutofocus]=\"autoFocus\"\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;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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.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"] }, { kind: "directive", type: i4.AutofocusDirective, selector: "[lxAutofocus]", inputs: ["lxAutofocus", "lxAutofocusPreventScroll"] }, { kind: "pipe", type: i5.CustomDatePipe, name: "lxDate" }] });
 __decorate([
     Observe('initDateString')
 ], DateInputComponent.prototype, "initDateString$", void 0);
@@ -193,7 +193,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", 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    [lxAutofocus]=\"autoFocus\"\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-radius-0 input.dateControl{border-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"] }]
+                    ], 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    [lxAutofocus]=\"autoFocus\"\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;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,
                     args: [DATE_FORMATS]

package/esm2020/lib/forms-ui/components/single-select/single-select.component.mjs

@@ -226,7 +226,7 @@ SingleSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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  [class.focusedVisible]=\"isInputFocusedViaTab\"\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; isInputFocusedViaTab = false; blur.emit($event)\"\n        (keyup.tab)=\"focusedViaTab()\"\n        (keyup.shift.tab)=\"focusedViaTab()\"\n        [tabIndex]=\"disabled ? -1 : tabIndex\"\n        [formControl]=\"queryControl\"\n        [readOnly]=\"!allowQuery\"\n      />\n    </div>\n    <div class=\"iconContainer\">\n      <i *ngIf=\"selection && allowClear && !disabled\" class=\"far fa-times\" (click)=\"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:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.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;color:#8594ad}.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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+    ], 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  [class.focusedVisible]=\"isInputFocusedViaTab\"\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; isInputFocusedViaTab = false; blur.emit($event)\"\n        (keyup.tab)=\"focusedViaTab()\"\n        (keyup.shift.tab)=\"focusedViaTab()\"\n        [tabIndex]=\"disabled ? -1 : tabIndex\"\n        [formControl]=\"queryControl\"\n        [readOnly]=\"!allowQuery\"\n      />\n    </div>\n    <div class=\"iconContainer\">\n      <i *ngIf=\"selection && allowClear && !disabled\" class=\"far fa-times\" (click)=\"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:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.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;color:#8594ad}.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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SingleSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-single-select', providers: [
@@ -235,7 +235,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", 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  [class.focusedVisible]=\"isInputFocusedViaTab\"\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; isInputFocusedViaTab = false; blur.emit($event)\"\n        (keyup.tab)=\"focusedViaTab()\"\n        (keyup.shift.tab)=\"focusedViaTab()\"\n        [tabIndex]=\"disabled ? -1 : tabIndex\"\n        [formControl]=\"queryControl\"\n        [readOnly]=\"!allowQuery\"\n      />\n    </div>\n    <div class=\"iconContainer\">\n      <i *ngIf=\"selection && allowClear && !disabled\" class=\"far fa-times\" (click)=\"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:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.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;color:#8594ad}.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  [class.focusedVisible]=\"isInputFocusedViaTab\"\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; isInputFocusedViaTab = false; blur.emit($event)\"\n        (keyup.tab)=\"focusedViaTab()\"\n        (keyup.shift.tab)=\"focusedViaTab()\"\n        [tabIndex]=\"disabled ? -1 : tabIndex\"\n        [formControl]=\"queryControl\"\n        [readOnly]=\"!allowQuery\"\n      />\n    </div>\n    <div class=\"iconContainer\">\n      <i *ngIf=\"selection && allowClear && !disabled\" class=\"far fa-times\" (click)=\"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:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.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;color:#8594ad}.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: [{

package/fesm2015/leanix-components.mjs

@@ -16,6 +16,7 @@ import { TranslatePipe, TranslateModule } from '@ngx-translate/core';
 import * as i1$3 from '@angular/platform-browser';
 import Color from 'color';
 import { format, distanceInWords, startOfDay } from 'date-fns';
+import { sanitize } from 'dompurify';
 import _, { curry } from 'lodash';
 import { Renderer, marked } from 'marked';
 import * as i2$1 from '@angular/forms';
@@ -1353,6 +1354,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
 
 class HighlightRangePipe {
     transform(text, offset = 0, length = 0) {
+        const highlightedMarkup = this.doTransform(text, offset, length);
+        return sanitize(highlightedMarkup, { ALLOWED_TAGS: ['span'], ALLOWED_ATTR: ['class'] });
+    }
+    doTransform(text, offset, length) {
         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 '';
         }
@@ -1385,12 +1390,21 @@ class HighlightTermPipe {
      * @returns The transformed text with highlighted search term.
      */
     transform(text, search, options = { exactMatch: false }) {
-        if (search && text) {
+        if (text) {
+            const highlightedMarkup = this.doTransform(text, search, options);
+            return highlightedMarkup ? sanitize(highlightedMarkup, { ALLOWED_TAGS: ['span'], ALLOWED_ATTR: ['class'] }) : undefined;
+        }
+        else {
+            return undefined;
+        }
+    }
+    doTransform(text, search, options) {
+        if (search) {
             let pattern = options.exactMatch ? search.trim() : search.replace(STANDARD_TOKENIZER_SEPERATORS, ' ');
             // replace special chars for a backslash for RegExp
             pattern = pattern.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
             pattern = options.exactMatch
-                ? escape(pattern)
+                ? pattern
                 : pattern
                     .split(' ')
                     .filter((t) => {
@@ -1398,7 +1412,6 @@ class HighlightTermPipe {
                 })
                     .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 {
@@ -3187,7 +3200,7 @@ DateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versi
 DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", 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", autoFocus: "autoFocus" }, outputs: { dateChange: "dateChange", dateStringChange: "dateStringChange", closeDateInput: "closeDateInput" }, 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    [lxAutofocus]=\"autoFocus\"\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-radius-0 input.dateControl{border-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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$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]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.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"] }, { kind: "directive", type: AutofocusDirective, selector: "[lxAutofocus]", inputs: ["lxAutofocus", "lxAutofocusPreventScroll"] }, { kind: "pipe", type: CustomDatePipe, name: "lxDate" }] });
+    ], 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    [lxAutofocus]=\"autoFocus\"\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;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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$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]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.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"] }, { kind: "directive", type: AutofocusDirective, selector: "[lxAutofocus]", inputs: ["lxAutofocus", "lxAutofocusPreventScroll"] }, { kind: "pipe", type: CustomDatePipe, name: "lxDate" }] });
 __decorate([
     Observe('initDateString')
 ], DateInputComponent.prototype, "initDateString$", void 0);
@@ -3196,7 +3209,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", 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    [lxAutofocus]=\"autoFocus\"\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-radius-0 input.dateControl{border-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"] }]
+                    ], 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    [lxAutofocus]=\"autoFocus\"\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;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,
@@ -5280,7 +5293,7 @@ SingleSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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  [class.focusedVisible]=\"isInputFocusedViaTab\"\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; isInputFocusedViaTab = false; blur.emit($event)\"\n        (keyup.tab)=\"focusedViaTab()\"\n        (keyup.shift.tab)=\"focusedViaTab()\"\n        [tabIndex]=\"disabled ? -1 : tabIndex\"\n        [formControl]=\"queryControl\"\n        [readOnly]=\"!allowQuery\"\n      />\n    </div>\n    <div class=\"iconContainer\">\n      <i *ngIf=\"selection && allowClear && !disabled\" class=\"far fa-times\" (click)=\"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:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.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;color:#8594ad}.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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$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]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+    ], 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  [class.focusedVisible]=\"isInputFocusedViaTab\"\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; isInputFocusedViaTab = false; blur.emit($event)\"\n        (keyup.tab)=\"focusedViaTab()\"\n        (keyup.shift.tab)=\"focusedViaTab()\"\n        [tabIndex]=\"disabled ? -1 : tabIndex\"\n        [formControl]=\"queryControl\"\n        [readOnly]=\"!allowQuery\"\n      />\n    </div>\n    <div class=\"iconContainer\">\n      <i *ngIf=\"selection && allowClear && !disabled\" class=\"far fa-times\" (click)=\"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:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.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;color:#8594ad}.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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$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]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SingleSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-single-select', providers: [
@@ -5289,7 +5302,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", 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  [class.focusedVisible]=\"isInputFocusedViaTab\"\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; isInputFocusedViaTab = false; blur.emit($event)\"\n        (keyup.tab)=\"focusedViaTab()\"\n        (keyup.shift.tab)=\"focusedViaTab()\"\n        [tabIndex]=\"disabled ? -1 : tabIndex\"\n        [formControl]=\"queryControl\"\n        [readOnly]=\"!allowQuery\"\n      />\n    </div>\n    <div class=\"iconContainer\">\n      <i *ngIf=\"selection && allowClear && !disabled\" class=\"far fa-times\" (click)=\"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:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.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;color:#8594ad}.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  [class.focusedVisible]=\"isInputFocusedViaTab\"\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; isInputFocusedViaTab = false; blur.emit($event)\"\n        (keyup.tab)=\"focusedViaTab()\"\n        (keyup.shift.tab)=\"focusedViaTab()\"\n        [tabIndex]=\"disabled ? -1 : tabIndex\"\n        [formControl]=\"queryControl\"\n        [readOnly]=\"!allowQuery\"\n      />\n    </div>\n    <div class=\"iconContainer\">\n      <i *ngIf=\"selection && allowClear && !disabled\" class=\"far fa-times\" (click)=\"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:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.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;color:#8594ad}.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: [{