@snabcentr/client-ui 0.7.0 → 0.8.2

package/fesm2015/snabcentr-client-ui.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, EventEmitter, Output, Input, NgModule, Directive, HostBinding, ContentChild, Injectable, ElementRef, Inject, ContentChildren, ViewChild, HostListener, ChangeDetectorRef, Optional, Self, inject, InjectionToken, forwardRef } from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Inject, Input, Output, NgModule, Directive, HostBinding, ContentChild, Injectable, ElementRef, ContentChildren, ViewChild, HostListener, ChangeDetectorRef, Optional, Self, inject, InjectionToken, forwardRef } from '@angular/core';
 import * as i12 from 'rxjs';
-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 { Subject, filter, map, switchMap, tap, catchError, of, finalize, startWith, share, 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, ScCatalogService, ScCartService, ScIconTypesEnum, ScUserService } from '@snabcentr/client-core';
 import * as i2 from '@angular/common';
@@ -9,9 +9,9 @@ import { CommonModule, formatDate } from '@angular/common';
 import * as i4 from '@taiga-ui/core';
 import { TuiTextfieldControllerModule, TuiLinkModule, TuiButtonModule, TuiLabelModule, TuiModeModule, TuiErrorModule, TuiLoaderModule, tuiFadeIn, tuiFormatNumber, TuiSvgModule, TuiHintModule, TuiFormatNumberPipeModule, TuiNotificationModule, TuiFormatPhonePipeModule } from '@taiga-ui/core';
 import * as i2$1 from '@angular/forms';
-import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule, NgControl } from '@angular/forms';
+import { FormGroupDirective, FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule, NgControl } from '@angular/forms';
 import * as i6 from '@taiga-ui/cdk';
-import { tuiIsFalsy, TuiLetModule, tuiCreateToken, AbstractTuiNullableControl, TUI_IS_MOBILE, tuiIsPresent, TuiDestroyService, tuiPure } from '@taiga-ui/cdk';
+import { tuiControlValue, tuiIsFalsy, TuiLetModule, tuiCreateToken, AbstractTuiNullableControl, TUI_IS_MOBILE, tuiIsPresent, TuiDestroyService, tuiPure } from '@taiga-ui/cdk';
 import * as i3 from '@taiga-ui/kit';
 import { TuiInputPasswordModule, TuiInputModule, TuiFieldErrorPipeModule, TuiInputPhoneModule, TuiAccordionModule, TuiElasticContainerModule, TuiCarouselModule, TUI_NUMBER_VALUE_TRANSFORMER, TuiInputNumberComponent, TuiIslandModule, TuiInputNumberModule, TuiTreeService, TuiTreeItemContentComponent, TUI_TREE_START, TUI_TREE_CONTENT, TUI_TREE_LOADING, TUI_TREE_LOADER, TuiTreeModule, TuiCheckboxLabeledModule } from '@taiga-ui/kit';
 import * as i7 from '@maskito/angular';
@@ -59,67 +59,34 @@ const phoneApproveCodeMask = {
 };
 
 /**
- * Компонент аутентификации по номеру телефона и коду подтверждения.
+ * Компонент формы проверки телефона и получения кода подтверждения.
  */
-class ScSignInFormByPhoneComponent {
+class ScPhoneApproveFormComponent {
     /**
-     * Инициализирует экземпляр класса {@link ScSignInFormByPhoneComponent}.
+     * Инициализирует экземпляр класса {@link ScPhoneApproveFormComponent}.
      *
-     * @param authService Сервис аутентификации.
      * @param verificationService Сервис верификации.
+     * @param formGroupDirective Директива c `FormGroup` из DOM.
      */
-    constructor(authService, verificationService) {
-        this.authService = authService;
+    constructor(verificationService, formGroupDirective) {
         this.verificationService = verificationService;
+        this.formGroupDirective = formGroupDirective;
         /**
-         * Этап процесса аутентификации.
+         * Признак, следует ли телефону быть в системе. От этого признака зависит в каких случаях выдавать ошибку при проверки занятости телефона.
          */
-        this.haveCode = false;
-        /**
-         * Группа полей ввода для формы «Вход на сайт».
-         */
-        this.formByPhone = new FormGroup({
-            phone: new FormControl(null, [Validators.required, Validators.minLength(12)]),
-            phoneApproveCode: new FormControl(null, [Validators.required, Validators.minLength(6)]),
-        });
+        this.shouldBeBusy = true;
         /**
-         * {@link Subject} События отправки формы.
+         * Признак, следует ли проверять подтверждён ли телефона в системе. При `true` будет вызывать ошибку при наличие телефона в системе без подтверждения.
          */
-        this.onSubmit = new Subject();
+        this.shouldBeConfirmed = false;
         /**
-         * {@link Observable} Запроса данных аутентификации.
+         * Наличие кода подтверждения у пользователя.
          */
-        this.phoneRequest$ = this.onSubmit.pipe(filter(() => this.formByPhone.valid), map(() => this.formByPhone.value), switchMap((value) => this.authService.getSignIn$(value).pipe(catchError((error) => {
-            var _a;
-            const errorResponse = error.error;
-            for (const key in errorResponse.errors) {
-                (_a = this.formByPhone.get(key)) === null || _a === void 0 ? void 0 : _a.setErrors({ serverResponse: errorResponse.errors[`${key}`] });
-            }
-            if (!errorResponse.errors && errorResponse.message) {
-                this.formByPhone.setErrors({ serverResponse: [errorResponse.message] });
-            }
-            return of({});
-        }), startWith(null))), share());
+        this.haveCode = false;
         /**
-         * {@link Observable} Запроса данных получения информации о том свободен ли номер телефона.
+         * Событие для обратной привязки наличия кода подтверждения
          */
-        this.isPhoneNotBusy$ = this.phoneControl.valueChanges.pipe(tap(() => this.reloadTimer$.next(0)), switchMap((value) => {
-            if (this.phoneControl.valid && !!value) {
-                return this.verificationService.getPhoneCheck$(value).pipe(map((result) => result.isBusy), tap((isBusy) => {
-                    if (!isBusy) {
-                        this.phoneControl.setErrors({ serverResponse: ['Пользователя с таким номером телефона не существует'] });
-                        this.phoneControl.markAsTouched();
-                    }
-                }), catchError((error) => {
-                    var _a, _b;
-                    const errorResponse = error.error;
-                    this.phoneControl.setErrors({ serverResponse: (_b = (_a = errorResponse === null || errorResponse === void 0 ? void 0 : errorResponse.errors) === null || _a === void 0 ? void 0 : _a[`phone`]) !== null && _b !== void 0 ? _b : [errorResponse.message] });
-                    return of(false);
-                }), startWith(null));
-            }
-            this.setHaveCode(false);
-            return of(false);
-        }), share());
+        this.haveCodeChange = new EventEmitter();
         /**
          * {@link Subject} События отправки кода подтверждения.
          */
@@ -146,10 +113,6 @@ class ScSignInFormByPhoneComponent {
          * Маска поля ввода кода для подтверждения.
          */
         this.approveCodeMask = phoneApproveCodeMask;
-        /**
-         * {@link Observable} Изменения состояния загрузки данных аутентификации по номеру телефона.
-         */
-        this.loadingPhoneAuth$ = this.phoneRequest$.pipe(map(tuiIsFalsy));
         /**
          * {@link Subject} События запуска/остановки таймера.
          */
@@ -165,11 +128,52 @@ class ScSignInFormByPhoneComponent {
             return `${Math.round(minutes).toString().padStart(2, '0')}:${Math.round(seconds).toString().padStart(2, '0')}`;
         }), endWith(null), startWith(null), distinctUntilChanged())));
     }
+    /**
+     * Группа полей ввода для формы «Вход на сайт».
+     */
+    get form() {
+        var _a;
+        return (_a = this.formGroupDirective) === null || _a === void 0 ? void 0 : _a.form;
+    }
     /**
      * Поле ввода 'Номер телефона'.
      */
     get phoneControl() {
-        return this.formByPhone.get('phone');
+        var _a;
+        return (_a = this.form) === null || _a === void 0 ? void 0 : _a.controls.phone;
+    }
+    /** @inheritDoc */
+    ngOnInit() {
+        this.phoneCheck$ = tuiControlValue(this.phoneControl).pipe(tap(() => this.reloadTimer$.next(0)), switchMap((value) => {
+            if (this.phoneControl.valid && !!value) {
+                return this.verificationService.getPhoneCheck$(value).pipe(map((result) => {
+                    if (this.shouldBeBusy !== result.isBusy) {
+                        this.phoneControl.setErrors({
+                            serverResponse: [
+                                this.shouldBeBusy ? 'Пользователя с таким номером телефона не существует' : 'Пользователь с таким номером телефона уже существует',
+                            ],
+                        });
+                        this.phoneControl.markAsTouched();
+                        return false;
+                    }
+                    if (this.shouldBeConfirmed && result.isConfirmed === false) {
+                        this.phoneControl.setErrors({
+                            serverResponse: ['Номер телефона не подтверждён. Обратитесь к вашему персональному менеджеру или войдите с использованием e-mail и пароля.'],
+                        });
+                        this.phoneControl.markAsTouched();
+                        return false;
+                    }
+                    return true;
+                }), catchError((error) => {
+                    var _a, _b;
+                    const errorResponse = error.error;
+                    this.phoneControl.setErrors({ serverResponse: (_b = (_a = errorResponse === null || errorResponse === void 0 ? void 0 : errorResponse.errors) === null || _a === void 0 ? void 0 : _a[`phone`]) !== null && _b !== void 0 ? _b : [errorResponse.message] });
+                    return of(false);
+                }), startWith(null));
+            }
+            this.setHaveCode(false);
+            return of(false);
+        }), share());
     }
     /**
      * Устанавливает состояние наличия кода подтверждения у пользователя.
@@ -178,14 +182,82 @@ class ScSignInFormByPhoneComponent {
      */
     setHaveCode(haveCode) {
         this.haveCode = haveCode;
+        this.haveCodeChange.emit(haveCode);
+    }
+}
+ScPhoneApproveFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPhoneApproveFormComponent, deps: [{ token: i1.ScVerificationService }, { token: FormGroupDirective }], target: i0.ɵɵFactoryTarget.Component });
+ScPhoneApproveFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScPhoneApproveFormComponent, selector: "sc-phone-approve-form", inputs: { shouldBeBusy: "shouldBeBusy", shouldBeConfirmed: "shouldBeConfirmed", haveCode: "haveCode" }, outputs: { haveCodeChange: "haveCodeChange" }, ngImport: i0, template: "<form [formGroup]=\"form\" *tuiLet=\"(loadingApproveCode$ | async) as loadingApproveCode\" class=\"flex flex-col gap-3\">\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\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\n    <div *tuiLet=\"!!loadingApproveCode as loadingApproveCode\" class=\"flex gap-4 justify-center\">\n        <button\n            *ngIf=\"!haveCode\"\n            tuiButton\n            size=\"s\"\n            (click)=\"onSendCode.next()\"\n            [disabled]=\"loadingApproveCode || !!!(phoneCheck$ | 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]=\"!!!(phoneCheck$ | 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    </div>\n</form>\n\n<ng-template #checkingPhone>\n    <tui-loader *ngIf=\"!!!(phoneCheck$ | async) && phoneControl.valid\" class=\"w-4 h-4\"> </tui-loader>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.TuiTextfieldComponent, selector: "input[tuiTextfield], textarea[tuiTextfield]" }, { kind: "component", type: i3.TuiInputComponent, selector: "tui-input" }, { kind: "directive", type: i3.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: i6.TuiLetDirective, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "component", type: i4.TuiLoaderComponent, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { kind: "component", type: i3.TuiInputPhoneComponent, selector: "tui-input-phone", inputs: ["countryCode", "phoneMaskAfterCountryCode", "allowText", "search"], outputs: ["searchChange"] }, { kind: "directive", type: i3.TuiInputPhoneDirective, selector: "tui-input-phone" }, { kind: "directive", type: i7.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i7.MaskitoCva, selector: "input[maskito], textarea[maskito]", inputs: ["maskito"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TuiFieldErrorPipe, name: "tuiFieldError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPhoneApproveFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-phone-approve-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"form\" *tuiLet=\"(loadingApproveCode$ | async) as loadingApproveCode\" class=\"flex flex-col gap-3\">\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\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\n    <div *tuiLet=\"!!loadingApproveCode as loadingApproveCode\" class=\"flex gap-4 justify-center\">\n        <button\n            *ngIf=\"!haveCode\"\n            tuiButton\n            size=\"s\"\n            (click)=\"onSendCode.next()\"\n            [disabled]=\"loadingApproveCode || !!!(phoneCheck$ | 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]=\"!!!(phoneCheck$ | 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    </div>\n</form>\n\n<ng-template #checkingPhone>\n    <tui-loader *ngIf=\"!!!(phoneCheck$ | async) && phoneControl.valid\" class=\"w-4 h-4\"> </tui-loader>\n</ng-template>\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i1.ScVerificationService }, { type: i2$1.FormGroupDirective, decorators: [{
+                        type: Inject,
+                        args: [FormGroupDirective]
+                    }] }];
+    }, propDecorators: { shouldBeBusy: [{
+                type: Input
+            }], shouldBeConfirmed: [{
+                type: Input
+            }], haveCode: [{
+                type: Input
+            }], haveCodeChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Компонент аутентификации по номеру телефона и коду подтверждения.
+ */
+class ScSignInFormByPhoneComponent {
+    /**
+     * Инициализирует экземпляр класса {@link ScSignInFormByPhoneComponent}.
+     *
+     * @param authService Сервис аутентификации.
+     * @param verificationService Сервис верификации.
+     */
+    constructor(authService) {
+        this.authService = authService;
+        /**
+         * Наличие кода подтверждения у пользователя.
+         */
+        this.haveCode = false;
+        /**
+         * Группа полей ввода для формы «Вход на сайт».
+         */
+        this.formByPhone = new FormGroup({
+            phone: new FormControl(null, [Validators.required, Validators.minLength(12)]),
+            phoneApproveCode: new FormControl(null, [Validators.required, Validators.minLength(6)]),
+        });
+        /**
+         * {@link Subject} События отправки формы.
+         */
+        this.onSubmit = new Subject();
+        /**
+         * {@link Observable} Запроса данных аутентификации.
+         */
+        this.phoneRequest$ = this.onSubmit.pipe(filter(() => this.formByPhone.valid), map(() => this.formByPhone.value), switchMap((value) => this.authService.getSignIn$(value).pipe(catchError((error) => {
+            var _a;
+            const errorResponse = error.error;
+            for (const key in errorResponse.errors) {
+                (_a = this.formByPhone.get(key)) === null || _a === void 0 ? void 0 : _a.setErrors({ serverResponse: errorResponse.errors[`${key}`] });
+            }
+            if (!errorResponse.errors && errorResponse.message) {
+                this.formByPhone.setErrors({ serverResponse: [errorResponse.message] });
+            }
+            return of({});
+        }), startWith(null))), share());
+        /**
+         * {@link Observable} Изменения состояния загрузки данных аутентификации по номеру телефона.
+         */
+        this.loadingPhoneAuth$ = this.phoneRequest$.pipe(map(tuiIsFalsy));
     }
 }
-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            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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.TuiTextfieldComponent, selector: "input[tuiTextfield], textarea[tuiTextfield]" }, { kind: "component", type: i3.TuiInputComponent, selector: "tui-input" }, { kind: "directive", type: i3.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: i6.TuiLetDirective, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "component", type: i4.TuiLoaderComponent, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { kind: "component", type: i3.TuiInputPhoneComponent, selector: "tui-input-phone", inputs: ["countryCode", "phoneMaskAfterCountryCode", "allowText", "search"], outputs: ["searchChange"] }, { kind: "directive", type: i3.TuiInputPhoneDirective, selector: "tui-input-phone" }, { kind: "directive", type: i7.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i7.MaskitoCva, selector: "input[maskito], textarea[maskito]", inputs: ["maskito"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TuiFieldErrorPipe, name: "tuiFieldError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ScSignInFormByPhoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScSignInFormByPhoneComponent, deps: [{ token: i1.ScAuthService }], 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\" (ngSubmit)=\"onSubmit.next()\" class=\"flex flex-col gap-4 items-center mb-4\">\n    <sc-phone-approve-form [(haveCode)]=\"haveCode\" class=\"w-full\"></sc-phone-approve-form>\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</form>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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: ScPhoneApproveFormComponent, selector: "sc-phone-approve-form", inputs: ["shouldBeBusy", "shouldBeConfirmed", "haveCode"], outputs: ["haveCodeChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], 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            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 }]; } });
+            args: [{ selector: 'sc-sign-in-form-by-phone', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"formByPhone\" (ngSubmit)=\"onSubmit.next()\" class=\"flex flex-col gap-4 items-center mb-4\">\n    <sc-phone-approve-form [(haveCode)]=\"haveCode\" class=\"w-full\"></sc-phone-approve-form>\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</form>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.ScAuthService }]; } });
 
 /**
  * Компонент аутентификации по адресу электронной почты и паролю.
@@ -304,6 +376,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
+/**
+ * Модуль отправки кодов подтверждения (номера телефона, адреса эл. почты и т.д.).
+ */
+class ScVerificationModule {
+}
+ScVerificationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScVerificationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ScVerificationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: ScVerificationModule, declarations: [ScPhoneApproveFormComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        TuiInputPasswordModule,
+        TuiInputModule,
+        TuiTextfieldControllerModule,
+        TuiLinkModule,
+        TuiButtonModule,
+        TuiLabelModule,
+        TuiModeModule,
+        TuiFieldErrorPipeModule,
+        TuiErrorModule,
+        TuiLetModule,
+        TuiLoaderModule,
+        TuiInputPhoneModule,
+        MaskitoModule], exports: [ScPhoneApproveFormComponent] });
+ScVerificationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScVerificationModule, imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        TuiInputPasswordModule,
+        TuiInputModule,
+        TuiTextfieldControllerModule,
+        TuiLinkModule,
+        TuiButtonModule,
+        TuiLabelModule,
+        TuiModeModule,
+        TuiFieldErrorPipeModule,
+        TuiErrorModule,
+        TuiLetModule,
+        TuiLoaderModule,
+        TuiInputPhoneModule,
+        MaskitoModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScVerificationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        TuiInputPasswordModule,
+                        TuiInputModule,
+                        TuiTextfieldControllerModule,
+                        TuiLinkModule,
+                        TuiButtonModule,
+                        TuiLabelModule,
+                        TuiModeModule,
+                        TuiFieldErrorPipeModule,
+                        TuiErrorModule,
+                        TuiLetModule,
+                        TuiLoaderModule,
+                        TuiInputPhoneModule,
+                        MaskitoModule,
+                    ],
+                    exports: [ScPhoneApproveFormComponent],
+                    declarations: [ScPhoneApproveFormComponent],
+                }]
+        }] });
+
 /**
  * Модуль аутентификации.
  */
@@ -325,7 +461,8 @@ ScAuthModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
         TuiLetModule,
         TuiLoaderModule,
         TuiInputPhoneModule,
-        MaskitoModule], exports: [ScSignInFormComponent, ScSignInFormByPhoneComponent, ScSignInFormByEmailComponent] });
+        MaskitoModule,
+        ScVerificationModule], exports: [ScSignInFormComponent, ScSignInFormByPhoneComponent, ScSignInFormByEmailComponent] });
 ScAuthModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScAuthModule, imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
@@ -341,7 +478,8 @@ ScAuthModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
         TuiLetModule,
         TuiLoaderModule,
         TuiInputPhoneModule,
-        MaskitoModule] });
+        MaskitoModule,
+        ScVerificationModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScAuthModule, decorators: [{
             type: NgModule,
             args: [{
@@ -363,6 +501,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         TuiLoaderModule,
                         TuiInputPhoneModule,
                         MaskitoModule,
+                        ScVerificationModule,
                     ],
                     exports: [ScSignInFormComponent, ScSignInFormByPhoneComponent, ScSignInFormByEmailComponent],
                 }]
@@ -1095,6 +1234,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
+/**
+ * Компонент списка категорий.
+ */
+class ScCategoriesListComponent {
+    /**
+     * Инициализирует экземпляр класса {@link ScCategoriesListComponent}.
+     *
+     * @param urls объект информации о базовом списке ссылок приложения.
+     */
+    constructor(urls) {
+        this.urls = urls;
+        /**
+         * Событие нажатия на категорию.
+         */
+        this.clickCategoryEvent = new EventEmitter();
+    }
+    /**
+     * Возвращает путь до изображения на сервере.
+     *
+     * @param imgPath путь, где хранится изображение.
+     */
+    getCategoryImage(imgPath) {
+        return this.urls.imgServerUrl + '/' + imgPath;
+    }
+}
+ScCategoriesListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCategoriesListComponent, deps: [{ token: SC_URLS }], target: i0.ɵɵFactoryTarget.Component });
+ScCategoriesListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScCategoriesListComponent, selector: "sc-categories-list", inputs: { categories: "categories" }, outputs: { clickCategoryEvent: "clickCategoryEvent" }, ngImport: i0, template: "<div class=\"flex flex-col\">\n    <ng-container *ngIf=\"categories; else categoriesSkeleton\">\n        <button *ngFor=\"let item of $any(categories)\" class=\"flex flex-row h-11 w-full border-b justify-between items-center py-7\" (click)=\"clickCategoryEvent.emit(item)\">\n            <p class=\"truncate mr-0 text-left font-bold max-w-[85%]\">{{ item.name }}</p>\n            <tui-svg *ngIf=\"item.isFavorite\" src=\"scIconFavoriteFill\" class=\"text-tui-primary !text-xs mr-auto\"></tui-svg>\n            <img *ngIf=\"item.properties?.image\" [src]=\"getCategoryImage(item.properties?.image)\" [alt]=\"item.name\" class=\"w-6 h-6 ml-auto\" />\n            <i *ngIf=\"item.properties?.['icon'] && !item.properties?.image\" class=\"{{ item.properties?.['icon'] }} w-6 h-6 ml-auto\"></i>\n        </button>\n    </ng-container>\n</div>\n\n<ng-template #categoriesSkeleton>\n    <button\n        *ngFor=\"let _ of [].constructor(10); let index = index\"\n        tuiButton\n        size=\"m\"\n        appearance=\"secondary\"\n        tuiMode=\"onLight\"\n        style.width=\"{{ ((index % 3) + 3) * 20 }}%\"\n        class=\"!flex-shrink tui-skeleton my-4\"\n    ></button>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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: "component", type: i4.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i4.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCategoriesListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-categories-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col\">\n    <ng-container *ngIf=\"categories; else categoriesSkeleton\">\n        <button *ngFor=\"let item of $any(categories)\" class=\"flex flex-row h-11 w-full border-b justify-between items-center py-7\" (click)=\"clickCategoryEvent.emit(item)\">\n            <p class=\"truncate mr-0 text-left font-bold max-w-[85%]\">{{ item.name }}</p>\n            <tui-svg *ngIf=\"item.isFavorite\" src=\"scIconFavoriteFill\" class=\"text-tui-primary !text-xs mr-auto\"></tui-svg>\n            <img *ngIf=\"item.properties?.image\" [src]=\"getCategoryImage(item.properties?.image)\" [alt]=\"item.name\" class=\"w-6 h-6 ml-auto\" />\n            <i *ngIf=\"item.properties?.['icon'] && !item.properties?.image\" class=\"{{ item.properties?.['icon'] }} w-6 h-6 ml-auto\"></i>\n        </button>\n    </ng-container>\n</div>\n\n<ng-template #categoriesSkeleton>\n    <button\n        *ngFor=\"let _ of [].constructor(10); let index = index\"\n        tuiButton\n        size=\"m\"\n        appearance=\"secondary\"\n        tuiMode=\"onLight\"\n        style.width=\"{{ ((index % 3) + 3) * 20 }}%\"\n        class=\"!flex-shrink tui-skeleton my-4\"\n    ></button>\n</ng-template>\n" }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [SC_URLS]
+                    }] }];
+    }, propDecorators: { categories: [{
+                type: Input
+            }], clickCategoryEvent: [{
+                type: Output
+            }] } });
+
 /**
  * Компонент кнопки избранных товаров и категорий.
  */
@@ -1836,7 +2016,8 @@ ScCatalogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
         ScInputQuantityComponent,
         ScPriceCardComponent,
         ScPriceWarehouseStockComponent,
-        ScPriceHistoryComponent], imports: [CommonModule,
+        ScPriceHistoryComponent,
+        ScCategoriesListComponent], imports: [CommonModule,
         RouterModule,
         TuiButtonModule,
         TuiSvgModule,
@@ -1857,7 +2038,8 @@ ScCatalogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
         ScInputQuantityComponent,
         ScPriceCardComponent,
         ScPriceWarehouseStockComponent,
-        ScPriceHistoryComponent] });
+        ScPriceHistoryComponent,
+        ScCategoriesListComponent] });
 ScCatalogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCatalogModule, imports: [CommonModule,
         RouterModule,
         TuiButtonModule,
@@ -1887,6 +2069,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         ScPriceCardComponent,
                         ScPriceWarehouseStockComponent,
                         ScPriceHistoryComponent,
+                        ScCategoriesListComponent,
                     ],
                     exports: [
                         ScPriceListPaginationComponent,
@@ -1896,6 +2079,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         ScPriceCardComponent,
                         ScPriceWarehouseStockComponent,
                         ScPriceHistoryComponent,
+                        ScCategoriesListComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -3081,5 +3265,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, 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, SC_USER_INFO, SC_USER_PROVIDERS, ScAccordionComponent, ScAccordionContentDirective, ScAccordionModule, ScAuthModule, ScBannerComponent, ScBannerModule, ScCartItemMobileComponent, ScCartModule, ScCatalogModule, ScCategoryCardComponent, ScContactsAccordionComponent, ScContactsModule, ScContragentsAccordionComponent, ScContragentsAccordionItemComponent, ScContragentsModule, ScDeliveryAddressAccordionComponent, ScDeliveryAddressAccordionItemComponent, ScDeliveryAddressModule, ScFavoriteBtnComponent, ScInputQuantityComponent, ScNewsCardComponent, ScNewsCardSkeletonComponent, ScNewsModule, ScOrderItemMobileComponent, ScOrderModule, ScPriceCardComponent, ScPriceHistoryComponent, ScPriceListPaginationComponent, ScPriceWarehouseStockComponent, ScProfileAccordionsContentComponent, ScProfileModule, ScResetUserPasswordComponent, ScShareButtonComponent, ScShareButtonModule, ScSignInFormByEmailComponent, ScSignInFormByPhoneComponent, ScSignInFormComponent, ScUserModule, TreeDirective, TreeIconService, TreeLoaderService, TreeTopDirective, nextPageClickEvent, paginationParams$, phoneApproveCodeMask, scClientUiIconsName, scPasswordConfirmMatchingValidator, scUserFactory, 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, SC_USER_INFO, SC_USER_PROVIDERS, ScAccordionComponent, ScAccordionContentDirective, ScAccordionModule, ScAuthModule, ScBannerComponent, ScBannerModule, ScCartItemMobileComponent, ScCartModule, ScCatalogModule, ScCategoriesListComponent, ScCategoryCardComponent, ScContactsAccordionComponent, ScContactsModule, ScContragentsAccordionComponent, ScContragentsAccordionItemComponent, ScContragentsModule, ScDeliveryAddressAccordionComponent, ScDeliveryAddressAccordionItemComponent, ScDeliveryAddressModule, ScFavoriteBtnComponent, ScInputQuantityComponent, ScNewsCardComponent, ScNewsCardSkeletonComponent, ScNewsModule, ScOrderItemMobileComponent, ScOrderModule, ScPhoneApproveFormComponent, ScPriceCardComponent, ScPriceHistoryComponent, ScPriceListPaginationComponent, ScPriceWarehouseStockComponent, ScProfileAccordionsContentComponent, ScProfileModule, ScResetUserPasswordComponent, ScShareButtonComponent, ScShareButtonModule, ScSignInFormByEmailComponent, ScSignInFormByPhoneComponent, ScSignInFormComponent, ScUserModule, ScVerificationModule, TreeDirective, TreeIconService, TreeLoaderService, TreeTopDirective, nextPageClickEvent, paginationParams$, phoneApproveCodeMask, scClientUiIconsName, scPasswordConfirmMatchingValidator, scUserFactory, stepValidator };
 //# sourceMappingURL=snabcentr-client-ui.mjs.map