@morozeckiy/dd-lib 0.7.79 → 0.7.81

package/fesm2022/morozeckiy-dd-lib.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, ViewChild, Input, Component, Injectable, InjectionToken, Inject, Pipe, Directive, HostListener, numberAttribute, TemplateRef, ChangeDetectionStrategy, Injector, forwardRef, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, Optional, ElementRef, Host, SkipSelf, signal, input } from '@angular/core';
+import { EventEmitter, Output, ViewChild, Input, Component, Injectable, InjectionToken, Inject, Pipe, Directive, HostListener, numberAttribute, TemplateRef, ChangeDetectionStrategy, Injector, forwardRef, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, Optional, ElementRef, Host, SkipSelf, signal, effect, input } from '@angular/core';
 import * as i1$4 from '@angular/forms';
 import { Validators, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BehaviorSubject, Subject, throwError, of, fromEvent, combineLatest } from 'rxjs';
@@ -11,7 +11,7 @@ import * as i2 from '@angular/router';
 import { RouterLink } from '@angular/router';
 import * as i1$1 from '@angular/platform-browser';
 import * as i1$2 from '@angular/common';
-import { DecimalPipe, CommonModule, AsyncPipe, DOCUMENT, NgTemplateOutlet, NgComponentOutlet, NgStyle, NgClass } from '@angular/common';
+import { DecimalPipe, CommonModule, AsyncPipe, DOCUMENT, NgTemplateOutlet, NgComponentOutlet, NgStyle, JsonPipe, NgClass } from '@angular/common';
 import { ComponentPortal, PortalInjector, CdkPortalOutlet, TemplatePortal } from '@angular/cdk/portal';
 import * as i1$3 from '@angular/cdk/overlay';
 import { OverlayModule, GlobalPositionStrategy } from '@angular/cdk/overlay';
@@ -612,6 +612,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
                 }]
         }] });
 
+class SortByValPipe {
+    transform(arr, key, direction = 'ASC') {
+        if (!arr?.length || !key)
+            return arr || [];
+        // Создаем копию массива, чтобы не мутировать исходный
+        const arrayCopy = [...arr];
+        return arrayCopy.sort((a, b) => {
+            let aValue;
+            let bValue;
+            // Если ключ - это функция, вызываем ее для получения значения
+            if (typeof key === 'function') {
+                aValue = key(a);
+                bValue = key(b);
+            }
+            else {
+                // Иначе получаем значение по ключу
+                aValue = a[key];
+                bValue = b[key];
+            }
+            // Приводим значения к строке для сравнения, если они разных типов
+            if (typeof aValue !== typeof bValue) {
+                aValue = String(aValue);
+                bValue = String(bValue);
+            }
+            let comparison = 0;
+            if (aValue > bValue) {
+                comparison = 1;
+            }
+            else if (aValue < bValue) {
+                comparison = -1;
+            }
+            // Инвертируем результат если направление DESC
+            return direction === 'DESC' ? -comparison : comparison;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: SortByValPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: SortByValPipe, isStandalone: true, name: "sortByVal" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: SortByValPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'sortByVal',
+                    standalone: true
+                }]
+        }] });
+
 class AutoHeightDirective {
     constructor(el, rdr) {
         this.el = el;
@@ -1249,9 +1295,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
             }] } });
 
 class SelectableItemDirective {
-    constructor(el) {
+    constructor(el, renderer) {
         this.el = el;
+        this.renderer = renderer;
         this.itemSelected = new EventEmitter();
+        this.dragItem = true;
+        this.isMouseDown = false;
+        this.lastSelectedItem = null;
+        this.firstSelection = true;
     }
     onEnter(event) {
         if (this.el.nativeElement.classList.contains('key-down-active')) {
@@ -1259,8 +1310,33 @@ class SelectableItemDirective {
             this.itemSelected.emit();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: SelectableItemDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: SelectableItemDirective, isStandalone: true, selector: "[ddSelectableItem]", outputs: { itemSelected: "itemSelected" }, host: { listeners: { "document:keyup.enter": "onEnter($event)" } }, ngImport: i0 }); }
+    onMouseDown(event) {
+        this.isMouseDown = true;
+        this.lastSelectedItem = this.el.nativeElement;
+        event.preventDefault();
+    }
+    onMouseMove(event) {
+        if (!this.isMouseDown || !this.dragItem)
+            return;
+        const elementUnderMouse = document.elementFromPoint(event.clientX, event.clientY);
+        if (elementUnderMouse && elementUnderMouse.classList.contains('select-data')) {
+            if (elementUnderMouse === this.lastSelectedItem && this.firstSelection) {
+                this.lastSelectedItem = elementUnderMouse;
+                elementUnderMouse.dispatchEvent(new MouseEvent('click'));
+                this.firstSelection = false;
+            }
+            if (elementUnderMouse !== this.lastSelectedItem) {
+                this.lastSelectedItem = elementUnderMouse;
+                elementUnderMouse.dispatchEvent(new MouseEvent('click'));
+            }
+        }
+    }
+    onMouseUp() {
+        this.isMouseDown = false;
+        this.lastSelectedItem = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: SelectableItemDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: SelectableItemDirective, isStandalone: true, selector: "[ddSelectableItem]", inputs: { dragItem: "dragItem" }, outputs: { itemSelected: "itemSelected" }, host: { listeners: { "document:keyup.enter": "onEnter($event)", "mousedown": "onMouseDown($event)", "document:mousemove": "onMouseMove($event)", "document:mouseup": "onMouseUp()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: SelectableItemDirective, decorators: [{
             type: Directive,
@@ -1268,11 +1344,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
                     selector: '[ddSelectableItem]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { itemSelected: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { itemSelected: [{
                 type: Output
+            }], dragItem: [{
+                type: Input
             }], onEnter: [{
                 type: HostListener,
                 args: ['document:keyup.enter', ['$event']]
+            }], onMouseDown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }], onMouseMove: [{
+                type: HostListener,
+                args: ['document:mousemove', ['$event']]
+            }], onMouseUp: [{
+                type: HostListener,
+                args: ['document:mouseup']
             }] } });
 
 class FixedPositionDirective {
@@ -2420,6 +2507,8 @@ const Months = [
     'Ноябрь',
     'Декабрь',
 ];
+class IDatePeriod {
+}
 /**
  Этот компонент используется для отображения календаря с возможностью выбора даты.
  Ниже приведено описание свойств и методов данного компонента:
@@ -2488,11 +2577,13 @@ class LibCalendarComponent {
         this.type = 'string';
         this.formatDate = 'dd.MM.yyyy';
         this.rangeMode = false;
+        this.rangeModeFullPeriod = true;
         this.maxHours = 23;
         this.maxMinutes = 59;
         this.needTime = false;
         this.mode = 'full';
         this.emitDate = new EventEmitter();
+        this.immediatelyEmitDate = new EventEmitter();
         this.emitPeriod = new EventEmitter();
         this.months = Months;
         this.week = ['ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СБ', 'ВС'];
@@ -2555,25 +2646,23 @@ class LibCalendarComponent {
     }
     selectDay(day) {
         if (!this.checkHideDay(day)) {
-            if (this.rangeMode) {
-                if (!this.dateStart) {
-                    this.dateStart = new Date(this.year, this.month, day);
-                }
-                else {
-                    const eDate = new Date(this.year, this.month, day);
-                    if (this.dateStart > eDate) {
-                        this.dateEnd = undefined;
-                        this.dateStart = eDate;
-                    }
-                    else {
-                        this.dateEnd = eDate;
-                    }
-                }
-            }
-            else {
+            if (!this.rangeMode) {
+                //   if (!this.dateStart) {
+                //     this.dateStart = new Date(this.year, this.month, day);
+                //   } else {
+                //     const eDate = new Date(this.year, this.month, day);
+                //     if (this.dateStart > eDate) {
+                //       this.dateEnd = undefined;
+                //       this.dateStart = eDate;
+                //     } else {
+                //       this.dateEnd = eDate;
+                //     }
+                //   }
+                // } else {
                 this.dateValue = new Date(this.year, this.month, day);
             }
         }
+        this.immediatelyEmitDate.emit(new Date(this.year, this.month, day));
     }
     selectDate() {
         if (this.rangeMode) {
@@ -2653,13 +2742,13 @@ class LibCalendarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibCalendarComponent, deps: [{ token: DateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: LibCalendarComponent, isStandalone: true, selector: "dd-lib-calendar", inputs: { type: "type", formatDate: "formatDate", formatTime: "formatTime", rangeMode: "rangeMode", maxHours: "maxHours", maxMinutes: "maxMinutes", needTime: "needTime", mode: "mode", maxDate: "maxDate", minDate: "minDate" }, outputs: { emitDate: "emitDate", emitPeriod: "emitPeriod" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: LibCalendarComponent, isStandalone: true, selector: "dd-lib-calendar", inputs: { type: "type", formatDate: "formatDate", formatTime: "formatTime", rangeMode: "rangeMode", rangeModeFullPeriod: "rangeModeFullPeriod", maxHours: "maxHours", maxMinutes: "maxMinutes", needTime: "needTime", mode: "mode", dateStart: "dateStart", dateEnd: "dateEnd", maxDate: "maxDate", minDate: "minDate" }, outputs: { emitDate: "emitDate", immediatelyEmitDate: "immediatelyEmitDate", emitPeriod: "emitPeriod" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => LibCalendarComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "@if (mode === 'icon') {\r\n<div class=\"pos-relative d-flex align-center\">\r\n  @if (dateValue) {\r\n  <span class=\"mr-12 green\">{{ dateValue | date: 'dd.MM.yyyy' }}</span>\r\n  }\r\n  <dd-lib-svg-icon class=\"cup\" (click)=\"showCalendar = !showCalendar\" icon=\"calendar\"></dd-lib-svg-icon>\r\n  @if (dateValue) {\r\n    <dd-lib-svg-icon class=\"cup\" (click)=\"canselDate()\" icon=\"clear\"></dd-lib-svg-icon>\r\n  } @if (showCalendar) {\r\n  <div class=\"calendar-abs-wrapper\">\r\n    <ng-template [ngTemplateOutlet]=\"calendar\"></ng-template>\r\n  </div>\r\n  }\r\n</div>\r\n} @if (mode === 'full') {\r\n<ng-template [ngTemplateOutlet]=\"calendar\"></ng-template>\r\n}\r\n\r\n<ng-template #calendar>\r\n  <dd-lib-card class=\"calendar-block\" type=\"small\">\r\n   <div class=\"full-width\">\r\n     <div class=\"calendar-block__header\">\r\n       <div class=\"calendar-block__header_arrow\">\r\n         <dd-lib-svg-icon (click)=\"changeMonth(-1)\" icon=\"left_chevron\"></dd-lib-svg-icon>\r\n       </div>\r\n       <div class=\"calendar-block__header_year\">{{ getMonth() + ' ' + year }}</div>\r\n       <div class=\"calendar-block__header_arrow\">\r\n         <dd-lib-svg-icon (click)=\"changeMonth(1)\" icon=\"right_chevron\"></dd-lib-svg-icon>\r\n       </div>\r\n     </div>\r\n     <div class=\"calendar-block__week\">\r\n       @for (day of week; track day) {\r\n         <div class=\"calendar-block__week_day\">{{ day }}</div>\r\n       }\r\n     </div>\r\n     <div class=\"calendar-block__days\">\r\n       @for (day of daysInMonth?.prevDays; track day) {\r\n         <div class=\"calendar-block__days_day hide\">{{ day }}</div>\r\n       } @for (day of daysInMonth?.days; track day) {\r\n       <div\r\n         (click)=\"selectDay(day)\"\r\n         [class.active]=\"checkActiveDay(day)\"\r\n\r\n         [class.current]=\"\r\n          dateNow.getDate() === day && dateNow.getMonth() === month && dateNow.getFullYear() === year\r\n        \"\r\n         [class.hide]=\"checkHideDay(day)\"\r\n         class=\"calendar-block__days_day normal\">\r\n         {{ day }}\r\n       </div>\r\n     } @for (day of daysInMonth?.lastDays; track day) {\r\n       <div class=\"calendar-block__days_day hide\">{{ day }}</div>\r\n     }\r\n     </div>\r\n     @if(needTime) {\r\n       <div class=\"calendar-block__time\">\r\n         <div class=\"d-flex justify-between\">\r\n           <div class=\"text-plain\">\u0412\u0440\u0435\u043C\u044F</div>\r\n           <div class=\"d-flex\">\r\n             <input [(ngModel)]=\"hours\" class=\"calendar-block__time-input\"\r\n                    type=\"text\"\r\n                    [ddMaxNum]=\"maxHours\"\r\n                    [curVal]=\"hours\"\r\n                    [disabled]=\"!dateValue\"\r\n                    [regExp]=\"true\"\r\n                    ddBanSymbol=\"^\\d+$\"\r\n                    max=\"23\"\r\n                    maxlength=\"2\"\r\n                    pattern=\"^\\d+$\">\r\n             <span class=\"second-dot\">:</span>\r\n             <input [(ngModel)]=\"minutes\" class=\"calendar-block__time-input\"\r\n                    [ddMaxNum]=\"maxMinutes\"\r\n                    [curVal]=\"minutes\"\r\n                    [disabled]=\"!dateValue\"\r\n                    [regExp]=\"true\"\r\n                    ddBanSymbol=\"^\\d+$\"\r\n                    max=\"59\"\r\n                    maxlength=\"2\"\r\n                    pattern=\"^\\d+$\"\r\n                    type=\"text\">\r\n           </div>\r\n         </div>\r\n       </div>\r\n     }\r\n     <div class=\"calendar-block__footer\">\r\n       <dd-lib-button (click)=\"canselDate()\" [btnColor]=\"'transparent'\" class=\"calendar-block__footer_btn\"\r\n       >\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C\r\n       </dd-lib-button>\r\n       <dd-lib-button (click)=\"selectDate()\"\r\n                      [disabled]=\"(!dateValue && !rangeMode) || (rangeMode && (!dateStart || !dateEnd))\"\r\n                      class=\"calendar-block__footer_btn\"\r\n       >\u0412\u044B\u0431\u0440\u0430\u0442\u044C\r\n       </dd-lib-button>\r\n     </div>\r\n   </div>\r\n  </dd-lib-card>\r\n</ng-template>\r\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none}.calendar-block{z-index:1100;display:block}@media screen and (max-width: 840px){.calendar-block{height:100%}}.calendar-block__time{padding:22px 0;margin:22px 0;border-top:1px solid var(--gray-color-200);border-bottom:1px solid var(--gray-color-200)}.calendar-block__time-input{width:56px;height:36px;border-radius:12px;border:1px solid var(--primary-gray-color);text-align:center}.calendar-block__time .second-dot{margin:auto 8px;animation:blink 1s step-end infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.calendar-block__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;color:var(--calendar-gray-color);font-size:14px;font-weight:400;line-height:24px}.calendar-block__header_arrow{cursor:pointer}.calendar-block__week{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;justify-items:center;color:var(--primary-green-color);font-size:10px;font-weight:400;line-height:12px;letter-spacing:1.5px;margin-bottom:22px}.calendar-block__week_day{display:flex;align-items:center;justify-content:space-around}.calendar-block__days{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;justify-items:center;margin-bottom:22px}.calendar-block__days_day{cursor:pointer;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:29px;color:var(--light-black-color)}.calendar-block__days_day.current{border:1px solid var(--primary-green-color)}.calendar-block__days_day.active,.calendar-block__days_day.normal:hover{background-color:var(--primary-green-color);color:var(--white-color)}.calendar-block__days_day.hide{pointer-events:none;cursor:default;color:var(--calendar-gray-hide-color)}.calendar-block__footer{display:flex;align-items:center;justify-content:space-between}.calendar-abs-wrapper{position:absolute;box-shadow:var(--main-card-shadow);top:0;right:0;z-index:1111}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "component", type: LibCardComponent, selector: "dd-lib-card", inputs: ["type", "footerBtn", "sHeight", "skeleton", "parentLvlForSkeleton", "plugs", "borderRadius"], outputs: ["cardBtnEvent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }, { kind: "component", type: LibButtonComponent, selector: "dd-lib-button", inputs: ["noPadding", "loaderColor"] }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: BanSymbolDirective, selector: "[ddBanSymbol]", inputs: ["ddBanSymbol", "regExp"] }, { kind: "directive", type: MaxNumDirective, selector: "[ddMaxNum]", inputs: ["ddMaxNum", "curVal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "@if (mode === 'icon') {\n<div class=\"pos-relative d-flex align-center\">\n  @if (dateValue) {\n  <span class=\"mr-12 green\">{{ dateValue | date: 'dd.MM.yyyy' }}</span>\n  }\n  <dd-lib-svg-icon class=\"cup\" (click)=\"showCalendar = !showCalendar\" icon=\"calendar\"></dd-lib-svg-icon>\n  @if (dateValue) {\n    <dd-lib-svg-icon class=\"cup\" (click)=\"canselDate()\" icon=\"clear\"></dd-lib-svg-icon>\n  } @if (showCalendar) {\n  <div class=\"calendar-abs-wrapper\">\n    <ng-template [ngTemplateOutlet]=\"calendar\"></ng-template>\n  </div>\n  }\n</div>\n} @if (mode === 'full') {\n<ng-template [ngTemplateOutlet]=\"calendar\"></ng-template>\n}\n\n<ng-template #calendar>\n  <dd-lib-card class=\"calendar-block\" type=\"small\">\n   <div class=\"full-width\">\n     <div class=\"calendar-block__header\">\n       <div class=\"calendar-block__header_arrow\">\n         <dd-lib-svg-icon (click)=\"changeMonth(-1)\" icon=\"left_chevron\"></dd-lib-svg-icon>\n       </div>\n       <div class=\"calendar-block__header_year\">{{ getMonth() + ' ' + year }}</div>\n       <div class=\"calendar-block__header_arrow\">\n         <dd-lib-svg-icon (click)=\"changeMonth(1)\" icon=\"right_chevron\"></dd-lib-svg-icon>\n       </div>\n     </div>\n     <div class=\"calendar-block__week\">\n       @for (day of week; track day) {\n         <div class=\"calendar-block__week_day\">{{ day }}</div>\n       }\n     </div>\n     <div class=\"calendar-block__days\">\n       @for (day of daysInMonth?.prevDays; track day) {\n         <div class=\"calendar-block__days_day hide\">{{ day }}</div>\n       } @for (day of daysInMonth?.days; track day) {\n       <div\n         (click)=\"selectDay(day)\"\n         [class.active]=\"checkActiveDay(day)\"\n\n         [class.current]=\"\n          dateNow.getDate() === day && dateNow.getMonth() === month && dateNow.getFullYear() === year\n        \"\n         [class.hide]=\"checkHideDay(day)\"\n         class=\"calendar-block__days_day normal\">\n         {{ day }}\n       </div>\n     } @for (day of daysInMonth?.lastDays; track day) {\n       <div class=\"calendar-block__days_day hide\">{{ day }}</div>\n     }\n     </div>\n     @if(needTime) {\n       <div class=\"calendar-block__time\">\n         <div class=\"d-flex justify-between\">\n           <div class=\"text-plain\">\u0412\u0440\u0435\u043C\u044F</div>\n           <div class=\"d-flex\">\n             <input [(ngModel)]=\"hours\" class=\"calendar-block__time-input\"\n                    type=\"text\"\n                    [ddMaxNum]=\"maxHours\"\n                    [curVal]=\"hours\"\n                    [disabled]=\"!dateValue\"\n                    [regExp]=\"true\"\n                    ddBanSymbol=\"^\\d+$\"\n                    max=\"23\"\n                    maxlength=\"2\"\n                    pattern=\"^\\d+$\">\n             <span class=\"second-dot\">:</span>\n             <input [(ngModel)]=\"minutes\" class=\"calendar-block__time-input\"\n                    [ddMaxNum]=\"maxMinutes\"\n                    [curVal]=\"minutes\"\n                    [disabled]=\"!dateValue\"\n                    [regExp]=\"true\"\n                    ddBanSymbol=\"^\\d+$\"\n                    max=\"59\"\n                    maxlength=\"2\"\n                    pattern=\"^\\d+$\"\n                    type=\"text\">\n           </div>\n         </div>\n       </div>\n     }\n     <div class=\"calendar-block__footer\">\n       <dd-lib-button (click)=\"canselDate()\" [btnColor]=\"'transparent'\" class=\"calendar-block__footer_btn\"\n       >\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C\n       </dd-lib-button>\n       <dd-lib-button (click)=\"selectDate()\"\n                      [disabled]=\"(!dateValue && !rangeMode)\n                      || (rangeMode && !dateStart && !dateEnd)\n                      || (rangeMode && rangeModeFullPeriod && (!dateStart || !dateEnd))\"\n                      class=\"calendar-block__footer_btn\"\n       >\u0412\u044B\u0431\u0440\u0430\u0442\u044C\n       </dd-lib-button>\n     </div>\n   </div>\n  </dd-lib-card>\n</ng-template>\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none}.calendar-block{z-index:1100;display:block}@media screen and (max-width: 840px){.calendar-block{height:100%}}.calendar-block__time{padding:22px 0;margin:22px 0;border-top:1px solid var(--gray-color-200);border-bottom:1px solid var(--gray-color-200)}.calendar-block__time-input{width:56px;height:36px;border-radius:12px;border:1px solid var(--primary-gray-color);text-align:center}.calendar-block__time .second-dot{margin:auto 8px;animation:blink 1s step-end infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.calendar-block__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;color:var(--calendar-gray-color);font-size:14px;font-weight:400;line-height:24px}.calendar-block__header_arrow{cursor:pointer}.calendar-block__week{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;justify-items:center;color:var(--primary-green-color);font-size:10px;font-weight:400;line-height:12px;letter-spacing:1.5px;margin-bottom:22px}.calendar-block__week_day{display:flex;align-items:center;justify-content:space-around}.calendar-block__days{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;justify-items:center;margin-bottom:22px}.calendar-block__days_day{cursor:pointer;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:29px;color:var(--light-black-color)}.calendar-block__days_day.current{border:1px solid var(--primary-green-color)}.calendar-block__days_day.active,.calendar-block__days_day.normal:hover{background-color:var(--primary-green-color);color:var(--white-color)}.calendar-block__days_day.hide{pointer-events:none;cursor:default;color:var(--calendar-gray-hide-color)}.calendar-block__footer{display:flex;align-items:center;justify-content:space-between}.calendar-abs-wrapper{position:absolute;box-shadow:var(--main-card-shadow);top:0;right:0;z-index:1111}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "component", type: LibCardComponent, selector: "dd-lib-card", inputs: ["type", "footerBtn", "sHeight", "skeleton", "parentLvlForSkeleton", "plugs", "borderRadius"], outputs: ["cardBtnEvent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }, { kind: "component", type: LibButtonComponent, selector: "dd-lib-button", inputs: ["noPadding", "loaderColor"] }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: BanSymbolDirective, selector: "[ddBanSymbol]", inputs: ["ddBanSymbol", "regExp"] }, { kind: "directive", type: MaxNumDirective, selector: "[ddMaxNum]", inputs: ["ddMaxNum", "curVal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibCalendarComponent, decorators: [{
             type: Component,
@@ -2677,7 +2766,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
                             useExisting: forwardRef(() => LibCalendarComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (mode === 'icon') {\r\n<div class=\"pos-relative d-flex align-center\">\r\n  @if (dateValue) {\r\n  <span class=\"mr-12 green\">{{ dateValue | date: 'dd.MM.yyyy' }}</span>\r\n  }\r\n  <dd-lib-svg-icon class=\"cup\" (click)=\"showCalendar = !showCalendar\" icon=\"calendar\"></dd-lib-svg-icon>\r\n  @if (dateValue) {\r\n    <dd-lib-svg-icon class=\"cup\" (click)=\"canselDate()\" icon=\"clear\"></dd-lib-svg-icon>\r\n  } @if (showCalendar) {\r\n  <div class=\"calendar-abs-wrapper\">\r\n    <ng-template [ngTemplateOutlet]=\"calendar\"></ng-template>\r\n  </div>\r\n  }\r\n</div>\r\n} @if (mode === 'full') {\r\n<ng-template [ngTemplateOutlet]=\"calendar\"></ng-template>\r\n}\r\n\r\n<ng-template #calendar>\r\n  <dd-lib-card class=\"calendar-block\" type=\"small\">\r\n   <div class=\"full-width\">\r\n     <div class=\"calendar-block__header\">\r\n       <div class=\"calendar-block__header_arrow\">\r\n         <dd-lib-svg-icon (click)=\"changeMonth(-1)\" icon=\"left_chevron\"></dd-lib-svg-icon>\r\n       </div>\r\n       <div class=\"calendar-block__header_year\">{{ getMonth() + ' ' + year }}</div>\r\n       <div class=\"calendar-block__header_arrow\">\r\n         <dd-lib-svg-icon (click)=\"changeMonth(1)\" icon=\"right_chevron\"></dd-lib-svg-icon>\r\n       </div>\r\n     </div>\r\n     <div class=\"calendar-block__week\">\r\n       @for (day of week; track day) {\r\n         <div class=\"calendar-block__week_day\">{{ day }}</div>\r\n       }\r\n     </div>\r\n     <div class=\"calendar-block__days\">\r\n       @for (day of daysInMonth?.prevDays; track day) {\r\n         <div class=\"calendar-block__days_day hide\">{{ day }}</div>\r\n       } @for (day of daysInMonth?.days; track day) {\r\n       <div\r\n         (click)=\"selectDay(day)\"\r\n         [class.active]=\"checkActiveDay(day)\"\r\n\r\n         [class.current]=\"\r\n          dateNow.getDate() === day && dateNow.getMonth() === month && dateNow.getFullYear() === year\r\n        \"\r\n         [class.hide]=\"checkHideDay(day)\"\r\n         class=\"calendar-block__days_day normal\">\r\n         {{ day }}\r\n       </div>\r\n     } @for (day of daysInMonth?.lastDays; track day) {\r\n       <div class=\"calendar-block__days_day hide\">{{ day }}</div>\r\n     }\r\n     </div>\r\n     @if(needTime) {\r\n       <div class=\"calendar-block__time\">\r\n         <div class=\"d-flex justify-between\">\r\n           <div class=\"text-plain\">\u0412\u0440\u0435\u043C\u044F</div>\r\n           <div class=\"d-flex\">\r\n             <input [(ngModel)]=\"hours\" class=\"calendar-block__time-input\"\r\n                    type=\"text\"\r\n                    [ddMaxNum]=\"maxHours\"\r\n                    [curVal]=\"hours\"\r\n                    [disabled]=\"!dateValue\"\r\n                    [regExp]=\"true\"\r\n                    ddBanSymbol=\"^\\d+$\"\r\n                    max=\"23\"\r\n                    maxlength=\"2\"\r\n                    pattern=\"^\\d+$\">\r\n             <span class=\"second-dot\">:</span>\r\n             <input [(ngModel)]=\"minutes\" class=\"calendar-block__time-input\"\r\n                    [ddMaxNum]=\"maxMinutes\"\r\n                    [curVal]=\"minutes\"\r\n                    [disabled]=\"!dateValue\"\r\n                    [regExp]=\"true\"\r\n                    ddBanSymbol=\"^\\d+$\"\r\n                    max=\"59\"\r\n                    maxlength=\"2\"\r\n                    pattern=\"^\\d+$\"\r\n                    type=\"text\">\r\n           </div>\r\n         </div>\r\n       </div>\r\n     }\r\n     <div class=\"calendar-block__footer\">\r\n       <dd-lib-button (click)=\"canselDate()\" [btnColor]=\"'transparent'\" class=\"calendar-block__footer_btn\"\r\n       >\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C\r\n       </dd-lib-button>\r\n       <dd-lib-button (click)=\"selectDate()\"\r\n                      [disabled]=\"(!dateValue && !rangeMode) || (rangeMode && (!dateStart || !dateEnd))\"\r\n                      class=\"calendar-block__footer_btn\"\r\n       >\u0412\u044B\u0431\u0440\u0430\u0442\u044C\r\n       </dd-lib-button>\r\n     </div>\r\n   </div>\r\n  </dd-lib-card>\r\n</ng-template>\r\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none}.calendar-block{z-index:1100;display:block}@media screen and (max-width: 840px){.calendar-block{height:100%}}.calendar-block__time{padding:22px 0;margin:22px 0;border-top:1px solid var(--gray-color-200);border-bottom:1px solid var(--gray-color-200)}.calendar-block__time-input{width:56px;height:36px;border-radius:12px;border:1px solid var(--primary-gray-color);text-align:center}.calendar-block__time .second-dot{margin:auto 8px;animation:blink 1s step-end infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.calendar-block__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;color:var(--calendar-gray-color);font-size:14px;font-weight:400;line-height:24px}.calendar-block__header_arrow{cursor:pointer}.calendar-block__week{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;justify-items:center;color:var(--primary-green-color);font-size:10px;font-weight:400;line-height:12px;letter-spacing:1.5px;margin-bottom:22px}.calendar-block__week_day{display:flex;align-items:center;justify-content:space-around}.calendar-block__days{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;justify-items:center;margin-bottom:22px}.calendar-block__days_day{cursor:pointer;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:29px;color:var(--light-black-color)}.calendar-block__days_day.current{border:1px solid var(--primary-green-color)}.calendar-block__days_day.active,.calendar-block__days_day.normal:hover{background-color:var(--primary-green-color);color:var(--white-color)}.calendar-block__days_day.hide{pointer-events:none;cursor:default;color:var(--calendar-gray-hide-color)}.calendar-block__footer{display:flex;align-items:center;justify-content:space-between}.calendar-abs-wrapper{position:absolute;box-shadow:var(--main-card-shadow);top:0;right:0;z-index:1111}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (mode === 'icon') {\n<div class=\"pos-relative d-flex align-center\">\n  @if (dateValue) {\n  <span class=\"mr-12 green\">{{ dateValue | date: 'dd.MM.yyyy' }}</span>\n  }\n  <dd-lib-svg-icon class=\"cup\" (click)=\"showCalendar = !showCalendar\" icon=\"calendar\"></dd-lib-svg-icon>\n  @if (dateValue) {\n    <dd-lib-svg-icon class=\"cup\" (click)=\"canselDate()\" icon=\"clear\"></dd-lib-svg-icon>\n  } @if (showCalendar) {\n  <div class=\"calendar-abs-wrapper\">\n    <ng-template [ngTemplateOutlet]=\"calendar\"></ng-template>\n  </div>\n  }\n</div>\n} @if (mode === 'full') {\n<ng-template [ngTemplateOutlet]=\"calendar\"></ng-template>\n}\n\n<ng-template #calendar>\n  <dd-lib-card class=\"calendar-block\" type=\"small\">\n   <div class=\"full-width\">\n     <div class=\"calendar-block__header\">\n       <div class=\"calendar-block__header_arrow\">\n         <dd-lib-svg-icon (click)=\"changeMonth(-1)\" icon=\"left_chevron\"></dd-lib-svg-icon>\n       </div>\n       <div class=\"calendar-block__header_year\">{{ getMonth() + ' ' + year }}</div>\n       <div class=\"calendar-block__header_arrow\">\n         <dd-lib-svg-icon (click)=\"changeMonth(1)\" icon=\"right_chevron\"></dd-lib-svg-icon>\n       </div>\n     </div>\n     <div class=\"calendar-block__week\">\n       @for (day of week; track day) {\n         <div class=\"calendar-block__week_day\">{{ day }}</div>\n       }\n     </div>\n     <div class=\"calendar-block__days\">\n       @for (day of daysInMonth?.prevDays; track day) {\n         <div class=\"calendar-block__days_day hide\">{{ day }}</div>\n       } @for (day of daysInMonth?.days; track day) {\n       <div\n         (click)=\"selectDay(day)\"\n         [class.active]=\"checkActiveDay(day)\"\n\n         [class.current]=\"\n          dateNow.getDate() === day && dateNow.getMonth() === month && dateNow.getFullYear() === year\n        \"\n         [class.hide]=\"checkHideDay(day)\"\n         class=\"calendar-block__days_day normal\">\n         {{ day }}\n       </div>\n     } @for (day of daysInMonth?.lastDays; track day) {\n       <div class=\"calendar-block__days_day hide\">{{ day }}</div>\n     }\n     </div>\n     @if(needTime) {\n       <div class=\"calendar-block__time\">\n         <div class=\"d-flex justify-between\">\n           <div class=\"text-plain\">\u0412\u0440\u0435\u043C\u044F</div>\n           <div class=\"d-flex\">\n             <input [(ngModel)]=\"hours\" class=\"calendar-block__time-input\"\n                    type=\"text\"\n                    [ddMaxNum]=\"maxHours\"\n                    [curVal]=\"hours\"\n                    [disabled]=\"!dateValue\"\n                    [regExp]=\"true\"\n                    ddBanSymbol=\"^\\d+$\"\n                    max=\"23\"\n                    maxlength=\"2\"\n                    pattern=\"^\\d+$\">\n             <span class=\"second-dot\">:</span>\n             <input [(ngModel)]=\"minutes\" class=\"calendar-block__time-input\"\n                    [ddMaxNum]=\"maxMinutes\"\n                    [curVal]=\"minutes\"\n                    [disabled]=\"!dateValue\"\n                    [regExp]=\"true\"\n                    ddBanSymbol=\"^\\d+$\"\n                    max=\"59\"\n                    maxlength=\"2\"\n                    pattern=\"^\\d+$\"\n                    type=\"text\">\n           </div>\n         </div>\n       </div>\n     }\n     <div class=\"calendar-block__footer\">\n       <dd-lib-button (click)=\"canselDate()\" [btnColor]=\"'transparent'\" class=\"calendar-block__footer_btn\"\n       >\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C\n       </dd-lib-button>\n       <dd-lib-button (click)=\"selectDate()\"\n                      [disabled]=\"(!dateValue && !rangeMode)\n                      || (rangeMode && !dateStart && !dateEnd)\n                      || (rangeMode && rangeModeFullPeriod && (!dateStart || !dateEnd))\"\n                      class=\"calendar-block__footer_btn\"\n       >\u0412\u044B\u0431\u0440\u0430\u0442\u044C\n       </dd-lib-button>\n     </div>\n   </div>\n  </dd-lib-card>\n</ng-template>\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none}.calendar-block{z-index:1100;display:block}@media screen and (max-width: 840px){.calendar-block{height:100%}}.calendar-block__time{padding:22px 0;margin:22px 0;border-top:1px solid var(--gray-color-200);border-bottom:1px solid var(--gray-color-200)}.calendar-block__time-input{width:56px;height:36px;border-radius:12px;border:1px solid var(--primary-gray-color);text-align:center}.calendar-block__time .second-dot{margin:auto 8px;animation:blink 1s step-end infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.calendar-block__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;color:var(--calendar-gray-color);font-size:14px;font-weight:400;line-height:24px}.calendar-block__header_arrow{cursor:pointer}.calendar-block__week{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;justify-items:center;color:var(--primary-green-color);font-size:10px;font-weight:400;line-height:12px;letter-spacing:1.5px;margin-bottom:22px}.calendar-block__week_day{display:flex;align-items:center;justify-content:space-around}.calendar-block__days{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;justify-items:center;margin-bottom:22px}.calendar-block__days_day{cursor:pointer;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:29px;color:var(--light-black-color)}.calendar-block__days_day.current{border:1px solid var(--primary-green-color)}.calendar-block__days_day.active,.calendar-block__days_day.normal:hover{background-color:var(--primary-green-color);color:var(--white-color)}.calendar-block__days_day.hide{pointer-events:none;cursor:default;color:var(--calendar-gray-hide-color)}.calendar-block__footer{display:flex;align-items:center;justify-content:space-between}.calendar-abs-wrapper{position:absolute;box-shadow:var(--main-card-shadow);top:0;right:0;z-index:1111}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
         }], ctorParameters: () => [{ type: DateService }], propDecorators: { type: [{
                 type: Input
             }], formatDate: [{
@@ -2686,6 +2775,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
                 type: Input
             }], rangeMode: [{
                 type: Input
+            }], rangeModeFullPeriod: [{
+                type: Input
             }], maxHours: [{
                 type: Input
             }], maxMinutes: [{
@@ -2694,8 +2785,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
                 type: Input
             }], mode: [{
                 type: Input
+            }], dateStart: [{
+                type: Input
+            }], dateEnd: [{
+                type: Input
             }], emitDate: [{
                 type: Output
+            }], immediatelyEmitDate: [{
+                type: Output
             }], emitPeriod: [{
                 type: Output
             }], maxDate: [{
@@ -3114,7 +3211,7 @@ class LibPeriodComponent {
                 useExisting: forwardRef(() => LibPeriodComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"pos-relative\">\r\n  <dd-lib-filter-button\r\n    (clearEvent)=\"clearPeriod()\"\r\n    (clickEvent)=\"showPeriod()\"\r\n    [active]=\"periodIsSelected || calendarIsSelected\"\r\n    [id]=\"idPeriod\"\r\n    btnColor=\"transparent\">\r\n    <div>\u041F\u0435\u0440\u0438\u043E\u0434</div>\r\n  </dd-lib-filter-button>\r\n  @if (periodIsShown) {\r\n  <div (ddClickOutside)=\"clickOutside($event)\" [elements]=\"[idPeriod, idCalendar]\" class=\"period__wrapper\">\r\n    <dd-lib-card class=\"period__block\" type=\"small\">\r\n      <div>\r\n        <div class=\"period__header\">\r\n          <div class=\"period__back\" (click)=\"periodIsShown = false\">\r\n            <dd-lib-svg-icon icon=\"toggle_arrow_left\"></dd-lib-svg-icon>\r\n            <div class=\"g-h5-title\">\u041F\u0435\u0440\u0438\u043E\u0434</div>\r\n          </div>\r\n          <div class=\"g-h5-title hide-tablet\">\u041F\u0435\u0440\u0438\u043E\u0434</div>\r\n          <div (click)=\"clearPeriod()\" class=\"g-text font-medium green cup\">\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C</div>\r\n        </div>\r\n        <div class=\"period__list\">\r\n          @for (period of periodMenu; track period) {\r\n          <dd-lib-radio (changed)=\"selectPeriod($event)\" [(ngModel)]=\"selectedPeriod\" [value]=\"period.name\">{{\r\n            period.title\r\n          }}</dd-lib-radio>\r\n          }\r\n        </div>\r\n        <div (click)=\"calendarIsShown = !calendarIsShown\" class=\"g-text font-medium green cup mt-8\">\r\n          {{ calendarIsShown ? '\u0417\u0430\u043A\u0440\u044B\u0442\u044C' : '\u041E\u0442\u043A\u0440\u044B\u0442\u044C' }} \u043A\u0430\u043B\u0435\u043D\u0434\u0430\u0440\u044C\r\n        </div>\r\n      </div>\r\n    </dd-lib-card>\r\n    @if (calendarIsShown) {\r\n    <dd-lib-calendar\r\n      (emitDate)=\"selectDate($event)\"\r\n      [(ngModel)]=\"selectedDate\"\r\n      [id]=\"idCalendar\"\r\n      [maxDate]=\"maxDate\"\r\n      class=\"period__calendar\">\r\n    </dd-lib-calendar>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: ["dd-lib-filter-button{position:relative}.period__wrapper{position:absolute;left:0;z-index:400;display:block;width:352px;height:348px;margin-top:8px;animation:filter-show .5s forwards}@media screen and (max-width: 840px){.period__wrapper{position:fixed;top:0;width:100%;height:100%;overflow:auto;margin-top:0;animation:shift .3s}}@media screen and (max-width: 840px){.period__block{height:100%}}.period__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}@media screen and (max-width: 840px){.period__header{padding-bottom:24px;border-bottom:1px solid var(--gray-color-200)}}@media screen and (max-width: 480px){.period__header{padding-top:8px}}.period__back{display:none}@media screen and (max-width: 840px){.period__back{display:flex;align-items:center}}.period__back ::ng-deep svg{margin-right:16px}.period__back ::ng-deep svg path{stroke:var(--menu-arr-color)}.period__list{max-height:400px;overflow:auto}@media screen and (max-width: 840px){.period__list{max-height:none}}.period__list ::ng-deep dd-lib-radio{display:block;margin-bottom:16px}@media screen and (max-width: 840px){.period__list ::ng-deep dd-lib-radio:not(:last-child){padding-bottom:16px;border-bottom:1px solid var(--gray-color-200)}}.period__calendar{margin-top:8px;display:block;animation:filter-show .5s forwards}@media screen and (max-width: 840px){.period__calendar{position:fixed;top:0;left:0;width:100%;height:100%;overflow:auto;margin-top:0;animation:shift .3s}}\n"], dependencies: [{ kind: "component", type: LibCardComponent, selector: "dd-lib-card", inputs: ["type", "footerBtn", "sHeight", "skeleton", "parentLvlForSkeleton", "plugs", "borderRadius"], outputs: ["cardBtnEvent"] }, { kind: "component", type: LibFilterButtonComponent, selector: "dd-lib-filter-button", inputs: ["btnTitle", "hintContent"], outputs: ["clearEvent", "hintEvent"] }, { kind: "component", type: LibRadioComponent, selector: "dd-lib-radio", inputs: ["radioId", "disabled", "required", "name", "value", "checked"], outputs: ["changed"] }, { kind: "component", type: LibCalendarComponent, selector: "dd-lib-calendar", inputs: ["type", "formatDate", "formatTime", "rangeMode", "maxHours", "maxMinutes", "needTime", "mode", "maxDate", "minDate"], outputs: ["emitDate", "emitPeriod"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[ddClickOutside]", inputs: ["elements"], outputs: ["ddClickOutside"] }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<div class=\"pos-relative\">\r\n  <dd-lib-filter-button\r\n    (clearEvent)=\"clearPeriod()\"\r\n    (clickEvent)=\"showPeriod()\"\r\n    [active]=\"periodIsSelected || calendarIsSelected\"\r\n    [id]=\"idPeriod\"\r\n    btnColor=\"transparent\">\r\n    <div>\u041F\u0435\u0440\u0438\u043E\u0434</div>\r\n  </dd-lib-filter-button>\r\n  @if (periodIsShown) {\r\n  <div (ddClickOutside)=\"clickOutside($event)\" [elements]=\"[idPeriod, idCalendar]\" class=\"period__wrapper\">\r\n    <dd-lib-card class=\"period__block\" type=\"small\">\r\n      <div>\r\n        <div class=\"period__header\">\r\n          <div class=\"period__back\" (click)=\"periodIsShown = false\">\r\n            <dd-lib-svg-icon icon=\"toggle_arrow_left\"></dd-lib-svg-icon>\r\n            <div class=\"g-h5-title\">\u041F\u0435\u0440\u0438\u043E\u0434</div>\r\n          </div>\r\n          <div class=\"g-h5-title hide-tablet\">\u041F\u0435\u0440\u0438\u043E\u0434</div>\r\n          <div (click)=\"clearPeriod()\" class=\"g-text font-medium green cup\">\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C</div>\r\n        </div>\r\n        <div class=\"period__list\">\r\n          @for (period of periodMenu; track period) {\r\n          <dd-lib-radio (changed)=\"selectPeriod($event)\" [(ngModel)]=\"selectedPeriod\" [value]=\"period.name\">{{\r\n            period.title\r\n          }}</dd-lib-radio>\r\n          }\r\n        </div>\r\n        <div (click)=\"calendarIsShown = !calendarIsShown\" class=\"g-text font-medium green cup mt-8\">\r\n          {{ calendarIsShown ? '\u0417\u0430\u043A\u0440\u044B\u0442\u044C' : '\u041E\u0442\u043A\u0440\u044B\u0442\u044C' }} \u043A\u0430\u043B\u0435\u043D\u0434\u0430\u0440\u044C\r\n        </div>\r\n      </div>\r\n    </dd-lib-card>\r\n    @if (calendarIsShown) {\r\n    <dd-lib-calendar\r\n      (emitDate)=\"selectDate($event)\"\r\n      [(ngModel)]=\"selectedDate\"\r\n      [id]=\"idCalendar\"\r\n      [maxDate]=\"maxDate\"\r\n      class=\"period__calendar\">\r\n    </dd-lib-calendar>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: ["dd-lib-filter-button{position:relative}.period__wrapper{position:absolute;left:0;z-index:400;display:block;width:352px;height:348px;margin-top:8px;animation:filter-show .5s forwards}@media screen and (max-width: 840px){.period__wrapper{position:fixed;top:0;width:100%;height:100%;overflow:auto;margin-top:0;animation:shift .3s}}@media screen and (max-width: 840px){.period__block{height:100%}}.period__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}@media screen and (max-width: 840px){.period__header{padding-bottom:24px;border-bottom:1px solid var(--gray-color-200)}}@media screen and (max-width: 480px){.period__header{padding-top:8px}}.period__back{display:none}@media screen and (max-width: 840px){.period__back{display:flex;align-items:center}}.period__back ::ng-deep svg{margin-right:16px}.period__back ::ng-deep svg path{stroke:var(--menu-arr-color)}.period__list{max-height:400px;overflow:auto}@media screen and (max-width: 840px){.period__list{max-height:none}}.period__list ::ng-deep dd-lib-radio{display:block;margin-bottom:16px}@media screen and (max-width: 840px){.period__list ::ng-deep dd-lib-radio:not(:last-child){padding-bottom:16px;border-bottom:1px solid var(--gray-color-200)}}.period__calendar{margin-top:8px;display:block;animation:filter-show .5s forwards}@media screen and (max-width: 840px){.period__calendar{position:fixed;top:0;left:0;width:100%;height:100%;overflow:auto;margin-top:0;animation:shift .3s}}\n"], dependencies: [{ kind: "component", type: LibCardComponent, selector: "dd-lib-card", inputs: ["type", "footerBtn", "sHeight", "skeleton", "parentLvlForSkeleton", "plugs", "borderRadius"], outputs: ["cardBtnEvent"] }, { kind: "component", type: LibFilterButtonComponent, selector: "dd-lib-filter-button", inputs: ["btnTitle", "hintContent"], outputs: ["clearEvent", "hintEvent"] }, { kind: "component", type: LibRadioComponent, selector: "dd-lib-radio", inputs: ["radioId", "disabled", "required", "name", "value", "checked"], outputs: ["changed"] }, { kind: "component", type: LibCalendarComponent, selector: "dd-lib-calendar", inputs: ["type", "formatDate", "formatTime", "rangeMode", "rangeModeFullPeriod", "maxHours", "maxMinutes", "needTime", "mode", "dateStart", "dateEnd", "maxDate", "minDate"], outputs: ["emitDate", "immediatelyEmitDate", "emitPeriod"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[ddClickOutside]", inputs: ["elements"], outputs: ["ddClickOutside"] }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibPeriodComponent, decorators: [{
             type: Component,
@@ -3404,6 +3501,12 @@ class LibHorizontalScrollComponent {
         this.lastTime = time;
         this.lastScrollLeft = container.scrollLeft;
     }
+    onWheel(e) {
+        const container = this.el.nativeElement.querySelector('.scroll-container');
+        // Уменьшаем скорость прокрутки, умножая на коэффициент (например 0.5)
+        container.scrollLeft += e.deltaY * 0.5;
+        e.preventDefault();
+    }
     startInertialScroll() {
         this.cancelAnimation();
         const animate = () => {
@@ -3429,11 +3532,11 @@ class LibHorizontalScrollComponent {
         this.cancelAnimation();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibHorizontalScrollComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: LibHorizontalScrollComponent, isStandalone: true, selector: "dd-lib-horizontal-scroll", ngImport: i0, template: "<div class=\"scroll-container\"\r\n     (mousedown)=\"onMouseDown($event)\"\r\n     (mouseleave)=\"onMouseLeave()\"\r\n     (mouseup)=\"onMouseUp()\"\r\n     (mousemove)=\"onMouseMove($event)\"\r\n     (touchstart)=\"onTouchStart($event)\"\r\n     (touchend)=\"onTouchEnd()\"\r\n     (touchmove)=\"onTouchMove($event)\">\r\n  <div class=\"scroll-content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".scroll-container{width:100%;overflow-x:auto;cursor:grab;-ms-overflow-style:none;scrollbar-width:none}.scroll-container:active{cursor:grabbing}.scroll-container::-webkit-scrollbar{display:none}.scroll-content{display:inline-flex;-webkit-user-select:none;user-select:none;gap:4px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: LibHorizontalScrollComponent, isStandalone: true, selector: "dd-lib-horizontal-scroll", ngImport: i0, template: "<div class=\"scroll-container\"\r\n     (mousedown)=\"onMouseDown($event)\"\r\n     (mouseleave)=\"onMouseLeave()\"\r\n     (mouseup)=\"onMouseUp()\"\r\n     (mousemove)=\"onMouseMove($event)\"\r\n     (wheel)=\"onWheel($event)\"\r\n     (touchstart)=\"onTouchStart($event)\"\r\n     (touchend)=\"onTouchEnd()\"\r\n     (touchmove)=\"onTouchMove($event)\">\r\n  <div class=\"scroll-content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".scroll-container{width:100%;overflow-x:auto;cursor:grab;-ms-overflow-style:none;scrollbar-width:none}.scroll-container:active{cursor:grabbing}.scroll-container::-webkit-scrollbar{display:none}.scroll-content{display:inline-flex;-webkit-user-select:none;user-select:none;gap:4px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibHorizontalScrollComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dd-lib-horizontal-scroll', imports: [], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"scroll-container\"\r\n     (mousedown)=\"onMouseDown($event)\"\r\n     (mouseleave)=\"onMouseLeave()\"\r\n     (mouseup)=\"onMouseUp()\"\r\n     (mousemove)=\"onMouseMove($event)\"\r\n     (touchstart)=\"onTouchStart($event)\"\r\n     (touchend)=\"onTouchEnd()\"\r\n     (touchmove)=\"onTouchMove($event)\">\r\n  <div class=\"scroll-content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".scroll-container{width:100%;overflow-x:auto;cursor:grab;-ms-overflow-style:none;scrollbar-width:none}.scroll-container:active{cursor:grabbing}.scroll-container::-webkit-scrollbar{display:none}.scroll-content{display:inline-flex;-webkit-user-select:none;user-select:none;gap:4px}\n"] }]
+            args: [{ selector: 'dd-lib-horizontal-scroll', imports: [], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"scroll-container\"\r\n     (mousedown)=\"onMouseDown($event)\"\r\n     (mouseleave)=\"onMouseLeave()\"\r\n     (mouseup)=\"onMouseUp()\"\r\n     (mousemove)=\"onMouseMove($event)\"\r\n     (wheel)=\"onWheel($event)\"\r\n     (touchstart)=\"onTouchStart($event)\"\r\n     (touchend)=\"onTouchEnd()\"\r\n     (touchmove)=\"onTouchMove($event)\">\r\n  <div class=\"scroll-content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".scroll-container{width:100%;overflow-x:auto;cursor:grab;-ms-overflow-style:none;scrollbar-width:none}.scroll-container:active{cursor:grabbing}.scroll-container::-webkit-scrollbar{display:none}.scroll-content{display:inline-flex;-webkit-user-select:none;user-select:none;gap:4px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
 class LibSelectComponent extends LibCommonInputTextComponent {
@@ -3457,6 +3560,7 @@ class LibSelectComponent extends LibCommonInputTextComponent {
         this.tooltipPosition = 'top';
         this.highlight = true;
         this.searchOn = true;
+        this.canSortByChecked = true;
         this.itemSize = 40;
         this.keyTitle = '';
         this.keyDesc = '';
@@ -3473,9 +3577,12 @@ class LibSelectComponent extends LibCommonInputTextComponent {
         this.initialized = false;
         this._data = signal(undefined);
         // TODO: надо сделать типизацию и конструктор принмайющий объект форматирующий во внутренний и отдающий обратно что нужно
-        this.checkedItems = [];
+        this.checkedItems = signal([]);
         this.initWriteValue = true;
         this.stringArray = signal(false);
+        effect(() => {
+            this.allSelected = this.checkedItems().length === this._data()?.length;
+        });
     }
     ngOnInit() {
         this.showMultiCountValue = this.multi;
@@ -3513,23 +3620,23 @@ class LibSelectComponent extends LibCommonInputTextComponent {
         const children = group[this.keyGroupChildren];
         const allSelected = this.isGroupSelected(group);
         if (allSelected) {
-            this.checkedItems = this.checkedItems.filter(item => !children.some((child) => this.keyValue ? child[this.keyValue] === item[this.keyValue] :
-                JSON.stringify(child) === JSON.stringify(item)));
+            this.checkedItems.set(this.checkedItems().filter(item => !children.some((child) => this.keyValue ? child[this.keyValue] === item[this.keyValue] :
+                JSON.stringify(child) === JSON.stringify(item))));
         }
         else {
-            const newItems = children.filter((child) => !this.checkedItems.some(item => this.keyValue ? child[this.keyValue] === item[this.keyValue] :
+            const newItems = children.filter((child) => !this.checkedItems().some(item => this.keyValue ? child[this.keyValue] === item[this.keyValue] :
                 JSON.stringify(child) === JSON.stringify(item)));
-            this.checkedItems = [...this.checkedItems, ...newItems];
+            this.checkedItems.set([...this.checkedItems(), ...newItems]);
         }
         this.updateMultiSelection();
     }
     updateMultiSelection() {
         const values = this.keyValue ?
-            this.checkedItems.map(m => m[this.keyValue]) :
-            this.checkedItems;
+            this.checkedItems().map(m => m[this.keyValue]) :
+            this.checkedItems();
         this.propagateChange(values);
-        this.multiCountValue = this.checkedItems.length ?
-            `Выбрано (${this.checkedItems.length})` :
+        this.multiCountValue = this.checkedItems().length ?
+            `Выбрано (${this.checkedItems().length})` :
             undefined;
         this.changeDetection.detectChanges();
     }
@@ -3537,7 +3644,7 @@ class LibSelectComponent extends LibCommonInputTextComponent {
         if (!this.multi)
             return false;
         const children = group[this.keyGroupChildren];
-        return children.every((child) => this.checkedItems.some(item => this.keyValue ? child[this.keyValue] === item[this.keyValue] :
+        return children.every((child) => this.checkedItems().some(item => this.keyValue ? child[this.keyValue] === item[this.keyValue] :
             JSON.stringify(child) === JSON.stringify(item)));
     }
     onClear(checkedItem) {
@@ -3586,6 +3693,22 @@ class LibSelectComponent extends LibCommonInputTextComponent {
         else {
             this.isShownList = false;
         }
+        if (this.isShownList && this.canSortByChecked) {
+            this._data.update(data => {
+                if (!data) {
+                    return data;
+                }
+                return data.sort((a, b) => {
+                    const aSelected = this.checkSelected(a);
+                    const bSelected = this.checkSelected(b);
+                    if (aSelected && !bSelected)
+                        return -1;
+                    if (!aSelected && bSelected)
+                        return 1;
+                    return 0;
+                });
+            });
+        }
         super.notifyFocusEvent();
     }
     writeValue(value) {
@@ -3598,20 +3721,20 @@ class LibSelectComponent extends LibCommonInputTextComponent {
                     data = this._data()?.flatMap(item => item.children) ?? [];
                 }
                 if (this.keyValue) {
-                    this.checkedItems = data.filter((f) => value.includes(f[this.keyValue])) || [];
+                    this.checkedItems.set(data.filter((f) => value.includes(f[this.keyValue])) || []);
                 }
                 else {
                     if (this.stringArray()) {
-                        this.checkedItems = data.filter((f) => value.includes(f)) || [];
+                        this.checkedItems.set(data.filter((f) => value.includes(f)) || []);
                     }
                     else {
                         const strArr = value.map(JSON.stringify);
-                        this.checkedItems = data.filter((f) => strArr.includes(JSON.stringify(f))) || [];
+                        this.checkedItems.set(data.filter((f) => strArr.includes(JSON.stringify(f))) || []);
                     }
                 }
             }
             else {
-                this.checkedItems = [];
+                this.checkedItems.set([]);
                 this.multiCountValue = '';
             }
             if (!this.initWriteValue) {
@@ -3729,20 +3852,28 @@ class LibSelectComponent extends LibCommonInputTextComponent {
         this.searchValue = undefined;
         this.isShownList = false;
     }
-    selectMultiItem(item) {
+    selectMultiItem(item, clear, checkAll) {
         if (typeof item === 'string') {
         }
         else {
-            if (this.checkSelected(item)) {
-                this.checkedItems = this.checkedItems.filter(f => f[this.keyValue] !== item[this.keyValue] || f !== item);
+            if (checkAll) {
+                if (clear) {
+                    this.checkedItems.set(this.checkedItems().filter(f => f[this.keyValue] !== item[this.keyValue] || f !== item));
+                }
+                else {
+                    this.checkedItems.set(this._data());
+                }
+            }
+            else if (this.checkSelected(item)) {
+                this.checkedItems.set(this.checkedItems().filter(f => f[this.keyValue] !== item[this.keyValue] || f !== item));
             }
             else {
-                this.checkedItems.push(item);
+                this.checkedItems.set([...this.checkedItems(), item]);
             }
         }
-        const values = this.keyValue ? this.checkedItems.map(m => m[this.keyValue]) : this.checkedItems;
+        const values = this.keyValue ? this.checkedItems().map(m => m[this.keyValue]) : this.checkedItems;
         this.propagateChange(values);
-        const selectL = this.checkedItems.length;
+        const selectL = this.checkedItems().length;
         if (selectL) {
             this.multiCountValue = `Выбрано (${selectL})`;
         }
@@ -3750,13 +3881,16 @@ class LibSelectComponent extends LibCommonInputTextComponent {
             this.multiCountValue = undefined;
         }
     }
+    sortByChecked(item) {
+        return this.canSortByChecked ? this.checkSelected(item) : false;
+    }
     checkSelected(item) {
         if (this.multi) {
             if (this.keyValue) {
-                return this.checkedItems.find(f => f[this.keyValue] === item[this.keyValue] || f === item);
+                return this.checkedItems().find(f => f[this.keyValue] === item[this.keyValue] || f === item);
             }
             else {
-                return this.checkedItems.find(f => JSON.stringify(f) === JSON.stringify(item) || f === item);
+                return this.checkedItems().find(f => JSON.stringify(f) === JSON.stringify(item) || f === item);
             }
         }
         else {
@@ -3783,40 +3917,28 @@ class LibSelectComponent extends LibCommonInputTextComponent {
         super.handleFocus();
         // this.showMultiCountValue = false;
     }
+    selectAll() {
+        this.allSelected = !this.allSelected;
+        this._data()?.forEach(item => this.selectMultiItem(item, !this.allSelected, true));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibSelectComponent, deps: [{ token: i0.DestroyRef }, { token: i0.ChangeDetectorRef }, { token: i1$4.ControlContainer, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: LibSelectComponent, isStandalone: true, selector: "dd-lib-select", inputs: { data: "data", virtualScroll: "virtualScroll", multi: "multi", tooltipPosition: "tooltipPosition", highlight: "highlight", searchOn: "searchOn", selectId: "selectId", itemSize: "itemSize", keyTitle: "keyTitle", keyDesc: "keyDesc", keyValue: "keyValue", noDataError: "noDataError", searchPlaceholder: "searchPlaceholder", placeholder: "placeholder", keyGroupTitle: "keyGroupTitle", keyGroupChildren: "keyGroupChildren", selectAllInGroup: "selectAllInGroup" }, outputs: { selectedItem: "selectedItem", selectedItems: "selectedItems", deleteMultiItem: "deleteMultiItem" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: LibSelectComponent, isStandalone: true, selector: "dd-lib-select", inputs: { data: "data", virtualScroll: "virtualScroll", multi: "multi", tooltipPosition: "tooltipPosition", highlight: "highlight", searchOn: "searchOn", selectId: "selectId", canSortByChecked: "canSortByChecked", itemSize: "itemSize", keyTitle: "keyTitle", keyDesc: "keyDesc", keyValue: "keyValue", noDataError: "noDataError", searchPlaceholder: "searchPlaceholder", placeholder: "placeholder", keyGroupTitle: "keyGroupTitle", keyGroupChildren: "keyGroupChildren", selectAllInGroup: "selectAllInGroup" }, outputs: { selectedItem: "selectedItem", selectedItems: "selectedItems", deleteMultiItem: "deleteMultiItem" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 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 [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n                     class=\"selected-items__item-title\"></div>\n              }\n              @if (keyTitle && !stringArray()) {\n                <div\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        @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\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\">\n  <div ddSelectableItem [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        (click)=\"selectItem(checkedItem)\"\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\" [ngTemplateOutletContext]=\"{item: child}\"></ng-container>\n        }\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"rowItem\" [ngTemplateOutletContext]=\"{item}\"></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}.search-block{position:relative;padding:12px;z-index:1;display:flex;gap:4px;align-items:center;border-bottom:1px solid var(--gray-bgc)}.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}.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{white-space:nowrap}.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$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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"], 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$2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$2.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]", outputs: ["itemSelected"] }, { kind: "directive", type: FixedPositionDirective, selector: "[ddFixedPosition]", inputs: ["childName1", "childName2", "destroyedItem"] }, { kind: "component", type: LibHorizontalScrollComponent, selector: "dd-lib-horizontal-scroll" }], 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$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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"], 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$2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$2.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dd-lib-select', standalone: true, imports: [
-                        ReactiveFormsModule,
-                        FormsModule,
-                        HighlightPipe,
-                        SafePipe,
-                        ClickOutsideDirective,
-                        LibLoaderComponent,
-                        FilterByKeyPipe,
-                        LibSvgIconComponent,
-                        ScrollingModule,
-                        TooltipDirective,
-                        NgTemplateOutlet,
-                        ListKeyboardNavigationDirective,
-                        SelectableItemDirective,
-                        FixedPositionDirective,
-                        LibHorizontalScrollComponent
-                    ], providers: [
+            args: [{ selector: 'dd-lib-select', standalone: true, imports: [ReactiveFormsModule, FormsModule, HighlightPipe, SafePipe, ClickOutsideDirective, LibLoaderComponent, FilterByKeyPipe, LibSvgIconComponent, ScrollingModule, TooltipDirective, NgTemplateOutlet, ListKeyboardNavigationDirective, SelectableItemDirective, FixedPositionDirective, LibHorizontalScrollComponent, JsonPipe, SortByValPipe, LibSvgViewerComponent], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => LibSelectComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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 [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n                     class=\"selected-items__item-title\"></div>\n              }\n              @if (keyTitle && !stringArray()) {\n                <div\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        @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\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\">\n  <div ddSelectableItem [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        (click)=\"selectItem(checkedItem)\"\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\" [ngTemplateOutletContext]=\"{item: child}\"></ng-container>\n        }\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"rowItem\" [ngTemplateOutletContext]=\"{item}\"></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}.search-block{position:relative;padding:12px;z-index:1;display:flex;gap:4px;align-items:center;border-bottom:1px solid var(--gray-bgc)}.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}.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{white-space:nowrap}.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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }, { type: i0.ChangeDetectorRef }, { type: i1$4.ControlContainer, decorators: [{
                     type: Optional
                 }, {
@@ -3843,6 +3965,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
                 type: Input
             }], selectId: [{
                 type: Input
+            }], canSortByChecked: [{
+                type: Input
             }], itemSize: [{
                 type: Input
             }], keyTitle: [{
@@ -4268,15 +4392,61 @@ class LibDateRangeComponent {
     static { this.idCounter = 1; }
     constructor(cdr) {
         this.cdr = cdr;
+        this.placeholderStart = 'Дата начала';
+        this.placeholderEnd = 'Дата окончания';
+        this.rangeModeFullPeriod = true;
         this.isShownPeriod = false;
         this.disabled = false;
-        this.selectedPeriod = { start: new Date(), end: new Date() };
+        this.selectedPeriod = {
+            start: undefined,
+            end: undefined
+        };
+        this.endIsFocused = false;
+        this.startIsFocused = false;
+    }
+    pressTab(e) {
+        if (this.isShownPeriod) {
+            e.preventDefault();
+            e.stopPropagation();
+            if (this.startIsFocused) {
+                this.endInput?.nativeElement.focus();
+            }
+            else if (this.endIsFocused) {
+                this.startInput?.nativeElement.focus();
+            }
+        }
     }
     ngOnInit() {
         if (!this.rangeId) {
             this.rangeId = 'dd-range-' + LibDateRangeComponent.idCounter++;
         }
     }
+    get startDateStr() {
+        return this.formatDate(this.selectedPeriod.start);
+    }
+    set startDateStr(value) {
+        this.selectedPeriod.start = this.parseDate(value);
+    }
+    get endDateStr() {
+        return this.formatDate(this.selectedPeriod.end);
+    }
+    set endDateStr(value) {
+        this.selectedPeriod.end = this.parseDate(value);
+    }
+    formatDate(date) {
+        if (!date)
+            return '';
+        const day = date.getDate().toString().padStart(2, '0');
+        const month = (date.getMonth() + 1).toString().padStart(2, '0');
+        const year = date.getFullYear();
+        return `${day}.${month}.${year}`;
+    }
+    parseDate(dateStr) {
+        if (!dateStr)
+            return new Date();
+        const parts = dateStr.split('.');
+        return new Date(+parts[2], +parts[1] - 1, +parts[0]);
+    }
     openCalendar() {
         if (!this.disabled) {
             this.isShownPeriod = true;
@@ -4294,7 +4464,7 @@ class LibDateRangeComponent {
             this.selectedPeriodStr = `${format($event?.start, 'dd.MM.yyyy')} - ${format($event?.end, 'dd.MM.yyyy')}`;
         }
         else {
-            this.selectedPeriod = undefined;
+            this.selectedPeriod = new IDatePeriod();
             this.selectedPeriodStr = undefined;
         }
         this.propagateChange(this.selectedPeriod);
@@ -4306,7 +4476,7 @@ class LibDateRangeComponent {
             this.selectedPeriod = { start, end };
         }
         else {
-            this.selectedPeriod = undefined;
+            this.selectedPeriod = new IDatePeriod();
         }
         this.propagateChange(this.selectedPeriod);
     }
@@ -4325,15 +4495,53 @@ class LibDateRangeComponent {
         }
         this.cdr.detectChanges();
     }
+    setDate($event) {
+        if (this.startIsFocused) {
+            if (this.selectedPeriod.start?.toString() === $event?.toString()) {
+                this.selectedPeriod.start = undefined;
+            }
+            else {
+                this.selectedPeriod.start = $event;
+            }
+            if (this.selectedPeriod.end) {
+                if (this.selectedPeriod.start > this.selectedPeriod.end) {
+                    this.selectedPeriod.end = undefined;
+                }
+            }
+        }
+        if (this.endIsFocused) {
+            if (this.selectedPeriod.end?.toString() === $event?.toString()) {
+                this.selectedPeriod.end = undefined;
+            }
+            else {
+                this.selectedPeriod.end = $event;
+            }
+            if (this.selectedPeriod?.start) {
+                if (this.selectedPeriod.start > this.selectedPeriod.end) {
+                    this.selectedPeriod.start = undefined;
+                }
+            }
+        }
+    }
+    changeActiveInput(position, val) {
+        if (position === 'start' && !this.startIsFocused) {
+            this.startIsFocused = val;
+            this.endIsFocused = false;
+        }
+        if (position === 'end' && !this.endIsFocused) {
+            this.endIsFocused = val;
+            this.startIsFocused = false;
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibDateRangeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: LibDateRangeComponent, isStandalone: true, selector: "dd-lib-date-range", inputs: { rangeId: "rangeId", placeholder: "placeholder", label: "label", required: "required" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: LibDateRangeComponent, isStandalone: true, selector: "dd-lib-date-range", inputs: { rangeId: "rangeId", placeholderStart: "placeholderStart", placeholderEnd: "placeholderEnd", label: "label", required: "required", rangeModeFullPeriod: "rangeModeFullPeriod" }, host: { listeners: { "document:keydown.tab": "pressTab($event)" } }, providers: [
             provideNgxMask(),
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => LibDateRangeComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"lib-range\" id=\"lib-range-{{ rangeId }}\" [destroyedItem]=\"isShownPeriod\" ddFixedPosition>\r\n  @if (label) {\r\n    <label [for]=\"rangeId\" class=\"lib-range__title\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\r\n      }\r\n    </label>\r\n  }\r\n  <div class=\"pos-relative\" data-child=\"input\">\r\n    <input\r\n      [attr.id]=\"rangeId\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (click)=\"openCalendar()\"\r\n      [(ngModel)]=\"selectedPeriodStr\"\r\n      [mask]=\"'d0.M0.0000 - d0.M0.0000'\"\r\n      (ngModelChange)=\"changeStrDate($event)\"\r\n      [leadZeroDateTime]=\"true\"\r\n      class=\"text-select\"/>\r\n    @if (!selectedPeriodStr) {\r\n      <dd-lib-svg-icon [class.gray-svg]=\"!isShownPeriod\"\r\n                       (click)=\"openCalendar()\"\r\n                       id=\"calendar-{{ rangeId }}\"\r\n                       class=\"calendar\" icon=\"calendar\"></dd-lib-svg-icon>\r\n\r\n\r\n    } @else {\r\n      <dd-lib-svg-icon\r\n        (click)=\"setPeriod(undefined)\"\r\n        class=\"clear\"\r\n        icon=\"clear\"></dd-lib-svg-icon>\r\n\r\n    }\r\n  </div>\r\n  @if (isShownPeriod) {\r\n    <div  data-child=\"list\"\r\n      (ddClickOutside)=\"closeCalendar()\"\r\n      [elements]=\"['lib-range-' + rangeId, 'calendar' + rangeId]\"\r\n      class=\"calendar-wrapper\">\r\n      <dd-lib-calendar [(ngModel)]=\"selectedPeriod\" [rangeMode]=\"true\" (emitPeriod)=\"setPeriod($event)\"></dd-lib-calendar>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".lib-range{min-width:311px;position:relative}.lib-range input{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-range input:hover{border-color:var(--input-active-border-colort)}.lib-range input:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-range input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-range input:disabled::placeholder{color:var(--input-placeholder)}.lib-range input.invalid,.lib-range input.invalid:hover{border-color:var(--input-error-border-color)}.lib-range input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-range .clear{cursor:pointer;position:absolute;right:8px;top:12px}.lib-range .calendar{cursor:pointer;position:absolute;right:16px;top:10px}.lib-range .calendar.up{transform:rotate(180deg)}.lib-range__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start}.lib-range__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-range .calendar-wrapper{position:absolute;display:block;z-index:100;width:100%;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[ddClickOutside]", inputs: ["elements"], outputs: ["ddClickOutside"] }, { kind: "component", type: LibCalendarComponent, selector: "dd-lib-calendar", inputs: ["type", "formatDate", "formatTime", "rangeMode", "maxHours", "maxMinutes", "needTime", "mode", "maxDate", "minDate"], outputs: ["emitDate", "emitPeriod"] }, { 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: "directive", type: FixedPositionDirective, selector: "[ddFixedPosition]", inputs: ["childName1", "childName2", "destroyedItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "startInput", first: true, predicate: ["startInput"], descendants: true, static: true }, { propertyName: "endInput", first: true, predicate: ["endInput"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"lib-range\" id=\"lib-range-{{ rangeId }}\" [destroyedItem]=\"isShownPeriod\" ddFixedPosition>\n  @if (label) {\n    <label [for]=\"rangeId\" class=\"lib-range__title\">\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 lib-range-wrapper\"\n       [class.start-active]=\"startIsFocused\"\n       [class.end-active]=\"endIsFocused\"\n       data-child=\"input\">\n    <input\n      #startInput\n      [attr.id]=\"rangeId\"\n      tabindex=\"1\"\n      [attr.placeholder]=\"placeholderStart\"\n      (click)=\"openCalendar()\"\n      [(ngModel)]=\"startDateStr\"\n      [mask]=\"'d0.M0.0000'\"\n      (ngModelChange)=\"changeStrDate($event)\"\n      (focus)=\"changeActiveInput('start', true)\"\n      (blur)=\"changeActiveInput('start', false)\"\n      [leadZeroDateTime]=\"true\"\n      class=\"text-select\"/>\n    \u2013\n    <input\n      #endInput\n      [attr.id]=\"rangeId\"\n      tabindex=\"2\"\n      [attr.placeholder]=\"placeholderEnd\"\n      (click)=\"openCalendar()\"\n      [(ngModel)]=\"endDateStr\"\n      [mask]=\"'d0.M0.0000'\"\n      (focus)=\"changeActiveInput('end', true)\"\n      (blur)=\"changeActiveInput('end', false)\"\n      (ngModelChange)=\"changeStrDate($event)\"\n      [leadZeroDateTime]=\"true\"\n      class=\"text-select\"/>\n    @if (!selectedPeriodStr) {\n      <dd-lib-svg-icon [class.gray-svg]=\"!isShownPeriod\"\n                       (click)=\"openCalendar()\"\n                       id=\"calendar-{{ rangeId }}\"\n                       class=\"calendar\" icon=\"calendar\"></dd-lib-svg-icon>\n\n\n    } @else {\n      <dd-lib-svg-icon\n        (click)=\"setPeriod(undefined)\"\n        class=\"clear\"\n        icon=\"clear\"></dd-lib-svg-icon>\n\n    }\n  </div>\n  @if (isShownPeriod) {\n    <div  data-child=\"list\"\n      (ddClickOutside)=\"closeCalendar()\"\n      [elements]=\"['lib-range-' + rangeId, 'calendar' + rangeId]\"\n      class=\"calendar-wrapper\">\n      <dd-lib-calendar [(ngModel)]=\"selectedPeriod\"\n                       (immediatelyEmitDate)=\"setDate($event)\"\n                       [dateStart]=\"selectedPeriod.start\"\n                       [dateEnd]=\"selectedPeriod.end\"\n                       [rangeMode]=\"true\"\n                       [rangeModeFullPeriod]=\"rangeModeFullPeriod\"\n                       (emitPeriod)=\"setPeriod($event)\"></dd-lib-calendar>\n    </div>\n  }\n</div>\n", styles: [".lib-range{min-width:311px;position:relative}.lib-range .lib-range-wrapper{display:flex;align-items:center;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative;overflow:hidden}.lib-range .lib-range-wrapper.start-active:before{content:\"\";position:absolute;top:0;left:0;width:50%;height:100%;border-radius:8px 0 0 8px;border:1px solid var(--input-active-border-colort);box-sizing:border-box;pointer-events:none;border-right:none}.lib-range .lib-range-wrapper.end-active:before{content:\"\";position:absolute;top:0;right:0;width:50%;height:100%;border-radius:0 8px 8px 0;border:1px solid var(--input-active-border-colort);border-left:none;box-sizing:border-box;pointer-events:none}.lib-range .lib-range-wrapper:hover{border-color:var(--input-active-border-colort)}.lib-range .lib-range-wrapper:hover:before{opacity:0}.lib-range .lib-range-wrapper:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-range input{width:100%;height:48px;padding:15px 28px 15px 16px;overflow:hidden;text-overflow:ellipsis;border:none;text-align:center}.lib-range input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-range input:disabled::placeholder{color:var(--input-placeholder)}.lib-range input.invalid,.lib-range input.invalid:hover{border-color:var(--input-error-border-color)}.lib-range input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-range .clear{cursor:pointer;position:absolute;right:8px;top:12px}.lib-range .calendar{cursor:pointer;position:absolute;right:16px;top:10px}.lib-range .calendar.up{transform:rotate(180deg)}.lib-range__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start}.lib-range__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-range .calendar-wrapper{position:absolute;display:block;z-index:100;width:100%;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[ddClickOutside]", inputs: ["elements"], outputs: ["ddClickOutside"] }, { kind: "component", type: LibCalendarComponent, selector: "dd-lib-calendar", inputs: ["type", "formatDate", "formatTime", "rangeMode", "rangeModeFullPeriod", "maxHours", "maxMinutes", "needTime", "mode", "dateStart", "dateEnd", "maxDate", "minDate"], outputs: ["emitDate", "immediatelyEmitDate", "emitPeriod"] }, { 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: "directive", type: FixedPositionDirective, selector: "[ddFixedPosition]", inputs: ["childName1", "childName2", "destroyedItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibDateRangeComponent, decorators: [{
             type: Component,
@@ -4351,15 +4559,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
                             useExisting: forwardRef(() => LibDateRangeComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lib-range\" id=\"lib-range-{{ rangeId }}\" [destroyedItem]=\"isShownPeriod\" ddFixedPosition>\r\n  @if (label) {\r\n    <label [for]=\"rangeId\" class=\"lib-range__title\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\r\n      }\r\n    </label>\r\n  }\r\n  <div class=\"pos-relative\" data-child=\"input\">\r\n    <input\r\n      [attr.id]=\"rangeId\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (click)=\"openCalendar()\"\r\n      [(ngModel)]=\"selectedPeriodStr\"\r\n      [mask]=\"'d0.M0.0000 - d0.M0.0000'\"\r\n      (ngModelChange)=\"changeStrDate($event)\"\r\n      [leadZeroDateTime]=\"true\"\r\n      class=\"text-select\"/>\r\n    @if (!selectedPeriodStr) {\r\n      <dd-lib-svg-icon [class.gray-svg]=\"!isShownPeriod\"\r\n                       (click)=\"openCalendar()\"\r\n                       id=\"calendar-{{ rangeId }}\"\r\n                       class=\"calendar\" icon=\"calendar\"></dd-lib-svg-icon>\r\n\r\n\r\n    } @else {\r\n      <dd-lib-svg-icon\r\n        (click)=\"setPeriod(undefined)\"\r\n        class=\"clear\"\r\n        icon=\"clear\"></dd-lib-svg-icon>\r\n\r\n    }\r\n  </div>\r\n  @if (isShownPeriod) {\r\n    <div  data-child=\"list\"\r\n      (ddClickOutside)=\"closeCalendar()\"\r\n      [elements]=\"['lib-range-' + rangeId, 'calendar' + rangeId]\"\r\n      class=\"calendar-wrapper\">\r\n      <dd-lib-calendar [(ngModel)]=\"selectedPeriod\" [rangeMode]=\"true\" (emitPeriod)=\"setPeriod($event)\"></dd-lib-calendar>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".lib-range{min-width:311px;position:relative}.lib-range input{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-range input:hover{border-color:var(--input-active-border-colort)}.lib-range input:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-range input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-range input:disabled::placeholder{color:var(--input-placeholder)}.lib-range input.invalid,.lib-range input.invalid:hover{border-color:var(--input-error-border-color)}.lib-range input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-range .clear{cursor:pointer;position:absolute;right:8px;top:12px}.lib-range .calendar{cursor:pointer;position:absolute;right:16px;top:10px}.lib-range .calendar.up{transform:rotate(180deg)}.lib-range__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start}.lib-range__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-range .calendar-wrapper{position:absolute;display:block;z-index:100;width:100%;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { rangeId: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lib-range\" id=\"lib-range-{{ rangeId }}\" [destroyedItem]=\"isShownPeriod\" ddFixedPosition>\n  @if (label) {\n    <label [for]=\"rangeId\" class=\"lib-range__title\">\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 lib-range-wrapper\"\n       [class.start-active]=\"startIsFocused\"\n       [class.end-active]=\"endIsFocused\"\n       data-child=\"input\">\n    <input\n      #startInput\n      [attr.id]=\"rangeId\"\n      tabindex=\"1\"\n      [attr.placeholder]=\"placeholderStart\"\n      (click)=\"openCalendar()\"\n      [(ngModel)]=\"startDateStr\"\n      [mask]=\"'d0.M0.0000'\"\n      (ngModelChange)=\"changeStrDate($event)\"\n      (focus)=\"changeActiveInput('start', true)\"\n      (blur)=\"changeActiveInput('start', false)\"\n      [leadZeroDateTime]=\"true\"\n      class=\"text-select\"/>\n    \u2013\n    <input\n      #endInput\n      [attr.id]=\"rangeId\"\n      tabindex=\"2\"\n      [attr.placeholder]=\"placeholderEnd\"\n      (click)=\"openCalendar()\"\n      [(ngModel)]=\"endDateStr\"\n      [mask]=\"'d0.M0.0000'\"\n      (focus)=\"changeActiveInput('end', true)\"\n      (blur)=\"changeActiveInput('end', false)\"\n      (ngModelChange)=\"changeStrDate($event)\"\n      [leadZeroDateTime]=\"true\"\n      class=\"text-select\"/>\n    @if (!selectedPeriodStr) {\n      <dd-lib-svg-icon [class.gray-svg]=\"!isShownPeriod\"\n                       (click)=\"openCalendar()\"\n                       id=\"calendar-{{ rangeId }}\"\n                       class=\"calendar\" icon=\"calendar\"></dd-lib-svg-icon>\n\n\n    } @else {\n      <dd-lib-svg-icon\n        (click)=\"setPeriod(undefined)\"\n        class=\"clear\"\n        icon=\"clear\"></dd-lib-svg-icon>\n\n    }\n  </div>\n  @if (isShownPeriod) {\n    <div  data-child=\"list\"\n      (ddClickOutside)=\"closeCalendar()\"\n      [elements]=\"['lib-range-' + rangeId, 'calendar' + rangeId]\"\n      class=\"calendar-wrapper\">\n      <dd-lib-calendar [(ngModel)]=\"selectedPeriod\"\n                       (immediatelyEmitDate)=\"setDate($event)\"\n                       [dateStart]=\"selectedPeriod.start\"\n                       [dateEnd]=\"selectedPeriod.end\"\n                       [rangeMode]=\"true\"\n                       [rangeModeFullPeriod]=\"rangeModeFullPeriod\"\n                       (emitPeriod)=\"setPeriod($event)\"></dd-lib-calendar>\n    </div>\n  }\n</div>\n", styles: [".lib-range{min-width:311px;position:relative}.lib-range .lib-range-wrapper{display:flex;align-items:center;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative;overflow:hidden}.lib-range .lib-range-wrapper.start-active:before{content:\"\";position:absolute;top:0;left:0;width:50%;height:100%;border-radius:8px 0 0 8px;border:1px solid var(--input-active-border-colort);box-sizing:border-box;pointer-events:none;border-right:none}.lib-range .lib-range-wrapper.end-active:before{content:\"\";position:absolute;top:0;right:0;width:50%;height:100%;border-radius:0 8px 8px 0;border:1px solid var(--input-active-border-colort);border-left:none;box-sizing:border-box;pointer-events:none}.lib-range .lib-range-wrapper:hover{border-color:var(--input-active-border-colort)}.lib-range .lib-range-wrapper:hover:before{opacity:0}.lib-range .lib-range-wrapper:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-range input{width:100%;height:48px;padding:15px 28px 15px 16px;overflow:hidden;text-overflow:ellipsis;border:none;text-align:center}.lib-range input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-range input:disabled::placeholder{color:var(--input-placeholder)}.lib-range input.invalid,.lib-range input.invalid:hover{border-color:var(--input-error-border-color)}.lib-range input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-range .clear{cursor:pointer;position:absolute;right:8px;top:12px}.lib-range .calendar{cursor:pointer;position:absolute;right:16px;top:10px}.lib-range .calendar.up{transform:rotate(180deg)}.lib-range__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start}.lib-range__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-range .calendar-wrapper{position:absolute;display:block;z-index:100;width:100%;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { startInput: [{
+                type: ViewChild,
+                args: ['startInput', { static: true }]
+            }], endInput: [{
+                type: ViewChild,
+                args: ['endInput', { static: true }]
+            }], rangeId: [{
                 type: Input
-            }], placeholder: [{
+            }], placeholderStart: [{
+                type: Input
+            }], placeholderEnd: [{
                 type: Input
             }], label: [{
                 type: Input
             }], required: [{
                 type: Input
+            }], rangeModeFullPeriod: [{
+                type: Input
+            }], pressTab: [{
+                type: HostListener,
+                args: ['document:keydown.tab', ['$event']]
             }] } });
 
 class LibDateInputComponent {
@@ -4430,7 +4651,7 @@ class LibDateInputComponent {
                 useExisting: forwardRef(() => LibDateInputComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"lib-date\" id=\"lib-date-{{ dateId }}\">\r\n  @if (label) {\r\n    <label [for]=\"dateId\" class=\"lib-date__title\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\r\n      }\r\n    </label>\r\n  }\r\n  <div class=\"pos-relative\">\r\n    <input\r\n      [attr.id]=\"dateId\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (click)=\"openCalendar()\"\r\n      [(ngModel)]=\"selectedDateStr\"\r\n      [mask]=\"'d0.M0.0000'\"\r\n      (ngModelChange)=\"changeStrDate($event)\"\r\n      [leadZeroDateTime]=\"true\"\r\n      class=\"text-select\"/>\r\n    @if (!selectedDateStr) {\r\n      <dd-lib-svg-icon [class.gray-svg]=\"!isShownCalendar\"\r\n                       (click)=\"openCalendar()\"\r\n                       id=\"calendar-{{ dateId }}\"\r\n                       class=\"calendar\" icon=\"calendar\"></dd-lib-svg-icon>\r\n\r\n\r\n    } @else {\r\n      <dd-lib-svg-icon\r\n        (click)=\"setPeriod(undefined)\"\r\n        class=\"clear\"\r\n        icon=\"clear\"></dd-lib-svg-icon>\r\n\r\n    }\r\n  </div>\r\n  @if (isShownCalendar) {\r\n    <div\r\n      (ddClickOutside)=\"closeCalendar()\"\r\n      [elements]=\"['lib-date-' + dateId, 'calendar' + dateId]\"\r\n      class=\"calendar-wrapper\" [ngClass]=\"{top: topSide}\">\r\n      <dd-lib-calendar [(ngModel)]=\"selectedDate\" (emitDate)=\"setPeriod($event)\"></dd-lib-calendar>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".lib-date{min-width:340px;position:relative}.lib-date input{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-date input:hover{border-color:var(--input-active-border-colort)}.lib-date input:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-date input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-date input:disabled::placeholder{color:var(--input-placeholder)}.lib-date input.invalid,.lib-date input.invalid:hover{border-color:var(--input-error-border-color)}.lib-date input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-date .clear{cursor:pointer;position:absolute;right:8px;top:12px}.lib-date .calendar{cursor:pointer;position:absolute;right:16px;top:10px}.lib-date .calendar.up{transform:rotate(180deg)}.lib-date__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start}.lib-date__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-date .calendar-wrapper{max-width:350px;position:absolute;display:block;z-index:100;width:100%;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color)}.lib-date .calendar-wrapper.top{bottom:48px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[ddClickOutside]", inputs: ["elements"], outputs: ["ddClickOutside"] }, { kind: "component", type: LibCalendarComponent, selector: "dd-lib-calendar", inputs: ["type", "formatDate", "formatTime", "rangeMode", "maxHours", "maxMinutes", "needTime", "mode", "maxDate", "minDate"], outputs: ["emitDate", "emitPeriod"] }, { 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<div class=\"lib-date\" id=\"lib-date-{{ dateId }}\">\r\n  @if (label) {\r\n    <label [for]=\"dateId\" class=\"lib-date__title\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\r\n      }\r\n    </label>\r\n  }\r\n  <div class=\"pos-relative\">\r\n    <input\r\n      [attr.id]=\"dateId\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (click)=\"openCalendar()\"\r\n      [(ngModel)]=\"selectedDateStr\"\r\n      [mask]=\"'d0.M0.0000'\"\r\n      (ngModelChange)=\"changeStrDate($event)\"\r\n      [leadZeroDateTime]=\"true\"\r\n      class=\"text-select\"/>\r\n    @if (!selectedDateStr) {\r\n      <dd-lib-svg-icon [class.gray-svg]=\"!isShownCalendar\"\r\n                       (click)=\"openCalendar()\"\r\n                       id=\"calendar-{{ dateId }}\"\r\n                       class=\"calendar\" icon=\"calendar\"></dd-lib-svg-icon>\r\n\r\n\r\n    } @else {\r\n      <dd-lib-svg-icon\r\n        (click)=\"setPeriod(undefined)\"\r\n        class=\"clear\"\r\n        icon=\"clear\"></dd-lib-svg-icon>\r\n\r\n    }\r\n  </div>\r\n  @if (isShownCalendar) {\r\n    <div\r\n      (ddClickOutside)=\"closeCalendar()\"\r\n      [elements]=\"['lib-date-' + dateId, 'calendar' + dateId]\"\r\n      class=\"calendar-wrapper\" [ngClass]=\"{top: topSide}\">\r\n      <dd-lib-calendar [(ngModel)]=\"selectedDate\" (emitDate)=\"setPeriod($event)\"></dd-lib-calendar>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".lib-date{min-width:340px;position:relative}.lib-date input{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-date input:hover{border-color:var(--input-active-border-colort)}.lib-date input:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-date input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-date input:disabled::placeholder{color:var(--input-placeholder)}.lib-date input.invalid,.lib-date input.invalid:hover{border-color:var(--input-error-border-color)}.lib-date input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-date .clear{cursor:pointer;position:absolute;right:8px;top:12px}.lib-date .calendar{cursor:pointer;position:absolute;right:16px;top:10px}.lib-date .calendar.up{transform:rotate(180deg)}.lib-date__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start}.lib-date__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-date .calendar-wrapper{max-width:350px;position:absolute;display:block;z-index:100;width:100%;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color)}.lib-date .calendar-wrapper.top{bottom:48px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[ddClickOutside]", inputs: ["elements"], outputs: ["ddClickOutside"] }, { kind: "component", type: LibCalendarComponent, selector: "dd-lib-calendar", inputs: ["type", "formatDate", "formatTime", "rangeMode", "rangeModeFullPeriod", "maxHours", "maxMinutes", "needTime", "mode", "dateStart", "dateEnd", "maxDate", "minDate"], outputs: ["emitDate", "immediatelyEmitDate", "emitPeriod"] }, { 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibDateInputComponent, decorators: [{
             type: Component,
@@ -5349,5 +5570,5 @@ const t = true;
  * Generated bundle index. Do not edit.
  */
 
-export { API_URL, AutoHeightDirective, ClickOutsideDirective, CounterDirective, DDDialogRef, DEFAULT_FORMAT, DIALOG_CONFIG, DataEmptyComponent, DateService, Debounce, DeclensionDirective, DestroyService, DialogConfig, DialogService, DisableAfterNCall, Disabled, DropDownPositionDirective, ErrorPageComponent, FetcherService, FilterByKeyPipe, FilterPipe, FixedPositionDirective, FooterComponent, FooterLinkComponent, FooterLinksBlockComponent, HighlightPipe, ITab, InterceptorsService, LibAccordionComponent, LibBackButtonComponent, LibButtonComponent, LibCalendarComponent, LibCardComponent, LibCheckboxComponent, LibCommentInputComponent, LibCommonButtonComponent, LibCommonInputTextComponent, LibDateInputComponent, LibDateRangeComponent, LibDisclaimerComponent, LibFileLoaderComponent, LibFileUploadComponent, LibFilterButtonComponent, LibFilterComponent, LibHorizontalScrollComponent, LibImageLoaderComponent, LibInfoCardComponent, LibInputComponent, LibLoaderComponent, LibPeriodComponent, LibRadioComponent, LibSearchInputComponent, LibSelectComponent, LibSkeletonComponent, LibSortComponent, LibStepComponent, LibSvgComponent, LibSvgIconComponent, LibSvgViewerComponent, LibTabsFragmentComponent, LibTextareaComponent, ListKeyboardNavigationDirective, MainSharedComponent, ModalBaseComponent, ModalCommonComponent, NotFoundComponent, PhoneMaskDirective, ResizeTextareaDirective, ReversePipe, SafePipe, SelectableItemDirective, SvgIconsService, TOAST_CONFIG_TOKEN, TOOLTIP_DATA, TechWorksComponent, ThemeConfigurator, ThemeConstructorService, Throttle, ToastComponent, ToastConfig, ToastData, ToastRef, ToastService, ToastTypeData, TooltipComponent, TooltipDirective, TriangleDirective, ValidatorsService, completeIconSet, defaultToastConfig, provideToast, svgIconActogoneAccept, svgIconAll, svgIconAppgalery, svgIconAppstore, svgIconArrowDownRed, svgIconArrowUpGreen, svgIconBackArrow, svgIconBurger, svgIconCalendar, svgIconCheckGreen, svgIconCheckWhite, svgIconCircleNo, svgIconClear, svgIconClose, svgIconDangerT, svgIconDd, svgIconDdM, svgIconDobrodel, svgIconDownChevron, svgIconDownload, svgIconEds, svgIconEds2, svgIconEds2M, svgIconEdsM, svgIconEntry, svgIconErrorHint, svgIconEsia, svgIconEye, svgIconEyeOff, svgIconFile, svgIconFilter, svgIconGoogleapp, svgIconGrid, svgIconHealth, svgIconHealthM, svgIconInfoCircle, svgIconInfoT, svgIconLeftChevron, svgIconListSearch, svgIconLogout, svgIconMailExclamation, svgIconMaxFilter, svgIconMoon, svgIconMy, svgIconMyM, svgIconNews, svgIconNext, svgIconPaperclip, svgIconPenEdit, svgIconPguMo, svgIconPguMoM, svgIconPlug, svgIconPlugD, svgIconPlus, svgIconPreset, svgIconPrev, svgIconPrint, svgIconPrinter, svgIconQuestion, svgIconQuestionWhiteG, svgIconRedClose, svgIconReload, svgIconRightChevron, svgIconRustore, svgIconSearch, svgIconSend, svgIconSetAvatar, svgIconSharedLogo, svgIconSmallRoundLoader, svgIconSort, svgIconStar, svgIconSuccessT, svgIconSun, svgIconTg, svgIconToggleArrowLeft, svgIconToggleArrowRight, svgIconTrash, svgIconTrophy, svgIconUser, svgIconUserEmpty, svgIconUserEmptyD, svgIconVk, svgIconWarningT, t };
+export { API_URL, AutoHeightDirective, ClickOutsideDirective, CounterDirective, DDDialogRef, DEFAULT_FORMAT, DIALOG_CONFIG, DataEmptyComponent, DateService, Debounce, DeclensionDirective, DestroyService, DialogConfig, DialogService, DisableAfterNCall, Disabled, DropDownPositionDirective, ErrorPageComponent, FetcherService, FilterByKeyPipe, FilterPipe, FixedPositionDirective, FooterComponent, FooterLinkComponent, FooterLinksBlockComponent, HighlightPipe, IDatePeriod, ITab, InterceptorsService, LibAccordionComponent, LibBackButtonComponent, LibButtonComponent, LibCalendarComponent, LibCardComponent, LibCheckboxComponent, LibCommentInputComponent, LibCommonButtonComponent, LibCommonInputTextComponent, LibDateInputComponent, LibDateRangeComponent, LibDisclaimerComponent, LibFileLoaderComponent, LibFileUploadComponent, LibFilterButtonComponent, LibFilterComponent, LibHorizontalScrollComponent, LibImageLoaderComponent, LibInfoCardComponent, LibInputComponent, LibLoaderComponent, LibPeriodComponent, LibRadioComponent, LibSearchInputComponent, LibSelectComponent, LibSkeletonComponent, LibSortComponent, LibStepComponent, LibSvgComponent, LibSvgIconComponent, LibSvgViewerComponent, LibTabsFragmentComponent, LibTextareaComponent, ListKeyboardNavigationDirective, MainSharedComponent, ModalBaseComponent, ModalCommonComponent, NotFoundComponent, PhoneMaskDirective, ResizeTextareaDirective, ReversePipe, SafePipe, SelectableItemDirective, SortByValPipe, SvgIconsService, TOAST_CONFIG_TOKEN, TOOLTIP_DATA, TechWorksComponent, ThemeConfigurator, ThemeConstructorService, Throttle, ToastComponent, ToastConfig, ToastData, ToastRef, ToastService, ToastTypeData, TooltipComponent, TooltipDirective, TriangleDirective, ValidatorsService, completeIconSet, defaultToastConfig, provideToast, svgIconActogoneAccept, svgIconAll, svgIconAppgalery, svgIconAppstore, svgIconArrowDownRed, svgIconArrowUpGreen, svgIconBackArrow, svgIconBurger, svgIconCalendar, svgIconCheckGreen, svgIconCheckWhite, svgIconCircleNo, svgIconClear, svgIconClose, svgIconDangerT, svgIconDd, svgIconDdM, svgIconDobrodel, svgIconDownChevron, svgIconDownload, svgIconEds, svgIconEds2, svgIconEds2M, svgIconEdsM, svgIconEntry, svgIconErrorHint, svgIconEsia, svgIconEye, svgIconEyeOff, svgIconFile, svgIconFilter, svgIconGoogleapp, svgIconGrid, svgIconHealth, svgIconHealthM, svgIconInfoCircle, svgIconInfoT, svgIconLeftChevron, svgIconListSearch, svgIconLogout, svgIconMailExclamation, svgIconMaxFilter, svgIconMoon, svgIconMy, svgIconMyM, svgIconNews, svgIconNext, svgIconPaperclip, svgIconPenEdit, svgIconPguMo, svgIconPguMoM, svgIconPlug, svgIconPlugD, svgIconPlus, svgIconPreset, svgIconPrev, svgIconPrint, svgIconPrinter, svgIconQuestion, svgIconQuestionWhiteG, svgIconRedClose, svgIconReload, svgIconRightChevron, svgIconRustore, svgIconSearch, svgIconSend, svgIconSetAvatar, svgIconSharedLogo, svgIconSmallRoundLoader, svgIconSort, svgIconStar, svgIconSuccessT, svgIconSun, svgIconTg, svgIconToggleArrowLeft, svgIconToggleArrowRight, svgIconTrash, svgIconTrophy, svgIconUser, svgIconUserEmpty, svgIconUserEmptyD, svgIconVk, svgIconWarningT, t };
 //# sourceMappingURL=morozeckiy-dd-lib.mjs.map