@morozeckiy/dd-lib 0.6.3 → 0.7.0

package/fesm2022/morozeckiy-dd-lib.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, Input, ViewChild, Output, forwardRef, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, Injectable, Inject, Pipe, Directive, HostListener, InjectionToken, TemplateRef, Injector, RendererStyleFlags2, Optional, ElementRef, Host, SkipSelf, signal } from '@angular/core';
-import * as i2$1 from '@angular/forms';
+import * as i1$5 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, Validators, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@angular/common';
 import { CommonModule, DecimalPipe, AsyncPipe, DOCUMENT, NgTemplateOutlet, NgComponentOutlet, NgOptimizedImage, NgClass, NgStyle, JsonPipe } from '@angular/common';
@@ -2071,7 +2071,7 @@ class MaxNumDirective {
             this.model.valueAccessor?.writeValue(this.ddMaxNum);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: MaxNumDirective, deps: [{ token: i2$1.NgModel }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: MaxNumDirective, deps: [{ token: i1$5.NgModel }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.2", type: MaxNumDirective, isStandalone: true, selector: "[ddMaxNum]", inputs: { ddMaxNum: "ddMaxNum", curVal: "curVal" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: MaxNumDirective, decorators: [{
@@ -2080,7 +2080,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
                     standalone: true,
                     selector: '[ddMaxNum]'
                 }]
-        }], ctorParameters: () => [{ type: i2$1.NgModel }], propDecorators: { ddMaxNum: [{
+        }], ctorParameters: () => [{ type: i1$5.NgModel }], propDecorators: { ddMaxNum: [{
                 type: Input
             }], curVal: [{
                 type: Input
@@ -2345,7 +2345,7 @@ class LibCalendarComponent {
                 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=\"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  </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:14px;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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.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: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2$1.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') {\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=\"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  </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:14px;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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.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$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$5.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$5.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: "17.2.2", ngImport: i0, type: LibCalendarComponent, decorators: [{
             type: Component,
@@ -2464,7 +2464,7 @@ class LibCommentInputComponent extends LibCommonInputTextComponent {
         super(changeDetection);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LibCommentInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: LibCommentInputComponent, isStandalone: true, selector: "dd-lib-comment-input", usesInheritance: true, ngImport: i0, template: "<div class=\"lib-comment-textarea\">\n  <textarea\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"placeholder\"\n    [readOnly]=\"readOnly\"\n    ddResizeTextarea\n    type=\"text\"></textarea>\n  <dd-lib-button [disabled]=\"disabled\" [noPadding]=\"true\" height=\"48px\" width=\"48px\">\n    <svg fill=\"none\" height=\"28\" viewBox=\"0 0 24 22\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <g clip-path=\"url(#clip0_429_4922)\">\n        <path\n          [attr.stroke]=\"disabled ? '#8e9cbe' : 'white'\"\n          d=\"M10 14L21 3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"1.7\" />\n        <path\n          [attr.stroke]=\"disabled ? '#8e9cbe' : 'white'\"\n          d=\"M21.0001 3L14.5001 21C14.4562 21.0957 14.3858 21.1769 14.2971 21.2338C14.2085 21.2906 14.1054 21.3209 14.0001 21.3209C13.8948 21.3209 13.7917 21.2906 13.703 21.2338C13.6144 21.1769 13.5439 21.0957 13.5001 21L10.0001 14L3.00007 10.5C2.90433 10.4561 2.8232 10.3857 2.76632 10.2971C2.70944 10.2084 2.6792 10.1053 2.6792 10C2.6792 9.89468 2.70944 9.79158 2.76632 9.70295C2.8232 9.61431 2.90433 9.54387 3.00007 9.5L21.0001 3Z\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"1.7\" />\n      </g>\n      <defs>\n        <clipPath id=\"clip0_429_4922\">\n          <rect [attr.fill]=\"disabled ? '#8e9cbe' : 'white'\" height=\"28\" width=\"24\" />\n        </clipPath>\n      </defs>\n    </svg>\n  </dd-lib-button>\n</div>\n", styles: [".lib-comment-textarea{position:relative;display:flex;align-items:center;flex-direction:row}.lib-comment-textarea textarea{margin-right:16px;width:100%;max-height:48px;padding:12px 16px;border-radius:12px;border:none;background-color:var(--gray-color-200);resize:none;box-sizing:inherit}.lib-comment-textarea textarea:disabled{background-color:var(--input-disable-input);pointer-events:none}.lib-comment-textarea textarea:disabled::placeholder{color:var(--disabled-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LibButtonComponent, selector: "dd-lib-button", inputs: ["noPadding", "loaderColor"] }, { kind: "directive", type: ResizeTextareaDirective, selector: "[ddResizeTextarea]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: LibCommentInputComponent, isStandalone: true, selector: "dd-lib-comment-input", usesInheritance: true, ngImport: i0, template: "<div class=\"lib-comment-textarea\">\n  <textarea\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"placeholder\"\n    [readOnly]=\"readOnly\"\n    ddResizeTextarea\n    type=\"text\"></textarea>\n  <dd-lib-button [disabled]=\"disabled\" [noPadding]=\"true\" height=\"48px\" width=\"48px\">\n    <svg fill=\"none\" height=\"28\" viewBox=\"0 0 24 22\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <g clip-path=\"url(#clip0_429_4922)\">\n        <path\n          [attr.stroke]=\"disabled ? '#8e9cbe' : 'white'\"\n          d=\"M10 14L21 3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"1.7\" />\n        <path\n          [attr.stroke]=\"disabled ? '#8e9cbe' : 'white'\"\n          d=\"M21.0001 3L14.5001 21C14.4562 21.0957 14.3858 21.1769 14.2971 21.2338C14.2085 21.2906 14.1054 21.3209 14.0001 21.3209C13.8948 21.3209 13.7917 21.2906 13.703 21.2338C13.6144 21.1769 13.5439 21.0957 13.5001 21L10.0001 14L3.00007 10.5C2.90433 10.4561 2.8232 10.3857 2.76632 10.2971C2.70944 10.2084 2.6792 10.1053 2.6792 10C2.6792 9.89468 2.70944 9.79158 2.76632 9.70295C2.8232 9.61431 2.90433 9.54387 3.00007 9.5L21.0001 3Z\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"1.7\" />\n      </g>\n      <defs>\n        <clipPath id=\"clip0_429_4922\">\n          <rect [attr.fill]=\"disabled ? '#8e9cbe' : 'white'\" height=\"28\" width=\"24\" />\n        </clipPath>\n      </defs>\n    </svg>\n  </dd-lib-button>\n</div>\n", styles: [".lib-comment-textarea{position:relative;display:flex;align-items:center;flex-direction:row}.lib-comment-textarea textarea{margin-right:16px;width:100%;max-height:48px;padding:12px 16px;border-radius:12px;border:none;background-color:var(--gray-color-200);resize:none;box-sizing:inherit}.lib-comment-textarea textarea:disabled{background-color:var(--input-disable-input);pointer-events:none}.lib-comment-textarea textarea:disabled::placeholder{color:var(--disabled-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LibButtonComponent, selector: "dd-lib-button", inputs: ["noPadding", "loaderColor"] }, { kind: "directive", type: ResizeTextareaDirective, selector: "[ddResizeTextarea]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LibCommentInputComponent, decorators: [{
             type: Component,
@@ -2555,7 +2555,7 @@ class LibInputComponent extends LibCommonInputTextComponent {
         this.errorText = ValidatorsService.getErrorText(this.control?.errors);
         this.changeDetection.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LibInputComponent, deps: [{ token: DestroyService }, { token: i0.ChangeDetectorRef }, { token: i2$1.ControlContainer, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LibInputComponent, deps: [{ token: DestroyService }, { token: i0.ChangeDetectorRef }, { token: i1$5.ControlContainer, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: LibInputComponent, isStandalone: true, selector: "dd-lib-input", inputs: { showMaskTyped: "showMaskTyped", dropSpecialCharacters: "dropSpecialCharacters", prefix: "prefix", suffix: "suffix", shownMaskExpression: "shownMaskExpression", mask: "mask", validation: "validation" }, providers: [
             DestroyService,
             {
@@ -2563,7 +2563,7 @@ class LibInputComponent extends LibCommonInputTextComponent {
                 useExisting: forwardRef(() => LibInputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "contentInput", first: true, predicate: ["contentInput"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"lib-input\">\n  <label [for]=\"id\" class=\"lib-input__title\">\n    {{ label }}\n    @if (required) {\n      <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n    }\n  </label>\n  <input\n    #input\n    (blur)=\"handleBlur()\"\n    (change)=\"handleChange()\"\n    (focus)=\"handleFocus()\"\n    (input)=\"handleInput($event)\"\n    (keyup.enter)=\"forceChange()\"\n    [showMaskTyped]=\"showMaskTyped\"\n    [dropSpecialCharacters]=\"dropSpecialCharacters\"\n    [shownMaskExpression]=\"shownMaskExpression\"\n    [mask]=\"mask\"\n    [validation]=\"validation\"\n    [prefix]=\"prefix\"\n    [suffix]=\"suffix\"\n    [(ngModel)]=\"value\"\n    [attr.autofocus]=\"autofocus\"\n    [attr.autocomplete]=\"autocomplete === undefined ? null : autocomplete\"\n    [attr.id]=\"id ? id : null\"\n    [attr.max]=\"max\"\n    [attr.min]=\"min\"\n    [attr.maxlength]=\"maxlength\"\n    [attr.minlength]=\"minlength\"\n    [attr.name]=\"name\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.tabIndex]=\"tabIndex\"\n    [attr.type]=\"type || 'text'\"\n    [class.focused]=\"focused\"\n    [class.invalid]=\"showError\"\n    [disabled]=\"disabled\"\n    [readOnly]=\"readOnly\"\n    class=\"text-input\" />\n  @if (errorTexts.length && showError) {\n    @for (error of errorTexts; track error) {\n      <div class=\"lib-input__error\">{{ error }}</div>\n    }\n  }\n  @if (errorText && showSelfError && showError) {\n      <div class=\"lib-input__error\">{{ errorText }}</div>\n  }\n</div>\n", styles: [":host{display:block}.lib-input{position:relative}.lib-input input{width:100%;height:48px;padding:15px 16px;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative;color:var(--light-black-color)}.lib-input input:hover{border-color:var(--input-active-border-colort)}.lib-input input:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-input input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-input input:disabled::placeholder{color:var(--input-placeholder)}.lib-input input.invalid,.lib-input input.invalid:hover{border-color:var(--input-error-border-color)}.lib-input input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-input__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start;color:var(--light-black-color)}.lib-input__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-input .password-eye{position:absolute;right:16px;top:40px;cursor:pointer}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "contentInput", first: true, predicate: ["contentInput"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"lib-input\">\n  <label [for]=\"id\" class=\"lib-input__title\">\n    {{ label }}\n    @if (required) {\n      <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n    }\n  </label>\n  <input\n    #input\n    (blur)=\"handleBlur()\"\n    (change)=\"handleChange()\"\n    (focus)=\"handleFocus()\"\n    (input)=\"handleInput($event)\"\n    (keyup.enter)=\"forceChange()\"\n    [showMaskTyped]=\"showMaskTyped\"\n    [dropSpecialCharacters]=\"dropSpecialCharacters\"\n    [shownMaskExpression]=\"shownMaskExpression\"\n    [mask]=\"mask\"\n    [validation]=\"validation\"\n    [prefix]=\"prefix\"\n    [suffix]=\"suffix\"\n    [(ngModel)]=\"value\"\n    [attr.autofocus]=\"autofocus\"\n    [attr.autocomplete]=\"autocomplete === undefined ? null : autocomplete\"\n    [attr.id]=\"id ? id : null\"\n    [attr.max]=\"max\"\n    [attr.min]=\"min\"\n    [attr.maxlength]=\"maxlength\"\n    [attr.minlength]=\"minlength\"\n    [attr.name]=\"name\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.tabIndex]=\"tabIndex\"\n    [attr.type]=\"type || 'text'\"\n    [class.focused]=\"focused\"\n    [class.invalid]=\"showError\"\n    [disabled]=\"disabled\"\n    [readOnly]=\"readOnly\"\n    class=\"text-input\" />\n  @if (errorTexts.length && showError) {\n    @for (error of errorTexts; track error) {\n      <div class=\"lib-input__error\">{{ error }}</div>\n    }\n  }\n  @if (errorText && showSelfError && showError) {\n      <div class=\"lib-input__error\">{{ errorText }}</div>\n  }\n</div>\n", styles: [":host{display:block}.lib-input{position:relative}.lib-input input{width:100%;height:48px;padding:15px 16px;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative;color:var(--light-black-color)}.lib-input input:hover{border-color:var(--input-active-border-colort)}.lib-input input:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-input input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-input input:disabled::placeholder{color:var(--input-placeholder)}.lib-input input.invalid,.lib-input input.invalid:hover{border-color:var(--input-error-border-color)}.lib-input input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-input__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start;color:var(--light-black-color)}.lib-input__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-input .password-eye{position:absolute;right:16px;top:40px;cursor:pointer}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LibInputComponent, decorators: [{
             type: Component,
@@ -2575,7 +2575,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
                             multi: true,
                         },
                     ], changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, NgxMaskDirective, NgOptimizedImage, LibCardComponent, LibSvgIconComponent], template: "<div class=\"lib-input\">\n  <label [for]=\"id\" class=\"lib-input__title\">\n    {{ label }}\n    @if (required) {\n      <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n    }\n  </label>\n  <input\n    #input\n    (blur)=\"handleBlur()\"\n    (change)=\"handleChange()\"\n    (focus)=\"handleFocus()\"\n    (input)=\"handleInput($event)\"\n    (keyup.enter)=\"forceChange()\"\n    [showMaskTyped]=\"showMaskTyped\"\n    [dropSpecialCharacters]=\"dropSpecialCharacters\"\n    [shownMaskExpression]=\"shownMaskExpression\"\n    [mask]=\"mask\"\n    [validation]=\"validation\"\n    [prefix]=\"prefix\"\n    [suffix]=\"suffix\"\n    [(ngModel)]=\"value\"\n    [attr.autofocus]=\"autofocus\"\n    [attr.autocomplete]=\"autocomplete === undefined ? null : autocomplete\"\n    [attr.id]=\"id ? id : null\"\n    [attr.max]=\"max\"\n    [attr.min]=\"min\"\n    [attr.maxlength]=\"maxlength\"\n    [attr.minlength]=\"minlength\"\n    [attr.name]=\"name\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.tabIndex]=\"tabIndex\"\n    [attr.type]=\"type || 'text'\"\n    [class.focused]=\"focused\"\n    [class.invalid]=\"showError\"\n    [disabled]=\"disabled\"\n    [readOnly]=\"readOnly\"\n    class=\"text-input\" />\n  @if (errorTexts.length && showError) {\n    @for (error of errorTexts; track error) {\n      <div class=\"lib-input__error\">{{ error }}</div>\n    }\n  }\n  @if (errorText && showSelfError && showError) {\n      <div class=\"lib-input__error\">{{ errorText }}</div>\n  }\n</div>\n", styles: [":host{display:block}.lib-input{position:relative}.lib-input input{width:100%;height:48px;padding:15px 16px;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative;color:var(--light-black-color)}.lib-input input:hover{border-color:var(--input-active-border-colort)}.lib-input input:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-input input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-input input:disabled::placeholder{color:var(--input-placeholder)}.lib-input input.invalid,.lib-input input.invalid:hover{border-color:var(--input-error-border-color)}.lib-input input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-input__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start;color:var(--light-black-color)}.lib-input__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-input .password-eye{position:absolute;right:16px;top:40px;cursor:pointer}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}\n"] }]
-        }], ctorParameters: () => [{ type: DestroyService }, { type: i0.ChangeDetectorRef }, { type: i2$1.ControlContainer, decorators: [{
+        }], ctorParameters: () => [{ type: DestroyService }, { type: i0.ChangeDetectorRef }, { type: i1$5.ControlContainer, decorators: [{
                     type: Optional
                 }, {
                     type: Host
@@ -2679,7 +2679,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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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", "maxHours", "maxMinutes", "needTime", "mode", "maxDate", "minDate"], outputs: ["emitDate", "emitPeriod"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: 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: "17.2.2", ngImport: i0, type: LibPeriodComponent, decorators: [{
             type: Component,
@@ -2836,7 +2836,7 @@ class LibSearchInputComponent extends LibCommonInputTextComponent {
         return item[this.keyDesc];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LibSearchInputComponent, deps: [{ token: DestroyService }, { token: i0.ChangeDetectorRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: LibSearchInputComponent, isStandalone: true, selector: "dd-lib-search-input", inputs: { keyTitle: "keyTitle", keyDesc: "keyDesc", styleInput: "styleInput", inputStyle: "inputStyle", searchData: "searchData", debounceTime: "debounceTime", delay: "delay", idClose: "idClose", loaded$: "loaded$" }, outputs: { keyupEvent: "keyupEvent", selectedItem: "selectedItem" }, providers: [DestroyService], usesInheritance: true, ngImport: i0, template: "<div class=\"lib-search-input\">\r\n  <label [for]=\"id\" class=\"lib-search-input__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  <div class=\"pos-relative\">\r\n    <dd-lib-svg-icon (click)=\"forceChange()\" class=\"search-icon\" icon=\"search\"></dd-lib-svg-icon>\r\n    <input\r\n      #searchInput\r\n      (keyup)=\"keyUp.next($event)\"\r\n      (keyup.enter)=\"forceChange()\"\r\n      [(ngModel)]=\"value\"\r\n      [attr.autocomplete]=\"autocomplete === undefined ? null : autocomplete\"\r\n      [attr.id]=\"id ? id : null\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [attr.minlength]=\"minlength\"\r\n      [attr.name]=\"name\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [attr.tabIndex]=\"tabIndex\"\r\n      [attr.type]=\"type || 'text'\"\r\n      [class.focused]=\"focused\"\r\n      [class.round]=\"styleInput === 'round'\"\r\n      [class.white]=\"inputStyle === 'white'\"\r\n      [disabled]=\"disabled\"\r\n      [readOnly]=\"readOnly\"\r\n      class=\"search-input\" />\r\n    <dd-lib-svg-icon\r\n      (click)=\"onClear()\"\r\n      [id]=\"idClose\" [style.display]=\"value?.length ? 'block' : 'none'\"\r\n      class=\"clear-icon\" icon=\"clear\"></dd-lib-svg-icon>\r\n    @if (loaded$ | async) {\r\n      <div class=\"loading-icon\">\r\n        <dd-lib-loader></dd-lib-loader>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  @if (data?.length) {\r\n  <dd-lib-card [class.top]=\"side === 'top'\">\r\n    @for (item of data; track item) {\r\n    <div (click)=\"onClickSearchItem(item)\" class=\"search-result\">\r\n      @if (getTitle(item); as title) {\r\n      <div [innerHTML]=\"title | highlight: value | safe: 'html'\" class=\"search-result__title\"></div>\r\n      } @if (getDesc(item); as desc) {\r\n      <div [innerHTML]=\"desc | highlight: value | safe: 'html'\" class=\"search-result__desc\"></div>\r\n      }\r\n    </div>\r\n    }\r\n  </dd-lib-card>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}.lib-search-input{position:relative}.lib-search-input__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start}.lib-search-input input{width:100%;height:48px;padding:16px 16px 15px 44px;border-radius:8px;border:none;color:var(--light-black-color);background-color:var(--input-gray-bgc)}.lib-search-input input.white{background-color:var(--white-color);border:1px solid var(--primary-gray-color)}.lib-search-input .round{border-radius:24px}.lib-search-input .search-icon{position:absolute;left:16px;top:14px;cursor:pointer}.lib-search-input .clear-icon{position:absolute;right:16px;top:14px;cursor:pointer}.lib-search-input .loading-icon{position:absolute;right:40px;top:12px}.lib-search-input .search-result{font-size:16px;font-weight:400;line-height:24px;letter-spacing:0;text-align:left;cursor:pointer}.lib-search-input .search-result:hover{opacity:.8}.lib-search-input .search-result:last-child .search-result__desc{border:none;padding-bottom:0}.lib-search-input .search-result__title{color:var(--second-gray-color);margin:24px 0 2px}.lib-search-input .search-result__desc{padding-bottom:16px;border-bottom:1px solid var(--gray-color-200)}.lib-search-input dd-lib-card{position:absolute;display:block;top:76px;z-index:100;width:100%;max-height:400px;box-shadow:var(--main-card-shadow);overflow:auto}.lib-search-input dd-lib-card.top{bottom:50px;top:unset}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LibCardComponent, selector: "dd-lib-card", inputs: ["type", "footerBtn", "sHeight", "skeleton", "parentLvlForSkeleton", "plugs", "borderRadius"], outputs: ["cardBtnEvent"] }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: SafePipe, name: "safe" }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "component", type: LibLoaderComponent, selector: "dd-lib-loader", inputs: ["color", "size"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: LibSearchInputComponent, isStandalone: true, selector: "dd-lib-search-input", inputs: { keyTitle: "keyTitle", keyDesc: "keyDesc", styleInput: "styleInput", inputStyle: "inputStyle", searchData: "searchData", debounceTime: "debounceTime", delay: "delay", idClose: "idClose", loaded$: "loaded$" }, outputs: { keyupEvent: "keyupEvent", selectedItem: "selectedItem" }, providers: [DestroyService], usesInheritance: true, ngImport: i0, template: "<div class=\"lib-search-input\">\r\n  <label [for]=\"id\" class=\"lib-search-input__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  <div class=\"pos-relative\">\r\n    <dd-lib-svg-icon (click)=\"forceChange()\" class=\"search-icon\" icon=\"search\"></dd-lib-svg-icon>\r\n    <input\r\n      #searchInput\r\n      (keyup)=\"keyUp.next($event)\"\r\n      (keyup.enter)=\"forceChange()\"\r\n      [(ngModel)]=\"value\"\r\n      [attr.autocomplete]=\"autocomplete === undefined ? null : autocomplete\"\r\n      [attr.id]=\"id ? id : null\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [attr.minlength]=\"minlength\"\r\n      [attr.name]=\"name\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [attr.tabIndex]=\"tabIndex\"\r\n      [attr.type]=\"type || 'text'\"\r\n      [class.focused]=\"focused\"\r\n      [class.round]=\"styleInput === 'round'\"\r\n      [class.white]=\"inputStyle === 'white'\"\r\n      [disabled]=\"disabled\"\r\n      [readOnly]=\"readOnly\"\r\n      class=\"search-input\" />\r\n    <dd-lib-svg-icon\r\n      (click)=\"onClear()\"\r\n      [id]=\"idClose\" [style.display]=\"value?.length ? 'block' : 'none'\"\r\n      class=\"clear-icon\" icon=\"clear\"></dd-lib-svg-icon>\r\n    @if (loaded$ | async) {\r\n      <div class=\"loading-icon\">\r\n        <dd-lib-loader></dd-lib-loader>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  @if (data?.length) {\r\n  <dd-lib-card [class.top]=\"side === 'top'\">\r\n    @for (item of data; track item) {\r\n    <div (click)=\"onClickSearchItem(item)\" class=\"search-result\">\r\n      @if (getTitle(item); as title) {\r\n      <div [innerHTML]=\"title | highlight: value | safe: 'html'\" class=\"search-result__title\"></div>\r\n      } @if (getDesc(item); as desc) {\r\n      <div [innerHTML]=\"desc | highlight: value | safe: 'html'\" class=\"search-result__desc\"></div>\r\n      }\r\n    </div>\r\n    }\r\n  </dd-lib-card>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}.lib-search-input{position:relative}.lib-search-input__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start}.lib-search-input input{width:100%;height:48px;padding:16px 16px 15px 44px;border-radius:8px;border:none;color:var(--light-black-color);background-color:var(--input-gray-bgc)}.lib-search-input input.white{background-color:var(--white-color);border:1px solid var(--primary-gray-color)}.lib-search-input .round{border-radius:24px}.lib-search-input .search-icon{position:absolute;left:16px;top:14px;cursor:pointer}.lib-search-input .clear-icon{position:absolute;right:16px;top:14px;cursor:pointer}.lib-search-input .loading-icon{position:absolute;right:40px;top:12px}.lib-search-input .search-result{font-size:16px;font-weight:400;line-height:24px;letter-spacing:0;text-align:left;cursor:pointer}.lib-search-input .search-result:hover{opacity:.8}.lib-search-input .search-result:last-child .search-result__desc{border:none;padding-bottom:0}.lib-search-input .search-result__title{color:var(--second-gray-color);margin:24px 0 2px}.lib-search-input .search-result__desc{padding-bottom:16px;border-bottom:1px solid var(--gray-color-200)}.lib-search-input dd-lib-card{position:absolute;display:block;top:76px;z-index:100;width:100%;max-height:400px;box-shadow:var(--main-card-shadow);overflow:auto}.lib-search-input dd-lib-card.top{bottom:50px;top:unset}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LibCardComponent, selector: "dd-lib-card", inputs: ["type", "footerBtn", "sHeight", "skeleton", "parentLvlForSkeleton", "plugs", "borderRadius"], outputs: ["cardBtnEvent"] }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: SafePipe, name: "safe" }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "component", type: LibLoaderComponent, selector: "dd-lib-loader", inputs: ["color", "size"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LibSearchInputComponent, decorators: [{
             type: Component,
@@ -3086,7 +3086,7 @@ class LibSelectComponent extends LibCommonInputTextComponent {
         super.handleFocus();
         this.showMultiCountValue = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LibSelectComponent, deps: [{ token: DestroyService }, { token: i0.ChangeDetectorRef }, { token: i2$1.ControlContainer, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LibSelectComponent, deps: [{ token: DestroyService }, { token: i0.ChangeDetectorRef }, { token: i1$5.ControlContainer, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: LibSelectComponent, isStandalone: true, selector: "dd-lib-select", inputs: { data: "data", multi: "multi", tooltipPosition: "tooltipPosition", highlight: "highlight", selectId: "selectId", itemSize: "itemSize", keyTitle: "keyTitle", keyDesc: "keyDesc", keyValue: "keyValue", placeholder: "placeholder" }, outputs: { selectedItem: "selectedItem" }, providers: [
             DestroyService,
             {
@@ -3094,7 +3094,7 @@ class LibSelectComponent extends LibCommonInputTextComponent {
                 useExisting: forwardRef(() => LibSelectComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"lib-select\" id=\"lib-select-{{ selectId }}\">\r\n  <label [for]=\"id\" class=\"lib-select__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      #select\r\n      (change)=\"handleChange()\"\r\n      (click)=\"notifyFocusEvent($event)\"\r\n      (input)=\"handleInput($event)\"\r\n      (blur)=\"handleBlur()\"\r\n      (focus)=\"handleFocus()\"\r\n      [(ngModel)]=\"inputValue\"\r\n      [attr.id]=\"selectId\"\r\n      [attr.name]=\"name\"\r\n      [attr.placeholder]=\"multiCountValue ? '' : placeholder\"\r\n      [attr.tabIndex]=\"tabIndex\"\r\n      [attr.type]=\"'text'\"\r\n      [class.focused]=\"focused\"\r\n      [class.invalid]=\"showError\"\r\n      [disabled]=\"disabled\"\r\n      [readOnly]=\"readOnly\"\r\n      [title]=\"inputValue || ''\"\r\n      class=\"text-select\" />\r\n    @if (multiCountValue && showMultiCountValue) {\r\n      <span class=\"multi-count text-plain small\">{{multiCountValue}}</span>\r\n    }\r\n    <!--    (blur)=\"notifyFocusEvent($event)\"-->\r\n    @if (!checkedItem) {\r\n      <dd-lib-svg-icon\r\n        (click)=\"notifyFocusEvent($event)\"\r\n        [class.black-svg]=\"isShownList\"\r\n        [class.disabled]=\"disabled\"\r\n        [class.gray-svg]=\"!isShownList\"\r\n        [class.up]=\"isShownList\"\r\n        id=\"chevron-{{ selectId }}\" class=\"chevron\" icon=\"down_chevron\"></dd-lib-svg-icon>\r\n\r\n    } @else if (clearable) {\r\n      <dd-lib-svg-icon\r\n        (click)=\"onClear(checkedItem)\"\r\n        class=\"clear\"\r\n        id=\"chevron-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\r\n    }\r\n  </div>\r\n\r\n  @if (errorTexts.length && showError) {\r\n    @for (error of errorTexts; track error) {\r\n      <div class=\"lib-select__error\">{{ error }}</div>\r\n    }\r\n  }\r\n  @if (errorText && showSelfError && showError) {\r\n    <div class=\"lib-select__error\">{{ errorText }}</div>\r\n  }\r\n  @if (isShownList) {\r\n  <div\r\n    (ddClickOutside)=\"notifyFocusEvent($event);fullBlur.emit($event)\"\r\n    [elements]=\"['lib-select-' + selectId, 'chevron' + selectId]\"\r\n    [class.top]=\"side === 'top'\"\r\n    class=\"select-list-wrapper\">\r\n    @if (_data()?.length) {\r\n      <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\" [style.height]=\"_data().length * itemSize + 'px'\">\r\n        <div *cdkVirtualFor=\"let item of _data() | filterByKey: filterList.bind(this)\">\r\n          <div [ddTooltip]=\"item.tooltip ? item.tooltip : ''\" [position]=\"tooltipPosition\"\r\n            (click)=\"selectItem(item)\"\r\n            [class.s-item-active]=\"checkSelected(item) && !item.disabled\"\r\n            [class.s-item-disabled]=\"item.disabled\"\r\n            class=\"select-data\">\r\n            @if (stringArray()) {\r\n              <div [innerHTML]=\"item | highlight: (highlight ? inputValue : '') | safe: 'html'\" class=\"select-data__title\"></div>\r\n            }\r\n            @if (keyTitle && !stringArray()) {\r\n              <div\r\n                [innerHTML]=\"item[keyTitle!] | highlight: (highlight ? inputValue : '') | safe: 'html'\"\r\n                class=\"select-data__title\"></div>\r\n            }\r\n            @if (keyDesc && !stringArray()) {\r\n              <div\r\n                [innerHTML]=\"item[keyDesc!] | highlight: (highlight ? inputValue : '') | safe: 'html'\"\r\n                [title]=\"item[keyDesc]\"\r\n                class=\"select-data__desc\"></div>\r\n            } @if (checkSelected(item)) {\r\n            <dd-lib-svg-icon\r\n              (click)=\"selectItem(checkedItem)\"\r\n              class=\"checked\"\r\n              id=\"chevron-{{ selectId }}\" icon=\"check_green\"></dd-lib-svg-icon>\r\n          }\r\n          </div>\r\n        </div>\r\n      </cdk-virtual-scroll-viewport>\r\n    } @else {\r\n    <div class=\"select-loader\">\r\n      <dd-lib-loader></dd-lib-loader>\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".lib-select{position:relative}.lib-select 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-select input:hover{border-color:var(--input-active-border-colort)}.lib-select input:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-select input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-select input:disabled::placeholder{color:var(--input-placeholder)}.lib-select input.invalid,.lib-select input.invalid:hover{border-color:var(--input-error-border-color)}.lib-select input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-select .multi-count{position:absolute;top:12px;left:16px}.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}.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: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 .select-loader{padding:24px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.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: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: TooltipDirective, selector: "[ddTooltip]", inputs: ["ddTooltip", "withClick", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"lib-select\" id=\"lib-select-{{ selectId }}\">\r\n  <label [for]=\"id\" class=\"lib-select__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      #select\r\n      (change)=\"handleChange()\"\r\n      (click)=\"notifyFocusEvent($event)\"\r\n      (input)=\"handleInput($event)\"\r\n      (blur)=\"handleBlur()\"\r\n      (focus)=\"handleFocus()\"\r\n      [(ngModel)]=\"inputValue\"\r\n      [attr.id]=\"selectId\"\r\n      [attr.name]=\"name\"\r\n      [attr.placeholder]=\"multiCountValue ? '' : placeholder\"\r\n      [attr.tabIndex]=\"tabIndex\"\r\n      [attr.type]=\"'text'\"\r\n      [class.focused]=\"focused\"\r\n      [class.invalid]=\"showError\"\r\n      [disabled]=\"disabled\"\r\n      [readOnly]=\"readOnly\"\r\n      [title]=\"inputValue || ''\"\r\n      class=\"text-select\" />\r\n    @if (multiCountValue && showMultiCountValue) {\r\n      <span class=\"multi-count text-plain small\">{{multiCountValue}}</span>\r\n    }\r\n    <!--    (blur)=\"notifyFocusEvent($event)\"-->\r\n    @if (!checkedItem) {\r\n      <dd-lib-svg-icon\r\n        (click)=\"notifyFocusEvent($event)\"\r\n        [class.black-svg]=\"isShownList\"\r\n        [class.disabled]=\"disabled\"\r\n        [class.gray-svg]=\"!isShownList\"\r\n        [class.up]=\"isShownList\"\r\n        id=\"chevron-{{ selectId }}\" class=\"chevron\" icon=\"down_chevron\"></dd-lib-svg-icon>\r\n\r\n    } @else if (clearable) {\r\n      <dd-lib-svg-icon\r\n        (click)=\"onClear(checkedItem)\"\r\n        class=\"clear\"\r\n        id=\"chevron-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\r\n    }\r\n  </div>\r\n\r\n  @if (errorTexts.length && showError) {\r\n    @for (error of errorTexts; track error) {\r\n      <div class=\"lib-select__error\">{{ error }}</div>\r\n    }\r\n  }\r\n  @if (errorText && showSelfError && showError) {\r\n    <div class=\"lib-select__error\">{{ errorText }}</div>\r\n  }\r\n  @if (isShownList) {\r\n  <div\r\n    (ddClickOutside)=\"notifyFocusEvent($event);fullBlur.emit($event)\"\r\n    [elements]=\"['lib-select-' + selectId, 'chevron' + selectId]\"\r\n    [class.top]=\"side === 'top'\"\r\n    class=\"select-list-wrapper\">\r\n    @if (_data()?.length) {\r\n      <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\" [style.height]=\"_data().length * itemSize + 'px'\">\r\n        <div *cdkVirtualFor=\"let item of _data() | filterByKey: filterList.bind(this)\">\r\n          <div [ddTooltip]=\"item.tooltip ? item.tooltip : ''\" [position]=\"tooltipPosition\"\r\n            (click)=\"selectItem(item)\"\r\n            [class.s-item-active]=\"checkSelected(item) && !item.disabled\"\r\n            [class.s-item-disabled]=\"item.disabled\"\r\n            class=\"select-data\">\r\n            @if (stringArray()) {\r\n              <div [innerHTML]=\"item | highlight: (highlight ? inputValue : '') | safe: 'html'\" class=\"select-data__title\"></div>\r\n            }\r\n            @if (keyTitle && !stringArray()) {\r\n              <div\r\n                [innerHTML]=\"item[keyTitle!] | highlight: (highlight ? inputValue : '') | safe: 'html'\"\r\n                class=\"select-data__title\"></div>\r\n            }\r\n            @if (keyDesc && !stringArray()) {\r\n              <div\r\n                [innerHTML]=\"item[keyDesc!] | highlight: (highlight ? inputValue : '') | safe: 'html'\"\r\n                [title]=\"item[keyDesc]\"\r\n                class=\"select-data__desc\"></div>\r\n            } @if (checkSelected(item)) {\r\n            <dd-lib-svg-icon\r\n              (click)=\"selectItem(checkedItem)\"\r\n              class=\"checked\"\r\n              id=\"chevron-{{ selectId }}\" icon=\"check_green\"></dd-lib-svg-icon>\r\n          }\r\n          </div>\r\n        </div>\r\n      </cdk-virtual-scroll-viewport>\r\n    } @else {\r\n    <div class=\"select-loader\">\r\n      <dd-lib-loader></dd-lib-loader>\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".lib-select{position:relative}.lib-select 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-select input:hover{border-color:var(--input-active-border-colort)}.lib-select input:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-select input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-select input:disabled::placeholder{color:var(--input-placeholder)}.lib-select input.invalid,.lib-select input.invalid:hover{border-color:var(--input-error-border-color)}.lib-select input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-select .multi-count{position:absolute;top:12px;left:16px}.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}.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: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 .select-loader{padding:24px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: SafePipe, name: "safe" }, { kind: "directive", type: ClickOutsideDirective, selector: "[ddClickOutside]", inputs: ["elements"], 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: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: TooltipDirective, selector: "[ddTooltip]", inputs: ["ddTooltip", "withClick", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LibSelectComponent, decorators: [{
             type: Component,
@@ -3120,7 +3120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
                             multi: true,
                         },
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lib-select\" id=\"lib-select-{{ selectId }}\">\r\n  <label [for]=\"id\" class=\"lib-select__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      #select\r\n      (change)=\"handleChange()\"\r\n      (click)=\"notifyFocusEvent($event)\"\r\n      (input)=\"handleInput($event)\"\r\n      (blur)=\"handleBlur()\"\r\n      (focus)=\"handleFocus()\"\r\n      [(ngModel)]=\"inputValue\"\r\n      [attr.id]=\"selectId\"\r\n      [attr.name]=\"name\"\r\n      [attr.placeholder]=\"multiCountValue ? '' : placeholder\"\r\n      [attr.tabIndex]=\"tabIndex\"\r\n      [attr.type]=\"'text'\"\r\n      [class.focused]=\"focused\"\r\n      [class.invalid]=\"showError\"\r\n      [disabled]=\"disabled\"\r\n      [readOnly]=\"readOnly\"\r\n      [title]=\"inputValue || ''\"\r\n      class=\"text-select\" />\r\n    @if (multiCountValue && showMultiCountValue) {\r\n      <span class=\"multi-count text-plain small\">{{multiCountValue}}</span>\r\n    }\r\n    <!--    (blur)=\"notifyFocusEvent($event)\"-->\r\n    @if (!checkedItem) {\r\n      <dd-lib-svg-icon\r\n        (click)=\"notifyFocusEvent($event)\"\r\n        [class.black-svg]=\"isShownList\"\r\n        [class.disabled]=\"disabled\"\r\n        [class.gray-svg]=\"!isShownList\"\r\n        [class.up]=\"isShownList\"\r\n        id=\"chevron-{{ selectId }}\" class=\"chevron\" icon=\"down_chevron\"></dd-lib-svg-icon>\r\n\r\n    } @else if (clearable) {\r\n      <dd-lib-svg-icon\r\n        (click)=\"onClear(checkedItem)\"\r\n        class=\"clear\"\r\n        id=\"chevron-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\r\n    }\r\n  </div>\r\n\r\n  @if (errorTexts.length && showError) {\r\n    @for (error of errorTexts; track error) {\r\n      <div class=\"lib-select__error\">{{ error }}</div>\r\n    }\r\n  }\r\n  @if (errorText && showSelfError && showError) {\r\n    <div class=\"lib-select__error\">{{ errorText }}</div>\r\n  }\r\n  @if (isShownList) {\r\n  <div\r\n    (ddClickOutside)=\"notifyFocusEvent($event);fullBlur.emit($event)\"\r\n    [elements]=\"['lib-select-' + selectId, 'chevron' + selectId]\"\r\n    [class.top]=\"side === 'top'\"\r\n    class=\"select-list-wrapper\">\r\n    @if (_data()?.length) {\r\n      <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\" [style.height]=\"_data().length * itemSize + 'px'\">\r\n        <div *cdkVirtualFor=\"let item of _data() | filterByKey: filterList.bind(this)\">\r\n          <div [ddTooltip]=\"item.tooltip ? item.tooltip : ''\" [position]=\"tooltipPosition\"\r\n            (click)=\"selectItem(item)\"\r\n            [class.s-item-active]=\"checkSelected(item) && !item.disabled\"\r\n            [class.s-item-disabled]=\"item.disabled\"\r\n            class=\"select-data\">\r\n            @if (stringArray()) {\r\n              <div [innerHTML]=\"item | highlight: (highlight ? inputValue : '') | safe: 'html'\" class=\"select-data__title\"></div>\r\n            }\r\n            @if (keyTitle && !stringArray()) {\r\n              <div\r\n                [innerHTML]=\"item[keyTitle!] | highlight: (highlight ? inputValue : '') | safe: 'html'\"\r\n                class=\"select-data__title\"></div>\r\n            }\r\n            @if (keyDesc && !stringArray()) {\r\n              <div\r\n                [innerHTML]=\"item[keyDesc!] | highlight: (highlight ? inputValue : '') | safe: 'html'\"\r\n                [title]=\"item[keyDesc]\"\r\n                class=\"select-data__desc\"></div>\r\n            } @if (checkSelected(item)) {\r\n            <dd-lib-svg-icon\r\n              (click)=\"selectItem(checkedItem)\"\r\n              class=\"checked\"\r\n              id=\"chevron-{{ selectId }}\" icon=\"check_green\"></dd-lib-svg-icon>\r\n          }\r\n          </div>\r\n        </div>\r\n      </cdk-virtual-scroll-viewport>\r\n    } @else {\r\n    <div class=\"select-loader\">\r\n      <dd-lib-loader></dd-lib-loader>\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".lib-select{position:relative}.lib-select 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-select input:hover{border-color:var(--input-active-border-colort)}.lib-select input:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-select input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-select input:disabled::placeholder{color:var(--input-placeholder)}.lib-select input.invalid,.lib-select input.invalid:hover{border-color:var(--input-error-border-color)}.lib-select input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-select .multi-count{position:absolute;top:12px;left:16px}.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}.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: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 .select-loader{padding:24px}\n"] }]
-        }], ctorParameters: () => [{ type: DestroyService }, { type: i0.ChangeDetectorRef }, { type: i2$1.ControlContainer, decorators: [{
+        }], ctorParameters: () => [{ type: DestroyService }, { type: i0.ChangeDetectorRef }, { type: i1$5.ControlContainer, decorators: [{
                     type: Optional
                 }, {
                     type: Host
@@ -3382,14 +3382,14 @@ class LibTextareaComponent extends LibCommonInputTextComponent {
     ngOnDestroy() {
         this.destroyed = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LibTextareaComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2$1.ControlContainer, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LibTextareaComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$5.ControlContainer, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: LibTextareaComponent, isStandalone: true, selector: "dd-lib-textarea", inputs: { rows: "rows", needCounter: "needCounter" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => LibTextareaComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"lib-textarea\">\r\n  <label [for]=\"id\" class=\"d-block g-text-sm mb-4\">\r\n    {{ label }}\r\n    @if (needCounter && maxlength) {\r\n      <span>(\u043E\u0441\u0442\u0430\u043B\u043E\u0441\u044C {{ +maxlength! - (value?.length || 0) }} \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432)</span>\r\n    }\r\n    @if (required) {\r\n      <span class=\"red\">*</span>\r\n    }\r\n  </label>\r\n  <div class=\"pos-relative d-flex\">\r\n    <textarea\r\n      #textarea\r\n      (blur)=\"notifyFocusEvent($event)\"\r\n      (change)=\"handleChange()\"\r\n      (focus)=\"notifyFocusEvent($event)\"\r\n      (input)=\"handleInput($event)\"\r\n      (keyup.enter)=\"forceChange()\"\r\n      [(ngModel)]=\"value\"\r\n      [attr.id]=\"id ? id : null\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [attr.minlength]=\"minlength\"\r\n      [attr.name]=\"name\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [attr.tabIndex]=\"tabIndex\"\r\n      [class.focused]=\"focused\"\r\n      [class.invalid]=\"invalid\"\r\n      [disabled]=\"disabled\"\r\n      [readOnly]=\"readOnly\"\r\n      [required]=\"required\"\r\n      [rows]=\"rows\"\r\n      class=\"textarea\"></textarea>\r\n    @if (maxlength) {\r\n      <span class=\"lib-textarea__counter\">{{ value?.length || 0 }}/{{ maxlength }}</span>\r\n    }\r\n  </div>\r\n\r\n  @if (errorTexts.length && showError) {\r\n    @for (error of errorTexts; track error) {\r\n      <div class=\"lib-input__error\">{{ error }}</div>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".lib-textarea{position:relative;display:inline;flex-direction:column}.lib-textarea textarea{width:100%;min-height:48px;padding:12px 16px;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;resize:none;font-size:16px;line-height:24px;color:var(--light-black-color)}.lib-textarea textarea:hover{border-color:var(--input-active-border-colort)}.lib-textarea textarea:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-textarea textarea:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-textarea textarea:disabled::placeholder{color:var(--input-placeholder)}.lib-textarea textarea.invalid,.lib-textarea textarea.invalid:hover{border-color:var(--input-error-border-color)}.lib-textarea textarea.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-textarea__counter{position:absolute;font-size:12px;font-weight:400;right:16px;bottom:12px;color:var(--input-placeholder)}.lib-textarea__counter textarea:disabled+.lib-text-counter{color:var(--input-disable-text)}.lib-textarea__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"lib-textarea\">\r\n  <label [for]=\"id\" class=\"d-block g-text-sm mb-4\">\r\n    {{ label }}\r\n    @if (needCounter && maxlength) {\r\n      <span>(\u043E\u0441\u0442\u0430\u043B\u043E\u0441\u044C {{ +maxlength! - (value?.length || 0) }} \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432)</span>\r\n    }\r\n    @if (required) {\r\n      <span class=\"red\">*</span>\r\n    }\r\n  </label>\r\n  <div class=\"pos-relative d-flex\">\r\n    <textarea\r\n      #textarea\r\n      (blur)=\"notifyFocusEvent($event)\"\r\n      (change)=\"handleChange()\"\r\n      (focus)=\"notifyFocusEvent($event)\"\r\n      (input)=\"handleInput($event)\"\r\n      (keyup.enter)=\"forceChange()\"\r\n      [(ngModel)]=\"value\"\r\n      [attr.id]=\"id ? id : null\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [attr.minlength]=\"minlength\"\r\n      [attr.name]=\"name\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [attr.tabIndex]=\"tabIndex\"\r\n      [class.focused]=\"focused\"\r\n      [class.invalid]=\"invalid\"\r\n      [disabled]=\"disabled\"\r\n      [readOnly]=\"readOnly\"\r\n      [required]=\"required\"\r\n      [rows]=\"rows\"\r\n      class=\"textarea\"></textarea>\r\n    @if (maxlength) {\r\n      <span class=\"lib-textarea__counter\">{{ value?.length || 0 }}/{{ maxlength }}</span>\r\n    }\r\n  </div>\r\n\r\n  @if (errorTexts.length && showError) {\r\n    @for (error of errorTexts; track error) {\r\n      <div class=\"lib-input__error\">{{ error }}</div>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".lib-textarea{position:relative;display:inline;flex-direction:column}.lib-textarea textarea{width:100%;min-height:48px;padding:12px 16px;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;resize:none;font-size:16px;line-height:24px;color:var(--light-black-color)}.lib-textarea textarea:hover{border-color:var(--input-active-border-colort)}.lib-textarea textarea:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-textarea textarea:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-textarea textarea:disabled::placeholder{color:var(--input-placeholder)}.lib-textarea textarea.invalid,.lib-textarea textarea.invalid:hover{border-color:var(--input-error-border-color)}.lib-textarea textarea.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-textarea__counter{position:absolute;font-size:12px;font-weight:400;right:16px;bottom:12px;color:var(--input-placeholder)}.lib-textarea__counter textarea:disabled+.lib-text-counter{color:var(--input-disable-text)}.lib-textarea__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LibTextareaComponent, decorators: [{
             type: Component,
@@ -3400,7 +3400,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
                             multi: true,
                         },
                     ], template: "<div class=\"lib-textarea\">\r\n  <label [for]=\"id\" class=\"d-block g-text-sm mb-4\">\r\n    {{ label }}\r\n    @if (needCounter && maxlength) {\r\n      <span>(\u043E\u0441\u0442\u0430\u043B\u043E\u0441\u044C {{ +maxlength! - (value?.length || 0) }} \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432)</span>\r\n    }\r\n    @if (required) {\r\n      <span class=\"red\">*</span>\r\n    }\r\n  </label>\r\n  <div class=\"pos-relative d-flex\">\r\n    <textarea\r\n      #textarea\r\n      (blur)=\"notifyFocusEvent($event)\"\r\n      (change)=\"handleChange()\"\r\n      (focus)=\"notifyFocusEvent($event)\"\r\n      (input)=\"handleInput($event)\"\r\n      (keyup.enter)=\"forceChange()\"\r\n      [(ngModel)]=\"value\"\r\n      [attr.id]=\"id ? id : null\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [attr.minlength]=\"minlength\"\r\n      [attr.name]=\"name\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [attr.tabIndex]=\"tabIndex\"\r\n      [class.focused]=\"focused\"\r\n      [class.invalid]=\"invalid\"\r\n      [disabled]=\"disabled\"\r\n      [readOnly]=\"readOnly\"\r\n      [required]=\"required\"\r\n      [rows]=\"rows\"\r\n      class=\"textarea\"></textarea>\r\n    @if (maxlength) {\r\n      <span class=\"lib-textarea__counter\">{{ value?.length || 0 }}/{{ maxlength }}</span>\r\n    }\r\n  </div>\r\n\r\n  @if (errorTexts.length && showError) {\r\n    @for (error of errorTexts; track error) {\r\n      <div class=\"lib-input__error\">{{ error }}</div>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".lib-textarea{position:relative;display:inline;flex-direction:column}.lib-textarea textarea{width:100%;min-height:48px;padding:12px 16px;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;resize:none;font-size:16px;line-height:24px;color:var(--light-black-color)}.lib-textarea textarea:hover{border-color:var(--input-active-border-colort)}.lib-textarea textarea:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-textarea textarea:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-textarea textarea:disabled::placeholder{color:var(--input-placeholder)}.lib-textarea textarea.invalid,.lib-textarea textarea.invalid:hover{border-color:var(--input-error-border-color)}.lib-textarea textarea.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-textarea__counter{position:absolute;font-size:12px;font-weight:400;right:16px;bottom:12px;color:var(--input-placeholder)}.lib-textarea__counter textarea:disabled+.lib-text-counter{color:var(--input-disable-text)}.lib-textarea__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i2$1.ControlContainer, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$5.ControlContainer, decorators: [{
                     type: Optional
                 }, {
                     type: Host
@@ -3588,7 +3588,7 @@ class LibDateRangeComponent {
                 useExisting: forwardRef(() => LibDateRangeComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"lib-range\" id=\"lib-range-{{ rangeId }}\">\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\">\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\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:340px;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: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<div class=\"lib-range\" id=\"lib-range-{{ rangeId }}\">\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\">\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\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:340px;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$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LibDateRangeComponent, decorators: [{
             type: Component,
@@ -3622,6 +3622,109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
                 type: Input
             }] } });
 
+class LibDateInputComponent {
+    constructor() {
+        this.isShownCalendar = false;
+        this.disabled = false;
+        this.selectedDate = new Date();
+    }
+    static { this.idCounter = 1; }
+    ngOnInit() {
+        if (!this.dateId) {
+            this.dateId = 'dd-date-' + LibDateInputComponent.idCounter++;
+        }
+    }
+    openCalendar() {
+        if (!this.disabled) {
+            this.isShownCalendar = true;
+        }
+    }
+    closeCalendar() {
+        if (!this.selectedDate) {
+            this.selectedDateStr = undefined;
+        }
+        this.isShownCalendar = false;
+    }
+    setPeriod($event) {
+        this.isShownCalendar = false;
+        if ($event) {
+            this.selectedDateStr = `${format($event, 'dd.MM.yyyy')}`;
+        }
+        else {
+            this.selectedDate = undefined;
+            this.selectedDateStr = undefined;
+        }
+        this.propagateChange(this.selectedDate);
+    }
+    changeStrDate($event) {
+        const date = DateService.getDateFromString($event.substring(0, 8));
+        if (date) {
+            this.selectedDate = date;
+        }
+        else {
+            this.selectedDate = undefined;
+        }
+        this.propagateChange(this.selectedDate);
+    }
+    propagateChange(_value) {
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    writeValue($event) {
+        this.selectedDate = $event;
+        if ($event) {
+            this.selectedDateStr = `${format($event, 'dd.MM.yyyy')}`;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LibDateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: LibDateInputComponent, isStandalone: true, selector: "dd-lib-date-input", inputs: { topSide: "topSide", dateId: "dateId", placeholder: "placeholder", label: "label", required: "required" }, providers: [
+            provideNgxMask(),
+            {
+                provide: NG_VALUE_ACCESSOR,
+                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$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LibDateInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dd-lib-date-input', standalone: true, imports: [
+                        FilterByKeyPipe,
+                        FormsModule,
+                        HighlightPipe,
+                        LibLoaderComponent,
+                        LibSvgIconComponent,
+                        SafePipe,
+                        ClickOutsideDirective,
+                        LibPeriodComponent,
+                        LibCalendarComponent,
+                        NgxMaskDirective,
+                        JsonPipe,
+                        NgClass
+                    ], providers: [
+                        provideNgxMask(),
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => LibDateInputComponent),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+        }], propDecorators: { topSide: [{
+                type: Input
+            }], dateId: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }] } });
+
 class LibFilterComponent {
     constructor(document, renderer) {
         this.document = document;
@@ -4396,5 +4499,5 @@ const t = true;
  * Generated bundle index. Do not edit.
  */
 
-export { AutoHeightDirective, ClickOutsideDirective, CounterDirective, DDDialogRef, DEFAULT_FORMAT, DIALOG_CONFIG, DataEmptyComponent, DateService, Debounce, DeclensionDirective, DestroyService, DialogConfig, DialogService, DisableAfterNCall, Disabled, ErrorPageComponent, FetcherService, FilterByKeyPipe, FilterPipe, FilterTabsPipe, FooterComponent, HighlightPipe, ITab, InterceptorsService, LibAccordionComponent, LibBackButtonComponent, LibButtonComponent, LibCalendarComponent, LibCardComponent, LibCheckboxComponent, LibCommentInputComponent, LibCommonButtonComponent, LibCommonInputTextComponent, LibDateRangeComponent, LibFileLoaderComponent, LibFileUploadComponent, LibFilterButtonComponent, LibFilterComponent, LibImageLoaderComponent, LibInfoCardComponent, LibInputComponent, LibLoaderComponent, LibPeriodComponent, LibRadioComponent, LibSearchInputComponent, LibSelectComponent, LibSkeletonComponent, LibSortComponent, LibStepComponent, LibSvgComponent, LibSvgIconComponent, LibTabsFragmentComponent, LibTextareaComponent, MainSharedComponent, ModalBaseComponent, ModalCommonComponent, NotFoundComponent, ResizeTextareaDirective, ReversePipe, SafePipe, 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, 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 { AutoHeightDirective, ClickOutsideDirective, CounterDirective, DDDialogRef, DEFAULT_FORMAT, DIALOG_CONFIG, DataEmptyComponent, DateService, Debounce, DeclensionDirective, DestroyService, DialogConfig, DialogService, DisableAfterNCall, Disabled, ErrorPageComponent, FetcherService, FilterByKeyPipe, FilterPipe, FilterTabsPipe, FooterComponent, HighlightPipe, ITab, InterceptorsService, LibAccordionComponent, LibBackButtonComponent, LibButtonComponent, LibCalendarComponent, LibCardComponent, LibCheckboxComponent, LibCommentInputComponent, LibCommonButtonComponent, LibCommonInputTextComponent, LibDateInputComponent, LibDateRangeComponent, LibFileLoaderComponent, LibFileUploadComponent, LibFilterButtonComponent, LibFilterComponent, LibImageLoaderComponent, LibInfoCardComponent, LibInputComponent, LibLoaderComponent, LibPeriodComponent, LibRadioComponent, LibSearchInputComponent, LibSelectComponent, LibSkeletonComponent, LibSortComponent, LibStepComponent, LibSvgComponent, LibSvgIconComponent, LibTabsFragmentComponent, LibTextareaComponent, MainSharedComponent, ModalBaseComponent, ModalCommonComponent, NotFoundComponent, ResizeTextareaDirective, ReversePipe, SafePipe, 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, 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