@snabcentr/client-ui 0.5.2 → 0.6.1

package/fesm2020/snabcentr-client-ui.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, EventEmitter, Output, Input, NgModule, Injectable, ElementRef, Inject, ContentChildren, ViewChild, HostBinding, HostListener, ChangeDetectorRef, Optional, Self, inject, Directive, forwardRef } from '@angular/core';
-import { Subject, filter, map, switchMap, catchError, of, startWith, share, tap, finalize, timer, scan, takeWhile, endWith, distinctUntilChanged, shareReplay, interval, takeUntil, skip } from 'rxjs';
+import { Component, ChangeDetectionStrategy, EventEmitter, Output, Input, NgModule, Injectable, ElementRef, Inject, ContentChildren, ViewChild, HostBinding, HostListener, ChangeDetectorRef, Optional, Self, inject, InjectionToken, Directive, forwardRef } from '@angular/core';
+import { Subject, filter, map, switchMap, catchError, of, startWith, share, tap, finalize, timer, scan, takeWhile, endWith, distinctUntilChanged, shareReplay, interval, takeUntil, skip, debounceTime, merge } from 'rxjs';
 import * as i1 from '@snabcentr/client-core';
-import { SC_URLS, SC_PATH_IMAGE_NOT_FOUND, ScIconTypesEnum } from '@snabcentr/client-core';
+import { SC_URLS, SC_PATH_IMAGE_NOT_FOUND, ScCatalogService, ScCartService, ScIconTypesEnum } from '@snabcentr/client-core';
 import * as i3 from '@angular/common';
 import { CommonModule, formatDate } from '@angular/common';
 import * as i4 from '@taiga-ui/core';
@@ -10,7 +10,7 @@ import { TuiTextfieldControllerModule, TuiLinkModule, TuiButtonModule, TuiLabelM
 import * as i3$1 from '@angular/forms';
 import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule, NgControl } from '@angular/forms';
 import * as i7 from '@taiga-ui/cdk';
-import { tuiIsFalsy, TuiLetModule, tuiCreateToken, AbstractTuiNullableControl, TUI_IS_MOBILE } from '@taiga-ui/cdk';
+import { tuiIsFalsy, TuiLetModule, tuiCreateToken, AbstractTuiNullableControl, TUI_IS_MOBILE, tuiIsPresent, TuiDestroyService } from '@taiga-ui/cdk';
 import * as i3$2 from '@taiga-ui/kit';
 import { TuiInputPasswordModule, TuiInputModule, TuiFieldErrorPipeModule, TuiInputPhoneModule, TuiCarouselModule, TUI_NUMBER_VALUE_TRANSFORMER, TuiInputNumberComponent, TuiIslandModule, TuiInputNumberModule, TuiElasticContainerModule, TuiTreeService, TuiTreeItemContentComponent, TUI_TREE_START, TUI_TREE_CONTENT, TUI_TREE_LOADING, TUI_TREE_LOADER, TuiTreeModule } from '@taiga-ui/kit';
 import * as i7$1 from '@maskito/angular';
@@ -21,7 +21,7 @@ import * as i8 from '@ng-web-apis/intersection-observer';
 import { IntersectionObserverService, IntersectionObserverModule } from '@ng-web-apis/intersection-observer';
 import * as i5 from '@angular/material/core';
 import { MatRippleModule } from '@angular/material/core';
-import { RouterModule } from '@angular/router';
+import { RouterModule, NavigationEnd, ActivatedRoute, Router } from '@angular/router';
 import * as i7$2 from '@taiga-ui/addon-preview';
 import { TuiPreviewDialogService, TuiPreviewModule } from '@taiga-ui/addon-preview';
 import * as i8$1 from '@tinkoff/ng-polymorpheus';
@@ -177,10 +177,10 @@ class ScSignInFormByPhoneComponent {
     }
 }
 ScSignInFormByPhoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScSignInFormByPhoneComponent, deps: [{ token: i1.ScAuthService }, { token: i1.ScVerificationService }], target: i0.ɵɵFactoryTarget.Component });
-ScSignInFormByPhoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScSignInFormByPhoneComponent, selector: "sc-sign-in-form-by-phone", ngImport: i0, template: "<form [formGroup]=\"formByPhone\" *tuiLet=\"(loadingApproveCode$ | async) as loadingApproveCode\" (ngSubmit)=\"onSubmit.next()\">\n    <div class=\"flex flex-col gap-4 mb-8\">\n        <label tuiLabel=\"\u041D\u043E\u043C\u0435\u0440 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430\">\n            <tui-input-phone formControlName=\"phone\" [tuiTextfieldCustomContent]=\"checkingPhone\">\n                \u041D\u043E\u043C\u0435\u0440 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430\n                <input tuiTextfield autocomplete=\"phone\" />\n            </tui-input-phone>\n            <tui-error formControlName=\"phone\" [error]=\"[] | tuiFieldError | async\"></tui-error>\n        </label>\n        <tui-error [error]=\"[] | tuiFieldError | async\"></tui-error>\n\n        <label *ngIf=\"loadingApproveCode === false && haveCode\" tuiLabel=\"\u041A\u043E\u0434 \u0438\u0437 \u0421\u041C\u0421\">\n            <tui-input formControlName=\"phoneApproveCode\">\n                \u041A\u043E\u0434 \u0438\u0437 \u0421\u041C\u0421\n                <input tuiTextfield [maskito]=\"approveCodeMask\" autocomplete=\"new-password\" />\n            </tui-input>\n            <tui-error formControlName=\"phoneApproveCode\" [error]=\"[] | tuiFieldError | async\"></tui-error>\n        </label>\n    </div>\n\n    <div *tuiLet=\"!!loadingApproveCode as loadingApproveCode\" class=\"flex flex-col gap-4 items-center mb-4\">\n        <button\n            *ngIf=\"!haveCode\"\n            tuiButton\n            (click)=\"onSendCode.next()\"\n            [disabled]=\"loadingApproveCode || !!!(isPhoneNotBusy$ | async) || phoneControl.invalid\"\n            [showLoader]=\"loadingApproveCode\"\n            icon=\"scIconLogIn\"\n        >\n            \u041F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u043A\u043E\u0434\n        </button>\n        <button *ngIf=\"!loadingApproveCode && !haveCode\" tuiLink [pseudo]=\"true\" [disabled]=\"!!!(isPhoneNotBusy$ | async) || phoneControl.invalid\" (click)=\"setHaveCode(true)\">\n            \u0423 \u043C\u0435\u043D\u044F \u0435\u0441\u0442\u044C \u043A\u043E\u0434\n        </button>\n\n        <ng-container *tuiLet=\"timer$ | async as timer\">\n            <tui-loader *ngIf=\"haveCode\" [showLoader]=\"loadingApproveCode\">\n                <button tuiLink [pseudo]=\"true\" [disabled]=\"loadingApproveCode || timer\" (click)=\"onSendCode.next()\">\n                    \u041F\u043E\u0432\u0442\u043E\u0440\u043D\u043E \u043E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u043A\u043E\u0434\n                    <ng-container *ngIf=\"timer\" class=\"!text-tui-base-08\">(\u0447\u0435\u0440\u0435\u0437 {{ timer }})</ng-container>\n                </button>\n            </tui-loader>\n        </ng-container>\n        <button\n            *ngIf=\"haveCode\"\n            tuiButton\n            type=\"submit\"\n            [showLoader]=\"!!(loadingPhoneAuth$ | async)\"\n            [disabled]=\"formByPhone.invalid || !!(loadingPhoneAuth$ | async)\"\n            icon=\"scIconLogIn\"\n        >\n            \u0412\u043E\u0439\u0442\u0438\n        </button>\n    </div>\n</form>\n\n<ng-template #checkingPhone>\n    <tui-loader *ngIf=\"!!!(isPhoneNotBusy$ | async) && phoneControl.valid\" class=\"w-4 h-4\"> </tui-loader>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.TuiTextfieldComponent, selector: "input[tuiTextfield], textarea[tuiTextfield]" }, { kind: "component", type: i3$2.TuiInputComponent, selector: "tui-input" }, { kind: "directive", type: i3$2.TuiInputDirective, selector: "tui-input" }, { kind: "directive", type: i4.TuiTextfieldCustomContentDirective, selector: "[tuiTextfieldCustomContent]", inputs: ["tuiTextfieldCustomContent"] }, { kind: "component", type: i4.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: i4.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i4.TuiLabelComponent, selector: "label[tuiLabel]", inputs: ["tuiLabel", "context"] }, { kind: "component", type: i4.TuiErrorComponent, selector: "tui-error", inputs: ["error"] }, { kind: "directive", type: i7.TuiLetDirective, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "component", type: i4.TuiLoaderComponent, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { kind: "component", type: i3$2.TuiInputPhoneComponent, selector: "tui-input-phone", inputs: ["countryCode", "phoneMaskAfterCountryCode", "allowText", "search"], outputs: ["searchChange"] }, { kind: "directive", type: i3$2.TuiInputPhoneDirective, selector: "tui-input-phone" }, { kind: "directive", type: i7$1.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i7$1.MaskitoCva, selector: "input[maskito], textarea[maskito]", inputs: ["maskito"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$2.TuiFieldErrorPipe, name: "tuiFieldError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ScSignInFormByPhoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScSignInFormByPhoneComponent, selector: "sc-sign-in-form-by-phone", ngImport: i0, template: "<form [formGroup]=\"formByPhone\" *tuiLet=\"(loadingApproveCode$ | async) as loadingApproveCode\" (ngSubmit)=\"onSubmit.next()\">\n    <div class=\"flex flex-col gap-4 mb-8\">\n        <label tuiLabel=\"\u041D\u043E\u043C\u0435\u0440 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430\">\n            <tui-input-phone formControlName=\"phone\" [tuiTextfieldCustomContent]=\"checkingPhone\">\n                \u041D\u043E\u043C\u0435\u0440 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430\n                <input tuiTextfield autocomplete=\"phone\" />\n            </tui-input-phone>\n            <tui-error formControlName=\"phone\" [error]=\"[] | tuiFieldError | async\"></tui-error>\n        </label>\n        <tui-error [error]=\"[] | tuiFieldError | async\"></tui-error>\n\n        <label *ngIf=\"loadingApproveCode === false && haveCode\" tuiLabel=\"\u041A\u043E\u0434 \u0438\u0437 \u0421\u041C\u0421\">\n            <tui-input formControlName=\"phoneApproveCode\">\n                \u041A\u043E\u0434 \u0438\u0437 \u0421\u041C\u0421\n                <input tuiTextfield [maskito]=\"approveCodeMask\" autocomplete=\"new-password\" />\n            </tui-input>\n            <tui-error formControlName=\"phoneApproveCode\" [error]=\"[] | tuiFieldError | async\"></tui-error>\n        </label>\n    </div>\n\n    <div *tuiLet=\"!!loadingApproveCode as loadingApproveCode\" class=\"flex flex-col gap-4 items-center mb-4\">\n        <button\n            *ngIf=\"!haveCode\"\n            tuiButton\n            size=\"s\"\n            (click)=\"onSendCode.next()\"\n            [disabled]=\"loadingApproveCode || !!!(isPhoneNotBusy$ | async) || phoneControl.invalid\"\n            [showLoader]=\"loadingApproveCode\"\n            icon=\"scIconLogIn\"\n        >\n            \u041F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u043A\u043E\u0434\n        </button>\n        <button *ngIf=\"!loadingApproveCode && !haveCode\" tuiLink [pseudo]=\"true\" [disabled]=\"!!!(isPhoneNotBusy$ | async) || phoneControl.invalid\" (click)=\"setHaveCode(true)\">\n            \u0423 \u043C\u0435\u043D\u044F \u0435\u0441\u0442\u044C \u043A\u043E\u0434\n        </button>\n\n        <ng-container *tuiLet=\"timer$ | async as timer\">\n            <tui-loader *ngIf=\"haveCode\" [showLoader]=\"loadingApproveCode\">\n                <button tuiLink [pseudo]=\"true\" [disabled]=\"loadingApproveCode || timer\" (click)=\"onSendCode.next()\">\n                    \u041F\u043E\u0432\u0442\u043E\u0440\u043D\u043E \u043E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u043A\u043E\u0434\n                    <ng-container *ngIf=\"timer\" class=\"!text-tui-base-08\">(\u0447\u0435\u0440\u0435\u0437 {{ timer }})</ng-container>\n                </button>\n            </tui-loader>\n        </ng-container>\n        <button\n            *ngIf=\"haveCode\"\n            tuiButton\n            size=\"s\"\n            type=\"submit\"\n            [showLoader]=\"!!(loadingPhoneAuth$ | async)\"\n            [disabled]=\"formByPhone.invalid || !!(loadingPhoneAuth$ | async)\"\n            icon=\"scIconLogIn\"\n        >\n            \u0412\u043E\u0439\u0442\u0438\n        </button>\n    </div>\n</form>\n\n<ng-template #checkingPhone>\n    <tui-loader *ngIf=\"!!!(isPhoneNotBusy$ | async) && phoneControl.valid\" class=\"w-4 h-4\"> </tui-loader>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.TuiTextfieldComponent, selector: "input[tuiTextfield], textarea[tuiTextfield]" }, { kind: "component", type: i3$2.TuiInputComponent, selector: "tui-input" }, { kind: "directive", type: i3$2.TuiInputDirective, selector: "tui-input" }, { kind: "directive", type: i4.TuiTextfieldCustomContentDirective, selector: "[tuiTextfieldCustomContent]", inputs: ["tuiTextfieldCustomContent"] }, { kind: "component", type: i4.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: i4.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i4.TuiLabelComponent, selector: "label[tuiLabel]", inputs: ["tuiLabel", "context"] }, { kind: "component", type: i4.TuiErrorComponent, selector: "tui-error", inputs: ["error"] }, { kind: "directive", type: i7.TuiLetDirective, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "component", type: i4.TuiLoaderComponent, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { kind: "component", type: i3$2.TuiInputPhoneComponent, selector: "tui-input-phone", inputs: ["countryCode", "phoneMaskAfterCountryCode", "allowText", "search"], outputs: ["searchChange"] }, { kind: "directive", type: i3$2.TuiInputPhoneDirective, selector: "tui-input-phone" }, { kind: "directive", type: i7$1.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i7$1.MaskitoCva, selector: "input[maskito], textarea[maskito]", inputs: ["maskito"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$2.TuiFieldErrorPipe, name: "tuiFieldError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScSignInFormByPhoneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-sign-in-form-by-phone', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"formByPhone\" *tuiLet=\"(loadingApproveCode$ | async) as loadingApproveCode\" (ngSubmit)=\"onSubmit.next()\">\n    <div class=\"flex flex-col gap-4 mb-8\">\n        <label tuiLabel=\"\u041D\u043E\u043C\u0435\u0440 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430\">\n            <tui-input-phone formControlName=\"phone\" [tuiTextfieldCustomContent]=\"checkingPhone\">\n                \u041D\u043E\u043C\u0435\u0440 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430\n                <input tuiTextfield autocomplete=\"phone\" />\n            </tui-input-phone>\n            <tui-error formControlName=\"phone\" [error]=\"[] | tuiFieldError | async\"></tui-error>\n        </label>\n        <tui-error [error]=\"[] | tuiFieldError | async\"></tui-error>\n\n        <label *ngIf=\"loadingApproveCode === false && haveCode\" tuiLabel=\"\u041A\u043E\u0434 \u0438\u0437 \u0421\u041C\u0421\">\n            <tui-input formControlName=\"phoneApproveCode\">\n                \u041A\u043E\u0434 \u0438\u0437 \u0421\u041C\u0421\n                <input tuiTextfield [maskito]=\"approveCodeMask\" autocomplete=\"new-password\" />\n            </tui-input>\n            <tui-error formControlName=\"phoneApproveCode\" [error]=\"[] | tuiFieldError | async\"></tui-error>\n        </label>\n    </div>\n\n    <div *tuiLet=\"!!loadingApproveCode as loadingApproveCode\" class=\"flex flex-col gap-4 items-center mb-4\">\n        <button\n            *ngIf=\"!haveCode\"\n            tuiButton\n            (click)=\"onSendCode.next()\"\n            [disabled]=\"loadingApproveCode || !!!(isPhoneNotBusy$ | async) || phoneControl.invalid\"\n            [showLoader]=\"loadingApproveCode\"\n            icon=\"scIconLogIn\"\n        >\n            \u041F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u043A\u043E\u0434\n        </button>\n        <button *ngIf=\"!loadingApproveCode && !haveCode\" tuiLink [pseudo]=\"true\" [disabled]=\"!!!(isPhoneNotBusy$ | async) || phoneControl.invalid\" (click)=\"setHaveCode(true)\">\n            \u0423 \u043C\u0435\u043D\u044F \u0435\u0441\u0442\u044C \u043A\u043E\u0434\n        </button>\n\n        <ng-container *tuiLet=\"timer$ | async as timer\">\n            <tui-loader *ngIf=\"haveCode\" [showLoader]=\"loadingApproveCode\">\n                <button tuiLink [pseudo]=\"true\" [disabled]=\"loadingApproveCode || timer\" (click)=\"onSendCode.next()\">\n                    \u041F\u043E\u0432\u0442\u043E\u0440\u043D\u043E \u043E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u043A\u043E\u0434\n                    <ng-container *ngIf=\"timer\" class=\"!text-tui-base-08\">(\u0447\u0435\u0440\u0435\u0437 {{ timer }})</ng-container>\n                </button>\n            </tui-loader>\n        </ng-container>\n        <button\n            *ngIf=\"haveCode\"\n            tuiButton\n            type=\"submit\"\n            [showLoader]=\"!!(loadingPhoneAuth$ | async)\"\n            [disabled]=\"formByPhone.invalid || !!(loadingPhoneAuth$ | async)\"\n            icon=\"scIconLogIn\"\n        >\n            \u0412\u043E\u0439\u0442\u0438\n        </button>\n    </div>\n</form>\n\n<ng-template #checkingPhone>\n    <tui-loader *ngIf=\"!!!(isPhoneNotBusy$ | async) && phoneControl.valid\" class=\"w-4 h-4\"> </tui-loader>\n</ng-template>\n" }]
+            args: [{ selector: 'sc-sign-in-form-by-phone', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"formByPhone\" *tuiLet=\"(loadingApproveCode$ | async) as loadingApproveCode\" (ngSubmit)=\"onSubmit.next()\">\n    <div class=\"flex flex-col gap-4 mb-8\">\n        <label tuiLabel=\"\u041D\u043E\u043C\u0435\u0440 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430\">\n            <tui-input-phone formControlName=\"phone\" [tuiTextfieldCustomContent]=\"checkingPhone\">\n                \u041D\u043E\u043C\u0435\u0440 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430\n                <input tuiTextfield autocomplete=\"phone\" />\n            </tui-input-phone>\n            <tui-error formControlName=\"phone\" [error]=\"[] | tuiFieldError | async\"></tui-error>\n        </label>\n        <tui-error [error]=\"[] | tuiFieldError | async\"></tui-error>\n\n        <label *ngIf=\"loadingApproveCode === false && haveCode\" tuiLabel=\"\u041A\u043E\u0434 \u0438\u0437 \u0421\u041C\u0421\">\n            <tui-input formControlName=\"phoneApproveCode\">\n                \u041A\u043E\u0434 \u0438\u0437 \u0421\u041C\u0421\n                <input tuiTextfield [maskito]=\"approveCodeMask\" autocomplete=\"new-password\" />\n            </tui-input>\n            <tui-error formControlName=\"phoneApproveCode\" [error]=\"[] | tuiFieldError | async\"></tui-error>\n        </label>\n    </div>\n\n    <div *tuiLet=\"!!loadingApproveCode as loadingApproveCode\" class=\"flex flex-col gap-4 items-center mb-4\">\n        <button\n            *ngIf=\"!haveCode\"\n            tuiButton\n            size=\"s\"\n            (click)=\"onSendCode.next()\"\n            [disabled]=\"loadingApproveCode || !!!(isPhoneNotBusy$ | async) || phoneControl.invalid\"\n            [showLoader]=\"loadingApproveCode\"\n            icon=\"scIconLogIn\"\n        >\n            \u041F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u043A\u043E\u0434\n        </button>\n        <button *ngIf=\"!loadingApproveCode && !haveCode\" tuiLink [pseudo]=\"true\" [disabled]=\"!!!(isPhoneNotBusy$ | async) || phoneControl.invalid\" (click)=\"setHaveCode(true)\">\n            \u0423 \u043C\u0435\u043D\u044F \u0435\u0441\u0442\u044C \u043A\u043E\u0434\n        </button>\n\n        <ng-container *tuiLet=\"timer$ | async as timer\">\n            <tui-loader *ngIf=\"haveCode\" [showLoader]=\"loadingApproveCode\">\n                <button tuiLink [pseudo]=\"true\" [disabled]=\"loadingApproveCode || timer\" (click)=\"onSendCode.next()\">\n                    \u041F\u043E\u0432\u0442\u043E\u0440\u043D\u043E \u043E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u043A\u043E\u0434\n                    <ng-container *ngIf=\"timer\" class=\"!text-tui-base-08\">(\u0447\u0435\u0440\u0435\u0437 {{ timer }})</ng-container>\n                </button>\n            </tui-loader>\n        </ng-container>\n        <button\n            *ngIf=\"haveCode\"\n            tuiButton\n            size=\"s\"\n            type=\"submit\"\n            [showLoader]=\"!!(loadingPhoneAuth$ | async)\"\n            [disabled]=\"formByPhone.invalid || !!(loadingPhoneAuth$ | async)\"\n            icon=\"scIconLogIn\"\n        >\n            \u0412\u043E\u0439\u0442\u0438\n        </button>\n    </div>\n</form>\n\n<ng-template #checkingPhone>\n    <tui-loader *ngIf=\"!!!(isPhoneNotBusy$ | async) && phoneControl.valid\" class=\"w-4 h-4\"> </tui-loader>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i1.ScAuthService }, { type: i1.ScVerificationService }]; } });
 
 /**
@@ -229,10 +229,10 @@ class ScSignInFormByEmailComponent {
     }
 }
 ScSignInFormByEmailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScSignInFormByEmailComponent, deps: [{ token: i1.ScAuthService }], target: i0.ɵɵFactoryTarget.Component });
-ScSignInFormByEmailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScSignInFormByEmailComponent, selector: "sc-sign-in-form-by-email", outputs: { forgotPassword: "forgotPassword" }, ngImport: i0, template: "<form [formGroup]=\"formByEmail\" (ngSubmit)=\"onSubmit.next()\">\n    <div class=\"flex flex-col gap-4 mb-8\">\n        <label tuiLabel=\"\u0410\u0434\u0440\u0435\u0441 \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u044B\">\n            <tui-input formControlName=\"login\">\n                \u0410\u0434\u0440\u0435\u0441 \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u044B\n                <input tuiTextfield autocomplete=\"email\" />\n            </tui-input>\n            <tui-error formControlName=\"login\" [error]=\"[] | tuiFieldError | async\"></tui-error>\n        </label>\n        <label tuiLabel=\"\u041F\u0430\u0440\u043E\u043B\u044C\">\n            <tui-input-password formControlName=\"password\">\n                \u041F\u0430\u0440\u043E\u043B\u044C\n                <input tuiTextfield autocomplete=\"current-password\" />\n            </tui-input-password>\n            <tui-error formControlName=\"password\" [error]=\"[] | tuiFieldError | async\"></tui-error>\n        </label>\n        <tui-error [error]=\"[] | tuiFieldError | async\"></tui-error>\n    </div>\n    <div class=\"flex flex-col gap-4 items-center mb-4\">\n        <a tuiLink [pseudo]=\"true\" (click)=\"forgotPassword.emit()\" class=\"text-base\">\u0417\u0430\u0431\u044B\u043B\u0438 \u043F\u0430\u0440\u043E\u043B\u044C?</a>\n        <button tuiButton type=\"submit\" [showLoader]=\"!!(loadingEmailAuth$ | async)\" [disabled]=\"formByEmail.invalid || !!(loadingEmailAuth$ | async)\" icon=\"scIconLogIn\">\n            \u0412\u043E\u0439\u0442\u0438\n        </button>\n    </div>\n</form>\n", dependencies: [{ kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$2.TuiInputPasswordComponent, selector: "tui-input-password" }, { kind: "directive", type: i3$2.TuiInputPasswordDirective, selector: "tui-input-password" }, { kind: "component", type: i4.TuiTextfieldComponent, selector: "input[tuiTextfield], textarea[tuiTextfield]" }, { kind: "component", type: i3$2.TuiInputComponent, selector: "tui-input" }, { kind: "directive", type: i3$2.TuiInputDirective, selector: "tui-input" }, { kind: "component", type: i4.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: i4.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i4.TuiLabelComponent, selector: "label[tuiLabel]", inputs: ["tuiLabel", "context"] }, { kind: "component", type: i4.TuiErrorComponent, selector: "tui-error", inputs: ["error"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$2.TuiFieldErrorPipe, name: "tuiFieldError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ScSignInFormByEmailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScSignInFormByEmailComponent, selector: "sc-sign-in-form-by-email", outputs: { forgotPassword: "forgotPassword" }, ngImport: i0, template: "<form [formGroup]=\"formByEmail\" (ngSubmit)=\"onSubmit.next()\">\n    <div class=\"flex flex-col gap-4 mb-8\">\n        <label tuiLabel=\"\u0410\u0434\u0440\u0435\u0441 \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u044B\">\n            <tui-input formControlName=\"login\">\n                \u0410\u0434\u0440\u0435\u0441 \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u044B\n                <input tuiTextfield autocomplete=\"email\" />\n            </tui-input>\n            <tui-error formControlName=\"login\" [error]=\"[] | tuiFieldError | async\"></tui-error>\n        </label>\n        <label tuiLabel=\"\u041F\u0430\u0440\u043E\u043B\u044C\">\n            <tui-input-password formControlName=\"password\">\n                \u041F\u0430\u0440\u043E\u043B\u044C\n                <input tuiTextfield autocomplete=\"current-password\" />\n            </tui-input-password>\n            <tui-error formControlName=\"password\" [error]=\"[] | tuiFieldError | async\"></tui-error>\n        </label>\n        <tui-error [error]=\"[] | tuiFieldError | async\"></tui-error>\n    </div>\n    <div class=\"flex flex-col gap-4 items-center mb-4\">\n        <a tuiLink [pseudo]=\"true\" (click)=\"forgotPassword.emit()\" class=\"text-base\">\u0417\u0430\u0431\u044B\u043B\u0438 \u043F\u0430\u0440\u043E\u043B\u044C?</a>\n        <button tuiButton type=\"submit\" [showLoader]=\"!!(loadingEmailAuth$ | async)\" size=\"s\" [disabled]=\"formByEmail.invalid || !!(loadingEmailAuth$ | async)\" icon=\"scIconLogIn\">\n            \u0412\u043E\u0439\u0442\u0438\n        </button>\n    </div>\n</form>\n", dependencies: [{ kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$2.TuiInputPasswordComponent, selector: "tui-input-password" }, { kind: "directive", type: i3$2.TuiInputPasswordDirective, selector: "tui-input-password" }, { kind: "component", type: i4.TuiTextfieldComponent, selector: "input[tuiTextfield], textarea[tuiTextfield]" }, { kind: "component", type: i3$2.TuiInputComponent, selector: "tui-input" }, { kind: "directive", type: i3$2.TuiInputDirective, selector: "tui-input" }, { kind: "component", type: i4.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: i4.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i4.TuiLabelComponent, selector: "label[tuiLabel]", inputs: ["tuiLabel", "context"] }, { kind: "component", type: i4.TuiErrorComponent, selector: "tui-error", inputs: ["error"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$2.TuiFieldErrorPipe, name: "tuiFieldError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScSignInFormByEmailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-sign-in-form-by-email', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"formByEmail\" (ngSubmit)=\"onSubmit.next()\">\n    <div class=\"flex flex-col gap-4 mb-8\">\n        <label tuiLabel=\"\u0410\u0434\u0440\u0435\u0441 \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u044B\">\n            <tui-input formControlName=\"login\">\n                \u0410\u0434\u0440\u0435\u0441 \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u044B\n                <input tuiTextfield autocomplete=\"email\" />\n            </tui-input>\n            <tui-error formControlName=\"login\" [error]=\"[] | tuiFieldError | async\"></tui-error>\n        </label>\n        <label tuiLabel=\"\u041F\u0430\u0440\u043E\u043B\u044C\">\n            <tui-input-password formControlName=\"password\">\n                \u041F\u0430\u0440\u043E\u043B\u044C\n                <input tuiTextfield autocomplete=\"current-password\" />\n            </tui-input-password>\n            <tui-error formControlName=\"password\" [error]=\"[] | tuiFieldError | async\"></tui-error>\n        </label>\n        <tui-error [error]=\"[] | tuiFieldError | async\"></tui-error>\n    </div>\n    <div class=\"flex flex-col gap-4 items-center mb-4\">\n        <a tuiLink [pseudo]=\"true\" (click)=\"forgotPassword.emit()\" class=\"text-base\">\u0417\u0430\u0431\u044B\u043B\u0438 \u043F\u0430\u0440\u043E\u043B\u044C?</a>\n        <button tuiButton type=\"submit\" [showLoader]=\"!!(loadingEmailAuth$ | async)\" [disabled]=\"formByEmail.invalid || !!(loadingEmailAuth$ | async)\" icon=\"scIconLogIn\">\n            \u0412\u043E\u0439\u0442\u0438\n        </button>\n    </div>\n</form>\n" }]
+            args: [{ selector: 'sc-sign-in-form-by-email', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"formByEmail\" (ngSubmit)=\"onSubmit.next()\">\n    <div class=\"flex flex-col gap-4 mb-8\">\n        <label tuiLabel=\"\u0410\u0434\u0440\u0435\u0441 \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u044B\">\n            <tui-input formControlName=\"login\">\n                \u0410\u0434\u0440\u0435\u0441 \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u044B\n                <input tuiTextfield autocomplete=\"email\" />\n            </tui-input>\n            <tui-error formControlName=\"login\" [error]=\"[] | tuiFieldError | async\"></tui-error>\n        </label>\n        <label tuiLabel=\"\u041F\u0430\u0440\u043E\u043B\u044C\">\n            <tui-input-password formControlName=\"password\">\n                \u041F\u0430\u0440\u043E\u043B\u044C\n                <input tuiTextfield autocomplete=\"current-password\" />\n            </tui-input-password>\n            <tui-error formControlName=\"password\" [error]=\"[] | tuiFieldError | async\"></tui-error>\n        </label>\n        <tui-error [error]=\"[] | tuiFieldError | async\"></tui-error>\n    </div>\n    <div class=\"flex flex-col gap-4 items-center mb-4\">\n        <a tuiLink [pseudo]=\"true\" (click)=\"forgotPassword.emit()\" class=\"text-base\">\u0417\u0430\u0431\u044B\u043B\u0438 \u043F\u0430\u0440\u043E\u043B\u044C?</a>\n        <button tuiButton type=\"submit\" [showLoader]=\"!!(loadingEmailAuth$ | async)\" size=\"s\" [disabled]=\"formByEmail.invalid || !!(loadingEmailAuth$ | async)\" icon=\"scIconLogIn\">\n            \u0412\u043E\u0439\u0442\u0438\n        </button>\n    </div>\n</form>\n" }]
         }], ctorParameters: function () { return [{ type: i1.ScAuthService }]; }, propDecorators: { forgotPassword: [{
                 type: Output
             }] } });
@@ -285,10 +285,10 @@ class ScSignInFormComponent {
     }
 }
 ScSignInFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScSignInFormComponent, deps: [{ token: i1.ScAuthService }], target: i0.ɵɵFactoryTarget.Component });
-ScSignInFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScSignInFormComponent, selector: "sc-sign-in-form", inputs: { authMethod: "authMethod" }, outputs: { forgotPassword: "forgotPassword", signUp: "signUp", successAuth: "successAuth" }, ngImport: i0, template: "<div class=\"flex justify-center mb-4\">\n    <button\n        tuiButton\n        [tuiMode]=\"authMethod === 'by_phone' ? 'onLight' : null\"\n        [appearance]=\"authMethod === 'by_phone' ? 'secondary' : 'outline'\"\n        size=\"s\"\n        (click)=\"switchAuth(method.byPhone)\"\n        class=\"!w-36 !min-w-0 tui-space_right-3 tui-space_bottom-3 !font-bold\"\n    >\n        \u041F\u043E \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0443\n    </button>\n\n    <button\n        tuiButton\n        [tuiMode]=\"authMethod === 'by_email' ? 'onLight' : null\"\n        [appearance]=\"authMethod === 'by_email' ? 'secondary' : 'outline'\"\n        size=\"s\"\n        (click)=\"switchAuth(method.byEmail)\"\n        class=\"!w-36 !min-w-0 tui-space_left-3 tui-space_bottom-3 !font-bold\"\n    >\n        \u041F\u043E e-mail\n    </button>\n</div>\n\n<sc-sign-in-form-by-email *ngIf=\"authMethod === 'by_email'\" (forgotPassword)=\"onForgotPassword()\"></sc-sign-in-form-by-email>\n\n<sc-sign-in-form-by-phone [class.hidden]=\"authMethod !== 'by_phone'\"></sc-sign-in-form-by-phone>\n\n<div class=\"flex flex-col gap-4 items-center\">\n    <span class=\"font-medium text-tui-text-02\">\u0415\u0449\u0435 \u043D\u0435 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u043D\u044B?</span>\n    <button tuiButton tuiMode=\"onLight\" (click)=\"signUp.emit()\" type=\"button\" icon=\"scIconAddProfile\" appearance=\"secondary\">\u0417\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u0442\u044C\u0441\u044F</button>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "directive", type: i4.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { kind: "component", type: ScSignInFormByPhoneComponent, selector: "sc-sign-in-form-by-phone" }, { kind: "component", type: ScSignInFormByEmailComponent, selector: "sc-sign-in-form-by-email", outputs: ["forgotPassword"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ScSignInFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScSignInFormComponent, selector: "sc-sign-in-form", inputs: { authMethod: "authMethod" }, outputs: { forgotPassword: "forgotPassword", signUp: "signUp", successAuth: "successAuth" }, ngImport: i0, template: "<div class=\"flex justify-center mb-4\">\n    <button\n        tuiButton\n        [tuiMode]=\"authMethod === 'by_phone' ? null : 'onLight'\"\n        [appearance]=\"authMethod === 'by_phone' ? 'primary' : 'secondary'\"\n        size=\"s\"\n        (click)=\"switchAuth(method.byPhone)\"\n        class=\"!w-36 !min-w-0 tui-space_right-3 tui-space_bottom-3 !font-bold\"\n    >\n        \u041F\u043E \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0443\n    </button>\n\n    <button\n        tuiButton\n        [tuiMode]=\"authMethod === 'by_email' ? null : 'onLight'\"\n        [appearance]=\"authMethod === 'by_email' ? 'primary' : 'secondary'\"\n        size=\"s\"\n        (click)=\"switchAuth(method.byEmail)\"\n        class=\"!w-36 !min-w-0 tui-space_left-3 tui-space_bottom-3 !font-bold\"\n    >\n        \u041F\u043E e-mail\n    </button>\n</div>\n\n<sc-sign-in-form-by-email *ngIf=\"authMethod === 'by_email'\" (forgotPassword)=\"onForgotPassword()\"></sc-sign-in-form-by-email>\n\n<sc-sign-in-form-by-phone [class.hidden]=\"authMethod !== 'by_phone'\"></sc-sign-in-form-by-phone>\n\n<div class=\"flex flex-col gap-4 items-center\">\n    <span class=\"font-medium text-tui-text-02\">\u0415\u0449\u0435 \u043D\u0435 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u043D\u044B?</span>\n    <button tuiButton tuiMode=\"onLight\" (click)=\"signUp.emit()\" size=\"s\" type=\"button\" icon=\"scIconAddProfile\" appearance=\"secondary\">\u0417\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u0442\u044C\u0441\u044F</button>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "directive", type: i4.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { kind: "component", type: ScSignInFormByPhoneComponent, selector: "sc-sign-in-form-by-phone" }, { kind: "component", type: ScSignInFormByEmailComponent, selector: "sc-sign-in-form-by-email", outputs: ["forgotPassword"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScSignInFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-sign-in-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex justify-center mb-4\">\n    <button\n        tuiButton\n        [tuiMode]=\"authMethod === 'by_phone' ? 'onLight' : null\"\n        [appearance]=\"authMethod === 'by_phone' ? 'secondary' : 'outline'\"\n        size=\"s\"\n        (click)=\"switchAuth(method.byPhone)\"\n        class=\"!w-36 !min-w-0 tui-space_right-3 tui-space_bottom-3 !font-bold\"\n    >\n        \u041F\u043E \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0443\n    </button>\n\n    <button\n        tuiButton\n        [tuiMode]=\"authMethod === 'by_email' ? 'onLight' : null\"\n        [appearance]=\"authMethod === 'by_email' ? 'secondary' : 'outline'\"\n        size=\"s\"\n        (click)=\"switchAuth(method.byEmail)\"\n        class=\"!w-36 !min-w-0 tui-space_left-3 tui-space_bottom-3 !font-bold\"\n    >\n        \u041F\u043E e-mail\n    </button>\n</div>\n\n<sc-sign-in-form-by-email *ngIf=\"authMethod === 'by_email'\" (forgotPassword)=\"onForgotPassword()\"></sc-sign-in-form-by-email>\n\n<sc-sign-in-form-by-phone [class.hidden]=\"authMethod !== 'by_phone'\"></sc-sign-in-form-by-phone>\n\n<div class=\"flex flex-col gap-4 items-center\">\n    <span class=\"font-medium text-tui-text-02\">\u0415\u0449\u0435 \u043D\u0435 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u043D\u044B?</span>\n    <button tuiButton tuiMode=\"onLight\" (click)=\"signUp.emit()\" type=\"button\" icon=\"scIconAddProfile\" appearance=\"secondary\">\u0417\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u0442\u044C\u0441\u044F</button>\n</div>\n" }]
+            args: [{ selector: 'sc-sign-in-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex justify-center mb-4\">\n    <button\n        tuiButton\n        [tuiMode]=\"authMethod === 'by_phone' ? null : 'onLight'\"\n        [appearance]=\"authMethod === 'by_phone' ? 'primary' : 'secondary'\"\n        size=\"s\"\n        (click)=\"switchAuth(method.byPhone)\"\n        class=\"!w-36 !min-w-0 tui-space_right-3 tui-space_bottom-3 !font-bold\"\n    >\n        \u041F\u043E \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0443\n    </button>\n\n    <button\n        tuiButton\n        [tuiMode]=\"authMethod === 'by_email' ? null : 'onLight'\"\n        [appearance]=\"authMethod === 'by_email' ? 'primary' : 'secondary'\"\n        size=\"s\"\n        (click)=\"switchAuth(method.byEmail)\"\n        class=\"!w-36 !min-w-0 tui-space_left-3 tui-space_bottom-3 !font-bold\"\n    >\n        \u041F\u043E e-mail\n    </button>\n</div>\n\n<sc-sign-in-form-by-email *ngIf=\"authMethod === 'by_email'\" (forgotPassword)=\"onForgotPassword()\"></sc-sign-in-form-by-email>\n\n<sc-sign-in-form-by-phone [class.hidden]=\"authMethod !== 'by_phone'\"></sc-sign-in-form-by-phone>\n\n<div class=\"flex flex-col gap-4 items-center\">\n    <span class=\"font-medium text-tui-text-02\">\u0415\u0449\u0435 \u043D\u0435 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u043D\u044B?</span>\n    <button tuiButton tuiMode=\"onLight\" (click)=\"signUp.emit()\" size=\"s\" type=\"button\" icon=\"scIconAddProfile\" appearance=\"secondary\">\u0417\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u0442\u044C\u0441\u044F</button>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.ScAuthService }]; }, propDecorators: { authMethod: [{
                 type: Input
             }], forgotPassword: [{
@@ -1455,6 +1455,130 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Значения пагинации списка товаров категории по умолчанию.
+ */
+const SC_PRODUCT_PAGINATION_DEFAULT_OPTIONS = {
+    perPage: 20,
+    page: 0,
+};
+/**
+ * Токен значений пагинации списка товаров категории по умолчанию.
+ */
+const SC_PRODUCT_PAGINATION_OPTIONS = tuiCreateToken(SC_PRODUCT_PAGINATION_DEFAULT_OPTIONS);
+/**
+ * {@link Subject} параметров пагинации списка товаров категории.
+ */
+const paginationParams$ = new Subject();
+/**
+ * Токен {@link Subject} параметров пагинации списка товаров категории для получения их из вне.
+ */
+const SC_PRODUCT_PAGINATION_PARAMS = tuiCreateToken(paginationParams$);
+/**
+ * Фабрика создания потока данных о товарах категории c пагинацией, включая данные о количестве этих товаров в корзине.
+ *
+ * @param catalogService Сервис для работы с каталогом.
+ * @param cartService Сервис для работы с корзиной.
+ * @param destroy$ Сервис завершения {@link Observable} через `takeUntil`.
+ */
+function productsPaginationChangeFactory({ paramMap }, catalogService, cartService, destroy$) {
+    return paramMap.pipe(map((params) => params.get('categoryId')), filter(tuiIsPresent), switchMap((categoryId) => paginationParams$.pipe(debounceTime(20), switchMap((paginationParams) => catalogService.getCategoryProducts$(Number(categoryId), paginationParams)), filter(tuiIsPresent), scan((acc, value) => {
+        if (acc && value && value.meta.currentPage > 1)
+            value.data.unshift(...acc.data);
+        return value;
+    }, null), switchMap((productsPaginate) => cartService.getCartChange$().pipe(map((cart) => {
+        productsPaginate?.data.forEach((product) => (product.cartItem = cart.items.find((cartItem) => cartItem.product.id === product.id)));
+        return productsPaginate;
+    }))), startWith(null))), share(), takeUntil(destroy$));
+}
+/**
+ * Токен потока данных о товарах категории, включая данные о количестве этих товаров в корзине.
+ */
+const SC_PRODUCT_PAGINATION_CHANGE_INFO = new InjectionToken('SC_PRODUCT_PAGINATION_CHANGE_INFO');
+/**
+ * {@link EventEmitter} событие нажатия на кнопку "Показать следующие позиции категории".
+ */
+const nextPageClickEvent = new EventEmitter();
+/**
+ *  Токен {@link EventEmitter} событие нажатия на кнопку "Показать следующие позиции категории".
+ */
+const SC_NEXT_PAGE_PAGINATION_CLICK = tuiCreateToken(nextPageClickEvent);
+/**
+ * Фабрика создания потока данных о состоянии загрузки запроса списка товаров с пагинацией пагинации.
+ */
+function loadingPaginationFactory(productsData$, destroy$) {
+    return merge(paginationParams$.pipe(map(() => true)), productsData$.pipe(map((data) => data === null))).pipe(share(), takeUntil(destroy$));
+}
+/**
+ *  Токен потока данных о состоянии загрузки товаров пагинации.
+ */
+const SC_LOADING_PAGINATION_CHANGE_INFO = new InjectionToken('SC_LOADING_PAGINATION_CHANGE_INFO');
+/**
+ * Фабрика создания потока данных прокрутки страницы с сигналами о необходимости пагинации товара.
+ */
+function nextPagePaginationChangeFactory({ events }, nextPagePaginationClick, productsData$, destroy$) {
+    return nextPagePaginationClick
+        .pipe(scan((acc) => ++acc, 1), startWith(1))
+        .pipe(takeUntil(merge(events.pipe(filter((e) => e instanceof NavigationEnd)), productsData$.pipe(filter((paginate) => paginate !== null && paginate.meta.currentPage >= paginate.meta.lastPage)), destroy$)));
+}
+/**
+ *  Токен потока данных прокрутки страницы с сигналами о необходимости пагинации товара.
+ */
+const SC_NEXT_PAGE_PAGINATION_CHANGE_INFO = new InjectionToken('SC_NEXT_PAGE_PAGINATION_CHANGE_INFO');
+/**
+ * Провайдеры потока данных о товарах категории, включая данные о количестве этих товаров в корзине.
+ */
+const SC_PRODUCT_PAGINATION_CHANGE_PROVIDERS = [
+    TuiDestroyService,
+    {
+        provide: SC_PRODUCT_PAGINATION_CHANGE_INFO,
+        deps: [ActivatedRoute, ScCatalogService, ScCartService, TuiDestroyService],
+        useFactory: productsPaginationChangeFactory,
+    },
+    {
+        provide: SC_NEXT_PAGE_PAGINATION_CHANGE_INFO,
+        deps: [Router, SC_NEXT_PAGE_PAGINATION_CLICK, SC_PRODUCT_PAGINATION_CHANGE_INFO, TuiDestroyService],
+        useFactory: nextPagePaginationChangeFactory,
+    },
+    {
+        provide: SC_LOADING_PAGINATION_CHANGE_INFO,
+        deps: [SC_PRODUCT_PAGINATION_CHANGE_INFO, TuiDestroyService],
+        useFactory: loadingPaginationFactory,
+    },
+];
+
+/**
+ * Компонент элементов управления пагинацией списка товаров.
+ */
+class ScPriceListPaginationComponent {
+    /**
+     * Инициализирует экземпляр класса {@link ScPriceListPaginationComponent}.
+     *
+     * @param nextPageClickEvent Событие нажатия на кнопку "Показать следующие N позиций".
+     * @param options Значения пагинации списка товаров категории по умолчанию.
+     */
+    constructor(nextPageClickEvent, options) {
+        this.nextPageClickEvent = nextPageClickEvent;
+        this.options = options;
+    }
+}
+ScPriceListPaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceListPaginationComponent, deps: [{ token: SC_NEXT_PAGE_PAGINATION_CLICK }, { token: SC_PRODUCT_PAGINATION_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
+ScPriceListPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScPriceListPaginationComponent, selector: "sc-price-list-pagination", inputs: { meta: "meta", loadingPagination: "loadingPagination" }, providers: [SC_PRODUCT_PAGINATION_CHANGE_PROVIDERS], ngImport: i0, template: "<button *ngIf=\"meta?.currentPage !== meta?.lastPage\" tuiButton (click)=\"nextPageClickEvent.emit()\" [disabled]=\"loadingPagination\" appearance=\"secondary\" size=\"l\" class=\"w-full\">\n    \u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0435\u0449\u0451 {{ options.perPage }} \u0442\u043E\u0432\u0430\u0440\u043E\u0432\n</button>\n<!-- \u0412 \u0431\u0443\u0434\u0443\u0449\u0435\u043C \u043C\u043E\u0436\u043D\u043E \u0434\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043F\u0430\u0433\u0438\u043D\u0430\u0446\u0438\u044E \u043F\u043E \u043D\u043E\u043C\u0435\u0440\u0430\u043C \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u044B. -->\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceListPaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-price-list-pagination', changeDetection: ChangeDetectionStrategy.OnPush, providers: [SC_PRODUCT_PAGINATION_CHANGE_PROVIDERS], template: "<button *ngIf=\"meta?.currentPage !== meta?.lastPage\" tuiButton (click)=\"nextPageClickEvent.emit()\" [disabled]=\"loadingPagination\" appearance=\"secondary\" size=\"l\" class=\"w-full\">\n    \u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0435\u0449\u0451 {{ options.perPage }} \u0442\u043E\u0432\u0430\u0440\u043E\u0432\n</button>\n<!-- \u0412 \u0431\u0443\u0434\u0443\u0449\u0435\u043C \u043C\u043E\u0436\u043D\u043E \u0434\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043F\u0430\u0433\u0438\u043D\u0430\u0446\u0438\u044E \u043F\u043E \u043D\u043E\u043C\u0435\u0440\u0430\u043C \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u044B. -->\n" }]
+        }], ctorParameters: function () { return [{ type: i0.EventEmitter, decorators: [{
+                    type: Inject,
+                    args: [SC_NEXT_PAGE_PAGINATION_CLICK]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SC_PRODUCT_PAGINATION_OPTIONS]
+                }] }]; }, propDecorators: { meta: [{
+                type: Input
+            }], loadingPagination: [{
+                type: Input
+            }] } });
+
 /**
  * Language: Russian.
  */
@@ -1576,7 +1700,13 @@ echarts.use([TitleComponent, TooltipComponent, GridComponent, LineChart, SVGRend
 class ScCatalogModule {
 }
 ScCatalogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCatalogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ScCatalogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: ScCatalogModule, declarations: [ScCategoryCardComponent, ScFavoriteBtnComponent, ScInputQuantityComponent, ScPriceCardComponent, ScPriceWarehouseStockComponent, ScPriceHistoryComponent], imports: [CommonModule,
+ScCatalogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: ScCatalogModule, declarations: [ScPriceListPaginationComponent,
+        ScCategoryCardComponent,
+        ScFavoriteBtnComponent,
+        ScInputQuantityComponent,
+        ScPriceCardComponent,
+        ScPriceWarehouseStockComponent,
+        ScPriceHistoryComponent], imports: [CommonModule,
         RouterModule,
         TuiButtonModule,
         TuiSvgModule,
@@ -1591,7 +1721,13 @@ ScCatalogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
         TuiFieldErrorPipeModule,
         TuiLoaderModule,
         TuiLinkModule,
-        TuiElasticContainerModule, i2.NgxEchartsModule], exports: [ScCategoryCardComponent, ScFavoriteBtnComponent, ScInputQuantityComponent, ScPriceCardComponent, ScPriceWarehouseStockComponent, ScPriceHistoryComponent] });
+        TuiElasticContainerModule, i2.NgxEchartsModule, TuiLetModule], exports: [ScPriceListPaginationComponent,
+        ScCategoryCardComponent,
+        ScFavoriteBtnComponent,
+        ScInputQuantityComponent,
+        ScPriceCardComponent,
+        ScPriceWarehouseStockComponent,
+        ScPriceHistoryComponent] });
 ScCatalogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCatalogModule, imports: [CommonModule,
         RouterModule,
         TuiButtonModule,
@@ -1608,12 +1744,29 @@ ScCatalogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
         TuiLoaderModule,
         TuiLinkModule,
         TuiElasticContainerModule,
-        NgxEchartsModule.forRoot({ echarts })] });
+        NgxEchartsModule.forRoot({ echarts }),
+        TuiLetModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCatalogModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [ScCategoryCardComponent, ScFavoriteBtnComponent, ScInputQuantityComponent, ScPriceCardComponent, ScPriceWarehouseStockComponent, ScPriceHistoryComponent],
-                    exports: [ScCategoryCardComponent, ScFavoriteBtnComponent, ScInputQuantityComponent, ScPriceCardComponent, ScPriceWarehouseStockComponent, ScPriceHistoryComponent],
+                    declarations: [
+                        ScPriceListPaginationComponent,
+                        ScCategoryCardComponent,
+                        ScFavoriteBtnComponent,
+                        ScInputQuantityComponent,
+                        ScPriceCardComponent,
+                        ScPriceWarehouseStockComponent,
+                        ScPriceHistoryComponent,
+                    ],
+                    exports: [
+                        ScPriceListPaginationComponent,
+                        ScCategoryCardComponent,
+                        ScFavoriteBtnComponent,
+                        ScInputQuantityComponent,
+                        ScPriceCardComponent,
+                        ScPriceWarehouseStockComponent,
+                        ScPriceHistoryComponent,
+                    ],
                     imports: [
                         CommonModule,
                         RouterModule,
@@ -1632,6 +1785,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         TuiLinkModule,
                         TuiElasticContainerModule,
                         NgxEchartsModule.forRoot({ echarts }),
+                        TuiLetModule,
                     ],
                 }]
         }] });
@@ -2271,5 +2425,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AuthMethod, FilesAndDocumentsComponent, FilesAndDocumentsModule, SC_LINEAR_VALUES, SC_LINEAR_VALUES_TOKEN, ScAuthModule, ScBannerComponent, ScBannerModule, ScCartItemMobileComponent, ScCartModule, ScCatalogModule, ScCategoryCardComponent, ScFavoriteBtnComponent, ScInputQuantityComponent, ScNewsCardComponent, ScNewsCardSkeletonComponent, ScNewsModule, ScOrderItemMobileComponent, ScOrderModule, ScPriceCardComponent, ScPriceHistoryComponent, ScPriceWarehouseStockComponent, ScShareButtonComponent, ScShareButtonModule, ScSignInFormByEmailComponent, ScSignInFormByPhoneComponent, ScSignInFormComponent, TreeDirective, TreeIconService, TreeLoaderService, TreeTopDirective, phoneApproveCodeMask, scClientUiIconsName, stepValidator };
+export { AuthMethod, FilesAndDocumentsComponent, FilesAndDocumentsModule, SC_LINEAR_VALUES, SC_LINEAR_VALUES_TOKEN, SC_LOADING_PAGINATION_CHANGE_INFO, SC_NEXT_PAGE_PAGINATION_CHANGE_INFO, SC_NEXT_PAGE_PAGINATION_CLICK, SC_PRODUCT_PAGINATION_CHANGE_INFO, SC_PRODUCT_PAGINATION_CHANGE_PROVIDERS, SC_PRODUCT_PAGINATION_DEFAULT_OPTIONS, SC_PRODUCT_PAGINATION_OPTIONS, SC_PRODUCT_PAGINATION_PARAMS, ScAuthModule, ScBannerComponent, ScBannerModule, ScCartItemMobileComponent, ScCartModule, ScCatalogModule, ScCategoryCardComponent, ScFavoriteBtnComponent, ScInputQuantityComponent, ScNewsCardComponent, ScNewsCardSkeletonComponent, ScNewsModule, ScOrderItemMobileComponent, ScOrderModule, ScPriceCardComponent, ScPriceHistoryComponent, ScPriceListPaginationComponent, ScPriceWarehouseStockComponent, ScShareButtonComponent, ScShareButtonModule, ScSignInFormByEmailComponent, ScSignInFormByPhoneComponent, ScSignInFormComponent, TreeDirective, TreeIconService, TreeLoaderService, TreeTopDirective, nextPageClickEvent, paginationParams$, phoneApproveCodeMask, scClientUiIconsName, stepValidator };
 //# sourceMappingURL=snabcentr-client-ui.mjs.map