@morozeckiy/dd-lib 0.7.94 → 0.7.96

package/fesm2022/morozeckiy-dd-lib.mjs

@@ -6,7 +6,7 @@ import { BehaviorSubject, Subject, throwError, fromEvent, of, combineLatest } fr
 import { format, parse, isAfter, isBefore, isValid } from 'date-fns';
 import * as i1$1 from '@angular/common/http';
 import { HttpErrorResponse, HttpHeaders, HttpParams } from '@angular/common/http';
-import { catchError, map, filter, takeUntil, tap, debounceTime, mergeMap, delay, switchMap } from 'rxjs/operators';
+import { catchError, map, filter, takeUntil, shareReplay, tap, debounceTime, mergeMap, delay, switchMap } from 'rxjs/operators';
 import * as i1 from '@angular/router';
 import { RouterLink } from '@angular/router';
 import * as i1$2 from '@angular/platform-browser';
@@ -2133,44 +2133,114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Класс кеширует свг после загрузки, чтоб не спамить их постоянной загрузкой
+ **/
+class LruSvgCache {
+    constructor() {
+        this.cache = new Map();
+        this.MAX_SIZE = 100;
+    }
+    static getInstance() {
+        if (!LruSvgCache.instance) {
+            LruSvgCache.instance = new LruSvgCache();
+        }
+        return LruSvgCache.instance;
+    }
+    get(svgUrl) {
+        const observable = this.cache.get(svgUrl);
+        // Если элемент найден, перемещаем его в конец (как самый новый)
+        if (observable) {
+            this.cache.delete(svgUrl);
+            this.cache.set(svgUrl, observable);
+        }
+        return observable;
+    }
+    set(svgUrl, observable) {
+        // Если элемент уже существует, сначала удаляем его
+        if (this.cache.has(svgUrl)) {
+            this.cache.delete(svgUrl);
+        }
+        else if (this.cache.size >= this.MAX_SIZE) {
+            const firstKey = this.cache.keys().next().value;
+            this.cache.delete(firstKey);
+        }
+        this.cache.set(svgUrl, observable);
+    }
+    delete(svgUrl) {
+        this.cache.delete(svgUrl);
+    }
+    clear() {
+        this.cache.clear();
+    }
+}
 class LibSvgViewerComponent {
     constructor(http, elementRef) {
         this.http = http;
         this.elementRef = elementRef;
         this.path = 'assets/images/';
-        this.pack = 'svg'; // директория внутри path
+        this.pack = 'svg';
         this.icon = '';
         this.width = '';
         this.height = '';
         this.color = '';
         this.containerClass = '';
+        this.fullSize = false;
         this.colorRules = [];
+        this.svgCache = LruSvgCache.getInstance();
+        this.currentSvgUrl = null;
     }
     ngOnChanges(changes) {
-        this.loadSvg();
+        if (changes['path'] || changes['pack'] || changes['icon']) {
+            this.loadSvg();
+        }
+        else if (changes['color'] || changes['colorRules'] || changes['width'] || changes['height']) {
+            this.updateSvgStyles();
+        }
+    }
+    ngOnDestroy() {
+        this.currentSvgUrl = null;
     }
     loadSvg() {
-        if (!this.path || !this.icon)
+        if (!this.path || !this.icon) {
+            this.clearSvgContainer();
             return;
-        this.http.get(`${this.path}${this.pack}/${this.icon}.svg`, { responseType: 'text' })
-            .pipe(catchError((error) => {
+        }
+        const svgUrl = this.getSvgUrl();
+        this.currentSvgUrl = svgUrl;
+        this.getSvgWithCache(svgUrl).subscribe({
+            next: (svg) => {
+                if (this.currentSvgUrl === svgUrl) {
+                    this.renderSvg(svg);
+                }
+            },
+            error: (error) => {
+                console.error('Ошибка загрузки SVG:', error);
+                this.clearSvgContainer();
+            }
+        });
+    }
+    getSvgUrl() {
+        const normalizedPath = this.path.endsWith('/') ? this.path : `${this.path}/`;
+        const normalizedPack = this.pack ? `${this.pack}/` : '';
+        return `${normalizedPath}${normalizedPack}${this.icon}.svg`;
+    }
+    getSvgWithCache(svgUrl) {
+        const cached = this.svgCache.get(svgUrl);
+        if (cached) {
+            return cached;
+        }
+        const request = this.http.get(svgUrl, { responseType: 'text' }).pipe(catchError((error) => {
             const errorMessage = error.message || 'Неизвестная ошибка';
-            const customError = new HttpErrorResponse({
-                error: `SVG не найден: ${errorMessage}`,
-                status: 404,
-                statusText: 'Not Found'
-            });
             console.error(`Ошибка загрузки SVG: ${errorMessage}`, {
-                path: `${this.path}${this.pack}/${this.icon}.svg`,
+                path: svgUrl,
                 status: error.status
             });
-            return throwError(() => customError);
-        }))
-            .subscribe({
-            next: (svg) => {
-                this.renderSvg(svg);
-            }
-        });
+            this.svgCache.delete(svgUrl);
+            return throwError(() => new Error(`SVG не найден: ${svgUrl}`));
+        }), shareReplay(1));
+        this.svgCache.set(svgUrl, request);
+        return request;
     }
     renderSvg(svgString) {
         const container = this.elementRef.nativeElement.querySelector('.svg-container');
@@ -2178,14 +2248,30 @@ class LibSvgViewerComponent {
         const svg = container.querySelector('svg');
         if (!svg)
             return;
-        // Применяем параметры
+        this.applySvgAttributes(svg);
+        this.applyStyling(svg);
+    }
+    applySvgAttributes(svg) {
+        if (this.fullSize) {
+            svg.setAttribute('width', '100%');
+            svg.setAttribute('height', '100%');
+        }
+        svg.setAttribute('focusable', 'false');
+        svg.setAttribute('aria-hidden', 'true');
+        // Добавляем класс для многоцветных иконок
+        svg.classList.add('svg-icon');
+        svg.classList.add('svg-icon-multi-color');
         if (this.width) {
             svg.style.width = this.width;
         }
         if (this.height) {
             svg.style.height = this.height;
         }
-        this.applyColorRules(svg);
+    }
+    applyStyling(svg) {
+        if (this.colorRules && this.colorRules.length > 0) {
+            this.applyColorRules(svg);
+        }
         if (this.color) {
             this.applyColor(svg);
         }
@@ -2194,18 +2280,17 @@ class LibSvgViewerComponent {
         this.colorRules.forEach(rule => {
             const elements = svg.querySelectorAll(rule.selector);
             elements.forEach(el => {
-                if (rule.attribute === 'fill' || rule.attribute === 'both') {
-                    el.setAttribute('fill', rule.color);
-                }
-                if (rule.attribute === 'stroke' || rule.attribute === 'both') {
-                    el.setAttribute('stroke', rule.color);
-                }
-                // Если атрибут не указан, меняем и fill и stroke
-                if (!rule.attribute) {
-                    if (el.hasAttribute('fill')) {
+                if (rule.attribute === 'fill' || rule.attribute === 'both' || !rule.attribute) {
+                    if (el.hasAttribute('fill') &&
+                        el.getAttribute('fill') !== 'none' &&
+                        el.getAttribute('fill') !== 'transparent') {
                         el.setAttribute('fill', rule.color);
                     }
-                    if (el.hasAttribute('stroke')) {
+                }
+                if (rule.attribute === 'stroke' || rule.attribute === 'both' || !rule.attribute) {
+                    if (el.hasAttribute('stroke') &&
+                        el.getAttribute('stroke') !== 'none' &&
+                        el.getAttribute('stroke') !== 'transparent') {
                         el.setAttribute('stroke', rule.color);
                     }
                 }
@@ -2215,13 +2300,11 @@ class LibSvgViewerComponent {
     applyColor(svg) {
         const elements = svg.querySelectorAll('[stroke], [fill]');
         elements.forEach(el => {
-            // Обрабатываем stroke
             if (el.hasAttribute('stroke') &&
                 el.getAttribute('stroke') !== 'none' &&
                 el.getAttribute('stroke') !== 'transparent') {
                 el.setAttribute('stroke', this.color);
             }
-            // Обрабатываем fill
             if (el.hasAttribute('fill') &&
                 el.getAttribute('fill') !== 'none' &&
                 el.getAttribute('fill') !== 'transparent') {
@@ -2229,8 +2312,30 @@ class LibSvgViewerComponent {
             }
         });
     }
+    updateSvgStyles() {
+        const container = this.elementRef.nativeElement.querySelector('.svg-container');
+        const svg = container?.querySelector('svg');
+        if (svg) {
+            this.applyStyling(svg);
+            if (this.width) {
+                svg.style.width = this.width;
+            }
+            if (this.height) {
+                svg.style.height = this.height;
+            }
+        }
+    }
+    clearSvgContainer() {
+        const container = this.elementRef.nativeElement.querySelector('.svg-container');
+        if (container) {
+            container.innerHTML = '';
+        }
+    }
+    static clearCache() {
+        LruSvgCache.getInstance().clear();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibSvgViewerComponent, deps: [{ token: i1$1.HttpClient }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: LibSvgViewerComponent, isStandalone: true, selector: "dd-lib-svg-viewer", inputs: { path: "path", pack: "pack", icon: "icon", width: "width", height: "height", color: "color", containerClass: "containerClass", colorRules: "colorRules" }, usesOnChanges: true, ngImport: i0, template: `<div #svgContainer class="svg-container"></div>`, isInline: true, styles: [":host{display:block}svg{width:100%;height:100%;display:block}.svg-container{display:flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: LibSvgViewerComponent, isStandalone: true, selector: "dd-lib-svg-viewer", inputs: { path: "path", pack: "pack", icon: "icon", width: "width", height: "height", color: "color", containerClass: "containerClass", fullSize: "fullSize", colorRules: "colorRules" }, usesOnChanges: true, ngImport: i0, template: `<div #svgContainer class="svg-container"></div>`, isInline: true, styles: [":host{display:block}svg{width:100%;height:100%;display:block}.svg-container{display:flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibSvgViewerComponent, decorators: [{
             type: Component,
@@ -2249,6 +2354,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
                 type: Input
             }], containerClass: [{
                 type: Input
+            }], fullSize: [{
+                type: Input
             }], colorRules: [{
                 type: Input
             }] } });
@@ -2258,7 +2365,7 @@ class LibAccordionComponent {
         this.accordionPack = 'lib-svg';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: LibAccordionComponent, isStandalone: true, selector: "dd-lib-accordion", inputs: { accTitle: "accTitle", accordionPack: "accordionPack" }, ngImport: i0, template: "<div class=\"accordion\">\n  <div (click)=\"showAccordionContent = !showAccordionContent\" class=\"accordion__header\">\n    @if (accTitle) {\n    <div [innerHTML]=\"accTitle\" class=\"accordion__title\"></div>\n    }\n    <div>\n      <dd-lib-svg-viewer [pack]=\"accordionPack\" class=\"cup\" icon=\"{{ showAccordionContent ? 'minus' : 'plus' }}\"></dd-lib-svg-viewer>\n    </div>\n  </div>\n  @if (showAccordionContent) {\n  <div class=\"mt-8\">\n    <ng-content></ng-content>\n  </div>\n  }\n</div>\n", styles: [":host{display:block;min-width:100%}.accordion__header{display:flex;align-items:center;justify-content:space-between;cursor:pointer}.accordion__title{font-weight:500;font-size:20px;line-height:28px;color:var(--light-black-color)}@media screen and (max-width: 480px){.accordion__title{font-size:16px;line-height:24px}}\n"], dependencies: [{ kind: "component", type: LibSvgViewerComponent, selector: "dd-lib-svg-viewer", inputs: ["path", "pack", "icon", "width", "height", "color", "containerClass", "colorRules"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: LibAccordionComponent, isStandalone: true, selector: "dd-lib-accordion", inputs: { accTitle: "accTitle", accordionPack: "accordionPack" }, ngImport: i0, template: "<div class=\"accordion\">\n  <div (click)=\"showAccordionContent = !showAccordionContent\" class=\"accordion__header\">\n    @if (accTitle) {\n    <div [innerHTML]=\"accTitle\" class=\"accordion__title\"></div>\n    }\n    <div>\n      <dd-lib-svg-viewer [pack]=\"accordionPack\" class=\"cup\" icon=\"{{ showAccordionContent ? 'minus' : 'plus' }}\"></dd-lib-svg-viewer>\n    </div>\n  </div>\n  @if (showAccordionContent) {\n  <div class=\"mt-8\">\n    <ng-content></ng-content>\n  </div>\n  }\n</div>\n", styles: [":host{display:block;min-width:100%}.accordion__header{display:flex;align-items:center;justify-content:space-between;cursor:pointer}.accordion__title{font-weight:500;font-size:20px;line-height:28px;color:var(--light-black-color)}@media screen and (max-width: 480px){.accordion__title{font-size:16px;line-height:24px}}\n"], dependencies: [{ kind: "component", type: LibSvgViewerComponent, selector: "dd-lib-svg-viewer", inputs: ["path", "pack", "icon", "width", "height", "color", "containerClass", "fullSize", "colorRules"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibAccordionComponent, decorators: [{
             type: Component,
@@ -3046,7 +3153,7 @@ class LibInputComponent extends LibCommonInputTextComponent {
                 useExisting: forwardRef(() => LibInputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "contentInput", first: true, predicate: ["input"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"lib-input\">\n  @if (label) {\n  <label [for]=\"id\" class=\"lib-input__title g-text-sm\">\n    {{ label }}\n    @if (required) {\n      <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n    }\n  </label>\n  }\n  <div class=\"pos-relative\">\n    <input\n      #input\n      (blur)=\"handleBlur()\"\n      (change)=\"handleChange()\"\n      (focus)=\"handleFocus()\"\n      (input)=\"handleInput($event)\"\n      (keyup.enter)=\"forceChange()\"\n      [showMaskTyped]=\"showMaskTyped\"\n      [dropSpecialCharacters]=\"dropSpecialCharacters\"\n      [shownMaskExpression]=\"shownMaskExpression\"\n      [mask]=\"mask\"\n      [validation]=\"validation\"\n      [prefix]=\"prefix\"\n      [suffix]=\"suffix\"\n      [(ngModel)]=\"value\"\n      [attr.autofocus]=\"autofocus\"\n      [attr.autocomplete]=\"autocomplete === undefined ? null : autocomplete\"\n      [attr.id]=\"id ? id : null\"\n      [attr.max]=\"max\"\n      [attr.min]=\"min\"\n      [attr.maxlength]=\"maxlength\"\n      [attr.minlength]=\"minlength\"\n      [attr.name]=\"name\"\n      [attr.placeholder]=\"placeholder\"\n      [attr.tabIndex]=\"tabIndex\"\n      [attr.type]=\"showPass ? 'text' : (type || 'text')\"\n      [class.focused]=\"focused\"\n      [class.invalid]=\"showError\"\n      [disabled]=\"disabled\"\n      [readOnly]=\"readOnly\"\n      class=\"text-input\" />\n    @if (type === 'password') {\n      <dd-lib-svg-viewer (click)=\"showPass = !showPass\" [pack]=\"'lib-svg'\" class=\"password-eye\" icon=\"{{ showPass ? 'eye' : 'eye-off' }}\"></dd-lib-svg-viewer>\n    }\n  </div>\n\n  @if (errorTexts.length && showError) {\n    @for (error of errorTexts; track error) {\n      <div class=\"lib-input__error\">{{ error }}</div>\n    }\n  }\n  @if (errorText && showSelfError && showError) {\n      <div class=\"lib-input__error\">{{ errorText }}</div>\n  }\n</div>\n", styles: [":host{display:block}.lib-input{position:relative}.lib-input input{width:100%;height:48px;padding:15px 16px;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative;color:var(--light-black-color)}.lib-input input:hover{border-color:var(--input-active-border-colort)}.lib-input input:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-input input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-input input:disabled::placeholder{color:var(--input-placeholder)}.lib-input input.invalid,.lib-input input.invalid:hover{border-color:var(--input-error-border-color)}.lib-input input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-input__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start;color:var(--light-black-color)}.lib-input__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-input .password-eye{position:absolute;right:16px;top:12px;cursor:pointer}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.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: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "component", type: LibSvgViewerComponent, selector: "dd-lib-svg-viewer", inputs: ["path", "pack", "icon", "width", "height", "color", "containerClass", "colorRules"] }] }); }
+        ], viewQueries: [{ propertyName: "contentInput", first: true, predicate: ["input"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"lib-input\">\n  @if (label) {\n  <label [for]=\"id\" class=\"lib-input__title g-text-sm\">\n    {{ label }}\n    @if (required) {\n      <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n    }\n  </label>\n  }\n  <div class=\"pos-relative\">\n    <input\n      #input\n      (blur)=\"handleBlur()\"\n      (change)=\"handleChange()\"\n      (focus)=\"handleFocus()\"\n      (input)=\"handleInput($event)\"\n      (keyup.enter)=\"forceChange()\"\n      [showMaskTyped]=\"showMaskTyped\"\n      [dropSpecialCharacters]=\"dropSpecialCharacters\"\n      [shownMaskExpression]=\"shownMaskExpression\"\n      [mask]=\"mask\"\n      [validation]=\"validation\"\n      [prefix]=\"prefix\"\n      [suffix]=\"suffix\"\n      [(ngModel)]=\"value\"\n      [attr.autofocus]=\"autofocus\"\n      [attr.autocomplete]=\"autocomplete === undefined ? null : autocomplete\"\n      [attr.id]=\"id ? id : null\"\n      [attr.max]=\"max\"\n      [attr.min]=\"min\"\n      [attr.maxlength]=\"maxlength\"\n      [attr.minlength]=\"minlength\"\n      [attr.name]=\"name\"\n      [attr.placeholder]=\"placeholder\"\n      [attr.tabIndex]=\"tabIndex\"\n      [attr.type]=\"showPass ? 'text' : (type || 'text')\"\n      [class.focused]=\"focused\"\n      [class.invalid]=\"showError\"\n      [disabled]=\"disabled\"\n      [readOnly]=\"readOnly\"\n      class=\"text-input\" />\n    @if (type === 'password') {\n      <dd-lib-svg-viewer (click)=\"showPass = !showPass\" [pack]=\"'lib-svg'\" class=\"password-eye\" icon=\"{{ showPass ? 'eye' : 'eye-off' }}\"></dd-lib-svg-viewer>\n    }\n  </div>\n\n  @if (errorTexts.length && showError) {\n    @for (error of errorTexts; track error) {\n      <div class=\"lib-input__error\">{{ error }}</div>\n    }\n  }\n  @if (errorText && showSelfError && showError) {\n      <div class=\"lib-input__error\">{{ errorText }}</div>\n  }\n</div>\n", styles: [":host{display:block}.lib-input{position:relative}.lib-input input{width:100%;height:48px;padding:15px 16px;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative;color:var(--light-black-color)}.lib-input input:hover{border-color:var(--input-active-border-colort)}.lib-input input:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-input input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-input input:disabled::placeholder{color:var(--input-placeholder)}.lib-input input.invalid,.lib-input input.invalid:hover{border-color:var(--input-error-border-color)}.lib-input input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-input__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start;color:var(--light-black-color)}.lib-input__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-input .password-eye{position:absolute;right:16px;top:12px;cursor:pointer}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.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: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "component", type: LibSvgViewerComponent, selector: "dd-lib-svg-viewer", inputs: ["path", "pack", "icon", "width", "height", "color", "containerClass", "fullSize", "colorRules"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibInputComponent, decorators: [{
             type: Component,
@@ -3851,7 +3958,7 @@ class LibSelectComponent extends LibCommonInputTextComponent {
                 useExisting: forwardRef(() => LibSelectComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "selectEl", first: true, predicate: ["select"], descendants: true, read: ElementRef, static: true }, { propertyName: "searchInputEl", first: true, predicate: ["searchInputEl"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"lib-select\" id=\"lib-select-{{ selectId }}\" [destroyedItem]=\"isShownList\" ddFixedPosition>\n  @if (label) {\n    <label [for]=\"id\" class=\"lib-select__title\">\n      {{ label }}\n      @if (required) {\n        <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n      }\n    </label>\n  }\n\n  <div class=\"pos-relative\" data-child=\"input\">\n    <input\n      #select\n      (change)=\"handleChange()\"\n      (click)=\"notifyFocusEvent()\"\n      (input)=\"handleInput($event)\"\n      (blur)=\"handleBlur()\"\n      (focus)=\"handleFocus()\"\n      [attr.id]=\"selectId\"\n      [attr.placeholder]=\"(multiCountValue || searchValue) ? '' : placeholder\"\n      [attr.tabIndex]=\"tabIndex\"\n      [attr.type]=\"'text'\"\n      [class.focused]=\"focused\"\n      [class.invalid]=\"showError\"\n      [disabled]=\"disabled\"\n      [readOnly]=\"true\"\n      [(ngModel)]=\"inputValue\"\n      [title]=\"inputValue || ''\"\n      class=\"text-select select-block\" />\n\n    @if (multiCountValue) {\n      <div class=\"selected-items-container\" id=\"selected-{{selectId}}\">\n        <dd-lib-horizontal-scroll>\n          @for (item of checkedItems(); track item) {\n            <div class=\"selected-items__item\" >\n              @if (stringArray()) {\n                <div [title]=\"item\" [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n                     class=\"selected-items__item-title\"></div>\n              }\n              @if (keyTitle && !stringArray()) {\n                <div [title]=\"item[keyTitle!]\"\n                  [innerHTML]=\"item[keyTitle!] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n                  class=\"selected-items__item-title\"></div>\n              }\n              @if (keyDesc && !stringArray()) {\n                <div\n                  [innerHTML]=\"item[keyDesc!] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n                  [title]=\"item[keyDesc]\"\n                  class=\"selected-items__item-desc\"></div>\n              }\n              <dd-lib-svg-icon id=\"selected-clear-{{selectId}}\" icon=\"clear\" class=\"cup\"\n                               (click)=\"selectItem(item);deleteMultiItem.emit(item)\"></dd-lib-svg-icon>\n            </div>\n          }\n        </dd-lib-horizontal-scroll>\n      </div>\n    }\n\n    @if (!checkedItem) {\n      <dd-lib-svg-icon\n        (click)=\"notifyFocusEvent()\"\n        [class.black-svg]=\"isShownList\"\n        [class.disabled]=\"disabled\"\n        [class.gray-svg]=\"!isShownList\"\n        [class.up]=\"isShownList\"\n        id=\"chevron-{{ selectId }}\" class=\"chevron\" icon=\"down_chevron\"></dd-lib-svg-icon>\n    } @else if (clearable && !searchValue) {\n      <dd-lib-svg-icon\n        (click)=\"onClear(checkedItem)\"\n        class=\"clear\"\n        id=\"chevron-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\n    }\n  </div>\n\n  @if (errorTexts.length && showError) {\n    @for (error of errorTexts; track error) {\n      <div class=\"lib-select__error\">{{ error }}</div>\n    }\n  }\n  @if (errorText && showSelfError && showError) {\n    <div class=\"lib-select__error\">{{ errorText }}</div>\n  }\n\n  @if (isShownList) {\n    <div\n      id=\"dropdown\"\n      [style.max-height]=\"searchOn ? '342px' : '300px'\"\n      data-child=\"list\"\n      (ddClickOutside)=\"notifyFocusEvent();fullBlur.emit($event)\"\n      [elements]=\"['lib-select-' + selectId, 'chevron-' + selectId, 'selected-' + selectId, 'selected-clear-' + selectId]\"\n      ddListKeyboardNavigation\n      class=\"select-list-wrapper\">\n      @if (initialized) {\n        @if (!_data()?.length && noDataError) {\n          <div class=\"info-container\">\n            <div class=\"b2-title no-wrap-text\">\n              {{ noDataError }}\n            </div>\n          </div>\n        }\n\n        <div class=\"d-flex full-width align-center justify-between head-wrapper\">\n          @if (_data()?.length && _data()!.length > 5 && searchOn) {\n            <div class=\"search-block\">\n              <dd-lib-svg-icon class=\"search-icon\" id=\"chevron-{{ selectId }}\" icon=\"search\"></dd-lib-svg-icon>\n              <input class=\"search-block__input\" #searchInputEl [attr.name]=\"name\"\n                     [readOnly]=\"readOnly\"\n                     (input)=\"searchInput()\"\n                     [placeholder]=\"searchPlaceholder\"\n                     (blur)=\"handleBlur()\"\n                     (focus)=\"handleFocus()\"\n                     [(ngModel)]=\"searchValue\" type=\"text\">\n              <dd-lib-svg-icon\n                [style.display]=\"searchValue ? 'block' : 'none'\"\n                class=\"cup\"\n                (click)=\"searchValue=''\"\n                id=\"chevron-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\n            </div>\n          }\n          @if (multi) {\n            <div class=\"mr-16\">\n              <dd-lib-svg-viewer\n                (click)=\"selectAll()\"\n                class=\"checked cup\"\n                pack=\"lib-svg\"\n                id=\"chevron-{{ selectId }}\" [color]=\"!allSelected ? 'gray': ''\" icon=\"check-green\"></dd-lib-svg-viewer>\n            </div>\n          }\n\n        </div>\n\n\n        @if (_data()?.length && (_data() | filterByKey: filterList.bind(this))?.length === 0) {\n          <div class=\"info-container\">\n            <div class=\"b2-title no-wrap-text\">\n              \u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E\n            </div>\n          </div>\n        }\n\n        @if (virtualScroll) {\n          <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\" [style.height]=\"(_data()?.length || 0) * itemSize + 'px'\">\n            <div *cdkVirtualFor=\"let item of _data() | filterByKey: filterList.bind(this)\">\n              <ng-container [ngTemplateOutlet]=\"itemsList\" [ngTemplateOutletContext]=\"{items: [item]}\"></ng-container>\n            </div>\n          </cdk-virtual-scroll-viewport>\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"itemsList\" [ngTemplateOutletContext]=\"{items: _data() | filterByKey: filterList.bind(this)}\"></ng-container>\n        }\n      } @else {\n        <div class=\"info-container\">\n          <div class=\"d-flex gap-12 align-center\">\n            <div class=\"b2-title no-wrap-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445</div>\n            <dd-lib-loader></dd-lib-loader>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n\n<ng-template #rowItem let-item=\"item\" let-drag=\"drag\">\n  <div ddSelectableItem [dragItem]=\"drag\" [ddTooltip]=\"item.tooltip ? item.tooltip : ''\" [position]=\"tooltipPosition\"\n       (click)=\"selectItem(item)\"\n       (itemSelected)=\"selectItem(item)\"\n       [class.s-item-active]=\"checkSelected(item) && !item.disabled\"\n       [class.s-item-disabled]=\"item.disabled\"\n       class=\"select-data\">\n    @if (stringArray()) {\n      <div [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n           class=\"select-data__title\"></div>\n    }\n    @if (keyTitle && !stringArray()) {\n      <div\n        [innerHTML]=\"item[keyTitle!] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n        class=\"select-data__title\"></div>\n    }\n    @if (keyDesc && !stringArray()) {\n      <div\n        [innerHTML]=\"item[keyDesc!] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n        [title]=\"item[keyDesc]\"\n        class=\"select-data__desc\"></div>\n    }\n    @if (checkSelected(item)) {\n      <dd-lib-svg-icon\n        class=\"checked\"\n        id=\"chevron-{{ selectId }}\" icon=\"check_green\"></dd-lib-svg-icon>\n    }\n  </div>\n</ng-template>\n\n<ng-template #itemsList let-items=\"items\">\n  @for (item of items | filterByKey: filterList.bind(this); track item) {\n    @if (isGroup(item)) {\n      <div class=\"group-header\" [class.select-all-enabled]=\"selectAllInGroup\"\n           (click)=\"selectAllInGroup ? handleGroupClick(item) : null\">\n        <div class=\"group-title\">{{ getGroupTitle(item) }}</div>\n        @if (isGroupSelected(item)) {\n          <dd-lib-svg-icon\n            [class.checked]=\"isGroupSelected(item)\"\n            icon=\"check_green\"></dd-lib-svg-icon>\n        }\n      </div>\n      <div class=\"group-items\">\n        @for (child of item[keyGroupChildren] | filterByKey: filterList.bind(this); track child) {\n          <ng-container [ngTemplateOutlet]=\"rowItem\"\n                        [ngTemplateOutletContext]=\"{item: child, drag: false}\"></ng-container>\n        }\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"rowItem\" [ngTemplateOutletContext]=\"{item, drag: true}\"></ng-container>\n    }\n  }\n</ng-template>\n", styles: [".lib-select{position:relative}.lib-select .select-block{width:100%;height:48px;padding:15px 28px 15px 16px;overflow:hidden;text-overflow:ellipsis;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative}.lib-select .select-block:hover{border-color:var(--input-active-border-colort)}.lib-select .select-block:hover~.selected-items-container .selected-items__item{background:var(--light-green-color);color:var(--font-light-black-color)}.lib-select .select-block:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-select .select-block:focus~.selected-items-container .selected-items__item{background:var(--light-green-color);color:var(--font-light-black-color)}.lib-select .select-block:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-select .select-block:disabled::placeholder{color:var(--input-placeholder)}.lib-select .select-block:disabled~.selected-items-container .selected-items__item{background:var(--gray-blue-300);color:var(--second-gray-color)}.lib-select .select-block.invalid,.lib-select .select-block.invalid:hover{border-color:var(--input-error-border-color)}.lib-select .select-block.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-select .select-block:invalid~.selected-items-container .selected-items__item{background:var(--red-light-color);color:var(--font-light-black-color)}.lib-select .multi-count{position:absolute;top:10px;right:42px;white-space:nowrap}.lib-select .clear{cursor:pointer;position:absolute;right:8px;top:12px}.lib-select .chevron{cursor:pointer;position:absolute;right:16px;top:10px}.lib-select .chevron.up{transform:rotate(180deg)}.lib-select__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start;color:var(--light-black-color)}.lib-select__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-select .select-list-wrapper{position:absolute;display:block;z-index:100;width:100%;max-height:300px;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color)}.lib-select .select-list-wrapper cdk-virtual-scroll-viewport{max-height:300px}.lib-select .select-list-wrapper.top{bottom:50px;top:unset}.lib-select .select-list-wrapper .select-data{padding:12px 42px 12px 16px;cursor:pointer;position:relative;min-height:40px}.lib-select .select-list-wrapper .select-data__desc{font-size:14px;font-weight:400;line-height:24px;text-overflow:ellipsis;text-wrap:nowrap;padding-top:2px;overflow:hidden;color:var(--second-gray-color)}.lib-select .select-list-wrapper .select-data.key-down-active,.lib-select .select-list-wrapper .select-data:hover,.lib-select .select-list-wrapper .select-data.s-item-active{background:var(--select-act-hov-bgc)}.lib-select .select-list-wrapper .select-data.s-item-active .checked{position:absolute;right:16px;top:10px}.lib-select .select-list-wrapper .select-data.s-item-disabled{cursor:auto;background:var(--disabled-bgc);color:var(--disabled-color)}.lib-select .select-list-wrapper .group-items{padding-left:16px}.lib-select .select-list-wrapper .group-items .select-data{margin-left:-16px;padding-left:32px}.lib-select .select-list-wrapper .select-no-data{padding:12px 42px 12px 16px;cursor:auto;position:relative;color:var(--disabled-color)}.lib-select .select-list-wrapper .info-container{padding:36px;display:flex;align-items:center;justify-content:center}.head-wrapper{display:flex;width:100%;align-items:center;justify-content:space-between;border-bottom:1px solid var(--gray-bgc)}.search-block{position:relative;padding:12px;z-index:1;display:flex;gap:4px;flex:1;align-items:center}.search-block__input{border:none;background:transparent;width:100%;padding-left:40px}.search-block .search-icon{position:absolute;left:20px;top:0;bottom:0}.data-loader{position:absolute;right:0;left:0;bottom:12px}.selected-items-container{overflow:hidden;border-radius:8px;top:0;bottom:0;position:absolute;max-width:calc(100% - 60px);left:6px;margin:8px;align-items:center}.selected-items-container .selected-items__item{background:var(--blue-card);color:var(--font-light-black-color);padding:4px;border-radius:8px;display:flex;gap:4px;align-items:center;max-width:170px;overflow:hidden}.selected-items-container .selected-items__item:hover{background:var(--light-green-color);color:var(--font-light-black-color)}.selected-items-container .selected-items__item-title{overflow:hidden;white-space:nowrap;max-width:150px;text-overflow:ellipsis}.group-header{height:48px;padding:8px 16px;font-weight:600;color:var(--font-light-black-color);border-bottom:1px solid var(--gray-bgc);display:flex;justify-content:space-between;align-items:center}.group-header.select-all-enabled{cursor:pointer}.group-header.select-all-enabled:hover{background-color:var(--gray-color-300)}.group-title{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.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: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: SafePipe, name: "safe" }, { kind: "directive", type: ClickOutsideDirective, selector: "[ddClickOutside]", inputs: ["elements", "ignoreOnDrag"], outputs: ["ddClickOutside"] }, { kind: "component", type: LibLoaderComponent, selector: "dd-lib-loader", inputs: ["color", "size"] }, { kind: "pipe", type: FilterByKeyPipe, name: "filterByKey" }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: TooltipDirective, selector: "[ddTooltip]", inputs: ["ddTooltip", "withClick", "position"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ListKeyboardNavigationDirective, selector: "[ddListKeyboardNavigation]" }, { kind: "directive", type: SelectableItemDirective, selector: "[ddSelectableItem]", inputs: ["dragItem"], outputs: ["itemSelected"] }, { kind: "directive", type: FixedPositionDirective, selector: "[ddFixedPosition]", inputs: ["childName1", "childName2", "destroyedItem"] }, { kind: "component", type: LibHorizontalScrollComponent, selector: "dd-lib-horizontal-scroll" }, { kind: "component", type: LibSvgViewerComponent, selector: "dd-lib-svg-viewer", inputs: ["path", "pack", "icon", "width", "height", "color", "containerClass", "colorRules"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "selectEl", first: true, predicate: ["select"], descendants: true, read: ElementRef, static: true }, { propertyName: "searchInputEl", first: true, predicate: ["searchInputEl"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"lib-select\" id=\"lib-select-{{ selectId }}\" [destroyedItem]=\"isShownList\" ddFixedPosition>\n  @if (label) {\n    <label [for]=\"id\" class=\"lib-select__title\">\n      {{ label }}\n      @if (required) {\n        <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n      }\n    </label>\n  }\n\n  <div class=\"pos-relative\" data-child=\"input\">\n    <input\n      #select\n      (change)=\"handleChange()\"\n      (click)=\"notifyFocusEvent()\"\n      (input)=\"handleInput($event)\"\n      (blur)=\"handleBlur()\"\n      (focus)=\"handleFocus()\"\n      [attr.id]=\"selectId\"\n      [attr.placeholder]=\"(multiCountValue || searchValue) ? '' : placeholder\"\n      [attr.tabIndex]=\"tabIndex\"\n      [attr.type]=\"'text'\"\n      [class.focused]=\"focused\"\n      [class.invalid]=\"showError\"\n      [disabled]=\"disabled\"\n      [readOnly]=\"true\"\n      [(ngModel)]=\"inputValue\"\n      [title]=\"inputValue || ''\"\n      class=\"text-select select-block\" />\n\n    @if (multiCountValue) {\n      <div class=\"selected-items-container\" id=\"selected-{{selectId}}\">\n        <dd-lib-horizontal-scroll>\n          @for (item of checkedItems(); track item) {\n            <div class=\"selected-items__item\" >\n              @if (stringArray()) {\n                <div [title]=\"item\" [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n                     class=\"selected-items__item-title\"></div>\n              }\n              @if (keyTitle && !stringArray()) {\n                <div [title]=\"item[keyTitle!]\"\n                  [innerHTML]=\"item[keyTitle!] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n                  class=\"selected-items__item-title\"></div>\n              }\n              @if (keyDesc && !stringArray()) {\n                <div\n                  [innerHTML]=\"item[keyDesc!] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n                  [title]=\"item[keyDesc]\"\n                  class=\"selected-items__item-desc\"></div>\n              }\n              <dd-lib-svg-icon id=\"selected-clear-{{selectId}}\" icon=\"clear\" class=\"cup\"\n                               (click)=\"selectItem(item);deleteMultiItem.emit(item)\"></dd-lib-svg-icon>\n            </div>\n          }\n        </dd-lib-horizontal-scroll>\n      </div>\n    }\n\n    @if (!checkedItem) {\n      <dd-lib-svg-icon\n        (click)=\"notifyFocusEvent()\"\n        [class.black-svg]=\"isShownList\"\n        [class.disabled]=\"disabled\"\n        [class.gray-svg]=\"!isShownList\"\n        [class.up]=\"isShownList\"\n        id=\"chevron-{{ selectId }}\" class=\"chevron\" icon=\"down_chevron\"></dd-lib-svg-icon>\n    } @else if (clearable && !searchValue) {\n      <dd-lib-svg-icon\n        (click)=\"onClear(checkedItem)\"\n        class=\"clear\"\n        id=\"chevron-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\n    }\n  </div>\n\n  @if (errorTexts.length && showError) {\n    @for (error of errorTexts; track error) {\n      <div class=\"lib-select__error\">{{ error }}</div>\n    }\n  }\n  @if (errorText && showSelfError && showError) {\n    <div class=\"lib-select__error\">{{ errorText }}</div>\n  }\n\n  @if (isShownList) {\n    <div\n      id=\"dropdown\"\n      [style.max-height]=\"searchOn ? '342px' : '300px'\"\n      data-child=\"list\"\n      (ddClickOutside)=\"notifyFocusEvent();fullBlur.emit($event)\"\n      [elements]=\"['lib-select-' + selectId, 'chevron-' + selectId, 'selected-' + selectId, 'selected-clear-' + selectId]\"\n      ddListKeyboardNavigation\n      class=\"select-list-wrapper\">\n      @if (initialized) {\n        @if (!_data()?.length && noDataError) {\n          <div class=\"info-container\">\n            <div class=\"b2-title no-wrap-text\">\n              {{ noDataError }}\n            </div>\n          </div>\n        }\n\n        <div class=\"d-flex full-width align-center justify-between head-wrapper\">\n          @if (_data()?.length && _data()!.length > 5 && searchOn) {\n            <div class=\"search-block\">\n              <dd-lib-svg-icon class=\"search-icon\" id=\"chevron-{{ selectId }}\" icon=\"search\"></dd-lib-svg-icon>\n              <input class=\"search-block__input\" #searchInputEl [attr.name]=\"name\"\n                     [readOnly]=\"readOnly\"\n                     (input)=\"searchInput()\"\n                     [placeholder]=\"searchPlaceholder\"\n                     (blur)=\"handleBlur()\"\n                     (focus)=\"handleFocus()\"\n                     [(ngModel)]=\"searchValue\" type=\"text\">\n              <dd-lib-svg-icon\n                [style.display]=\"searchValue ? 'block' : 'none'\"\n                class=\"cup\"\n                (click)=\"searchValue=''\"\n                id=\"chevron-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\n            </div>\n          }\n          @if (multi) {\n            <div class=\"mr-16\">\n              <dd-lib-svg-viewer\n                (click)=\"selectAll()\"\n                class=\"checked cup\"\n                pack=\"lib-svg\"\n                id=\"chevron-{{ selectId }}\" [color]=\"!allSelected ? 'gray': ''\" icon=\"check-green\"></dd-lib-svg-viewer>\n            </div>\n          }\n\n        </div>\n\n\n        @if (_data()?.length && (_data() | filterByKey: filterList.bind(this))?.length === 0) {\n          <div class=\"info-container\">\n            <div class=\"b2-title no-wrap-text\">\n              \u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E\n            </div>\n          </div>\n        }\n\n        @if (virtualScroll) {\n          <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\" [style.height]=\"(_data()?.length || 0) * itemSize + 'px'\">\n            <div *cdkVirtualFor=\"let item of _data() | filterByKey: filterList.bind(this)\">\n              <ng-container [ngTemplateOutlet]=\"itemsList\" [ngTemplateOutletContext]=\"{items: [item]}\"></ng-container>\n            </div>\n          </cdk-virtual-scroll-viewport>\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"itemsList\" [ngTemplateOutletContext]=\"{items: _data() | filterByKey: filterList.bind(this)}\"></ng-container>\n        }\n      } @else {\n        <div class=\"info-container\">\n          <div class=\"d-flex gap-12 align-center\">\n            <div class=\"b2-title no-wrap-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445</div>\n            <dd-lib-loader></dd-lib-loader>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n\n<ng-template #rowItem let-item=\"item\" let-drag=\"drag\">\n  <div ddSelectableItem [dragItem]=\"drag\" [ddTooltip]=\"item.tooltip ? item.tooltip : ''\" [position]=\"tooltipPosition\"\n       (click)=\"selectItem(item)\"\n       (itemSelected)=\"selectItem(item)\"\n       [class.s-item-active]=\"checkSelected(item) && !item.disabled\"\n       [class.s-item-disabled]=\"item.disabled\"\n       class=\"select-data\">\n    @if (stringArray()) {\n      <div [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n           class=\"select-data__title\"></div>\n    }\n    @if (keyTitle && !stringArray()) {\n      <div\n        [innerHTML]=\"item[keyTitle!] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n        class=\"select-data__title\"></div>\n    }\n    @if (keyDesc && !stringArray()) {\n      <div\n        [innerHTML]=\"item[keyDesc!] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n        [title]=\"item[keyDesc]\"\n        class=\"select-data__desc\"></div>\n    }\n    @if (checkSelected(item)) {\n      <dd-lib-svg-icon\n        class=\"checked\"\n        id=\"chevron-{{ selectId }}\" icon=\"check_green\"></dd-lib-svg-icon>\n    }\n  </div>\n</ng-template>\n\n<ng-template #itemsList let-items=\"items\">\n  @for (item of items | filterByKey: filterList.bind(this); track item) {\n    @if (isGroup(item)) {\n      <div class=\"group-header\" [class.select-all-enabled]=\"selectAllInGroup\"\n           (click)=\"selectAllInGroup ? handleGroupClick(item) : null\">\n        <div class=\"group-title\">{{ getGroupTitle(item) }}</div>\n        @if (isGroupSelected(item)) {\n          <dd-lib-svg-icon\n            [class.checked]=\"isGroupSelected(item)\"\n            icon=\"check_green\"></dd-lib-svg-icon>\n        }\n      </div>\n      <div class=\"group-items\">\n        @for (child of item[keyGroupChildren] | filterByKey: filterList.bind(this); track child) {\n          <ng-container [ngTemplateOutlet]=\"rowItem\"\n                        [ngTemplateOutletContext]=\"{item: child, drag: false}\"></ng-container>\n        }\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"rowItem\" [ngTemplateOutletContext]=\"{item, drag: true}\"></ng-container>\n    }\n  }\n</ng-template>\n", styles: [".lib-select{position:relative}.lib-select .select-block{width:100%;height:48px;padding:15px 28px 15px 16px;overflow:hidden;text-overflow:ellipsis;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative}.lib-select .select-block:hover{border-color:var(--input-active-border-colort)}.lib-select .select-block:hover~.selected-items-container .selected-items__item{background:var(--light-green-color);color:var(--font-light-black-color)}.lib-select .select-block:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-select .select-block:focus~.selected-items-container .selected-items__item{background:var(--light-green-color);color:var(--font-light-black-color)}.lib-select .select-block:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-select .select-block:disabled::placeholder{color:var(--input-placeholder)}.lib-select .select-block:disabled~.selected-items-container .selected-items__item{background:var(--gray-blue-300);color:var(--second-gray-color)}.lib-select .select-block.invalid,.lib-select .select-block.invalid:hover{border-color:var(--input-error-border-color)}.lib-select .select-block.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-select .select-block:invalid~.selected-items-container .selected-items__item{background:var(--red-light-color);color:var(--font-light-black-color)}.lib-select .multi-count{position:absolute;top:10px;right:42px;white-space:nowrap}.lib-select .clear{cursor:pointer;position:absolute;right:8px;top:12px}.lib-select .chevron{cursor:pointer;position:absolute;right:16px;top:10px}.lib-select .chevron.up{transform:rotate(180deg)}.lib-select__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start;color:var(--light-black-color)}.lib-select__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-select .select-list-wrapper{position:absolute;display:block;z-index:100;width:100%;max-height:300px;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color)}.lib-select .select-list-wrapper cdk-virtual-scroll-viewport{max-height:300px}.lib-select .select-list-wrapper.top{bottom:50px;top:unset}.lib-select .select-list-wrapper .select-data{padding:12px 42px 12px 16px;cursor:pointer;position:relative;min-height:40px}.lib-select .select-list-wrapper .select-data__desc{font-size:14px;font-weight:400;line-height:24px;text-overflow:ellipsis;text-wrap:nowrap;padding-top:2px;overflow:hidden;color:var(--second-gray-color)}.lib-select .select-list-wrapper .select-data.key-down-active,.lib-select .select-list-wrapper .select-data:hover,.lib-select .select-list-wrapper .select-data.s-item-active{background:var(--select-act-hov-bgc)}.lib-select .select-list-wrapper .select-data.s-item-active .checked{position:absolute;right:16px;top:10px}.lib-select .select-list-wrapper .select-data.s-item-disabled{cursor:auto;background:var(--disabled-bgc);color:var(--disabled-color)}.lib-select .select-list-wrapper .group-items{padding-left:16px}.lib-select .select-list-wrapper .group-items .select-data{margin-left:-16px;padding-left:32px}.lib-select .select-list-wrapper .select-no-data{padding:12px 42px 12px 16px;cursor:auto;position:relative;color:var(--disabled-color)}.lib-select .select-list-wrapper .info-container{padding:36px;display:flex;align-items:center;justify-content:center}.head-wrapper{display:flex;width:100%;align-items:center;justify-content:space-between;border-bottom:1px solid var(--gray-bgc)}.search-block{position:relative;padding:12px;z-index:1;display:flex;gap:4px;flex:1;align-items:center}.search-block__input{border:none;background:transparent;width:100%;padding-left:40px}.search-block .search-icon{position:absolute;left:20px;top:0;bottom:0}.data-loader{position:absolute;right:0;left:0;bottom:12px}.selected-items-container{overflow:hidden;border-radius:8px;top:0;bottom:0;position:absolute;max-width:calc(100% - 60px);left:6px;margin:8px;align-items:center}.selected-items-container .selected-items__item{background:var(--blue-card);color:var(--font-light-black-color);padding:4px;border-radius:8px;display:flex;gap:4px;align-items:center;max-width:170px;overflow:hidden}.selected-items-container .selected-items__item:hover{background:var(--light-green-color);color:var(--font-light-black-color)}.selected-items-container .selected-items__item-title{overflow:hidden;white-space:nowrap;max-width:150px;text-overflow:ellipsis}.group-header{height:48px;padding:8px 16px;font-weight:600;color:var(--font-light-black-color);border-bottom:1px solid var(--gray-bgc);display:flex;justify-content:space-between;align-items:center}.group-header.select-all-enabled{cursor:pointer}.group-header.select-all-enabled:hover{background-color:var(--gray-color-300)}.group-title{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.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: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: SafePipe, name: "safe" }, { kind: "directive", type: ClickOutsideDirective, selector: "[ddClickOutside]", inputs: ["elements", "ignoreOnDrag"], outputs: ["ddClickOutside"] }, { kind: "component", type: LibLoaderComponent, selector: "dd-lib-loader", inputs: ["color", "size"] }, { kind: "pipe", type: FilterByKeyPipe, name: "filterByKey" }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: TooltipDirective, selector: "[ddTooltip]", inputs: ["ddTooltip", "withClick", "position"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ListKeyboardNavigationDirective, selector: "[ddListKeyboardNavigation]" }, { kind: "directive", type: SelectableItemDirective, selector: "[ddSelectableItem]", inputs: ["dragItem"], outputs: ["itemSelected"] }, { kind: "directive", type: FixedPositionDirective, selector: "[ddFixedPosition]", inputs: ["childName1", "childName2", "destroyedItem"] }, { kind: "component", type: LibHorizontalScrollComponent, selector: "dd-lib-horizontal-scroll" }, { kind: "component", type: LibSvgViewerComponent, selector: "dd-lib-svg-viewer", inputs: ["path", "pack", "icon", "width", "height", "color", "containerClass", "fullSize", "colorRules"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibSelectComponent, decorators: [{
             type: Component,
@@ -4123,7 +4230,7 @@ class LibTabsFragmentComponent {
         this.cdr.detectChanges();
     }
     handleTabSelection(tab, callEvent = true) {
-        if (!tab) {
+        if (tab === undefined || tab === null) {
             if (this.route.snapshot.fragment) {
                 const tab = this.tabs?.find(f => f.fragment &&
                     this.route.snapshot.fragment &&