@morozeckiy/dd-lib 0.9.0 → 0.9.1

package/fesm2022/morozeckiy-dd-lib.mjs

@@ -3095,7 +3095,7 @@ class LibCheckboxComponent {
                 useExisting: forwardRef(() => LibCheckboxComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<input\n  (change)=\"onChecked($event.target)\"\n  [checked]=\"checked\"\n  [class.disabled]=\"disabled\"\n  [class.invalid]=\"invalid\"\n  [disabled]=\"disabled\"\n  [id]=\"checkboxId\"\n  [required]=\"required\"\n  [tabindex]=\"disabled ? -1 : null\"\n  class=\"check-input\"\n  type=\"checkbox\" />\n<label [for]=\"checkboxId\" class=\"{{ customClass }} check\">\n  <span [class.focused]=\"focused\" class=\"checkbox\"></span>\n  @if (hasContent) {\n    <span class=\"ml-12\">\n      <ng-content></ng-content>\n    </span>\n  }\n</label>\n", styles: [":host{outline:none;position:relative}.check{display:flex;position:relative;font-size:14px;width:fit-content;cursor:pointer;align-items:center}.check-input{appearance:none;position:absolute;opacity:0;margin:0;width:20px;height:20px}.check-input:hover+label .checkbox{border-color:var(--primary-green-color)}.check-input:hover:checked+label .checkbox{background:var(--cb-hover-bgc);border:none}.check-input:disabled+label,.check-input:disabled+label .checkbox,.check-input:hover:disabled+label,.check-input:hover:disabled+label .checkbox{cursor:default;pointer-events:none;border-color:var(--cb-init-border)}.check-input:disabled:checked+label .checkbox{cursor:default;pointer-events:none;border-color:var(--cb-init-border);background-color:var(--cb-init-border);font-weight:700}.check-input:checked+label{font-weight:700}.check-input:checked+label .checkbox{background:var(--cb-checked-bgc);border:none;position:relative}.check-input:checked+label .checkbox:before{content:\"\";background:url('data:image/svg+xml,<svg fill=\"none\" height=\"10\" viewBox=\"0 0 13 10\" width=\"13\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A  <path d=\"M1.33301 5.00008L4.66634 8.33341L11.333 1.66675\" stroke=\"white\" stroke-linecap=\"round\"%0D%0A        stroke-linejoin=\"round\"%0D%0A        stroke-width=\"1.7\"/>%0D%0A</svg>%0D%0A') no-repeat;height:10px;position:absolute;width:13px;top:5px;left:4px}.checkbox{min-width:20px;min-height:20px;padding:3px;background-color:var(--white-color);border-radius:5px;border:1px solid var(--cb-init-border);cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<input\n  (change)=\"onChecked($event.target)\"\n  [checked]=\"checked\"\n  [class.disabled]=\"disabled\"\n  [class.invalid]=\"invalid\"\n  [disabled]=\"disabled\"\n  [id]=\"checkboxId\"\n  [required]=\"required\"\n  [tabindex]=\"disabled ? -1 : null\"\n  class=\"check-input\"\n  type=\"checkbox\" />\n<label [for]=\"checkboxId\" class=\"{{ customClass }} check\">\n  <span [class.focused]=\"focused\" class=\"checkbox\"></span>\n  @if (hasContent) {\n    <span class=\"ml-12\">\n      <ng-content></ng-content>\n      @if (required) {\n        <span class=\"red ml-4\">*</span>\n      }\n    </span>\n  }\n</label>\n", styles: [":host{outline:none;position:relative}.check{display:flex;position:relative;font-size:14px;width:fit-content;cursor:pointer;align-items:center}.check-input{appearance:none;position:absolute;opacity:0;margin:0;width:20px;height:20px}.check-input:hover+label .checkbox{border-color:var(--primary-green-color)}.check-input:hover:checked+label .checkbox{background:var(--cb-hover-bgc);border:none}.check-input:disabled+label,.check-input:disabled+label .checkbox,.check-input:hover:disabled+label,.check-input:hover:disabled+label .checkbox{cursor:default;pointer-events:none;border-color:var(--cb-init-border)}.check-input:disabled:checked+label .checkbox{cursor:default;pointer-events:none;border-color:var(--cb-init-border);background-color:var(--cb-init-border);font-weight:700}.check-input:checked+label{font-weight:700}.check-input:checked+label .checkbox{background:var(--cb-checked-bgc);border:none;position:relative}.check-input:checked+label .checkbox:before{content:\"\";background:url('data:image/svg+xml,<svg fill=\"none\" height=\"10\" viewBox=\"0 0 13 10\" width=\"13\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A  <path d=\"M1.33301 5.00008L4.66634 8.33341L11.333 1.66675\" stroke=\"white\" stroke-linecap=\"round\"%0D%0A        stroke-linejoin=\"round\"%0D%0A        stroke-width=\"1.7\"/>%0D%0A</svg>%0D%0A') no-repeat;height:10px;position:absolute;width:13px;top:5px;left:4px}.checkbox{min-width:20px;min-height:20px;padding:3px;background-color:var(--white-color);border-radius:5px;border:1px solid var(--cb-init-border);cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LibCheckboxComponent, decorators: [{
             type: Component,
@@ -3105,7 +3105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                             useExisting: forwardRef(() => LibCheckboxComponent),
                             multi: true,
                         },
-                    ], template: "<input\n  (change)=\"onChecked($event.target)\"\n  [checked]=\"checked\"\n  [class.disabled]=\"disabled\"\n  [class.invalid]=\"invalid\"\n  [disabled]=\"disabled\"\n  [id]=\"checkboxId\"\n  [required]=\"required\"\n  [tabindex]=\"disabled ? -1 : null\"\n  class=\"check-input\"\n  type=\"checkbox\" />\n<label [for]=\"checkboxId\" class=\"{{ customClass }} check\">\n  <span [class.focused]=\"focused\" class=\"checkbox\"></span>\n  @if (hasContent) {\n    <span class=\"ml-12\">\n      <ng-content></ng-content>\n    </span>\n  }\n</label>\n", styles: [":host{outline:none;position:relative}.check{display:flex;position:relative;font-size:14px;width:fit-content;cursor:pointer;align-items:center}.check-input{appearance:none;position:absolute;opacity:0;margin:0;width:20px;height:20px}.check-input:hover+label .checkbox{border-color:var(--primary-green-color)}.check-input:hover:checked+label .checkbox{background:var(--cb-hover-bgc);border:none}.check-input:disabled+label,.check-input:disabled+label .checkbox,.check-input:hover:disabled+label,.check-input:hover:disabled+label .checkbox{cursor:default;pointer-events:none;border-color:var(--cb-init-border)}.check-input:disabled:checked+label .checkbox{cursor:default;pointer-events:none;border-color:var(--cb-init-border);background-color:var(--cb-init-border);font-weight:700}.check-input:checked+label{font-weight:700}.check-input:checked+label .checkbox{background:var(--cb-checked-bgc);border:none;position:relative}.check-input:checked+label .checkbox:before{content:\"\";background:url('data:image/svg+xml,<svg fill=\"none\" height=\"10\" viewBox=\"0 0 13 10\" width=\"13\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A  <path d=\"M1.33301 5.00008L4.66634 8.33341L11.333 1.66675\" stroke=\"white\" stroke-linecap=\"round\"%0D%0A        stroke-linejoin=\"round\"%0D%0A        stroke-width=\"1.7\"/>%0D%0A</svg>%0D%0A') no-repeat;height:10px;position:absolute;width:13px;top:5px;left:4px}.checkbox{min-width:20px;min-height:20px;padding:3px;background-color:var(--white-color);border-radius:5px;border:1px solid var(--cb-init-border);cursor:pointer}\n"] }]
+                    ], template: "<input\n  (change)=\"onChecked($event.target)\"\n  [checked]=\"checked\"\n  [class.disabled]=\"disabled\"\n  [class.invalid]=\"invalid\"\n  [disabled]=\"disabled\"\n  [id]=\"checkboxId\"\n  [required]=\"required\"\n  [tabindex]=\"disabled ? -1 : null\"\n  class=\"check-input\"\n  type=\"checkbox\" />\n<label [for]=\"checkboxId\" class=\"{{ customClass }} check\">\n  <span [class.focused]=\"focused\" class=\"checkbox\"></span>\n  @if (hasContent) {\n    <span class=\"ml-12\">\n      <ng-content></ng-content>\n      @if (required) {\n        <span class=\"red ml-4\">*</span>\n      }\n    </span>\n  }\n</label>\n", styles: [":host{outline:none;position:relative}.check{display:flex;position:relative;font-size:14px;width:fit-content;cursor:pointer;align-items:center}.check-input{appearance:none;position:absolute;opacity:0;margin:0;width:20px;height:20px}.check-input:hover+label .checkbox{border-color:var(--primary-green-color)}.check-input:hover:checked+label .checkbox{background:var(--cb-hover-bgc);border:none}.check-input:disabled+label,.check-input:disabled+label .checkbox,.check-input:hover:disabled+label,.check-input:hover:disabled+label .checkbox{cursor:default;pointer-events:none;border-color:var(--cb-init-border)}.check-input:disabled:checked+label .checkbox{cursor:default;pointer-events:none;border-color:var(--cb-init-border);background-color:var(--cb-init-border);font-weight:700}.check-input:checked+label{font-weight:700}.check-input:checked+label .checkbox{background:var(--cb-checked-bgc);border:none;position:relative}.check-input:checked+label .checkbox:before{content:\"\";background:url('data:image/svg+xml,<svg fill=\"none\" height=\"10\" viewBox=\"0 0 13 10\" width=\"13\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A  <path d=\"M1.33301 5.00008L4.66634 8.33341L11.333 1.66675\" stroke=\"white\" stroke-linecap=\"round\"%0D%0A        stroke-linejoin=\"round\"%0D%0A        stroke-width=\"1.7\"/>%0D%0A</svg>%0D%0A') no-repeat;height:10px;position:absolute;width:13px;top:5px;left:4px}.checkbox{min-width:20px;min-height:20px;padding:3px;background-color:var(--white-color);border-radius:5px;border:1px solid var(--cb-init-border);cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { checkboxId: [{
                 type: Input
             }], required: [{
@@ -3272,7 +3272,7 @@ class LibInputComponent extends LibCommonInputTextComponent {
                 useExisting: forwardRef(() => LibInputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "contentInput", first: true, predicate: ["input"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"lib-input\">\n  @if (label) {\n  <label [for]=\"id\" class=\"lib-input__title g-text-sm\">\n    {{ label }}\n    @if (required) {\n      <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n    }\n  </label>\n  }\n  <div class=\"pos-relative\">\n    <input\n      #input\n      (blur)=\"handleBlur()\"\n      (change)=\"handleChange()\"\n      (focus)=\"handleFocus()\"\n      (input)=\"handleInput($event)\"\n      (keyup.enter)=\"forceChange()\"\n      [showMaskTyped]=\"showMaskTyped\"\n      [dropSpecialCharacters]=\"dropSpecialCharacters\"\n      [shownMaskExpression]=\"shownMaskExpression\"\n      [mask]=\"mask\"\n      [validation]=\"validation\"\n      [prefix]=\"prefix\"\n      [suffix]=\"suffix\"\n      [(ngModel)]=\"value\"\n      [attr.autofocus]=\"autofocus\"\n      [attr.autocomplete]=\"autocomplete === undefined ? null : autocomplete\"\n      [attr.id]=\"id ? id : null\"\n      [attr.max]=\"max\"\n      [attr.min]=\"min\"\n      [attr.maxlength]=\"maxlength\"\n      [attr.minlength]=\"minlength\"\n      [attr.name]=\"name\"\n      [attr.placeholder]=\"placeholder\"\n      [attr.tabIndex]=\"tabIndex\"\n      [attr.type]=\"showPass ? 'text' : (type || 'text')\"\n      [class.focused]=\"focused\"\n      [class.invalid]=\"showError\"\n      [style.height]=\"height\"\n      [style.width]=\"width\"\n      [disabled]=\"disabled\"\n      [readOnly]=\"readOnly\"\n      class=\"text-input\" />\n    @if (type === 'password') {\n      <dd-lib-svg-viewer (click)=\"showPass = !showPass\" [pack]=\"'lib-svg'\" class=\"password-eye\" icon=\"{{ showPass ? 'eye' : 'eye-off' }}\"></dd-lib-svg-viewer>\n    }\n  </div>\n\n  @if (errorTexts.length && showError) {\n    @for (error of errorTexts; track error) {\n      <div class=\"lib-input__error\">{{ error }}</div>\n    }\n  }\n  @if (errorText && showSelfError && showError) {\n      <div class=\"lib-input__error\">{{ errorText }}</div>\n  }\n</div>\n", styles: [":host{display:block}.lib-input{position:relative}.lib-input input{width:100%;height:48px;padding:15px 16px;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative;color:var(--light-black-color)}.lib-input input:hover{border-color:var(--input-active-border-colort)}.lib-input input:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-input input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-input input:disabled::placeholder{color:var(--input-placeholder)}.lib-input input.invalid,.lib-input input.invalid:hover{border-color:var(--input-error-border-color)}.lib-input input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-input__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start;color:var(--light-black-color)}.lib-input__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-input .password-eye{position:absolute;right:16px;top:12px;cursor:pointer}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix", "value", "errors", "disabled", "touched", "dirty", "invalid", "pending", "readonly", "required", "name"], outputs: ["valueChange", "touchedChange", "maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "component", type: LibSvgViewerComponent, selector: "dd-lib-svg-viewer", inputs: ["path", "pack", "icon", "width", "height", "color", "containerClass", "fullSize", "colorRules"] }] }); }
+        ], viewQueries: [{ propertyName: "contentInput", first: true, predicate: ["input"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"lib-input\">\n  @if (label) {\n  <label [for]=\"id\" class=\"lib-input__title g-text-sm\">\n    {{ label }}\n    @if (required) {\n      <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n    }\n  </label>\n  }\n  <div class=\"pos-relative\">\n    <input\n      #input\n      (blur)=\"handleBlur()\"\n      (change)=\"handleChange()\"\n      (focus)=\"handleFocus()\"\n      (input)=\"handleInput($event)\"\n      (keyup.enter)=\"forceChange()\"\n      [showMaskTyped]=\"showMaskTyped\"\n      [dropSpecialCharacters]=\"dropSpecialCharacters\"\n      [shownMaskExpression]=\"shownMaskExpression\"\n      [mask]=\"mask\"\n      [validation]=\"validation\"\n      [prefix]=\"prefix\"\n      [suffix]=\"suffix\"\n      [(ngModel)]=\"value\"\n      [attr.autofocus]=\"autofocus\"\n      [attr.autocomplete]=\"autocomplete === undefined ? null : autocomplete\"\n      [attr.id]=\"id ? id : null\"\n      [attr.max]=\"max\"\n      [attr.min]=\"min\"\n      [attr.maxlength]=\"maxlength\"\n      [attr.minlength]=\"minlength\"\n      [attr.name]=\"name\"\n      [attr.placeholder]=\"placeholder\"\n      [attr.tabIndex]=\"tabIndex\"\n      [attr.type]=\"showPass ? 'text' : (type || 'text')\"\n      [class.focused]=\"focused\"\n      [class.invalid]=\"showError\"\n      [style.height]=\"height\"\n      [style.width]=\"width\"\n      [disabled]=\"disabled\"\n      [readOnly]=\"readOnly\"\n      class=\"text-input\" />\n    @if (type === 'password') {\n      <dd-lib-svg-viewer (click)=\"showPass = !showPass\" [pack]=\"'lib-svg'\" class=\"password-eye\" icon=\"{{ showPass ? 'eye' : 'eye-off' }}\"></dd-lib-svg-viewer>\n    }\n  </div>\n\n  @if (errorTexts.length && showError) {\n    @for (error of errorTexts; track error) {\n      <div class=\"lib-input__error\">{{ error }}</div>\n    }\n  }\n  @if (errorText && showSelfError && showError) {\n      <div class=\"lib-input__error\">{{ errorText }}</div>\n  }\n</div>\n", styles: [":host{display:block}.lib-input{position:relative}.lib-input input{width:100%;height:48px;padding:15px 16px;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative;color:var(--light-black-color)}.lib-input input:hover{border-color:var(--input-active-border-colort)}.lib-input input:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-input input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-input input:disabled::placeholder{color:var(--input-placeholder)}.lib-input input.invalid,.lib-input input.invalid:hover{border-color:var(--input-error-border-color)}.lib-input input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-input__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start;color:var(--light-black-color)}.lib-input__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute;white-space:nowrap}.lib-input .password-eye{position:absolute;right:16px;top:12px;cursor:pointer}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix", "value", "errors", "disabled", "touched", "dirty", "invalid", "pending", "readonly", "required", "name"], outputs: ["valueChange", "touchedChange", "maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "component", type: LibSvgViewerComponent, selector: "dd-lib-svg-viewer", inputs: ["path", "pack", "icon", "width", "height", "color", "containerClass", "fullSize", "colorRules"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LibInputComponent, decorators: [{
             type: Component,
@@ -3282,7 +3282,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                             useExisting: forwardRef(() => LibInputComponent),
                             multi: true,
                         },
-                    ], imports: [FormsModule, NgxMaskDirective, LibSvgIconComponent, LibSvgViewerComponent], template: "<div class=\"lib-input\">\n  @if (label) {\n  <label [for]=\"id\" class=\"lib-input__title g-text-sm\">\n    {{ label }}\n    @if (required) {\n      <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n    }\n  </label>\n  }\n  <div class=\"pos-relative\">\n    <input\n      #input\n      (blur)=\"handleBlur()\"\n      (change)=\"handleChange()\"\n      (focus)=\"handleFocus()\"\n      (input)=\"handleInput($event)\"\n      (keyup.enter)=\"forceChange()\"\n      [showMaskTyped]=\"showMaskTyped\"\n      [dropSpecialCharacters]=\"dropSpecialCharacters\"\n      [shownMaskExpression]=\"shownMaskExpression\"\n      [mask]=\"mask\"\n      [validation]=\"validation\"\n      [prefix]=\"prefix\"\n      [suffix]=\"suffix\"\n      [(ngModel)]=\"value\"\n      [attr.autofocus]=\"autofocus\"\n      [attr.autocomplete]=\"autocomplete === undefined ? null : autocomplete\"\n      [attr.id]=\"id ? id : null\"\n      [attr.max]=\"max\"\n      [attr.min]=\"min\"\n      [attr.maxlength]=\"maxlength\"\n      [attr.minlength]=\"minlength\"\n      [attr.name]=\"name\"\n      [attr.placeholder]=\"placeholder\"\n      [attr.tabIndex]=\"tabIndex\"\n      [attr.type]=\"showPass ? 'text' : (type || 'text')\"\n      [class.focused]=\"focused\"\n      [class.invalid]=\"showError\"\n      [style.height]=\"height\"\n      [style.width]=\"width\"\n      [disabled]=\"disabled\"\n      [readOnly]=\"readOnly\"\n      class=\"text-input\" />\n    @if (type === 'password') {\n      <dd-lib-svg-viewer (click)=\"showPass = !showPass\" [pack]=\"'lib-svg'\" class=\"password-eye\" icon=\"{{ showPass ? 'eye' : 'eye-off' }}\"></dd-lib-svg-viewer>\n    }\n  </div>\n\n  @if (errorTexts.length && showError) {\n    @for (error of errorTexts; track error) {\n      <div class=\"lib-input__error\">{{ error }}</div>\n    }\n  }\n  @if (errorText && showSelfError && showError) {\n      <div class=\"lib-input__error\">{{ errorText }}</div>\n  }\n</div>\n", styles: [":host{display:block}.lib-input{position:relative}.lib-input input{width:100%;height:48px;padding:15px 16px;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative;color:var(--light-black-color)}.lib-input input:hover{border-color:var(--input-active-border-colort)}.lib-input input:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-input input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-input input:disabled::placeholder{color:var(--input-placeholder)}.lib-input input.invalid,.lib-input input.invalid:hover{border-color:var(--input-error-border-color)}.lib-input input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-input__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start;color:var(--light-black-color)}.lib-input__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-input .password-eye{position:absolute;right:16px;top:12px;cursor:pointer}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}\n"] }]
+                    ], imports: [FormsModule, NgxMaskDirective, LibSvgIconComponent, LibSvgViewerComponent], template: "<div class=\"lib-input\">\n  @if (label) {\n  <label [for]=\"id\" class=\"lib-input__title g-text-sm\">\n    {{ label }}\n    @if (required) {\n      <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n    }\n  </label>\n  }\n  <div class=\"pos-relative\">\n    <input\n      #input\n      (blur)=\"handleBlur()\"\n      (change)=\"handleChange()\"\n      (focus)=\"handleFocus()\"\n      (input)=\"handleInput($event)\"\n      (keyup.enter)=\"forceChange()\"\n      [showMaskTyped]=\"showMaskTyped\"\n      [dropSpecialCharacters]=\"dropSpecialCharacters\"\n      [shownMaskExpression]=\"shownMaskExpression\"\n      [mask]=\"mask\"\n      [validation]=\"validation\"\n      [prefix]=\"prefix\"\n      [suffix]=\"suffix\"\n      [(ngModel)]=\"value\"\n      [attr.autofocus]=\"autofocus\"\n      [attr.autocomplete]=\"autocomplete === undefined ? null : autocomplete\"\n      [attr.id]=\"id ? id : null\"\n      [attr.max]=\"max\"\n      [attr.min]=\"min\"\n      [attr.maxlength]=\"maxlength\"\n      [attr.minlength]=\"minlength\"\n      [attr.name]=\"name\"\n      [attr.placeholder]=\"placeholder\"\n      [attr.tabIndex]=\"tabIndex\"\n      [attr.type]=\"showPass ? 'text' : (type || 'text')\"\n      [class.focused]=\"focused\"\n      [class.invalid]=\"showError\"\n      [style.height]=\"height\"\n      [style.width]=\"width\"\n      [disabled]=\"disabled\"\n      [readOnly]=\"readOnly\"\n      class=\"text-input\" />\n    @if (type === 'password') {\n      <dd-lib-svg-viewer (click)=\"showPass = !showPass\" [pack]=\"'lib-svg'\" class=\"password-eye\" icon=\"{{ showPass ? 'eye' : 'eye-off' }}\"></dd-lib-svg-viewer>\n    }\n  </div>\n\n  @if (errorTexts.length && showError) {\n    @for (error of errorTexts; track error) {\n      <div class=\"lib-input__error\">{{ error }}</div>\n    }\n  }\n  @if (errorText && showSelfError && showError) {\n      <div class=\"lib-input__error\">{{ errorText }}</div>\n  }\n</div>\n", styles: [":host{display:block}.lib-input{position:relative}.lib-input input{width:100%;height:48px;padding:15px 16px;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative;color:var(--light-black-color)}.lib-input input:hover{border-color:var(--input-active-border-colort)}.lib-input input:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-input input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-input input:disabled::placeholder{color:var(--input-placeholder)}.lib-input input.invalid,.lib-input input.invalid:hover{border-color:var(--input-error-border-color)}.lib-input input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-input__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start;color:var(--light-black-color)}.lib-input__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute;white-space:nowrap}.lib-input .password-eye{position:absolute;right:16px;top:12px;cursor:pointer}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }, { type: i0.ChangeDetectorRef }, { type: i1$4.ControlContainer, decorators: [{
                     type: Optional
                 }, {
@@ -3504,7 +3504,7 @@ class LibSearchInputComponent extends LibCommonInputTextComponent {
                 useExisting: forwardRef(() => LibSearchInputComponent),
                 multi: true,
             },
-        ], 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      (focus)=\"handleFocus()\"\r\n      (blur)=\"handleBlur()\"\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      [class.invalid]=\"showError\"\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 (errorText && showSelfError && showError) {\r\n    <div class=\"lib-search-input__error\">{{ errorText }}</div>\r\n  }\r\n\r\n  @if (data?.length) {\r\n    <div class=\"search-dropdown\" [class.top]=\"side === 'top'\" [ngStyle]=\"dropdownStyle\">\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      }\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  </div>\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 input.invalid,.lib-search-input input.invalid:hover{border-color:var(--input-error-border-color)}.lib-search-input input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.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);min-height:40px;align-items:center;align-content:center}.lib-search-input .search-result__desc{min-height:50px;align-items:center;align-content:center;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}.lib-search-input .search-dropdown{position:absolute;display:block;top:76px;z-index:100;width:100%;max-height:400px;overflow:auto;border-radius:24px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color);min-height:100%;padding:0 24px}.lib-search-input__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$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: HighlightPipe, name: "highlight" }, { kind: "pipe", type: SafePipe, name: "safe" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], 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      (focus)=\"handleFocus()\"\r\n      (blur)=\"handleBlur()\"\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      [class.invalid]=\"showError\"\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 (errorText && showSelfError && showError) {\r\n    <div class=\"lib-search-input__error\">{{ errorText }}</div>\r\n  }\r\n\r\n  @if (data?.length) {\r\n    <div class=\"search-dropdown\" [class.top]=\"side === 'top'\" [ngStyle]=\"dropdownStyle\">\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      }\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  </div>\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 input.invalid,.lib-search-input input.invalid:hover{border-color:var(--input-error-border-color)}.lib-search-input input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.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);min-height:40px;align-items:center;align-content:center}.lib-search-input .search-result__desc{min-height:50px;align-items:center;align-content:center;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}.lib-search-input .search-dropdown{position:absolute;display:block;top:76px;z-index:100;width:100%;max-height:400px;overflow:auto;border-radius:24px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color);min-height:100%;padding:0 24px}.lib-search-input__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: HighlightPipe, name: "highlight" }, { kind: "pipe", type: SafePipe, name: "safe" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LibSearchInputComponent, decorators: [{
             type: Component,
@@ -3514,7 +3514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                             useExisting: forwardRef(() => LibSearchInputComponent),
                             multi: true,
                         },
-                    ], 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      (focus)=\"handleFocus()\"\r\n      (blur)=\"handleBlur()\"\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      [class.invalid]=\"showError\"\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 (errorText && showSelfError && showError) {\r\n    <div class=\"lib-search-input__error\">{{ errorText }}</div>\r\n  }\r\n\r\n  @if (data?.length) {\r\n    <div class=\"search-dropdown\" [class.top]=\"side === 'top'\" [ngStyle]=\"dropdownStyle\">\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      }\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  </div>\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 input.invalid,.lib-search-input input.invalid:hover{border-color:var(--input-error-border-color)}.lib-search-input input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.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);min-height:40px;align-items:center;align-content:center}.lib-search-input .search-result__desc{min-height:50px;align-items:center;align-content:center;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}.lib-search-input .search-dropdown{position:absolute;display:block;top:76px;z-index:100;width:100%;max-height:400px;overflow:auto;border-radius:24px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color);min-height:100%;padding:0 24px}.lib-search-input__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}\n"] }]
+                    ], 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      (focus)=\"handleFocus()\"\r\n      (blur)=\"handleBlur()\"\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      [class.invalid]=\"showError\"\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 (errorText && showSelfError && showError) {\r\n    <div class=\"lib-search-input__error\">{{ errorText }}</div>\r\n  }\r\n\r\n  @if (data?.length) {\r\n    <div class=\"search-dropdown\" [class.top]=\"side === 'top'\" [ngStyle]=\"dropdownStyle\">\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      }\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  </div>\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 input.invalid,.lib-search-input input.invalid:hover{border-color:var(--input-error-border-color)}.lib-search-input input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.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);min-height:40px;align-items:center;align-content:center}.lib-search-input .search-result__desc{min-height:50px;align-items:center;align-content:center;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}.lib-search-input .search-dropdown{position:absolute;display:block;top:76px;z-index:100;width:100%;max-height:400px;overflow:auto;border-radius:24px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color);min-height:100%;padding:0 24px}.lib-search-input__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$4.ControlContainer, decorators: [{
                     type: Optional
                 }, {
@@ -4175,7 +4175,7 @@ class LibSelectComponent extends LibCommonInputTextComponent {
                 useExisting: forwardRef(() => LibSelectComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "selectEl", first: true, predicate: ["select"], descendants: true, read: ElementRef, static: true }, { propertyName: "searchInputEl", first: true, predicate: ["searchInputEl"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"lib-select\" id=\"lib-select-{{ selectId }}\" [destroyedItem]=\"isShownList\" ddFixedPosition>\n  @if (label) {\n    <label [for]=\"selectId\" class=\"lib-select__title\">\n      {{ label }}\n      @if (required) {\n        <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n      }\n    </label>\n  }\n\n  <div class=\"pos-relative\" data-child=\"input\">\n    <input\n      #select\n      (change)=\"handleChange()\"\n      (click)=\"notifyFocusEvent()\"\n      (input)=\"handleInput($event)\"\n      (blur)=\"handleBlur()\"\n      (focus)=\"handleFocus()\"\n      [attr.id]=\"selectId\"\n      [attr.placeholder]=\"(multiCountValue || searchValue) ? '' : placeholder\"\n      [attr.tabIndex]=\"tabIndex\"\n      [attr.type]=\"'text'\"\n      [class.focused]=\"focused\"\n      [class.invalid]=\"showError\"\n      [disabled]=\"disabled\"\n      [readOnly]=\"true\"\n      [(ngModel)]=\"inputValue\"\n      [title]=\"inputValue || ''\"\n      class=\"text-select select-block\"/>\n\n    @if (!initialized && writtenValue) {\n      <div class=\"lib-select__value-loader\">\n        <dd-lib-loader></dd-lib-loader>\n      </div>\n    }\n\n    @if (multiCountValue && checkedItems().length > 0) {\n      <div class=\"selected-items-container\" id=\"selected-{{selectId}}\">\n        <dd-lib-horizontal-scroll>\n          @for (item of checkedItems(); track getItemTrackBy(item, $index)) {\n            <div class=\"selected-items__item\">\n              @if (stringArray()) {\n                <div [title]=\"item\" [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n                     class=\"selected-items__item-title\"></div>\n              }\n              @if (keyTitle && !stringArray()) {\n                <div [title]=\"item[keyTitle]\"\n                     [innerHTML]=\"item[keyTitle] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n                     class=\"selected-items__item-title\"></div>\n              }\n              @if (keyDesc && !stringArray()) {\n                <div\n                  [innerHTML]=\"item[keyDesc] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n                  [title]=\"item[keyDesc]\"\n                  class=\"selected-items__item-desc\"></div>\n              }\n              <dd-lib-svg-icon id=\"selected-clear-{{selectId}}-{{$index}}\" icon=\"clear\" class=\"cup\"\n                               (click)=\"selectItem(item);deleteMultiItem.emit(item)\"></dd-lib-svg-icon>\n            </div>\n          }\n        </dd-lib-horizontal-scroll>\n      </div>\n    }\n\n    @if (!checkedItem && !multiCountValue) {\n      <dd-lib-svg-icon\n        (click)=\"notifyFocusEvent()\"\n        [class.black-svg]=\"isShownList\"\n        [class.disabled]=\"disabled\"\n        [class.gray-svg]=\"!isShownList\"\n        [class.up]=\"isShownList\"\n        id=\"chevron-{{ selectId }}\" class=\"chevron\" icon=\"down_chevron\"></dd-lib-svg-icon>\n    } @else if (clearable && !searchValue && !multi) {\n      <dd-lib-svg-icon\n        (click)=\"onClear(checkedItem)\"\n        class=\"clear\"\n        id=\"clear-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\n    }\n  </div>\n\n  @if (errorTexts.length && showError) {\n    @for (error of errorTexts; track error) {\n      <div class=\"lib-select__error\">{{ error }}</div>\n    }\n  }\n  @if (errorText && showSelfError && showError) {\n    <div class=\"lib-select__error\">{{ errorText }}</div>\n  }\n\n  @if (isShownList) {\n    <div\n      id=\"dropdown-{{selectId}}\"\n      [style.max-height]=\"searchOn ? '343px' : '300px'\"\n      data-child=\"list\"\n      (ddClickOutside)=\"notifyFocusEvent();fullBlur.emit($event)\"\n      [elements]=\"getClickOutsideElements()\"\n      ddListKeyboardNavigation\n      class=\"select-list-wrapper\">\n\n      @if (!initialized) {\n        <div class=\"info-container\">\n          <div class=\"d-flex gap-12 align-center\">\n            <div class=\"g-text font-medium no-wrap-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445</div>\n            <dd-lib-loader></dd-lib-loader>\n          </div>\n        </div>\n      } @else {\n        @if (!_data()?.length) {\n          <div class=\"info-container\">\n            <div class=\"g-text font-medium no-wrap-text\">\n              {{ noDataError }}\n            </div>\n          </div>\n        }\n\n        @if (_data()?.length) {\n          @if (multi || (searchOn && _data()!.length > 5)) {\n            <div\n              class=\"d-flex full-width align-center {{(_data()!.length > 5 && searchOn) ? 'justify-between' : 'justify-end'}} head-wrapper\">\n              @if (_data()!.length > 5 && searchOn) {\n                <div class=\"search-block\">\n                  <dd-lib-svg-icon class=\"search-icon\" id=\"chevron-{{ selectId }}\" icon=\"search\"></dd-lib-svg-icon>\n                  <input class=\"search-block__input\" #searchInputEl [attr.name]=\"name\"\n                         [readOnly]=\"readOnly\"\n                         (input)=\"searchInput()\"\n                         [placeholder]=\"searchPlaceholder\"\n                         (blur)=\"handleBlur()\"\n                         (focus)=\"handleFocus()\"\n                         [(ngModel)]=\"searchValue\" type=\"text\">\n                  <dd-lib-svg-icon\n                    [style.display]=\"searchValue ? 'block' : 'none'\"\n                    class=\"cup\"\n                    (click)=\"searchValue=''\"\n                    id=\"chevron-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\n                </div>\n              }\n              @if (multi) {\n                <div class=\"mr-16\">\n                  <dd-lib-svg-viewer\n                    (click)=\"selectAll()\"\n                    class=\"checked cup\"\n                    pack=\"lib-svg\"\n                    id=\"chevron-{{ selectId }}\" [color]=\"!allSelected ? 'gray': '#07B700'\"\n                    icon=\"check-green\"></dd-lib-svg-viewer>\n                </div>\n              }\n            </div>\n          }\n\n\n          @if ((_data() | filterByKey: filterList.bind(this))?.length === 0) {\n            <div class=\"info-container\">\n              <div class=\"g-text font-medium no-wrap-text\">\n                \u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E\n              </div>\n            </div>\n          }\n\n          @if (virtualScroll) {\n            <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\"\n                                         [style.height]=\"(_data()?.length || 0) * itemSize + 'px'\">\n              <div\n                *cdkVirtualFor=\"let item of _data() | filterByKey: filterList.bind(this); trackBy: trackByFn.bind(this)\">\n                <ng-container [ngTemplateOutlet]=\"itemsList\" [ngTemplateOutletContext]=\"{items: [item]}\"></ng-container>\n              </div>\n            </cdk-virtual-scroll-viewport>\n          } @else {\n            <ng-container [ngTemplateOutlet]=\"itemsList\"\n                          [ngTemplateOutletContext]=\"{items: _data() | filterByKey: filterList.bind(this)}\"></ng-container>\n          }\n        }\n      }\n    </div>\n  }\n</div>\n\n<ng-template #rowItem let-item=\"item\" let-index=\"index\">\n  <div ddSelectableItem [dragItem]=\"true\" [ddTooltip]=\"item.tooltip ? item.tooltip : ''\" [position]=\"tooltipPosition\"\n       (click)=\"selectItem(item)\"\n       (itemSelected)=\"selectItem(item)\"\n       [class.s-item-active]=\"checkSelected(item) && !item.disabled\"\n       [class.s-item-disabled]=\"item.disabled\"\n       class=\"select-data\">\n    @if (stringArray()) {\n      <div [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n           class=\"select-data__title\"></div>\n    }\n    @if (keyTitle && !stringArray()) {\n      <div\n        [innerHTML]=\"item[keyTitle] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n        class=\"select-data__title\"></div>\n    }\n    @if (keyDesc && !stringArray()) {\n      <div\n        [innerHTML]=\"item[keyDesc] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n        [title]=\"item[keyDesc]\"\n        class=\"select-data__desc\"></div>\n    }\n    @if (checkSelected(item)) {\n      <dd-lib-svg-icon\n        class=\"checked\"\n        id=\"chevron-{{ selectId }}\" icon=\"check_green\"></dd-lib-svg-icon>\n    }\n  </div>\n</ng-template>\n\n<ng-template #itemsList let-items=\"items\">\n  @for (item of items; track trackByFn($index, item)) {\n    @if (isGroup(item)) {\n      <div class=\"group-header\" [class.select-all-enabled]=\"selectAllInGroup\"\n           (click)=\"selectAllInGroup ? handleGroupClick(item) : null\">\n        <div class=\"group-title\">{{ getGroupTitle(item) }}</div>\n        @if (selectAllInGroup && isGroupSelected(item)) {\n          <dd-lib-svg-icon\n            [class.checked]=\"isGroupSelected(item)\"\n            icon=\"check_green\"></dd-lib-svg-icon>\n        }\n      </div>\n      <div class=\"group-items\">\n        @for (child of item[keyGroupChildren] | filterByKey: filterList.bind(this); track trackByFn($index, child)) {\n          <ng-container [ngTemplateOutlet]=\"rowItem\"\n                        [ngTemplateOutletContext]=\"{item: child, index: $index}\"></ng-container>\n        }\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"rowItem\" [ngTemplateOutletContext]=\"{item: item, index: $index}\"></ng-container>\n    }\n  }\n</ng-template>\n", styles: [".lib-select{position:relative}.lib-select .select-block{width:100%;height:48px;padding:15px 28px 15px 16px;overflow:hidden;text-overflow:ellipsis;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative}.lib-select .select-block:hover{border-color:var(--input-active-border-colort)}.lib-select .select-block:hover~.selected-items-container .selected-items__item{background:var(--light-green-color);color:var(--font-light-black-color)}.lib-select .select-block:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-select .select-block:focus~.selected-items-container .selected-items__item{background:var(--light-green-color);color:var(--font-light-black-color)}.lib-select .select-block:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-select .select-block:disabled::placeholder{color:var(--input-placeholder)}.lib-select .select-block:disabled~.selected-items-container .selected-items__item{background:var(--gray-blue-300);color:var(--second-gray-color)}.lib-select .select-block.invalid,.lib-select .select-block.invalid:hover{border-color:var(--input-error-border-color)}.lib-select .select-block.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-select .select-block:invalid~.selected-items-container .selected-items__item{background:var(--red-light-color);color:var(--font-light-black-color)}.lib-select .multi-count{position:absolute;top:10px;right:42px;white-space:nowrap}.lib-select .clear{cursor:pointer;position:absolute;right:8px;top:12px}.lib-select .chevron{cursor:pointer;position:absolute;right:16px;top:10px}.lib-select .chevron.up{transform:rotate(180deg)}.lib-select__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start;color:var(--light-black-color)}.lib-select__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-select .select-list-wrapper{position:absolute;display:block;z-index:100;width:100%;max-height:300px;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color)}.lib-select .select-list-wrapper cdk-virtual-scroll-viewport{max-height:300px}.lib-select .select-list-wrapper.top{bottom:50px;top:unset}.lib-select .select-list-wrapper .select-data{padding:12px 42px 12px 16px;cursor:pointer;position:relative;min-height:40px}.lib-select .select-list-wrapper .select-data__desc{font-size:14px;font-weight:400;line-height:24px;text-overflow:ellipsis;text-wrap:nowrap;padding-top:2px;overflow:hidden;color:var(--second-gray-color)}.lib-select .select-list-wrapper .select-data.key-down-active,.lib-select .select-list-wrapper .select-data:hover,.lib-select .select-list-wrapper .select-data.s-item-active{background:var(--select-act-hov-bgc)}.lib-select .select-list-wrapper .select-data.s-item-active .checked{position:absolute;right:16px;top:10px}.lib-select .select-list-wrapper .select-data.s-item-disabled{cursor:auto;background:var(--disabled-bgc);color:var(--disabled-color)}.lib-select .select-list-wrapper .group-items{padding-left:16px}.lib-select .select-list-wrapper .group-items .select-data{margin-left:-16px;padding-left:32px}.lib-select .select-list-wrapper .select-no-data{padding:12px 42px 12px 16px;cursor:auto;position:relative;color:var(--disabled-color)}.lib-select .select-list-wrapper .info-container{padding:36px;display:flex;align-items:center;justify-content:center}.lib-select__value-loader{position:absolute;right:calc(50% - 12px);top:calc(50% - 12px)}.head-wrapper{display:flex;width:100%;align-items:center;border-bottom:1px solid var(--gray-bgc);min-height:40px}.search-block{position:relative;padding:12px;z-index:1;display:flex;gap:4px;flex:1;align-items:center}.search-block__input{border:none;background:transparent;width:100%;padding-left:40px}.search-block .search-icon{position:absolute;left:20px;top:0;bottom:0}.data-loader{position:absolute;right:0;left:0;bottom:12px}.selected-items-container{overflow:hidden;border-radius:8px;top:0;bottom:0;position:absolute;max-width:calc(100% - 60px);left:6px;margin:8px;align-items:center}.selected-items-container .selected-items__item{background:var(--blue-card);color:var(--font-light-black-color);padding:4px;border-radius:8px;display:flex;gap:4px;align-items:center;max-width:170px;overflow:hidden}.selected-items-container .selected-items__item:hover{background:var(--light-green-color);color:var(--font-light-black-color)}.selected-items-container .selected-items__item-title{overflow:hidden;white-space:nowrap;max-width:150px;text-overflow:ellipsis}.group-header{height:48px;padding:8px 16px;font-weight:600;color:var(--font-light-black-color);border-bottom:1px solid var(--gray-bgc);display:flex;justify-content:space-between;align-items:center}.group-header.select-all-enabled{cursor:pointer}.group-header.select-all-enabled:hover{background-color:var(--gray-color-300)}.group-title{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[ddClickOutside]", inputs: ["elements", "ignoreOnDrag"], outputs: ["ddClickOutside"] }, { kind: "component", type: LibLoaderComponent, selector: "dd-lib-loader", inputs: ["color", "size"] }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$3.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$3.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$3.ɵɵCdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: TooltipDirective, selector: "[ddTooltip]", inputs: ["ddTooltip", "withClick", "position"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ListKeyboardNavigationDirective, selector: "[ddListKeyboardNavigation]" }, { kind: "directive", type: SelectableItemDirective, selector: "[ddSelectableItem]", inputs: ["dragItem"], outputs: ["itemSelected"] }, { kind: "directive", type: FixedPositionDirective, selector: "[ddFixedPosition]", inputs: ["childName1", "childName2", "destroyedItem"] }, { kind: "component", type: LibHorizontalScrollComponent, selector: "dd-lib-horizontal-scroll" }, { kind: "component", type: LibSvgViewerComponent, selector: "dd-lib-svg-viewer", inputs: ["path", "pack", "icon", "width", "height", "color", "containerClass", "fullSize", "colorRules"] }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: SafePipe, name: "safe" }, { kind: "pipe", type: FilterByKeyPipe, name: "filterByKey" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "selectEl", first: true, predicate: ["select"], descendants: true, read: ElementRef, static: true }, { propertyName: "searchInputEl", first: true, predicate: ["searchInputEl"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"lib-select\" id=\"lib-select-{{ selectId }}\" [destroyedItem]=\"isShownList\" ddFixedPosition>\n  @if (label) {\n    <label [for]=\"selectId\" class=\"lib-select__title\">\n      {{ label }}\n      @if (required) {\n        <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n      }\n    </label>\n  }\n\n  <div class=\"pos-relative\" data-child=\"input\">\n    <input\n      #select\n      (change)=\"handleChange()\"\n      (click)=\"notifyFocusEvent()\"\n      (input)=\"handleInput($event)\"\n      (blur)=\"handleBlur()\"\n      (focus)=\"handleFocus()\"\n      [attr.id]=\"selectId\"\n      [attr.placeholder]=\"(multiCountValue || searchValue) ? '' : placeholder\"\n      [attr.tabIndex]=\"tabIndex\"\n      [attr.type]=\"'text'\"\n      [class.focused]=\"focused\"\n      [class.invalid]=\"showError\"\n      [disabled]=\"disabled\"\n      [readOnly]=\"true\"\n      [(ngModel)]=\"inputValue\"\n      [title]=\"inputValue || ''\"\n      class=\"text-select select-block\"/>\n\n    @if (!initialized && writtenValue) {\n      <div class=\"lib-select__value-loader\">\n        <dd-lib-loader></dd-lib-loader>\n      </div>\n    }\n\n    @if (multiCountValue && checkedItems().length > 0) {\n      <div class=\"selected-items-container\" id=\"selected-{{selectId}}\">\n        <dd-lib-horizontal-scroll>\n          @for (item of checkedItems(); track getItemTrackBy(item, $index)) {\n            <div class=\"selected-items__item\">\n              @if (stringArray()) {\n                <div [title]=\"item\" [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n                     class=\"selected-items__item-title\"></div>\n              }\n              @if (keyTitle && !stringArray()) {\n                <div [title]=\"item[keyTitle]\"\n                     [innerHTML]=\"item[keyTitle] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n                     class=\"selected-items__item-title\"></div>\n              }\n              @if (keyDesc && !stringArray()) {\n                <div\n                  [innerHTML]=\"item[keyDesc] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n                  [title]=\"item[keyDesc]\"\n                  class=\"selected-items__item-desc\"></div>\n              }\n              <dd-lib-svg-icon id=\"selected-clear-{{selectId}}-{{$index}}\" icon=\"clear\" class=\"cup\"\n                               (click)=\"selectItem(item);deleteMultiItem.emit(item)\"></dd-lib-svg-icon>\n            </div>\n          }\n        </dd-lib-horizontal-scroll>\n      </div>\n    }\n\n    @if (!checkedItem && !multiCountValue) {\n      <dd-lib-svg-icon\n        (click)=\"notifyFocusEvent()\"\n        [class.black-svg]=\"isShownList\"\n        [class.disabled]=\"disabled\"\n        [class.gray-svg]=\"!isShownList\"\n        [class.up]=\"isShownList\"\n        id=\"chevron-{{ selectId }}\" class=\"chevron\" icon=\"down_chevron\"></dd-lib-svg-icon>\n    } @else if (clearable && !searchValue && !multi) {\n      <dd-lib-svg-icon\n        (click)=\"onClear(checkedItem)\"\n        class=\"clear\"\n        id=\"clear-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\n    }\n  </div>\n\n  @if (errorTexts.length && showError) {\n    @for (error of errorTexts; track error) {\n      <div class=\"lib-select__error\">{{ error }}</div>\n    }\n  }\n  @if (errorText && showSelfError && showError) {\n    <div class=\"lib-select__error\">{{ errorText }}</div>\n  }\n\n  @if (isShownList) {\n    <div\n      id=\"dropdown-{{selectId}}\"\n      [style.max-height]=\"searchOn ? '343px' : '300px'\"\n      data-child=\"list\"\n      (ddClickOutside)=\"notifyFocusEvent();fullBlur.emit($event)\"\n      [elements]=\"getClickOutsideElements()\"\n      ddListKeyboardNavigation\n      class=\"select-list-wrapper\">\n\n      @if (!initialized) {\n        <div class=\"info-container\">\n          <div class=\"d-flex gap-12 align-center\">\n            <div class=\"g-text font-medium no-wrap-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445</div>\n            <dd-lib-loader></dd-lib-loader>\n          </div>\n        </div>\n      } @else {\n        @if (!_data()?.length) {\n          <div class=\"info-container\">\n            <div class=\"g-text font-medium no-wrap-text\">\n              {{ noDataError }}\n            </div>\n          </div>\n        }\n\n        @if (_data()?.length) {\n          @if (multi || (searchOn && _data()!.length > 5)) {\n            <div\n              class=\"d-flex full-width align-center {{(_data()!.length > 5 && searchOn) ? 'justify-between' : 'justify-end'}} head-wrapper\">\n              @if (_data()!.length > 5 && searchOn) {\n                <div class=\"search-block\">\n                  <dd-lib-svg-icon class=\"search-icon\" id=\"chevron-{{ selectId }}\" icon=\"search\"></dd-lib-svg-icon>\n                  <input class=\"search-block__input\" #searchInputEl [attr.name]=\"name\"\n                         [readOnly]=\"readOnly\"\n                         (input)=\"searchInput()\"\n                         [placeholder]=\"searchPlaceholder\"\n                         (blur)=\"handleBlur()\"\n                         (focus)=\"handleFocus()\"\n                         [(ngModel)]=\"searchValue\" type=\"text\">\n                  <dd-lib-svg-icon\n                    [style.display]=\"searchValue ? 'block' : 'none'\"\n                    class=\"cup\"\n                    (click)=\"searchValue=''\"\n                    id=\"chevron-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\n                </div>\n              }\n              @if (multi) {\n                <div class=\"mr-16\">\n                  <dd-lib-svg-viewer\n                    (click)=\"selectAll()\"\n                    class=\"checked cup\"\n                    pack=\"lib-svg\"\n                    id=\"chevron-{{ selectId }}\" [color]=\"!allSelected ? 'gray': '#07B700'\"\n                    icon=\"check-green\"></dd-lib-svg-viewer>\n                </div>\n              }\n            </div>\n          }\n\n\n          @if ((_data() | filterByKey: filterList.bind(this))?.length === 0) {\n            <div class=\"info-container\">\n              <div class=\"g-text font-medium no-wrap-text\">\n                \u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E\n              </div>\n            </div>\n          }\n\n          @if (virtualScroll) {\n            <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\"\n                                         [style.height]=\"(_data()?.length || 0) * itemSize + 'px'\">\n              <div\n                *cdkVirtualFor=\"let item of _data() | filterByKey: filterList.bind(this); trackBy: trackByFn.bind(this)\">\n                <ng-container [ngTemplateOutlet]=\"itemsList\" [ngTemplateOutletContext]=\"{items: [item]}\"></ng-container>\n              </div>\n            </cdk-virtual-scroll-viewport>\n          } @else {\n            <ng-container [ngTemplateOutlet]=\"itemsList\"\n                          [ngTemplateOutletContext]=\"{items: _data() | filterByKey: filterList.bind(this)}\"></ng-container>\n          }\n        }\n      }\n    </div>\n  }\n</div>\n\n<ng-template #rowItem let-item=\"item\" let-index=\"index\">\n  <div ddSelectableItem [dragItem]=\"true\" [ddTooltip]=\"item.tooltip ? item.tooltip : ''\" [position]=\"tooltipPosition\"\n       (click)=\"selectItem(item)\"\n       (itemSelected)=\"selectItem(item)\"\n       [class.s-item-active]=\"checkSelected(item) && !item.disabled\"\n       [class.s-item-disabled]=\"item.disabled\"\n       class=\"select-data\">\n    @if (stringArray()) {\n      <div [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n           class=\"select-data__title\"></div>\n    }\n    @if (keyTitle && !stringArray()) {\n      <div\n        [innerHTML]=\"item[keyTitle] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n        class=\"select-data__title\"></div>\n    }\n    @if (keyDesc && !stringArray()) {\n      <div\n        [innerHTML]=\"item[keyDesc] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n        [title]=\"item[keyDesc]\"\n        class=\"select-data__desc\"></div>\n    }\n    @if (checkSelected(item)) {\n      <dd-lib-svg-icon\n        class=\"checked\"\n        id=\"chevron-{{ selectId }}\" icon=\"check_green\"></dd-lib-svg-icon>\n    }\n  </div>\n</ng-template>\n\n<ng-template #itemsList let-items=\"items\">\n  @for (item of items; track trackByFn($index, item)) {\n    @if (isGroup(item)) {\n      <div class=\"group-header\" [class.select-all-enabled]=\"selectAllInGroup\"\n           (click)=\"selectAllInGroup ? handleGroupClick(item) : null\">\n        <div class=\"group-title\">{{ getGroupTitle(item) }}</div>\n        @if (selectAllInGroup && isGroupSelected(item)) {\n          <dd-lib-svg-icon\n            [class.checked]=\"isGroupSelected(item)\"\n            icon=\"check_green\"></dd-lib-svg-icon>\n        }\n      </div>\n      <div class=\"group-items\">\n        @for (child of item[keyGroupChildren] | filterByKey: filterList.bind(this); track trackByFn($index, child)) {\n          <ng-container [ngTemplateOutlet]=\"rowItem\"\n                        [ngTemplateOutletContext]=\"{item: child, index: $index}\"></ng-container>\n        }\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"rowItem\" [ngTemplateOutletContext]=\"{item: item, index: $index}\"></ng-container>\n    }\n  }\n</ng-template>\n", styles: [".lib-select{position:relative}.lib-select .select-block{width:100%;height:48px;padding:15px 28px 15px 16px;overflow:hidden;text-overflow:ellipsis;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative}.lib-select .select-block:hover{border-color:var(--input-active-border-colort)}.lib-select .select-block:hover~.selected-items-container .selected-items__item{background:var(--light-green-color);color:var(--font-light-black-color)}.lib-select .select-block:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-select .select-block:focus~.selected-items-container .selected-items__item{background:var(--light-green-color);color:var(--font-light-black-color)}.lib-select .select-block:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-select .select-block:disabled::placeholder{color:var(--input-placeholder)}.lib-select .select-block:disabled~.selected-items-container .selected-items__item{background:var(--gray-blue-300);color:var(--second-gray-color)}.lib-select .select-block.invalid,.lib-select .select-block.invalid:hover{border-color:var(--input-error-border-color)}.lib-select .select-block.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-select .select-block:invalid~.selected-items-container .selected-items__item{background:var(--red-light-color);color:var(--font-light-black-color)}.lib-select .multi-count{position:absolute;top:10px;right:42px;white-space:nowrap}.lib-select .clear{cursor:pointer;position:absolute;right:8px;top:12px}.lib-select .chevron{cursor:pointer;position:absolute;right:16px;top:10px}.lib-select .chevron.up{transform:rotate(180deg)}.lib-select__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start;color:var(--light-black-color)}.lib-select__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute;white-space:nowrap}.lib-select .select-list-wrapper{position:absolute;display:block;z-index:100;width:100%;max-height:300px;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color)}.lib-select .select-list-wrapper cdk-virtual-scroll-viewport{max-height:300px}.lib-select .select-list-wrapper.top{bottom:50px;top:unset}.lib-select .select-list-wrapper .select-data{padding:12px 42px 12px 16px;cursor:pointer;position:relative;min-height:40px}.lib-select .select-list-wrapper .select-data__desc{font-size:14px;font-weight:400;line-height:24px;text-overflow:ellipsis;text-wrap:nowrap;padding-top:2px;overflow:hidden;color:var(--second-gray-color)}.lib-select .select-list-wrapper .select-data.key-down-active,.lib-select .select-list-wrapper .select-data:hover,.lib-select .select-list-wrapper .select-data.s-item-active{background:var(--select-act-hov-bgc)}.lib-select .select-list-wrapper .select-data.s-item-active .checked{position:absolute;right:16px;top:10px}.lib-select .select-list-wrapper .select-data.s-item-disabled{cursor:auto;background:var(--disabled-bgc);color:var(--disabled-color)}.lib-select .select-list-wrapper .group-items{padding-left:16px}.lib-select .select-list-wrapper .group-items .select-data{margin-left:-16px;padding-left:32px}.lib-select .select-list-wrapper .select-no-data{padding:12px 42px 12px 16px;cursor:auto;position:relative;color:var(--disabled-color)}.lib-select .select-list-wrapper .info-container{padding:36px;display:flex;align-items:center;justify-content:center}.lib-select__value-loader{position:absolute;right:calc(50% - 12px);top:calc(50% - 12px)}.head-wrapper{display:flex;width:100%;align-items:center;border-bottom:1px solid var(--gray-bgc);min-height:40px}.search-block{position:relative;padding:12px;z-index:1;display:flex;gap:4px;flex:1;align-items:center}.search-block__input{border:none;background:transparent;width:100%;padding-left:40px}.search-block .search-icon{position:absolute;left:20px;top:0;bottom:0}.data-loader{position:absolute;right:0;left:0;bottom:12px}.selected-items-container{overflow:hidden;border-radius:8px;top:0;bottom:0;position:absolute;max-width:calc(100% - 60px);left:6px;margin:8px;align-items:center}.selected-items-container .selected-items__item{background:var(--blue-card);color:var(--font-light-black-color);padding:4px;border-radius:8px;display:flex;gap:4px;align-items:center;max-width:170px;overflow:hidden}.selected-items-container .selected-items__item:hover{background:var(--light-green-color);color:var(--font-light-black-color)}.selected-items-container .selected-items__item-title{overflow:hidden;white-space:nowrap;max-width:150px;text-overflow:ellipsis}.group-header{height:48px;padding:8px 16px;font-weight:600;color:var(--font-light-black-color);border-bottom:1px solid var(--gray-bgc);display:flex;justify-content:space-between;align-items:center}.group-header.select-all-enabled{cursor:pointer}.group-header.select-all-enabled:hover{background-color:var(--gray-color-300)}.group-title{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[ddClickOutside]", inputs: ["elements", "ignoreOnDrag"], outputs: ["ddClickOutside"] }, { kind: "component", type: LibLoaderComponent, selector: "dd-lib-loader", inputs: ["color", "size"] }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$3.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$3.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$3.ɵɵCdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: TooltipDirective, selector: "[ddTooltip]", inputs: ["ddTooltip", "withClick", "position"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ListKeyboardNavigationDirective, selector: "[ddListKeyboardNavigation]" }, { kind: "directive", type: SelectableItemDirective, selector: "[ddSelectableItem]", inputs: ["dragItem"], outputs: ["itemSelected"] }, { kind: "directive", type: FixedPositionDirective, selector: "[ddFixedPosition]", inputs: ["childName1", "childName2", "destroyedItem"] }, { kind: "component", type: LibHorizontalScrollComponent, selector: "dd-lib-horizontal-scroll" }, { kind: "component", type: LibSvgViewerComponent, selector: "dd-lib-svg-viewer", inputs: ["path", "pack", "icon", "width", "height", "color", "containerClass", "fullSize", "colorRules"] }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: SafePipe, name: "safe" }, { kind: "pipe", type: FilterByKeyPipe, name: "filterByKey" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LibSelectComponent, decorators: [{
             type: Component,
@@ -4192,7 +4192,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                             useExisting: forwardRef(() => LibSelectComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lib-select\" id=\"lib-select-{{ selectId }}\" [destroyedItem]=\"isShownList\" ddFixedPosition>\n  @if (label) {\n    <label [for]=\"selectId\" class=\"lib-select__title\">\n      {{ label }}\n      @if (required) {\n        <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n      }\n    </label>\n  }\n\n  <div class=\"pos-relative\" data-child=\"input\">\n    <input\n      #select\n      (change)=\"handleChange()\"\n      (click)=\"notifyFocusEvent()\"\n      (input)=\"handleInput($event)\"\n      (blur)=\"handleBlur()\"\n      (focus)=\"handleFocus()\"\n      [attr.id]=\"selectId\"\n      [attr.placeholder]=\"(multiCountValue || searchValue) ? '' : placeholder\"\n      [attr.tabIndex]=\"tabIndex\"\n      [attr.type]=\"'text'\"\n      [class.focused]=\"focused\"\n      [class.invalid]=\"showError\"\n      [disabled]=\"disabled\"\n      [readOnly]=\"true\"\n      [(ngModel)]=\"inputValue\"\n      [title]=\"inputValue || ''\"\n      class=\"text-select select-block\"/>\n\n    @if (!initialized && writtenValue) {\n      <div class=\"lib-select__value-loader\">\n        <dd-lib-loader></dd-lib-loader>\n      </div>\n    }\n\n    @if (multiCountValue && checkedItems().length > 0) {\n      <div class=\"selected-items-container\" id=\"selected-{{selectId}}\">\n        <dd-lib-horizontal-scroll>\n          @for (item of checkedItems(); track getItemTrackBy(item, $index)) {\n            <div class=\"selected-items__item\">\n              @if (stringArray()) {\n                <div [title]=\"item\" [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n                     class=\"selected-items__item-title\"></div>\n              }\n              @if (keyTitle && !stringArray()) {\n                <div [title]=\"item[keyTitle]\"\n                     [innerHTML]=\"item[keyTitle] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n                     class=\"selected-items__item-title\"></div>\n              }\n              @if (keyDesc && !stringArray()) {\n                <div\n                  [innerHTML]=\"item[keyDesc] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n                  [title]=\"item[keyDesc]\"\n                  class=\"selected-items__item-desc\"></div>\n              }\n              <dd-lib-svg-icon id=\"selected-clear-{{selectId}}-{{$index}}\" icon=\"clear\" class=\"cup\"\n                               (click)=\"selectItem(item);deleteMultiItem.emit(item)\"></dd-lib-svg-icon>\n            </div>\n          }\n        </dd-lib-horizontal-scroll>\n      </div>\n    }\n\n    @if (!checkedItem && !multiCountValue) {\n      <dd-lib-svg-icon\n        (click)=\"notifyFocusEvent()\"\n        [class.black-svg]=\"isShownList\"\n        [class.disabled]=\"disabled\"\n        [class.gray-svg]=\"!isShownList\"\n        [class.up]=\"isShownList\"\n        id=\"chevron-{{ selectId }}\" class=\"chevron\" icon=\"down_chevron\"></dd-lib-svg-icon>\n    } @else if (clearable && !searchValue && !multi) {\n      <dd-lib-svg-icon\n        (click)=\"onClear(checkedItem)\"\n        class=\"clear\"\n        id=\"clear-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\n    }\n  </div>\n\n  @if (errorTexts.length && showError) {\n    @for (error of errorTexts; track error) {\n      <div class=\"lib-select__error\">{{ error }}</div>\n    }\n  }\n  @if (errorText && showSelfError && showError) {\n    <div class=\"lib-select__error\">{{ errorText }}</div>\n  }\n\n  @if (isShownList) {\n    <div\n      id=\"dropdown-{{selectId}}\"\n      [style.max-height]=\"searchOn ? '343px' : '300px'\"\n      data-child=\"list\"\n      (ddClickOutside)=\"notifyFocusEvent();fullBlur.emit($event)\"\n      [elements]=\"getClickOutsideElements()\"\n      ddListKeyboardNavigation\n      class=\"select-list-wrapper\">\n\n      @if (!initialized) {\n        <div class=\"info-container\">\n          <div class=\"d-flex gap-12 align-center\">\n            <div class=\"g-text font-medium no-wrap-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445</div>\n            <dd-lib-loader></dd-lib-loader>\n          </div>\n        </div>\n      } @else {\n        @if (!_data()?.length) {\n          <div class=\"info-container\">\n            <div class=\"g-text font-medium no-wrap-text\">\n              {{ noDataError }}\n            </div>\n          </div>\n        }\n\n        @if (_data()?.length) {\n          @if (multi || (searchOn && _data()!.length > 5)) {\n            <div\n              class=\"d-flex full-width align-center {{(_data()!.length > 5 && searchOn) ? 'justify-between' : 'justify-end'}} head-wrapper\">\n              @if (_data()!.length > 5 && searchOn) {\n                <div class=\"search-block\">\n                  <dd-lib-svg-icon class=\"search-icon\" id=\"chevron-{{ selectId }}\" icon=\"search\"></dd-lib-svg-icon>\n                  <input class=\"search-block__input\" #searchInputEl [attr.name]=\"name\"\n                         [readOnly]=\"readOnly\"\n                         (input)=\"searchInput()\"\n                         [placeholder]=\"searchPlaceholder\"\n                         (blur)=\"handleBlur()\"\n                         (focus)=\"handleFocus()\"\n                         [(ngModel)]=\"searchValue\" type=\"text\">\n                  <dd-lib-svg-icon\n                    [style.display]=\"searchValue ? 'block' : 'none'\"\n                    class=\"cup\"\n                    (click)=\"searchValue=''\"\n                    id=\"chevron-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\n                </div>\n              }\n              @if (multi) {\n                <div class=\"mr-16\">\n                  <dd-lib-svg-viewer\n                    (click)=\"selectAll()\"\n                    class=\"checked cup\"\n                    pack=\"lib-svg\"\n                    id=\"chevron-{{ selectId }}\" [color]=\"!allSelected ? 'gray': '#07B700'\"\n                    icon=\"check-green\"></dd-lib-svg-viewer>\n                </div>\n              }\n            </div>\n          }\n\n\n          @if ((_data() | filterByKey: filterList.bind(this))?.length === 0) {\n            <div class=\"info-container\">\n              <div class=\"g-text font-medium no-wrap-text\">\n                \u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E\n              </div>\n            </div>\n          }\n\n          @if (virtualScroll) {\n            <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\"\n                                         [style.height]=\"(_data()?.length || 0) * itemSize + 'px'\">\n              <div\n                *cdkVirtualFor=\"let item of _data() | filterByKey: filterList.bind(this); trackBy: trackByFn.bind(this)\">\n                <ng-container [ngTemplateOutlet]=\"itemsList\" [ngTemplateOutletContext]=\"{items: [item]}\"></ng-container>\n              </div>\n            </cdk-virtual-scroll-viewport>\n          } @else {\n            <ng-container [ngTemplateOutlet]=\"itemsList\"\n                          [ngTemplateOutletContext]=\"{items: _data() | filterByKey: filterList.bind(this)}\"></ng-container>\n          }\n        }\n      }\n    </div>\n  }\n</div>\n\n<ng-template #rowItem let-item=\"item\" let-index=\"index\">\n  <div ddSelectableItem [dragItem]=\"true\" [ddTooltip]=\"item.tooltip ? item.tooltip : ''\" [position]=\"tooltipPosition\"\n       (click)=\"selectItem(item)\"\n       (itemSelected)=\"selectItem(item)\"\n       [class.s-item-active]=\"checkSelected(item) && !item.disabled\"\n       [class.s-item-disabled]=\"item.disabled\"\n       class=\"select-data\">\n    @if (stringArray()) {\n      <div [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n           class=\"select-data__title\"></div>\n    }\n    @if (keyTitle && !stringArray()) {\n      <div\n        [innerHTML]=\"item[keyTitle] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n        class=\"select-data__title\"></div>\n    }\n    @if (keyDesc && !stringArray()) {\n      <div\n        [innerHTML]=\"item[keyDesc] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n        [title]=\"item[keyDesc]\"\n        class=\"select-data__desc\"></div>\n    }\n    @if (checkSelected(item)) {\n      <dd-lib-svg-icon\n        class=\"checked\"\n        id=\"chevron-{{ selectId }}\" icon=\"check_green\"></dd-lib-svg-icon>\n    }\n  </div>\n</ng-template>\n\n<ng-template #itemsList let-items=\"items\">\n  @for (item of items; track trackByFn($index, item)) {\n    @if (isGroup(item)) {\n      <div class=\"group-header\" [class.select-all-enabled]=\"selectAllInGroup\"\n           (click)=\"selectAllInGroup ? handleGroupClick(item) : null\">\n        <div class=\"group-title\">{{ getGroupTitle(item) }}</div>\n        @if (selectAllInGroup && isGroupSelected(item)) {\n          <dd-lib-svg-icon\n            [class.checked]=\"isGroupSelected(item)\"\n            icon=\"check_green\"></dd-lib-svg-icon>\n        }\n      </div>\n      <div class=\"group-items\">\n        @for (child of item[keyGroupChildren] | filterByKey: filterList.bind(this); track trackByFn($index, child)) {\n          <ng-container [ngTemplateOutlet]=\"rowItem\"\n                        [ngTemplateOutletContext]=\"{item: child, index: $index}\"></ng-container>\n        }\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"rowItem\" [ngTemplateOutletContext]=\"{item: item, index: $index}\"></ng-container>\n    }\n  }\n</ng-template>\n", styles: [".lib-select{position:relative}.lib-select .select-block{width:100%;height:48px;padding:15px 28px 15px 16px;overflow:hidden;text-overflow:ellipsis;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative}.lib-select .select-block:hover{border-color:var(--input-active-border-colort)}.lib-select .select-block:hover~.selected-items-container .selected-items__item{background:var(--light-green-color);color:var(--font-light-black-color)}.lib-select .select-block:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-select .select-block:focus~.selected-items-container .selected-items__item{background:var(--light-green-color);color:var(--font-light-black-color)}.lib-select .select-block:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-select .select-block:disabled::placeholder{color:var(--input-placeholder)}.lib-select .select-block:disabled~.selected-items-container .selected-items__item{background:var(--gray-blue-300);color:var(--second-gray-color)}.lib-select .select-block.invalid,.lib-select .select-block.invalid:hover{border-color:var(--input-error-border-color)}.lib-select .select-block.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-select .select-block:invalid~.selected-items-container .selected-items__item{background:var(--red-light-color);color:var(--font-light-black-color)}.lib-select .multi-count{position:absolute;top:10px;right:42px;white-space:nowrap}.lib-select .clear{cursor:pointer;position:absolute;right:8px;top:12px}.lib-select .chevron{cursor:pointer;position:absolute;right:16px;top:10px}.lib-select .chevron.up{transform:rotate(180deg)}.lib-select__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start;color:var(--light-black-color)}.lib-select__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-select .select-list-wrapper{position:absolute;display:block;z-index:100;width:100%;max-height:300px;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color)}.lib-select .select-list-wrapper cdk-virtual-scroll-viewport{max-height:300px}.lib-select .select-list-wrapper.top{bottom:50px;top:unset}.lib-select .select-list-wrapper .select-data{padding:12px 42px 12px 16px;cursor:pointer;position:relative;min-height:40px}.lib-select .select-list-wrapper .select-data__desc{font-size:14px;font-weight:400;line-height:24px;text-overflow:ellipsis;text-wrap:nowrap;padding-top:2px;overflow:hidden;color:var(--second-gray-color)}.lib-select .select-list-wrapper .select-data.key-down-active,.lib-select .select-list-wrapper .select-data:hover,.lib-select .select-list-wrapper .select-data.s-item-active{background:var(--select-act-hov-bgc)}.lib-select .select-list-wrapper .select-data.s-item-active .checked{position:absolute;right:16px;top:10px}.lib-select .select-list-wrapper .select-data.s-item-disabled{cursor:auto;background:var(--disabled-bgc);color:var(--disabled-color)}.lib-select .select-list-wrapper .group-items{padding-left:16px}.lib-select .select-list-wrapper .group-items .select-data{margin-left:-16px;padding-left:32px}.lib-select .select-list-wrapper .select-no-data{padding:12px 42px 12px 16px;cursor:auto;position:relative;color:var(--disabled-color)}.lib-select .select-list-wrapper .info-container{padding:36px;display:flex;align-items:center;justify-content:center}.lib-select__value-loader{position:absolute;right:calc(50% - 12px);top:calc(50% - 12px)}.head-wrapper{display:flex;width:100%;align-items:center;border-bottom:1px solid var(--gray-bgc);min-height:40px}.search-block{position:relative;padding:12px;z-index:1;display:flex;gap:4px;flex:1;align-items:center}.search-block__input{border:none;background:transparent;width:100%;padding-left:40px}.search-block .search-icon{position:absolute;left:20px;top:0;bottom:0}.data-loader{position:absolute;right:0;left:0;bottom:12px}.selected-items-container{overflow:hidden;border-radius:8px;top:0;bottom:0;position:absolute;max-width:calc(100% - 60px);left:6px;margin:8px;align-items:center}.selected-items-container .selected-items__item{background:var(--blue-card);color:var(--font-light-black-color);padding:4px;border-radius:8px;display:flex;gap:4px;align-items:center;max-width:170px;overflow:hidden}.selected-items-container .selected-items__item:hover{background:var(--light-green-color);color:var(--font-light-black-color)}.selected-items-container .selected-items__item-title{overflow:hidden;white-space:nowrap;max-width:150px;text-overflow:ellipsis}.group-header{height:48px;padding:8px 16px;font-weight:600;color:var(--font-light-black-color);border-bottom:1px solid var(--gray-bgc);display:flex;justify-content:space-between;align-items:center}.group-header.select-all-enabled{cursor:pointer}.group-header.select-all-enabled:hover{background-color:var(--gray-color-300)}.group-title{flex-grow:1}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lib-select\" id=\"lib-select-{{ selectId }}\" [destroyedItem]=\"isShownList\" ddFixedPosition>\n  @if (label) {\n    <label [for]=\"selectId\" class=\"lib-select__title\">\n      {{ label }}\n      @if (required) {\n        <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n      }\n    </label>\n  }\n\n  <div class=\"pos-relative\" data-child=\"input\">\n    <input\n      #select\n      (change)=\"handleChange()\"\n      (click)=\"notifyFocusEvent()\"\n      (input)=\"handleInput($event)\"\n      (blur)=\"handleBlur()\"\n      (focus)=\"handleFocus()\"\n      [attr.id]=\"selectId\"\n      [attr.placeholder]=\"(multiCountValue || searchValue) ? '' : placeholder\"\n      [attr.tabIndex]=\"tabIndex\"\n      [attr.type]=\"'text'\"\n      [class.focused]=\"focused\"\n      [class.invalid]=\"showError\"\n      [disabled]=\"disabled\"\n      [readOnly]=\"true\"\n      [(ngModel)]=\"inputValue\"\n      [title]=\"inputValue || ''\"\n      class=\"text-select select-block\"/>\n\n    @if (!initialized && writtenValue) {\n      <div class=\"lib-select__value-loader\">\n        <dd-lib-loader></dd-lib-loader>\n      </div>\n    }\n\n    @if (multiCountValue && checkedItems().length > 0) {\n      <div class=\"selected-items-container\" id=\"selected-{{selectId}}\">\n        <dd-lib-horizontal-scroll>\n          @for (item of checkedItems(); track getItemTrackBy(item, $index)) {\n            <div class=\"selected-items__item\">\n              @if (stringArray()) {\n                <div [title]=\"item\" [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n                     class=\"selected-items__item-title\"></div>\n              }\n              @if (keyTitle && !stringArray()) {\n                <div [title]=\"item[keyTitle]\"\n                     [innerHTML]=\"item[keyTitle] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n                     class=\"selected-items__item-title\"></div>\n              }\n              @if (keyDesc && !stringArray()) {\n                <div\n                  [innerHTML]=\"item[keyDesc] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n                  [title]=\"item[keyDesc]\"\n                  class=\"selected-items__item-desc\"></div>\n              }\n              <dd-lib-svg-icon id=\"selected-clear-{{selectId}}-{{$index}}\" icon=\"clear\" class=\"cup\"\n                               (click)=\"selectItem(item);deleteMultiItem.emit(item)\"></dd-lib-svg-icon>\n            </div>\n          }\n        </dd-lib-horizontal-scroll>\n      </div>\n    }\n\n    @if (!checkedItem && !multiCountValue) {\n      <dd-lib-svg-icon\n        (click)=\"notifyFocusEvent()\"\n        [class.black-svg]=\"isShownList\"\n        [class.disabled]=\"disabled\"\n        [class.gray-svg]=\"!isShownList\"\n        [class.up]=\"isShownList\"\n        id=\"chevron-{{ selectId }}\" class=\"chevron\" icon=\"down_chevron\"></dd-lib-svg-icon>\n    } @else if (clearable && !searchValue && !multi) {\n      <dd-lib-svg-icon\n        (click)=\"onClear(checkedItem)\"\n        class=\"clear\"\n        id=\"clear-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\n    }\n  </div>\n\n  @if (errorTexts.length && showError) {\n    @for (error of errorTexts; track error) {\n      <div class=\"lib-select__error\">{{ error }}</div>\n    }\n  }\n  @if (errorText && showSelfError && showError) {\n    <div class=\"lib-select__error\">{{ errorText }}</div>\n  }\n\n  @if (isShownList) {\n    <div\n      id=\"dropdown-{{selectId}}\"\n      [style.max-height]=\"searchOn ? '343px' : '300px'\"\n      data-child=\"list\"\n      (ddClickOutside)=\"notifyFocusEvent();fullBlur.emit($event)\"\n      [elements]=\"getClickOutsideElements()\"\n      ddListKeyboardNavigation\n      class=\"select-list-wrapper\">\n\n      @if (!initialized) {\n        <div class=\"info-container\">\n          <div class=\"d-flex gap-12 align-center\">\n            <div class=\"g-text font-medium no-wrap-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445</div>\n            <dd-lib-loader></dd-lib-loader>\n          </div>\n        </div>\n      } @else {\n        @if (!_data()?.length) {\n          <div class=\"info-container\">\n            <div class=\"g-text font-medium no-wrap-text\">\n              {{ noDataError }}\n            </div>\n          </div>\n        }\n\n        @if (_data()?.length) {\n          @if (multi || (searchOn && _data()!.length > 5)) {\n            <div\n              class=\"d-flex full-width align-center {{(_data()!.length > 5 && searchOn) ? 'justify-between' : 'justify-end'}} head-wrapper\">\n              @if (_data()!.length > 5 && searchOn) {\n                <div class=\"search-block\">\n                  <dd-lib-svg-icon class=\"search-icon\" id=\"chevron-{{ selectId }}\" icon=\"search\"></dd-lib-svg-icon>\n                  <input class=\"search-block__input\" #searchInputEl [attr.name]=\"name\"\n                         [readOnly]=\"readOnly\"\n                         (input)=\"searchInput()\"\n                         [placeholder]=\"searchPlaceholder\"\n                         (blur)=\"handleBlur()\"\n                         (focus)=\"handleFocus()\"\n                         [(ngModel)]=\"searchValue\" type=\"text\">\n                  <dd-lib-svg-icon\n                    [style.display]=\"searchValue ? 'block' : 'none'\"\n                    class=\"cup\"\n                    (click)=\"searchValue=''\"\n                    id=\"chevron-{{ selectId }}\" icon=\"clear\"></dd-lib-svg-icon>\n                </div>\n              }\n              @if (multi) {\n                <div class=\"mr-16\">\n                  <dd-lib-svg-viewer\n                    (click)=\"selectAll()\"\n                    class=\"checked cup\"\n                    pack=\"lib-svg\"\n                    id=\"chevron-{{ selectId }}\" [color]=\"!allSelected ? 'gray': '#07B700'\"\n                    icon=\"check-green\"></dd-lib-svg-viewer>\n                </div>\n              }\n            </div>\n          }\n\n\n          @if ((_data() | filterByKey: filterList.bind(this))?.length === 0) {\n            <div class=\"info-container\">\n              <div class=\"g-text font-medium no-wrap-text\">\n                \u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E\n              </div>\n            </div>\n          }\n\n          @if (virtualScroll) {\n            <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\"\n                                         [style.height]=\"(_data()?.length || 0) * itemSize + 'px'\">\n              <div\n                *cdkVirtualFor=\"let item of _data() | filterByKey: filterList.bind(this); trackBy: trackByFn.bind(this)\">\n                <ng-container [ngTemplateOutlet]=\"itemsList\" [ngTemplateOutletContext]=\"{items: [item]}\"></ng-container>\n              </div>\n            </cdk-virtual-scroll-viewport>\n          } @else {\n            <ng-container [ngTemplateOutlet]=\"itemsList\"\n                          [ngTemplateOutletContext]=\"{items: _data() | filterByKey: filterList.bind(this)}\"></ng-container>\n          }\n        }\n      }\n    </div>\n  }\n</div>\n\n<ng-template #rowItem let-item=\"item\" let-index=\"index\">\n  <div ddSelectableItem [dragItem]=\"true\" [ddTooltip]=\"item.tooltip ? item.tooltip : ''\" [position]=\"tooltipPosition\"\n       (click)=\"selectItem(item)\"\n       (itemSelected)=\"selectItem(item)\"\n       [class.s-item-active]=\"checkSelected(item) && !item.disabled\"\n       [class.s-item-disabled]=\"item.disabled\"\n       class=\"select-data\">\n    @if (stringArray()) {\n      <div [innerHTML]=\"item | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n           class=\"select-data__title\"></div>\n    }\n    @if (keyTitle && !stringArray()) {\n      <div\n        [innerHTML]=\"item[keyTitle] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n        class=\"select-data__title\"></div>\n    }\n    @if (keyDesc && !stringArray()) {\n      <div\n        [innerHTML]=\"item[keyDesc] | highlight: (highlight ? searchValue : '') | safe: 'html'\"\n        [title]=\"item[keyDesc]\"\n        class=\"select-data__desc\"></div>\n    }\n    @if (checkSelected(item)) {\n      <dd-lib-svg-icon\n        class=\"checked\"\n        id=\"chevron-{{ selectId }}\" icon=\"check_green\"></dd-lib-svg-icon>\n    }\n  </div>\n</ng-template>\n\n<ng-template #itemsList let-items=\"items\">\n  @for (item of items; track trackByFn($index, item)) {\n    @if (isGroup(item)) {\n      <div class=\"group-header\" [class.select-all-enabled]=\"selectAllInGroup\"\n           (click)=\"selectAllInGroup ? handleGroupClick(item) : null\">\n        <div class=\"group-title\">{{ getGroupTitle(item) }}</div>\n        @if (selectAllInGroup && isGroupSelected(item)) {\n          <dd-lib-svg-icon\n            [class.checked]=\"isGroupSelected(item)\"\n            icon=\"check_green\"></dd-lib-svg-icon>\n        }\n      </div>\n      <div class=\"group-items\">\n        @for (child of item[keyGroupChildren] | filterByKey: filterList.bind(this); track trackByFn($index, child)) {\n          <ng-container [ngTemplateOutlet]=\"rowItem\"\n                        [ngTemplateOutletContext]=\"{item: child, index: $index}\"></ng-container>\n        }\n      </div>\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"rowItem\" [ngTemplateOutletContext]=\"{item: item, index: $index}\"></ng-container>\n    }\n  }\n</ng-template>\n", styles: [".lib-select{position:relative}.lib-select .select-block{width:100%;height:48px;padding:15px 28px 15px 16px;overflow:hidden;text-overflow:ellipsis;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative}.lib-select .select-block:hover{border-color:var(--input-active-border-colort)}.lib-select .select-block:hover~.selected-items-container .selected-items__item{background:var(--light-green-color);color:var(--font-light-black-color)}.lib-select .select-block:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-select .select-block:focus~.selected-items-container .selected-items__item{background:var(--light-green-color);color:var(--font-light-black-color)}.lib-select .select-block:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-select .select-block:disabled::placeholder{color:var(--input-placeholder)}.lib-select .select-block:disabled~.selected-items-container .selected-items__item{background:var(--gray-blue-300);color:var(--second-gray-color)}.lib-select .select-block.invalid,.lib-select .select-block.invalid:hover{border-color:var(--input-error-border-color)}.lib-select .select-block.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-select .select-block:invalid~.selected-items-container .selected-items__item{background:var(--red-light-color);color:var(--font-light-black-color)}.lib-select .multi-count{position:absolute;top:10px;right:42px;white-space:nowrap}.lib-select .clear{cursor:pointer;position:absolute;right:8px;top:12px}.lib-select .chevron{cursor:pointer;position:absolute;right:16px;top:10px}.lib-select .chevron.up{transform:rotate(180deg)}.lib-select__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start;color:var(--light-black-color)}.lib-select__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute;white-space:nowrap}.lib-select .select-list-wrapper{position:absolute;display:block;z-index:100;width:100%;max-height:300px;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color)}.lib-select .select-list-wrapper cdk-virtual-scroll-viewport{max-height:300px}.lib-select .select-list-wrapper.top{bottom:50px;top:unset}.lib-select .select-list-wrapper .select-data{padding:12px 42px 12px 16px;cursor:pointer;position:relative;min-height:40px}.lib-select .select-list-wrapper .select-data__desc{font-size:14px;font-weight:400;line-height:24px;text-overflow:ellipsis;text-wrap:nowrap;padding-top:2px;overflow:hidden;color:var(--second-gray-color)}.lib-select .select-list-wrapper .select-data.key-down-active,.lib-select .select-list-wrapper .select-data:hover,.lib-select .select-list-wrapper .select-data.s-item-active{background:var(--select-act-hov-bgc)}.lib-select .select-list-wrapper .select-data.s-item-active .checked{position:absolute;right:16px;top:10px}.lib-select .select-list-wrapper .select-data.s-item-disabled{cursor:auto;background:var(--disabled-bgc);color:var(--disabled-color)}.lib-select .select-list-wrapper .group-items{padding-left:16px}.lib-select .select-list-wrapper .group-items .select-data{margin-left:-16px;padding-left:32px}.lib-select .select-list-wrapper .select-no-data{padding:12px 42px 12px 16px;cursor:auto;position:relative;color:var(--disabled-color)}.lib-select .select-list-wrapper .info-container{padding:36px;display:flex;align-items:center;justify-content:center}.lib-select__value-loader{position:absolute;right:calc(50% - 12px);top:calc(50% - 12px)}.head-wrapper{display:flex;width:100%;align-items:center;border-bottom:1px solid var(--gray-bgc);min-height:40px}.search-block{position:relative;padding:12px;z-index:1;display:flex;gap:4px;flex:1;align-items:center}.search-block__input{border:none;background:transparent;width:100%;padding-left:40px}.search-block .search-icon{position:absolute;left:20px;top:0;bottom:0}.data-loader{position:absolute;right:0;left:0;bottom:12px}.selected-items-container{overflow:hidden;border-radius:8px;top:0;bottom:0;position:absolute;max-width:calc(100% - 60px);left:6px;margin:8px;align-items:center}.selected-items-container .selected-items__item{background:var(--blue-card);color:var(--font-light-black-color);padding:4px;border-radius:8px;display:flex;gap:4px;align-items:center;max-width:170px;overflow:hidden}.selected-items-container .selected-items__item:hover{background:var(--light-green-color);color:var(--font-light-black-color)}.selected-items-container .selected-items__item-title{overflow:hidden;white-space:nowrap;max-width:150px;text-overflow:ellipsis}.group-header{height:48px;padding:8px 16px;font-weight:600;color:var(--font-light-black-color);border-bottom:1px solid var(--gray-bgc);display:flex;justify-content:space-between;align-items:center}.group-header.select-all-enabled{cursor:pointer}.group-header.select-all-enabled:hover{background-color:var(--gray-color-300)}.group-title{flex-grow:1}\n"] }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }, { type: i0.ChangeDetectorRef }, { type: i1$4.ControlContainer, decorators: [{
                     type: Optional
                 }, {
@@ -4563,7 +4563,7 @@ class LibTextareaComponent extends LibCommonInputTextComponent {
                 useExisting: forwardRef(() => LibTextareaComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true, read: ElementRef, static: 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)=\"handleBlur()\"\r\n      (change)=\"handleChange()\"\r\n      (focus)=\"notifyFocusEvent()\"\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]=\"showError\"\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-textarea__error\">{{ error }}</div>\r\n    }\r\n  }\r\n\r\n  @if (errorText && showSelfError && showError) {\r\n    <div class=\"lib-textarea__error\">{{ errorText }}</div>\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$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true, read: ElementRef, static: 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)=\"handleBlur()\"\r\n      (change)=\"handleChange()\"\r\n      (focus)=\"notifyFocusEvent()\"\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]=\"showError\"\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-textarea__error\">{{ error }}</div>\r\n    }\r\n  }\r\n\r\n  @if (errorText && showSelfError && showError) {\r\n    <div class=\"lib-textarea__error\">{{ errorText }}</div>\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;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.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: "21.1.2", ngImport: i0, type: LibTextareaComponent, decorators: [{
             type: Component,
@@ -4573,7 +4573,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                             useExisting: forwardRef(() => LibTextareaComponent),
                             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)=\"handleBlur()\"\r\n      (change)=\"handleChange()\"\r\n      (focus)=\"notifyFocusEvent()\"\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]=\"showError\"\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-textarea__error\">{{ error }}</div>\r\n    }\r\n  }\r\n\r\n  @if (errorText && showSelfError && showError) {\r\n    <div class=\"lib-textarea__error\">{{ errorText }}</div>\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"] }]
+                    ], 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)=\"handleBlur()\"\r\n      (change)=\"handleChange()\"\r\n      (focus)=\"notifyFocusEvent()\"\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]=\"showError\"\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-textarea__error\">{{ error }}</div>\r\n    }\r\n  }\r\n\r\n  @if (errorText && showSelfError && showError) {\r\n    <div class=\"lib-textarea__error\">{{ errorText }}</div>\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;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$4.ControlContainer, decorators: [{
                     type: Optional
                 }, {
@@ -4946,7 +4946,7 @@ class LibDateRangeComponent {
                 useExisting: forwardRef(() => LibDateRangeComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "startInput", first: true, predicate: ["startInput"], descendants: true, static: true }, { propertyName: "endInput", first: true, predicate: ["endInput"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"lib-range\" id=\"lib-range-{{ rangeId }}\" [destroyedItem]=\"isShownPeriod\" ddFixedPosition>\n  @if (label) {\n    <label [for]=\"rangeId\" class=\"lib-range__title\">\n      {{ label }}\n      @if (required) {\n        <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n      }\n    </label>\n  }\n  <div class=\"pos-relative lib-range-wrapper\"\n       [class.start-active]=\"startIsFocused\"\n       [class.end-active]=\"endIsFocused\"\n       data-child=\"input\">\n    <input\n      #startInput\n      [attr.id]=\"rangeId\"\n      tabindex=\"1\"\n      [attr.placeholder]=\"placeholderStart\"\n      (click)=\"openCalendar()\"\n      [(ngModel)]=\"startDateStr\"\n      [mask]=\"'d0.M0.0000'\"\n      (keyup)=\"dateInput($event, 'start')\"\n      (focus)=\"changeActiveInput('start', true)\"\n      (blur)=\"changeActiveInput('start', false)\"\n      [leadZeroDateTime]=\"true\"\n      class=\"text-select\"/>\n    \u2013\n    <input\n      #endInput\n      [attr.id]=\"rangeId\"\n      tabindex=\"2\"\n      [attr.placeholder]=\"placeholderEnd\"\n      (click)=\"openCalendar()\"\n      [(ngModel)]=\"endDateStr\"\n      [mask]=\"'d0.M0.0000'\"\n      (keyup)=\"dateInput($event, 'end')\"\n      (focus)=\"changeActiveInput('end', true)\"\n      (blur)=\"changeActiveInput('end', false)\"\n      [leadZeroDateTime]=\"true\"\n      class=\"text-select\"/>\n    @if (!selectedPeriodStr) {\n      <dd-lib-svg-icon [class.gray-svg]=\"!isShownPeriod\"\n                       (click)=\"openCalendar()\"\n                       id=\"calendar-{{ rangeId }}\"\n                       class=\"calendar\" icon=\"calendar\"></dd-lib-svg-icon>\n\n\n    } @else {\n      <dd-lib-svg-icon\n        (click)=\"setPeriod(undefined)\"\n        class=\"clear\"\n        icon=\"clear\"></dd-lib-svg-icon>\n\n    }\n  </div>\n  @if (isShownPeriod) {\n    <div  data-child=\"list\"\n      (ddClickOutside)=\"closeCalendar()\"\n      [elements]=\"['lib-range-' + rangeId, 'calendar' + rangeId]\"\n      class=\"calendar-wrapper\">\n      <dd-lib-calendar [(ngModel)]=\"selectedPeriod\"\n                       (immediatelyEmitDate)=\"setDate($event)\"\n                       [dateStart]=\"selectedPeriod?.start\"\n                       [dateEnd]=\"selectedPeriod?.end\"\n                       [rangeMode]=\"true\"\n                       [rangeModeFullPeriod]=\"rangeModeFullPeriod\"\n                       (emitPeriod)=\"setPeriod($event)\"></dd-lib-calendar>\n    </div>\n  }\n</div>\n", styles: [".lib-range{min-width:311px;position:relative}.lib-range .lib-range-wrapper{display:flex;align-items:center;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative;overflow:hidden}.lib-range .lib-range-wrapper.start-active:before{content:\"\";position:absolute;top:0;left:0;width:50%;height:100%;border-radius:8px 0 0 8px;border:1px solid var(--input-active-border-colort);box-sizing:border-box;pointer-events:none;border-right:none}.lib-range .lib-range-wrapper.end-active:before{content:\"\";position:absolute;top:0;right:0;width:50%;height:100%;border-radius:0 8px 8px 0;border:1px solid var(--input-active-border-colort);border-left:none;box-sizing:border-box;pointer-events:none}.lib-range .lib-range-wrapper:hover{border-color:var(--input-active-border-colort)}.lib-range .lib-range-wrapper:hover:before{opacity:0}.lib-range .lib-range-wrapper:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-range input{width:100%;height:48px;padding:15px 28px 15px 16px;overflow:hidden;text-overflow:ellipsis;border:none;text-align:center}.lib-range input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-range input:disabled::placeholder{color:var(--input-placeholder)}.lib-range input.invalid,.lib-range input.invalid:hover{border-color:var(--input-error-border-color)}.lib-range input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-range .clear{cursor:pointer;position:absolute;right:8px;top:12px}.lib-range .calendar{cursor:pointer;position:absolute;right:16px;top:10px}.lib-range .calendar.up{transform:rotate(180deg)}.lib-range__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start}.lib-range__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-range .calendar-wrapper{position:absolute;display:block;z-index:100;width:100%;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[ddClickOutside]", inputs: ["elements", "ignoreOnDrag"], outputs: ["ddClickOutside"] }, { kind: "component", type: LibCalendarComponent, selector: "dd-lib-calendar", inputs: ["type", "formatDate", "formatTime", "rangeMode", "rangeModeFullPeriod", "maxHours", "maxMinutes", "needTime", "mode", "dateStart", "dateEnd", "maxDate", "minDate"], outputs: ["emitDate", "immediatelyEmitDate", "emitPeriod"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix", "value", "errors", "disabled", "touched", "dirty", "invalid", "pending", "readonly", "required", "name"], outputs: ["valueChange", "touchedChange", "maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: FixedPositionDirective, selector: "[ddFixedPosition]", inputs: ["childName1", "childName2", "destroyedItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "startInput", first: true, predicate: ["startInput"], descendants: true, static: true }, { propertyName: "endInput", first: true, predicate: ["endInput"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"lib-range\" id=\"lib-range-{{ rangeId }}\" [destroyedItem]=\"isShownPeriod\" ddFixedPosition>\n  @if (label) {\n    <label [for]=\"rangeId\" class=\"lib-range__title\">\n      {{ label }}\n      @if (required) {\n        <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n      }\n    </label>\n  }\n  <div class=\"pos-relative lib-range-wrapper\"\n       [class.start-active]=\"startIsFocused\"\n       [class.end-active]=\"endIsFocused\"\n       data-child=\"input\">\n    <input\n      #startInput\n      [attr.id]=\"rangeId\"\n      tabindex=\"1\"\n      [attr.placeholder]=\"placeholderStart\"\n      (click)=\"openCalendar()\"\n      [(ngModel)]=\"startDateStr\"\n      [mask]=\"'d0.M0.0000'\"\n      (keyup)=\"dateInput($event, 'start')\"\n      (focus)=\"changeActiveInput('start', true)\"\n      (blur)=\"changeActiveInput('start', false)\"\n      [leadZeroDateTime]=\"true\"\n      class=\"text-select\"/>\n    \u2013\n    <input\n      #endInput\n      [attr.id]=\"rangeId\"\n      tabindex=\"2\"\n      [attr.placeholder]=\"placeholderEnd\"\n      (click)=\"openCalendar()\"\n      [(ngModel)]=\"endDateStr\"\n      [mask]=\"'d0.M0.0000'\"\n      (keyup)=\"dateInput($event, 'end')\"\n      (focus)=\"changeActiveInput('end', true)\"\n      (blur)=\"changeActiveInput('end', false)\"\n      [leadZeroDateTime]=\"true\"\n      class=\"text-select\"/>\n    @if (!selectedPeriodStr) {\n      <dd-lib-svg-icon [class.gray-svg]=\"!isShownPeriod\"\n                       (click)=\"openCalendar()\"\n                       id=\"calendar-{{ rangeId }}\"\n                       class=\"calendar\" icon=\"calendar\"></dd-lib-svg-icon>\n\n\n    } @else {\n      <dd-lib-svg-icon\n        (click)=\"setPeriod(undefined)\"\n        class=\"clear\"\n        icon=\"clear\"></dd-lib-svg-icon>\n\n    }\n  </div>\n  @if (isShownPeriod) {\n    <div  data-child=\"list\"\n      (ddClickOutside)=\"closeCalendar()\"\n      [elements]=\"['lib-range-' + rangeId, 'calendar' + rangeId]\"\n      class=\"calendar-wrapper\">\n      <dd-lib-calendar [(ngModel)]=\"selectedPeriod\"\n                       (immediatelyEmitDate)=\"setDate($event)\"\n                       [dateStart]=\"selectedPeriod?.start\"\n                       [dateEnd]=\"selectedPeriod?.end\"\n                       [rangeMode]=\"true\"\n                       [rangeModeFullPeriod]=\"rangeModeFullPeriod\"\n                       (emitPeriod)=\"setPeriod($event)\"></dd-lib-calendar>\n    </div>\n  }\n</div>\n", styles: [".lib-range{min-width:311px;position:relative}.lib-range .lib-range-wrapper{display:flex;align-items:center;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative;overflow:hidden}.lib-range .lib-range-wrapper.start-active:before{content:\"\";position:absolute;top:0;left:0;width:50%;height:100%;border-radius:8px 0 0 8px;border:1px solid var(--input-active-border-colort);box-sizing:border-box;pointer-events:none;border-right:none}.lib-range .lib-range-wrapper.end-active:before{content:\"\";position:absolute;top:0;right:0;width:50%;height:100%;border-radius:0 8px 8px 0;border:1px solid var(--input-active-border-colort);border-left:none;box-sizing:border-box;pointer-events:none}.lib-range .lib-range-wrapper:hover{border-color:var(--input-active-border-colort)}.lib-range .lib-range-wrapper:hover:before{opacity:0}.lib-range .lib-range-wrapper:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-range input{width:100%;height:48px;padding:15px 28px 15px 16px;overflow:hidden;text-overflow:ellipsis;border:none;text-align:center}.lib-range input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-range input:disabled::placeholder{color:var(--input-placeholder)}.lib-range input.invalid,.lib-range input.invalid:hover{border-color:var(--input-error-border-color)}.lib-range input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-range .clear{cursor:pointer;position:absolute;right:8px;top:12px}.lib-range .calendar{cursor:pointer;position:absolute;right:16px;top:10px}.lib-range .calendar.up{transform:rotate(180deg)}.lib-range__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start}.lib-range__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute;white-space:nowrap}.lib-range .calendar-wrapper{position:absolute;display:block;z-index:100;width:100%;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[ddClickOutside]", inputs: ["elements", "ignoreOnDrag"], outputs: ["ddClickOutside"] }, { kind: "component", type: LibCalendarComponent, selector: "dd-lib-calendar", inputs: ["type", "formatDate", "formatTime", "rangeMode", "rangeModeFullPeriod", "maxHours", "maxMinutes", "needTime", "mode", "dateStart", "dateEnd", "maxDate", "minDate"], outputs: ["emitDate", "immediatelyEmitDate", "emitPeriod"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix", "value", "errors", "disabled", "touched", "dirty", "invalid", "pending", "readonly", "required", "name"], outputs: ["valueChange", "touchedChange", "maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: FixedPositionDirective, selector: "[ddFixedPosition]", inputs: ["childName1", "childName2", "destroyedItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LibDateRangeComponent, decorators: [{
             type: Component,
@@ -4964,7 +4964,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                             useExisting: forwardRef(() => LibDateRangeComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lib-range\" id=\"lib-range-{{ rangeId }}\" [destroyedItem]=\"isShownPeriod\" ddFixedPosition>\n  @if (label) {\n    <label [for]=\"rangeId\" class=\"lib-range__title\">\n      {{ label }}\n      @if (required) {\n        <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n      }\n    </label>\n  }\n  <div class=\"pos-relative lib-range-wrapper\"\n       [class.start-active]=\"startIsFocused\"\n       [class.end-active]=\"endIsFocused\"\n       data-child=\"input\">\n    <input\n      #startInput\n      [attr.id]=\"rangeId\"\n      tabindex=\"1\"\n      [attr.placeholder]=\"placeholderStart\"\n      (click)=\"openCalendar()\"\n      [(ngModel)]=\"startDateStr\"\n      [mask]=\"'d0.M0.0000'\"\n      (keyup)=\"dateInput($event, 'start')\"\n      (focus)=\"changeActiveInput('start', true)\"\n      (blur)=\"changeActiveInput('start', false)\"\n      [leadZeroDateTime]=\"true\"\n      class=\"text-select\"/>\n    \u2013\n    <input\n      #endInput\n      [attr.id]=\"rangeId\"\n      tabindex=\"2\"\n      [attr.placeholder]=\"placeholderEnd\"\n      (click)=\"openCalendar()\"\n      [(ngModel)]=\"endDateStr\"\n      [mask]=\"'d0.M0.0000'\"\n      (keyup)=\"dateInput($event, 'end')\"\n      (focus)=\"changeActiveInput('end', true)\"\n      (blur)=\"changeActiveInput('end', false)\"\n      [leadZeroDateTime]=\"true\"\n      class=\"text-select\"/>\n    @if (!selectedPeriodStr) {\n      <dd-lib-svg-icon [class.gray-svg]=\"!isShownPeriod\"\n                       (click)=\"openCalendar()\"\n                       id=\"calendar-{{ rangeId }}\"\n                       class=\"calendar\" icon=\"calendar\"></dd-lib-svg-icon>\n\n\n    } @else {\n      <dd-lib-svg-icon\n        (click)=\"setPeriod(undefined)\"\n        class=\"clear\"\n        icon=\"clear\"></dd-lib-svg-icon>\n\n    }\n  </div>\n  @if (isShownPeriod) {\n    <div  data-child=\"list\"\n      (ddClickOutside)=\"closeCalendar()\"\n      [elements]=\"['lib-range-' + rangeId, 'calendar' + rangeId]\"\n      class=\"calendar-wrapper\">\n      <dd-lib-calendar [(ngModel)]=\"selectedPeriod\"\n                       (immediatelyEmitDate)=\"setDate($event)\"\n                       [dateStart]=\"selectedPeriod?.start\"\n                       [dateEnd]=\"selectedPeriod?.end\"\n                       [rangeMode]=\"true\"\n                       [rangeModeFullPeriod]=\"rangeModeFullPeriod\"\n                       (emitPeriod)=\"setPeriod($event)\"></dd-lib-calendar>\n    </div>\n  }\n</div>\n", styles: [".lib-range{min-width:311px;position:relative}.lib-range .lib-range-wrapper{display:flex;align-items:center;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative;overflow:hidden}.lib-range .lib-range-wrapper.start-active:before{content:\"\";position:absolute;top:0;left:0;width:50%;height:100%;border-radius:8px 0 0 8px;border:1px solid var(--input-active-border-colort);box-sizing:border-box;pointer-events:none;border-right:none}.lib-range .lib-range-wrapper.end-active:before{content:\"\";position:absolute;top:0;right:0;width:50%;height:100%;border-radius:0 8px 8px 0;border:1px solid var(--input-active-border-colort);border-left:none;box-sizing:border-box;pointer-events:none}.lib-range .lib-range-wrapper:hover{border-color:var(--input-active-border-colort)}.lib-range .lib-range-wrapper:hover:before{opacity:0}.lib-range .lib-range-wrapper:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-range input{width:100%;height:48px;padding:15px 28px 15px 16px;overflow:hidden;text-overflow:ellipsis;border:none;text-align:center}.lib-range input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-range input:disabled::placeholder{color:var(--input-placeholder)}.lib-range input.invalid,.lib-range input.invalid:hover{border-color:var(--input-error-border-color)}.lib-range input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-range .clear{cursor:pointer;position:absolute;right:8px;top:12px}.lib-range .calendar{cursor:pointer;position:absolute;right:16px;top:10px}.lib-range .calendar.up{transform:rotate(180deg)}.lib-range__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start}.lib-range__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-range .calendar-wrapper{position:absolute;display:block;z-index:100;width:100%;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lib-range\" id=\"lib-range-{{ rangeId }}\" [destroyedItem]=\"isShownPeriod\" ddFixedPosition>\n  @if (label) {\n    <label [for]=\"rangeId\" class=\"lib-range__title\">\n      {{ label }}\n      @if (required) {\n        <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n      }\n    </label>\n  }\n  <div class=\"pos-relative lib-range-wrapper\"\n       [class.start-active]=\"startIsFocused\"\n       [class.end-active]=\"endIsFocused\"\n       data-child=\"input\">\n    <input\n      #startInput\n      [attr.id]=\"rangeId\"\n      tabindex=\"1\"\n      [attr.placeholder]=\"placeholderStart\"\n      (click)=\"openCalendar()\"\n      [(ngModel)]=\"startDateStr\"\n      [mask]=\"'d0.M0.0000'\"\n      (keyup)=\"dateInput($event, 'start')\"\n      (focus)=\"changeActiveInput('start', true)\"\n      (blur)=\"changeActiveInput('start', false)\"\n      [leadZeroDateTime]=\"true\"\n      class=\"text-select\"/>\n    \u2013\n    <input\n      #endInput\n      [attr.id]=\"rangeId\"\n      tabindex=\"2\"\n      [attr.placeholder]=\"placeholderEnd\"\n      (click)=\"openCalendar()\"\n      [(ngModel)]=\"endDateStr\"\n      [mask]=\"'d0.M0.0000'\"\n      (keyup)=\"dateInput($event, 'end')\"\n      (focus)=\"changeActiveInput('end', true)\"\n      (blur)=\"changeActiveInput('end', false)\"\n      [leadZeroDateTime]=\"true\"\n      class=\"text-select\"/>\n    @if (!selectedPeriodStr) {\n      <dd-lib-svg-icon [class.gray-svg]=\"!isShownPeriod\"\n                       (click)=\"openCalendar()\"\n                       id=\"calendar-{{ rangeId }}\"\n                       class=\"calendar\" icon=\"calendar\"></dd-lib-svg-icon>\n\n\n    } @else {\n      <dd-lib-svg-icon\n        (click)=\"setPeriod(undefined)\"\n        class=\"clear\"\n        icon=\"clear\"></dd-lib-svg-icon>\n\n    }\n  </div>\n  @if (isShownPeriod) {\n    <div  data-child=\"list\"\n      (ddClickOutside)=\"closeCalendar()\"\n      [elements]=\"['lib-range-' + rangeId, 'calendar' + rangeId]\"\n      class=\"calendar-wrapper\">\n      <dd-lib-calendar [(ngModel)]=\"selectedPeriod\"\n                       (immediatelyEmitDate)=\"setDate($event)\"\n                       [dateStart]=\"selectedPeriod?.start\"\n                       [dateEnd]=\"selectedPeriod?.end\"\n                       [rangeMode]=\"true\"\n                       [rangeModeFullPeriod]=\"rangeModeFullPeriod\"\n                       (emitPeriod)=\"setPeriod($event)\"></dd-lib-calendar>\n    </div>\n  }\n</div>\n", styles: [".lib-range{min-width:311px;position:relative}.lib-range .lib-range-wrapper{display:flex;align-items:center;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative;overflow:hidden}.lib-range .lib-range-wrapper.start-active:before{content:\"\";position:absolute;top:0;left:0;width:50%;height:100%;border-radius:8px 0 0 8px;border:1px solid var(--input-active-border-colort);box-sizing:border-box;pointer-events:none;border-right:none}.lib-range .lib-range-wrapper.end-active:before{content:\"\";position:absolute;top:0;right:0;width:50%;height:100%;border-radius:0 8px 8px 0;border:1px solid var(--input-active-border-colort);border-left:none;box-sizing:border-box;pointer-events:none}.lib-range .lib-range-wrapper:hover{border-color:var(--input-active-border-colort)}.lib-range .lib-range-wrapper:hover:before{opacity:0}.lib-range .lib-range-wrapper:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-range input{width:100%;height:48px;padding:15px 28px 15px 16px;overflow:hidden;text-overflow:ellipsis;border:none;text-align:center}.lib-range input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-range input:disabled::placeholder{color:var(--input-placeholder)}.lib-range input.invalid,.lib-range input.invalid:hover{border-color:var(--input-error-border-color)}.lib-range input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-range .clear{cursor:pointer;position:absolute;right:8px;top:12px}.lib-range .calendar{cursor:pointer;position:absolute;right:16px;top:10px}.lib-range .calendar.up{transform:rotate(180deg)}.lib-range__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start}.lib-range__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute;white-space:nowrap}.lib-range .calendar-wrapper{position:absolute;display:block;z-index:100;width:100%;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { startInput: [{
                 type: ViewChild,
                 args: ['startInput', { static: true }]
@@ -5069,7 +5069,7 @@ class LibDateInputComponent {
                 useExisting: forwardRef(() => LibDateInputComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"lib-date\" id=\"lib-date-{{ dateId }}\">\r\n  @if (label) {\r\n    <label [for]=\"dateId\" class=\"lib-date__title\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\r\n      }\r\n    </label>\r\n  }\r\n  <div class=\"pos-relative\">\r\n    <input\r\n      [attr.id]=\"dateId\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (click)=\"openCalendar()\"\r\n      [(ngModel)]=\"selectedDateStr\"\r\n      [mask]=\"needTime ? 'd0.M0.0000 Hh:m0' : 'd0.M0.0000'\"\r\n      (ngModelChange)=\"changeStrDate($event)\"\r\n      [leadZeroDateTime]=\"!needTime\"\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\"\r\n                       [needTime]=\"needTime\"\r\n                       (emitDate)=\"setPeriod($event)\"></dd-lib-calendar>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".lib-date{min-width:340px;position:relative}.lib-date input{width:100%;height:48px;padding:15px 28px 15px 16px;overflow:hidden;text-overflow:ellipsis;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative}.lib-date input:hover{border-color:var(--input-active-border-colort)}.lib-date input:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-date input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-date input:disabled::placeholder{color:var(--input-placeholder)}.lib-date input.invalid,.lib-date input.invalid:hover{border-color:var(--input-error-border-color)}.lib-date input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-date .clear{cursor:pointer;position:absolute;right:8px;top:12px}.lib-date .calendar{cursor:pointer;position:absolute;right:16px;top:10px}.lib-date .calendar.up{transform:rotate(180deg)}.lib-date__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start}.lib-date__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-date .calendar-wrapper{max-width:350px;position:absolute;display:block;z-index:100;width:100%;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color)}.lib-date .calendar-wrapper.top{bottom:48px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[ddClickOutside]", inputs: ["elements", "ignoreOnDrag"], outputs: ["ddClickOutside"] }, { kind: "component", type: LibCalendarComponent, selector: "dd-lib-calendar", inputs: ["type", "formatDate", "formatTime", "rangeMode", "rangeModeFullPeriod", "maxHours", "maxMinutes", "needTime", "mode", "dateStart", "dateEnd", "maxDate", "minDate"], outputs: ["emitDate", "immediatelyEmitDate", "emitPeriod"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix", "value", "errors", "disabled", "touched", "dirty", "invalid", "pending", "readonly", "required", "name"], outputs: ["valueChange", "touchedChange", "maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<div class=\"lib-date\" id=\"lib-date-{{ dateId }}\">\r\n  @if (label) {\r\n    <label [for]=\"dateId\" class=\"lib-date__title\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\r\n      }\r\n    </label>\r\n  }\r\n  <div class=\"pos-relative\">\r\n    <input\r\n      [attr.id]=\"dateId\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (click)=\"openCalendar()\"\r\n      [(ngModel)]=\"selectedDateStr\"\r\n      [mask]=\"needTime ? 'd0.M0.0000 Hh:m0' : 'd0.M0.0000'\"\r\n      (ngModelChange)=\"changeStrDate($event)\"\r\n      [leadZeroDateTime]=\"!needTime\"\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\"\r\n                       [needTime]=\"needTime\"\r\n                       (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;white-space:nowrap}.lib-date .calendar-wrapper{max-width:350px;position:absolute;display:block;z-index:100;width:100%;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color)}.lib-date .calendar-wrapper.top{bottom:48px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[ddClickOutside]", inputs: ["elements", "ignoreOnDrag"], outputs: ["ddClickOutside"] }, { kind: "component", type: LibCalendarComponent, selector: "dd-lib-calendar", inputs: ["type", "formatDate", "formatTime", "rangeMode", "rangeModeFullPeriod", "maxHours", "maxMinutes", "needTime", "mode", "dateStart", "dateEnd", "maxDate", "minDate"], outputs: ["emitDate", "immediatelyEmitDate", "emitPeriod"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix", "value", "errors", "disabled", "touched", "dirty", "invalid", "pending", "readonly", "required", "name"], outputs: ["valueChange", "touchedChange", "maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LibDateInputComponent, decorators: [{
             type: Component,
@@ -5087,7 +5087,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                             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]=\"needTime ? 'd0.M0.0000 Hh:m0' : 'd0.M0.0000'\"\r\n      (ngModelChange)=\"changeStrDate($event)\"\r\n      [leadZeroDateTime]=\"!needTime\"\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\"\r\n                       [needTime]=\"needTime\"\r\n                       (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"] }]
+                    ], 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]=\"needTime ? 'd0.M0.0000 Hh:m0' : 'd0.M0.0000'\"\r\n      (ngModelChange)=\"changeStrDate($event)\"\r\n      [leadZeroDateTime]=\"!needTime\"\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\"\r\n                       [needTime]=\"needTime\"\r\n                       (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;white-space:nowrap}.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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { topSide: [{
                 type: Input
             }], dateId: [{