@morozeckiy/dd-lib 0.7.113 → 0.7.118

package/fesm2022/morozeckiy-dd-lib.mjs

@@ -3477,7 +3477,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      [(ngModel)]=\"value\"\r\n      [attr.autocomplete]=\"autocomplete === undefined ? null : autocomplete\"\r\n      [attr.id]=\"id ? id : null\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [attr.minlength]=\"minlength\"\r\n      [attr.name]=\"name\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [attr.tabIndex]=\"tabIndex\"\r\n      [attr.type]=\"type || 'text'\"\r\n      [class.focused]=\"focused\"\r\n      [class.round]=\"styleInput === 'round'\"\r\n      [class.white]=\"inputStyle === 'white'\"\r\n      [disabled]=\"disabled\"\r\n      [readOnly]=\"readOnly\"\r\n      class=\"search-input\" />\r\n    <dd-lib-svg-icon\r\n      (click)=\"onClear()\"\r\n      [id]=\"idClose\" [style.display]=\"value?.length ? 'block' : 'none'\"\r\n      class=\"clear-icon\" icon=\"clear\"></dd-lib-svg-icon>\r\n    @if (loaded$ | async) {\r\n      <div class=\"loading-icon\">\r\n        <dd-lib-loader></dd-lib-loader>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  @if (data?.length) {\r\n    <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 .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}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: SafePipe, name: "safe" }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "component", type: LibLoaderComponent, selector: "dd-lib-loader", inputs: ["color", "size"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"lib-search-input\">\r\n  <label [for]=\"id\" class=\"lib-search-input__title\">\r\n    {{ label }}\r\n    @if (required) {\r\n      <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\r\n    }\r\n  </label>\r\n  <div class=\"pos-relative\">\r\n    <dd-lib-svg-icon (click)=\"forceChange()\" class=\"search-icon\" icon=\"search\"></dd-lib-svg-icon>\r\n    <input\r\n      #searchInput\r\n      (keyup)=\"keyUp.next($event)\"\r\n      (keyup.enter)=\"forceChange()\"\r\n      [(ngModel)]=\"value\"\r\n      [attr.autocomplete]=\"autocomplete === undefined ? null : autocomplete\"\r\n      [attr.id]=\"id ? id : null\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [attr.minlength]=\"minlength\"\r\n      [attr.name]=\"name\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [attr.tabIndex]=\"tabIndex\"\r\n      [attr.type]=\"type || 'text'\"\r\n      [class.focused]=\"focused\"\r\n      [class.round]=\"styleInput === 'round'\"\r\n      [class.white]=\"inputStyle === 'white'\"\r\n      [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-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 .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}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: HighlightPipe, name: "highlight" }, { kind: "pipe", type: SafePipe, name: "safe" }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "component", type: LibLoaderComponent, selector: "dd-lib-loader", inputs: ["color", "size"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibSearchInputComponent, decorators: [{
             type: Component,
@@ -3487,7 +3487,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.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      [(ngModel)]=\"value\"\r\n      [attr.autocomplete]=\"autocomplete === undefined ? null : autocomplete\"\r\n      [attr.id]=\"id ? id : null\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [attr.minlength]=\"minlength\"\r\n      [attr.name]=\"name\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [attr.tabIndex]=\"tabIndex\"\r\n      [attr.type]=\"type || 'text'\"\r\n      [class.focused]=\"focused\"\r\n      [class.round]=\"styleInput === 'round'\"\r\n      [class.white]=\"inputStyle === 'white'\"\r\n      [disabled]=\"disabled\"\r\n      [readOnly]=\"readOnly\"\r\n      class=\"search-input\" />\r\n    <dd-lib-svg-icon\r\n      (click)=\"onClear()\"\r\n      [id]=\"idClose\" [style.display]=\"value?.length ? 'block' : 'none'\"\r\n      class=\"clear-icon\" icon=\"clear\"></dd-lib-svg-icon>\r\n    @if (loaded$ | async) {\r\n      <div class=\"loading-icon\">\r\n        <dd-lib-loader></dd-lib-loader>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  @if (data?.length) {\r\n    <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 .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}\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      [(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-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 .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}\n"] }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.ChangeDetectorRef }], propDecorators: { keyTitle: [{
                 type: Input
             }], keyDesc: [{
@@ -4397,8 +4397,12 @@ class LibTabsFragmentComponent {
             if (this.rout && !this.noFragment) {
                 this.router.navigate([this.rout], { fragment: tab.fragment });
             }
-            else if (this.rout && this.noFragment && tab.path) {
-                this.router.navigate([this.rout, tab.path]);
+            else if (this.rout && this.noFragment) {
+                const route = tab.path ? [this.rout, tab.path] : [this.rout];
+                this.router.navigate(route);
+            }
+            else if (!this.rout && tab.path) {
+                this.router.navigate([tab.path || '']);
             }
             else if (!this.rout && !this.noFragment) {
                 const currentUrl = this.location.path(); // Получаем текущий URL без фрагмента
@@ -4407,7 +4411,7 @@ class LibTabsFragmentComponent {
             }
             if (callEvent) {
                 this.setActiveTab.emit(this.activeFragment);
-                this.onChange(tab); // Notify Angular Forms
+                this.onChange(tab);
                 this.onTouched();
             }
         }
@@ -4453,8 +4457,8 @@ class LibTabsFragmentComponent {
             }
         }
         else if (this.needInitEvent) {
-            if (this.noFragment && this.tabs?.[0].path) {
-                this.activeFragment = this.tabs?.length ? this.tabs.find(f => (this.rout ? this.rout + '/' : '/') + f.path === this.location.path())?.id : 0;
+            if (this.noFragment && typeof this.tabs?.[0].path === 'string') {
+                this.activeFragment = this.tabs?.length ? (this.tabs.find(f => '/' + (this.rout ? this.rout + '/' : '') + f.path === this.location.path())?.id || 0) : 0;
             }
         }
         this.setActiveTab.emit(this.activeFragment);
@@ -4522,7 +4526,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)=\"notifyFocusEvent()\"\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]=\"invalid\"\r\n      [disabled]=\"disabled\"\r\n      [readOnly]=\"readOnly\"\r\n      [required]=\"required\"\r\n      [rows]=\"rows\"\r\n      class=\"textarea\"></textarea>\r\n    @if (maxlength) {\r\n      <span class=\"lib-textarea__counter\">{{ value?.length || 0 }}/{{ maxlength }}</span>\r\n    }\r\n  </div>\r\n\r\n  @if (errorTexts.length && showError) {\r\n    @for (error of errorTexts; track error) {\r\n      <div class=\"lib-input__error\">{{ error }}</div>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".lib-textarea{position:relative;display:inline;flex-direction:column}.lib-textarea textarea{width:100%;min-height:48px;padding:12px 16px;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;resize:none;font-size:16px;line-height:24px;color:var(--light-black-color)}.lib-textarea textarea:hover{border-color:var(--input-active-border-colort)}.lib-textarea textarea:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-textarea textarea:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-textarea textarea:disabled::placeholder{color:var(--input-placeholder)}.lib-textarea textarea.invalid,.lib-textarea textarea.invalid:hover{border-color:var(--input-error-border-color)}.lib-textarea textarea.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-textarea__counter{position:absolute;font-size:12px;font-weight:400;right:16px;bottom:12px;color:var(--input-placeholder)}.lib-textarea__counter textarea:disabled+.lib-text-counter{color:var(--input-disable-text)}.lib-textarea__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], 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)=\"notifyFocusEvent()\"\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-input__error\">{{ error }}</div>\r\n    }\r\n  }\r\n\r\n  @if (errorText && showSelfError && showError) {\r\n    <div class=\"lib-input__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$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibTextareaComponent, decorators: [{
             type: Component,
@@ -4532,7 +4536,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.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)=\"notifyFocusEvent()\"\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]=\"invalid\"\r\n      [disabled]=\"disabled\"\r\n      [readOnly]=\"readOnly\"\r\n      [required]=\"required\"\r\n      [rows]=\"rows\"\r\n      class=\"textarea\"></textarea>\r\n    @if (maxlength) {\r\n      <span class=\"lib-textarea__counter\">{{ value?.length || 0 }}/{{ maxlength }}</span>\r\n    }\r\n  </div>\r\n\r\n  @if (errorTexts.length && showError) {\r\n    @for (error of errorTexts; track error) {\r\n      <div class=\"lib-input__error\">{{ error }}</div>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".lib-textarea{position:relative;display:inline;flex-direction:column}.lib-textarea textarea{width:100%;min-height:48px;padding:12px 16px;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;resize:none;font-size:16px;line-height:24px;color:var(--light-black-color)}.lib-textarea textarea:hover{border-color:var(--input-active-border-colort)}.lib-textarea textarea:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-textarea textarea:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-textarea textarea:disabled::placeholder{color:var(--input-placeholder)}.lib-textarea textarea.invalid,.lib-textarea textarea.invalid:hover{border-color:var(--input-error-border-color)}.lib-textarea textarea.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-textarea__counter{position:absolute;font-size:12px;font-weight:400;right:16px;bottom:12px;color:var(--input-placeholder)}.lib-textarea__counter textarea:disabled+.lib-text-counter{color:var(--input-disable-text)}.lib-textarea__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}\n"] }]
+                    ], template: "<div class=\"lib-textarea\">\r\n  <label [for]=\"id\" class=\"d-block g-text-sm mb-4\">\r\n    {{ label }}\r\n    @if (needCounter && maxlength) {\r\n      <span>(\u043E\u0441\u0442\u0430\u043B\u043E\u0441\u044C {{ +maxlength! - (value?.length || 0) }} \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432)</span>\r\n    }\r\n    @if (required) {\r\n      <span class=\"red\">*</span>\r\n    }\r\n  </label>\r\n  <div class=\"pos-relative d-flex\">\r\n    <textarea\r\n      #textarea\r\n      (blur)=\"notifyFocusEvent()\"\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-input__error\">{{ error }}</div>\r\n    }\r\n  }\r\n\r\n  @if (errorText && showSelfError && showError) {\r\n    <div class=\"lib-input__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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$5.ControlContainer, decorators: [{
                     type: Optional
                 }, {