@snabcentr/client-ui 3.27.4 → 3.27.6

package/fesm2022/snabcentr-client-ui.mjs

@@ -5,7 +5,7 @@ import { ScContactsService, ScUserService, ScAuthService, SEARCH_TERM, ScUnitsHe
 import * as i6 from 'rxjs';
 import { EMPTY, BehaviorSubject, switchMap, of, shareReplay, Subject, map, filter, tap, catchError, finalize, startWith, share, timer, scan, takeWhile, endWith, distinctUntilChanged, debounceTime, throwError, combineLatest, Observable, noop, first, merge, skip } from 'rxjs';
 import * as i7 from '@taiga-ui/cdk';
-import { tuiCreateToken, tuiCreateTokenFromFactory, TUI_IS_MOBILE, TuiValueTransformer, TuiDay, tuiControlValue, tuiIsPresent, tuiMarkControlAsTouchedAndValidate, tuiIsFalsy, TuiLet, TuiRepeatTimes, TuiTime, TuiHovered, TuiAutoFocus, TuiDayRange, TuiMonth, tuiPure, TUI_WINDOW_SIZE, TuiValidationError, TUI_TRUE_HANDLER } from '@taiga-ui/cdk';
+import { tuiCreateToken, tuiCreateTokenFromFactory, TUI_IS_MOBILE, TuiValueTransformer, TuiDay, tuiControlValue, tuiIsPresent, tuiMarkControlAsTouchedAndValidate, tuiIsFalsy, TuiLet, TuiAutoFocus, TuiRepeatTimes, TuiTime, TuiHovered, TuiDayRange, TuiMonth, tuiPure, TUI_WINDOW_SIZE, TuiValidationError, TUI_TRUE_HANDLER } from '@taiga-ui/cdk';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { toSignal, outputFromObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i2$3 from '@angular/forms';
@@ -1054,7 +1054,6 @@ class ScVerificationPhoneCheckFormComponent {
             this.isBusyChange.emit(null);
             this.isConfirmedChange.emit(null);
             this.helpNotificationService.closeAllHelpNotification();
-            this.form.controls.verificationCode.markAllAsTouched();
             if (this.form.controls.verificationCode.value) {
                 this.form.controls.verificationCode.setValue(null);
             }
@@ -1122,11 +1121,11 @@ class ScVerificationPhoneCheckFormComponent {
         this.helpNotificationService.closeAllHelpNotification();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ScVerificationPhoneCheckFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ScVerificationPhoneCheckFormComponent, selector: "sc-verification-phone-check-form", inputs: { showCodeFields: { classPropertyName: "showCodeFields", publicName: "showCodeFields", isSignal: false, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, pseudoInvalid: { classPropertyName: "pseudoInvalid", publicName: "pseudoInvalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, shouldBeBusy: { classPropertyName: "shouldBeBusy", publicName: "shouldBeBusy", isSignal: true, isRequired: false, transformFunction: null }, shouldBeConfirmed: { classPropertyName: "shouldBeConfirmed", publicName: "shouldBeConfirmed", isSignal: true, isRequired: false, transformFunction: null }, haveCode: { classPropertyName: "haveCode", publicName: "haveCode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { haveCode: "haveCodeChange", isBusyChange: "isBusyChange", isConfirmedChange: "isConfirmedChange" }, host: { attributes: { "ngSkipHydration": "true" } }, ngImport: i0, template: "@let phoneCheck = phoneCheck$ | async;\n\n<form\n    [formGroup]=\"form\"\n    *tuiLet=\"loadingApproveCode$ | async as loadingApproveCode\"\n    class=\"flex flex-col gap-3\"\n>\n    <label tuiLabel>\n        \u041D\u043E\u043C\u0435\u0440 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430\n        <tui-textfield>\n            <input\n                [ngModel]=\"phoneControl.value\"\n                (ngModelChange)=\"phoneControl.setValue($event || null)\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                tuiInputPhoneInternational\n                [invalid]=\"pseudoInvalid()\"\n                [required]=\"required()\"\n                [readOnly]=\"readOnly()\"\n                [countrySearch]=\"true\"\n                [countries]=\"(countries | tuiSortCountries | async) || []\"\n                autocomplete=\"phone\"\n            />\n        </tui-textfield>\n        <p\n            *ngIf=\"subtitle()\"\n            class=\"text-body-s text-tui-text-tertiary\"\n        >\n            {{ subtitle() }}\n        </p>\n        <tui-error\n            formControlName=\"phone\"\n            [error]=\"[] | tuiFieldError | async\"\n        />\n        @if (showHelpNotification && pushContacts()) {\n            @for (manager of pushContacts(); track manager.id) {\n                <tui-push\n                    type=\"\u0421\u0432\u044F\u0436\u0438\u0442\u0435\u0441\u044C \u0441 \u043D\u0430\u043C\u0438 \u0434\u043B\u044F \u0440\u0435\u0448\u0435\u043D\u0438\u044F \u0432\u043E\u0437\u043D\u0438\u043A\u0448\u0438\u0445 \u0432\u043E\u043F\u0440\u043E\u0441\u043E\u0432\"\n                    (close)=\"closeNotification()\"\n                    class=\"!w-auto\"\n                >\n                    <tui-icon icon=\"@tui.message-square\" />\n                    <sc-manager-card [manager]=\"manager\" />\n                </tui-push>\n            }\n        }\n    </label>\n\n    <ng-container *ngIf=\"showCodeFields && form.enabled && phoneCheck\">\n        <label\n            *ngIf=\"!loadingApproveCode && haveCode()\"\n            tuiLabel\n        >\n            \u041A\u043E\u0434 \u0438\u0437 \u0421\u041C\u0421\n            <tui-input\n                formControlName=\"verificationCode\"\n                [required]=\"required()\"\n            >\n                \u041A\u043E\u0434 \u0438\u0437 \u0421\u041C\u0421\n                <input\n                    tuiTextfieldLegacy\n                    [maskito]=\"verificationCodeMask\"\n                    autocomplete=\"new-password\"\n                />\n            </tui-input>\n            <tui-error\n                formControlName=\"verificationCode\"\n                [error]=\"[] | tuiFieldError | async\"\n            />\n        </label>\n\n        <div\n            *tuiLet=\"!!loadingApproveCode as loadingApproveCode\"\n            class=\"flex justify-center gap-4\"\n        >\n            <button\n                *ngIf=\"!haveCode()\"\n                tuiButton\n                (click)=\"onSendCode.next()\"\n                [disabled]=\"loadingApproveCode || !phoneCheck || phoneControl.invalid\"\n                [loading]=\"loadingApproveCode\"\n                iconStart=\"@tui.sc.send\"\n            >\n                \u041F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u043A\u043E\u0434\n            </button>\n            <button\n                *ngIf=\"!loadingApproveCode && !haveCode()\"\n                tuiLink\n                [pseudo]=\"true\"\n                [disabled]=\"!phoneCheck || phoneControl.invalid\"\n                (click)=\"setHaveCode(true)\"\n            >\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\n                    *ngIf=\"haveCode()\"\n                    [showLoader]=\"loadingApproveCode\"\n                >\n                    <button\n                        tuiLink\n                        [pseudo]=\"true\"\n                        [disabled]=\"loadingApproveCode || timer\"\n                        (click)=\"onSendCode.next()\"\n                    >\n                        \u041F\u043E\u0432\u0442\u043E\u0440\u043D\u043E \u043E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u043A\u043E\u0434\n                        <ng-container\n                            *ngIf=\"timer\"\n                            class=\"!text-tui-base-08\"\n                        >\n                            (\u0447\u0435\u0440\u0435\u0437 {{ timer }})\n                        </ng-container>\n                    </button>\n                </tui-loader>\n            </ng-container>\n        </div>\n    </ng-container>\n</form>\n\n<ng-template #checkingPhone>\n    <tui-loader\n        *ngIf=\"!phoneCheck && phoneControl.valid\"\n        class=\"size-4\"\n    />\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.TuiTextfieldComponent, selector: "input[tuiTextfieldLegacy], textarea[tuiTextfieldLegacy]" }, { kind: "component", type: i5.TuiInputComponent, selector: "tui-input" }, { kind: "directive", type: i5.TuiInputDirective, selector: "tui-input" }, { kind: "directive", type: i1$1.TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "directive", type: i1$1.TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: i4$1.TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: i1$1.TuiError, selector: "tui-error", inputs: ["error"] }, { kind: "directive", type: i7.TuiLet, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "component", type: i1$1.TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { kind: "directive", type: i8.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "component", type: i2$1.TuiButtonLoading, selector: "[tuiButton][loading],[tuiIconButton][loading]", inputs: ["size", "loading"] }, { kind: "component", type: ScManagerCardComponent, selector: "sc-manager-card", inputs: ["manager"] }, { kind: "component", type: i1$1.TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "component", type: i2$1.TuiPushComponent, selector: "tui-push", inputs: ["heading", "type", "lines", "timestamp"], outputs: ["close"] }, { kind: "component", type: i11.TuiInputPhoneInternational, selector: "input[tuiInputPhoneInternational]", inputs: ["countrySearch", "countries", "countryIsoCode"], outputs: ["countryIsoCodeChange"] }, { kind: "component", type: i1$1.TuiTextfieldComponent, selector: "tui-textfield", inputs: ["content", "filler"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.TuiFieldErrorPipe, name: "tuiFieldError" }, { kind: "pipe", type: i2$1.TuiSortCountriesPipe, name: "tuiSortCountries" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ScVerificationPhoneCheckFormComponent, selector: "sc-verification-phone-check-form", inputs: { showCodeFields: { classPropertyName: "showCodeFields", publicName: "showCodeFields", isSignal: false, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, pseudoInvalid: { classPropertyName: "pseudoInvalid", publicName: "pseudoInvalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, shouldBeBusy: { classPropertyName: "shouldBeBusy", publicName: "shouldBeBusy", isSignal: true, isRequired: false, transformFunction: null }, shouldBeConfirmed: { classPropertyName: "shouldBeConfirmed", publicName: "shouldBeConfirmed", isSignal: true, isRequired: false, transformFunction: null }, haveCode: { classPropertyName: "haveCode", publicName: "haveCode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { haveCode: "haveCodeChange", isBusyChange: "isBusyChange", isConfirmedChange: "isConfirmedChange" }, host: { attributes: { "ngSkipHydration": "true" } }, ngImport: i0, template: "@let phoneCheck = phoneCheck$ | async;\n\n<form\n    [formGroup]=\"form\"\n    *tuiLet=\"loadingApproveCode$ | async as loadingApproveCode\"\n    class=\"flex flex-col gap-3\"\n>\n    <label tuiLabel>\n        \u041D\u043E\u043C\u0435\u0440 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430\n        <tui-textfield>\n            <input\n                [ngModel]=\"phoneControl.value\"\n                (ngModelChange)=\"phoneControl.setValue($event || null)\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                tuiInputPhoneInternational\n                [invalid]=\"pseudoInvalid()\"\n                [required]=\"required()\"\n                [readOnly]=\"readOnly()\"\n                [countrySearch]=\"true\"\n                [countries]=\"(countries | tuiSortCountries | async) || []\"\n                autocomplete=\"phone\"\n            />\n        </tui-textfield>\n        <p\n            *ngIf=\"subtitle()\"\n            class=\"text-body-s text-tui-text-tertiary\"\n        >\n            {{ subtitle() }}\n        </p>\n        <tui-error\n            formControlName=\"phone\"\n            [error]=\"[] | tuiFieldError | async\"\n        />\n        @if (showHelpNotification && pushContacts()) {\n            @for (manager of pushContacts(); track manager.id) {\n                <tui-push\n                    type=\"\u0421\u0432\u044F\u0436\u0438\u0442\u0435\u0441\u044C \u0441 \u043D\u0430\u043C\u0438 \u0434\u043B\u044F \u0440\u0435\u0448\u0435\u043D\u0438\u044F \u0432\u043E\u0437\u043D\u0438\u043A\u0448\u0438\u0445 \u0432\u043E\u043F\u0440\u043E\u0441\u043E\u0432\"\n                    (close)=\"closeNotification()\"\n                    class=\"!w-auto\"\n                >\n                    <tui-icon icon=\"@tui.message-square\" />\n                    <sc-manager-card [manager]=\"manager\" />\n                </tui-push>\n            }\n        }\n    </label>\n\n    <ng-container *ngIf=\"showCodeFields && form.enabled && phoneCheck\">\n        <label\n            *ngIf=\"!loadingApproveCode && haveCode()\"\n            tuiLabel\n        >\n            \u041A\u043E\u0434 \u0438\u0437 \u0421\u041C\u0421\n            <tui-input\n                formControlName=\"verificationCode\"\n                [required]=\"required()\"\n            >\n                \u041A\u043E\u0434 \u0438\u0437 \u0421\u041C\u0421\n                <input\n                    tuiAutoFocus\n                    tuiTextfieldLegacy\n                    [maskito]=\"verificationCodeMask\"\n                    autocomplete=\"new-password\"\n                />\n            </tui-input>\n            <tui-error\n                formControlName=\"verificationCode\"\n                [error]=\"[] | tuiFieldError | async\"\n            />\n        </label>\n\n        <div\n            *tuiLet=\"!!loadingApproveCode as loadingApproveCode\"\n            class=\"flex justify-center gap-4\"\n        >\n            <button\n                *ngIf=\"!haveCode()\"\n                tuiButton\n                (click)=\"onSendCode.next()\"\n                [disabled]=\"loadingApproveCode || !phoneCheck || phoneControl.invalid\"\n                [loading]=\"loadingApproveCode\"\n                iconStart=\"@tui.sc.send\"\n            >\n                \u041F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u043A\u043E\u0434\n            </button>\n            <button\n                *ngIf=\"!loadingApproveCode && !haveCode()\"\n                tuiLink\n                [pseudo]=\"true\"\n                [disabled]=\"!phoneCheck || phoneControl.invalid\"\n                (click)=\"setHaveCode(true)\"\n            >\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\n                    *ngIf=\"haveCode()\"\n                    [showLoader]=\"loadingApproveCode\"\n                >\n                    <button\n                        tuiLink\n                        [pseudo]=\"true\"\n                        [disabled]=\"loadingApproveCode || timer\"\n                        (click)=\"onSendCode.next()\"\n                    >\n                        \u041F\u043E\u0432\u0442\u043E\u0440\u043D\u043E \u043E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u043A\u043E\u0434\n                        <ng-container\n                            *ngIf=\"timer\"\n                            class=\"!text-tui-base-08\"\n                        >\n                            (\u0447\u0435\u0440\u0435\u0437 {{ timer }})\n                        </ng-container>\n                    </button>\n                </tui-loader>\n            </ng-container>\n        </div>\n    </ng-container>\n</form>\n\n<ng-template #checkingPhone>\n    <tui-loader\n        *ngIf=\"!phoneCheck && phoneControl.valid\"\n        class=\"size-4\"\n    />\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.TuiTextfieldComponent, selector: "input[tuiTextfieldLegacy], textarea[tuiTextfieldLegacy]" }, { kind: "component", type: i5.TuiInputComponent, selector: "tui-input" }, { kind: "directive", type: i5.TuiInputDirective, selector: "tui-input" }, { kind: "directive", type: i1$1.TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "directive", type: i1$1.TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: i4$1.TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: i1$1.TuiError, selector: "tui-error", inputs: ["error"] }, { kind: "directive", type: i7.TuiLet, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "component", type: i1$1.TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { kind: "directive", type: i8.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "component", type: i2$1.TuiButtonLoading, selector: "[tuiButton][loading],[tuiIconButton][loading]", inputs: ["size", "loading"] }, { kind: "component", type: ScManagerCardComponent, selector: "sc-manager-card", inputs: ["manager"] }, { kind: "component", type: i1$1.TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "component", type: i2$1.TuiPushComponent, selector: "tui-push", inputs: ["heading", "type", "lines", "timestamp"], outputs: ["close"] }, { kind: "component", type: i11.TuiInputPhoneInternational, selector: "input[tuiInputPhoneInternational]", inputs: ["countrySearch", "countries", "countryIsoCode"], outputs: ["countryIsoCodeChange"] }, { kind: "component", type: i1$1.TuiTextfieldComponent, selector: "tui-textfield", inputs: ["content", "filler"] }, { kind: "directive", type: i7.TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.TuiFieldErrorPipe, name: "tuiFieldError" }, { kind: "pipe", type: i2$1.TuiSortCountriesPipe, name: "tuiSortCountries" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ScVerificationPhoneCheckFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-verification-phone-check-form', host: { ngSkipHydration: 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let phoneCheck = phoneCheck$ | async;\n\n<form\n    [formGroup]=\"form\"\n    *tuiLet=\"loadingApproveCode$ | async as loadingApproveCode\"\n    class=\"flex flex-col gap-3\"\n>\n    <label tuiLabel>\n        \u041D\u043E\u043C\u0435\u0440 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430\n        <tui-textfield>\n            <input\n                [ngModel]=\"phoneControl.value\"\n                (ngModelChange)=\"phoneControl.setValue($event || null)\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                tuiInputPhoneInternational\n                [invalid]=\"pseudoInvalid()\"\n                [required]=\"required()\"\n                [readOnly]=\"readOnly()\"\n                [countrySearch]=\"true\"\n                [countries]=\"(countries | tuiSortCountries | async) || []\"\n                autocomplete=\"phone\"\n            />\n        </tui-textfield>\n        <p\n            *ngIf=\"subtitle()\"\n            class=\"text-body-s text-tui-text-tertiary\"\n        >\n            {{ subtitle() }}\n        </p>\n        <tui-error\n            formControlName=\"phone\"\n            [error]=\"[] | tuiFieldError | async\"\n        />\n        @if (showHelpNotification && pushContacts()) {\n            @for (manager of pushContacts(); track manager.id) {\n                <tui-push\n                    type=\"\u0421\u0432\u044F\u0436\u0438\u0442\u0435\u0441\u044C \u0441 \u043D\u0430\u043C\u0438 \u0434\u043B\u044F \u0440\u0435\u0448\u0435\u043D\u0438\u044F \u0432\u043E\u0437\u043D\u0438\u043A\u0448\u0438\u0445 \u0432\u043E\u043F\u0440\u043E\u0441\u043E\u0432\"\n                    (close)=\"closeNotification()\"\n                    class=\"!w-auto\"\n                >\n                    <tui-icon icon=\"@tui.message-square\" />\n                    <sc-manager-card [manager]=\"manager\" />\n                </tui-push>\n            }\n        }\n    </label>\n\n    <ng-container *ngIf=\"showCodeFields && form.enabled && phoneCheck\">\n        <label\n            *ngIf=\"!loadingApproveCode && haveCode()\"\n            tuiLabel\n        >\n            \u041A\u043E\u0434 \u0438\u0437 \u0421\u041C\u0421\n            <tui-input\n                formControlName=\"verificationCode\"\n                [required]=\"required()\"\n            >\n                \u041A\u043E\u0434 \u0438\u0437 \u0421\u041C\u0421\n                <input\n                    tuiTextfieldLegacy\n                    [maskito]=\"verificationCodeMask\"\n                    autocomplete=\"new-password\"\n                />\n            </tui-input>\n            <tui-error\n                formControlName=\"verificationCode\"\n                [error]=\"[] | tuiFieldError | async\"\n            />\n        </label>\n\n        <div\n            *tuiLet=\"!!loadingApproveCode as loadingApproveCode\"\n            class=\"flex justify-center gap-4\"\n        >\n            <button\n                *ngIf=\"!haveCode()\"\n                tuiButton\n                (click)=\"onSendCode.next()\"\n                [disabled]=\"loadingApproveCode || !phoneCheck || phoneControl.invalid\"\n                [loading]=\"loadingApproveCode\"\n                iconStart=\"@tui.sc.send\"\n            >\n                \u041F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u043A\u043E\u0434\n            </button>\n            <button\n                *ngIf=\"!loadingApproveCode && !haveCode()\"\n                tuiLink\n                [pseudo]=\"true\"\n                [disabled]=\"!phoneCheck || phoneControl.invalid\"\n                (click)=\"setHaveCode(true)\"\n            >\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\n                    *ngIf=\"haveCode()\"\n                    [showLoader]=\"loadingApproveCode\"\n                >\n                    <button\n                        tuiLink\n                        [pseudo]=\"true\"\n                        [disabled]=\"loadingApproveCode || timer\"\n                        (click)=\"onSendCode.next()\"\n                    >\n                        \u041F\u043E\u0432\u0442\u043E\u0440\u043D\u043E \u043E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u043A\u043E\u0434\n                        <ng-container\n                            *ngIf=\"timer\"\n                            class=\"!text-tui-base-08\"\n                        >\n                            (\u0447\u0435\u0440\u0435\u0437 {{ timer }})\n                        </ng-container>\n                    </button>\n                </tui-loader>\n            </ng-container>\n        </div>\n    </ng-container>\n</form>\n\n<ng-template #checkingPhone>\n    <tui-loader\n        *ngIf=\"!phoneCheck && phoneControl.valid\"\n        class=\"size-4\"\n    />\n</ng-template>\n" }]
+            args: [{ selector: 'sc-verification-phone-check-form', host: { ngSkipHydration: 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let phoneCheck = phoneCheck$ | async;\n\n<form\n    [formGroup]=\"form\"\n    *tuiLet=\"loadingApproveCode$ | async as loadingApproveCode\"\n    class=\"flex flex-col gap-3\"\n>\n    <label tuiLabel>\n        \u041D\u043E\u043C\u0435\u0440 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430\n        <tui-textfield>\n            <input\n                [ngModel]=\"phoneControl.value\"\n                (ngModelChange)=\"phoneControl.setValue($event || null)\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                tuiInputPhoneInternational\n                [invalid]=\"pseudoInvalid()\"\n                [required]=\"required()\"\n                [readOnly]=\"readOnly()\"\n                [countrySearch]=\"true\"\n                [countries]=\"(countries | tuiSortCountries | async) || []\"\n                autocomplete=\"phone\"\n            />\n        </tui-textfield>\n        <p\n            *ngIf=\"subtitle()\"\n            class=\"text-body-s text-tui-text-tertiary\"\n        >\n            {{ subtitle() }}\n        </p>\n        <tui-error\n            formControlName=\"phone\"\n            [error]=\"[] | tuiFieldError | async\"\n        />\n        @if (showHelpNotification && pushContacts()) {\n            @for (manager of pushContacts(); track manager.id) {\n                <tui-push\n                    type=\"\u0421\u0432\u044F\u0436\u0438\u0442\u0435\u0441\u044C \u0441 \u043D\u0430\u043C\u0438 \u0434\u043B\u044F \u0440\u0435\u0448\u0435\u043D\u0438\u044F \u0432\u043E\u0437\u043D\u0438\u043A\u0448\u0438\u0445 \u0432\u043E\u043F\u0440\u043E\u0441\u043E\u0432\"\n                    (close)=\"closeNotification()\"\n                    class=\"!w-auto\"\n                >\n                    <tui-icon icon=\"@tui.message-square\" />\n                    <sc-manager-card [manager]=\"manager\" />\n                </tui-push>\n            }\n        }\n    </label>\n\n    <ng-container *ngIf=\"showCodeFields && form.enabled && phoneCheck\">\n        <label\n            *ngIf=\"!loadingApproveCode && haveCode()\"\n            tuiLabel\n        >\n            \u041A\u043E\u0434 \u0438\u0437 \u0421\u041C\u0421\n            <tui-input\n                formControlName=\"verificationCode\"\n                [required]=\"required()\"\n            >\n                \u041A\u043E\u0434 \u0438\u0437 \u0421\u041C\u0421\n                <input\n                    tuiAutoFocus\n                    tuiTextfieldLegacy\n                    [maskito]=\"verificationCodeMask\"\n                    autocomplete=\"new-password\"\n                />\n            </tui-input>\n            <tui-error\n                formControlName=\"verificationCode\"\n                [error]=\"[] | tuiFieldError | async\"\n            />\n        </label>\n\n        <div\n            *tuiLet=\"!!loadingApproveCode as loadingApproveCode\"\n            class=\"flex justify-center gap-4\"\n        >\n            <button\n                *ngIf=\"!haveCode()\"\n                tuiButton\n                (click)=\"onSendCode.next()\"\n                [disabled]=\"loadingApproveCode || !phoneCheck || phoneControl.invalid\"\n                [loading]=\"loadingApproveCode\"\n                iconStart=\"@tui.sc.send\"\n            >\n                \u041F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u043A\u043E\u0434\n            </button>\n            <button\n                *ngIf=\"!loadingApproveCode && !haveCode()\"\n                tuiLink\n                [pseudo]=\"true\"\n                [disabled]=\"!phoneCheck || phoneControl.invalid\"\n                (click)=\"setHaveCode(true)\"\n            >\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\n                    *ngIf=\"haveCode()\"\n                    [showLoader]=\"loadingApproveCode\"\n                >\n                    <button\n                        tuiLink\n                        [pseudo]=\"true\"\n                        [disabled]=\"loadingApproveCode || timer\"\n                        (click)=\"onSendCode.next()\"\n                    >\n                        \u041F\u043E\u0432\u0442\u043E\u0440\u043D\u043E \u043E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u043A\u043E\u0434\n                        <ng-container\n                            *ngIf=\"timer\"\n                            class=\"!text-tui-base-08\"\n                        >\n                            (\u0447\u0435\u0440\u0435\u0437 {{ timer }})\n                        </ng-container>\n                    </button>\n                </tui-loader>\n            </ng-container>\n        </div>\n    </ng-container>\n</form>\n\n<ng-template #checkingPhone>\n    <tui-loader\n        *ngIf=\"!phoneCheck && phoneControl.valid\"\n        class=\"size-4\"\n    />\n</ng-template>\n" }]
         }], propDecorators: { showCodeFields: [{
                 type: Input
             }] } });
@@ -3392,7 +3391,8 @@ class ScVerificationModule {
             TuiButtonLoading,
             ScManagerCardComponent,
             TuiTitle,
-            TuiIcon, i2$1.TuiPushComponent, i2$1.TuiPushAlert, i2$1.TuiPushDirective, TuiInputPhoneInternational, i4$1.TuiLabel, i1$1.TuiSelect, i1$1.TuiTextfieldComponent, i1$1.TuiTextfieldDirective, i1$1.TuiTextfieldOptionsDirective, i1$1.TuiTextfieldDropdownDirective, TuiSortCountriesPipe], exports: [ScVerificationPhoneCheckFormComponent] }); }
+            TuiIcon, i2$1.TuiPushComponent, i2$1.TuiPushAlert, i2$1.TuiPushDirective, TuiInputPhoneInternational, i4$1.TuiLabel, i1$1.TuiSelect, i1$1.TuiTextfieldComponent, i1$1.TuiTextfieldDirective, i1$1.TuiTextfieldOptionsDirective, i1$1.TuiTextfieldDropdownDirective, TuiSortCountriesPipe,
+            TuiAutoFocus], exports: [ScVerificationPhoneCheckFormComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ScVerificationModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
@@ -3433,6 +3433,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         TuiInputPhoneInternational,
                         ...TuiTextfield,
                         TuiSortCountriesPipe,
+                        TuiAutoFocus,
                     ],
                     exports: [ScVerificationPhoneCheckFormComponent],
                     declarations: [ScVerificationPhoneCheckFormComponent],
@@ -6144,11 +6145,11 @@ class ScOrderItemMobileComponent extends AbstractScPriceCard {
         return this.imageHelper.getImage(product);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ScOrderItemMobileComponent, deps: [{ token: TuiPreviewDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ScOrderItemMobileComponent, selector: "sc-order-item-mobile", inputs: { orderItem: "orderItem" }, outputs: { clickActionsEvent: "clickActionsEvent" }, viewQueries: [{ propertyName: "specificationPreviewRef", first: true, predicate: ["specificationPreview"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"relative flex flex-wrap gap-x-4 gap-y-2 rounded-xl border border-tui-base-04 bg-white p-4 shadow-sc-2\">\n    <ng-container *ngIf=\"orderItem && product; else skeleton\">\n        <button\n            tuiIconButton\n            (click)=\"clickActionsEvent.emit()\"\n            size=\"m\"\n            iconStart=\"@tui.ellipsis-vertical\"\n            appearance=\"float\"\n            class=\"!absolute right-0 top-0 !hidden\"\n        ></button>\n        <div class=\"flex grow gap-2\">\n            <div class=\"flex size-20 shrink-0 items-center justify-center overflow-hidden\">\n                <img\n                    (click)=\"clickCardEvent.emit()\"\n                    [src]=\"getCardImage(product)\"\n                    [alt]=\"product.name\"\n                    [class.p-5]=\"!product.images?.length\"\n                    class=\"cursor-pointer\"\n                />\n            </div>\n\n            <div class=\"flex grow flex-wrap gap-x-8 self-center\">\n                <div class=\"flex grow basis-min-content flex-col\">\n                    <a\n                        [attr.href]=\"href ?? null\"\n                        tuiLink\n                        (click)=\"$event.preventDefault(); clickCardEvent.emit()\"\n                    >\n                        <span class=\"font-bold\">{{ product.name }}</span>\n                    </a>\n                    <div class=\"flex flex-col gap-y-0.5 text-tui-text-02\">\n                        <div class=\"flex flex-wrap\">\n                            <p class=\"w-40\">\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                            <p\n                                class=\"w-40\"\n                                *ngIf=\"product.pack\"\n                            >\n                                \u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}\n                            </p>\n                        </div>\n                        <a\n                            tuiLink\n                            *ngIf=\"orderItem.specificationImgUrl\"\n                            (click)=\"showSpecification()\"\n                            >\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a\n                        >\n                        <ng-template\n                            #specificationPreview\n                            let-preview\n                        >\n                            <tui-preview\n                                [rotatable]=\"false\"\n                                [zoomable]=\"false\"\n                            >\n                                <img\n                                    *polymorpheusOutlet=\"orderItem.specificationImgUrl as src\"\n                                    alt=\"preview\"\n                                    [src]=\"orderItem.specificationImgUrl\"\n                                />\n                                <button\n                                    iconStart=\"@tui.x\"\n                                    title=\"Close\"\n                                    tuiIconButton\n                                    tuiPreviewAction\n                                    type=\"button\"\n                                    (click)=\"preview.complete()\"\n                                ></button>\n                            </tui-preview>\n                        </ng-template>\n                    </div>\n\n                    <sc-cost-with-discount [product]=\"product\" />\n                </div>\n                <div class=\"flex flex-wrap content-center\">\n                    <div class=\"w-50 flex flex-col gap-x-8 gap-y-0.5\">\n                        <ng-container *ngIf=\"orderItem.height; else length\">\n                            <p>\u0412\u044B\u0441\u043E\u0442\u0430: {{ orderItem.height }} \u043C.</p>\n                        </ng-container>\n                        <ng-template #length>\n                            <p *ngIf=\"orderItem.length\">\u0414\u043B\u0438\u043D\u0430: {{ orderItem.length }} \u043C.</p>\n                        </ng-template>\n                        <p *ngIf=\"orderItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ orderItem.width }} \u043C.</p>\n                        <p class=\"flex flex-col items-baseline gap-x-2\">\n                            <span class=\"whitespace-nowrap text-body-m-bold\">\n                                \u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E: <span class=\"whitespace-nowrap\">{{ orderItem.quantity }}</span>\n                            </span>\n                        </p>\n                    </div>\n\n                    <div class=\"w-50 flex flex-col gap-y-0.5\">\n                        <p class=\"whitespace-nowrap text-body-m-bold\">\n                            \u0421\u0443\u043C\u043C\u0430: <span class=\"whitespace-nowrap\"> {{ orderItem.getCostRubStr() }} </span>\n                        </p>\n                        <sc-price-warehouse-stock\n                            [product]=\"product\"\n                            [fromMain]=\"false\"\n                        ></sc-price-warehouse-stock>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-template #skeleton>\n        <div class=\"flex w-full gap-2\">\n            <div class=\"size-20 rounded-xl bg-tui-base-02\"></div>\n            <div class=\"flex grow flex-col gap-2.5 bg-white\">\n                <div class=\"h-4 w-full rounded-xl bg-tui-base-02\"></div>\n                <div class=\"h-4 w-3/5 rounded-xl bg-tui-base-02\"></div>\n                <div class=\"h-4 w-4/5 rounded-xl bg-tui-base-02\"></div>\n            </div>\n        </div>\n    </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "directive", type: i1$1.TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: i2$1.TuiPreviewComponent, selector: "tui-preview", inputs: ["zoomable", "rotatable"] }, { kind: "directive", type: i2$1.TuiPreviewAction, selector: "[tuiPreviewAction]" }, { kind: "directive", type: i2$4.PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint", "fromMain"] }, { kind: "component", type: CostWithDiscountComponent, selector: "sc-cost-with-discount", inputs: ["product", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ScOrderItemMobileComponent, selector: "sc-order-item-mobile", inputs: { orderItem: "orderItem" }, outputs: { clickActionsEvent: "clickActionsEvent" }, viewQueries: [{ propertyName: "specificationPreviewRef", first: true, predicate: ["specificationPreview"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n    [style.opacity]=\"product?.isHidden ? 'var(--tui-disabled-opacity)' : ''\"\n    class=\"relative flex flex-wrap gap-x-4 gap-y-2 rounded-xl border border-tui-base-04 bg-white p-4 shadow-sc-2\"\n>\n    <ng-container *ngIf=\"orderItem && product; else skeleton\">\n        <button\n            tuiIconButton\n            (click)=\"clickActionsEvent.emit()\"\n            size=\"m\"\n            iconStart=\"@tui.ellipsis-vertical\"\n            appearance=\"float\"\n            class=\"!absolute right-0 top-0 !hidden\"\n        ></button>\n        <div class=\"flex grow gap-2\">\n            <div class=\"flex size-20 shrink-0 items-center justify-center overflow-hidden\">\n                <img\n                    (click)=\"product.isHidden ? null : clickCardEvent.emit()\"\n                    [src]=\"getCardImage(product)\"\n                    [alt]=\"product.name\"\n                    [class.p-5]=\"!product.images?.length\"\n                    class=\"cursor-pointer\"\n                />\n            </div>\n\n            <div class=\"flex grow flex-wrap gap-x-8 self-center\">\n                <div class=\"flex grow basis-min-content flex-col\">\n                    <a\n                        [attr.href]=\"href ?? null\"\n                        [class.disabled]=\"product.isHidden\"\n                        tuiLink\n                        (click)=\"$event.preventDefault(); clickCardEvent.emit()\"\n                    >\n                        <span class=\"font-bold\">{{ product.name }}</span>\n                    </a>\n                    <div class=\"flex flex-col gap-y-0.5 text-tui-text-02\">\n                        <div class=\"flex flex-wrap\">\n                            <p class=\"w-40\">\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                            <p\n                                class=\"w-40\"\n                                *ngIf=\"product.pack\"\n                            >\n                                \u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}\n                            </p>\n                        </div>\n                        <a\n                            tuiLink\n                            *ngIf=\"orderItem.specificationImgUrl\"\n                            (click)=\"showSpecification()\"\n                        >\n                            \u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F\n                        </a>\n                        <ng-template\n                            #specificationPreview\n                            let-preview\n                        >\n                            <tui-preview\n                                [rotatable]=\"false\"\n                                [zoomable]=\"false\"\n                            >\n                                <img\n                                    *polymorpheusOutlet=\"orderItem.specificationImgUrl as src\"\n                                    alt=\"preview\"\n                                    [src]=\"orderItem.specificationImgUrl\"\n                                />\n                                <button\n                                    iconStart=\"@tui.x\"\n                                    title=\"Close\"\n                                    tuiIconButton\n                                    tuiPreviewAction\n                                    type=\"button\"\n                                    (click)=\"preview.complete()\"\n                                ></button>\n                            </tui-preview>\n                        </ng-template>\n                    </div>\n\n                    <sc-cost-with-discount [product]=\"product\" />\n                </div>\n                <div class=\"flex flex-wrap content-center\">\n                    <div class=\"w-50 flex flex-col gap-x-8 gap-y-0.5\">\n                        <ng-container *ngIf=\"orderItem.height; else length\">\n                            <p>\u0412\u044B\u0441\u043E\u0442\u0430: {{ orderItem.height }} \u043C.</p>\n                        </ng-container>\n                        <ng-template #length>\n                            <p *ngIf=\"orderItem.length\">\u0414\u043B\u0438\u043D\u0430: {{ orderItem.length }} \u043C.</p>\n                        </ng-template>\n                        <p *ngIf=\"orderItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ orderItem.width }} \u043C.</p>\n                        <p class=\"flex flex-col items-baseline gap-x-2\">\n                            <span class=\"whitespace-nowrap text-body-m-bold\">\n                                \u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E: <span class=\"whitespace-nowrap\">{{ orderItem.quantity }}</span>\n                            </span>\n                        </p>\n                    </div>\n\n                    <div class=\"w-50 flex flex-col gap-y-0.5\">\n                        <p class=\"whitespace-nowrap text-body-m-bold\">\n                            \u0421\u0443\u043C\u043C\u0430: <span class=\"whitespace-nowrap\"> {{ orderItem.getCostRubStr() }} </span>\n                        </p>\n                        <sc-price-warehouse-stock\n                            [product]=\"product\"\n                            [fromMain]=\"false\"\n                        />\n                    </div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-template #skeleton>\n        <div class=\"flex w-full gap-2\">\n            <div class=\"size-20 rounded-xl bg-tui-base-02\"></div>\n            <div class=\"flex grow flex-col gap-2.5 bg-white\">\n                <div class=\"h-4 w-full rounded-xl bg-tui-base-02\"></div>\n                <div class=\"h-4 w-3/5 rounded-xl bg-tui-base-02\"></div>\n                <div class=\"h-4 w-4/5 rounded-xl bg-tui-base-02\"></div>\n            </div>\n        </div>\n    </ng-template>\n</div>\n", styles: ["a[tuilink].disabled{pointer-events:none!important;cursor:default;opacity:var(--tui-disabled-opacity)}\n"], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "directive", type: i1$1.TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: i2$1.TuiPreviewComponent, selector: "tui-preview", inputs: ["zoomable", "rotatable"] }, { kind: "directive", type: i2$1.TuiPreviewAction, selector: "[tuiPreviewAction]" }, { kind: "directive", type: i2$4.PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint", "fromMain"] }, { kind: "component", type: CostWithDiscountComponent, selector: "sc-cost-with-discount", inputs: ["product", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ScOrderItemMobileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-order-item-mobile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative flex flex-wrap gap-x-4 gap-y-2 rounded-xl border border-tui-base-04 bg-white p-4 shadow-sc-2\">\n    <ng-container *ngIf=\"orderItem && product; else skeleton\">\n        <button\n            tuiIconButton\n            (click)=\"clickActionsEvent.emit()\"\n            size=\"m\"\n            iconStart=\"@tui.ellipsis-vertical\"\n            appearance=\"float\"\n            class=\"!absolute right-0 top-0 !hidden\"\n        ></button>\n        <div class=\"flex grow gap-2\">\n            <div class=\"flex size-20 shrink-0 items-center justify-center overflow-hidden\">\n                <img\n                    (click)=\"clickCardEvent.emit()\"\n                    [src]=\"getCardImage(product)\"\n                    [alt]=\"product.name\"\n                    [class.p-5]=\"!product.images?.length\"\n                    class=\"cursor-pointer\"\n                />\n            </div>\n\n            <div class=\"flex grow flex-wrap gap-x-8 self-center\">\n                <div class=\"flex grow basis-min-content flex-col\">\n                    <a\n                        [attr.href]=\"href ?? null\"\n                        tuiLink\n                        (click)=\"$event.preventDefault(); clickCardEvent.emit()\"\n                    >\n                        <span class=\"font-bold\">{{ product.name }}</span>\n                    </a>\n                    <div class=\"flex flex-col gap-y-0.5 text-tui-text-02\">\n                        <div class=\"flex flex-wrap\">\n                            <p class=\"w-40\">\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                            <p\n                                class=\"w-40\"\n                                *ngIf=\"product.pack\"\n                            >\n                                \u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}\n                            </p>\n                        </div>\n                        <a\n                            tuiLink\n                            *ngIf=\"orderItem.specificationImgUrl\"\n                            (click)=\"showSpecification()\"\n                            >\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a\n                        >\n                        <ng-template\n                            #specificationPreview\n                            let-preview\n                        >\n                            <tui-preview\n                                [rotatable]=\"false\"\n                                [zoomable]=\"false\"\n                            >\n                                <img\n                                    *polymorpheusOutlet=\"orderItem.specificationImgUrl as src\"\n                                    alt=\"preview\"\n                                    [src]=\"orderItem.specificationImgUrl\"\n                                />\n                                <button\n                                    iconStart=\"@tui.x\"\n                                    title=\"Close\"\n                                    tuiIconButton\n                                    tuiPreviewAction\n                                    type=\"button\"\n                                    (click)=\"preview.complete()\"\n                                ></button>\n                            </tui-preview>\n                        </ng-template>\n                    </div>\n\n                    <sc-cost-with-discount [product]=\"product\" />\n                </div>\n                <div class=\"flex flex-wrap content-center\">\n                    <div class=\"w-50 flex flex-col gap-x-8 gap-y-0.5\">\n                        <ng-container *ngIf=\"orderItem.height; else length\">\n                            <p>\u0412\u044B\u0441\u043E\u0442\u0430: {{ orderItem.height }} \u043C.</p>\n                        </ng-container>\n                        <ng-template #length>\n                            <p *ngIf=\"orderItem.length\">\u0414\u043B\u0438\u043D\u0430: {{ orderItem.length }} \u043C.</p>\n                        </ng-template>\n                        <p *ngIf=\"orderItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ orderItem.width }} \u043C.</p>\n                        <p class=\"flex flex-col items-baseline gap-x-2\">\n                            <span class=\"whitespace-nowrap text-body-m-bold\">\n                                \u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E: <span class=\"whitespace-nowrap\">{{ orderItem.quantity }}</span>\n                            </span>\n                        </p>\n                    </div>\n\n                    <div class=\"w-50 flex flex-col gap-y-0.5\">\n                        <p class=\"whitespace-nowrap text-body-m-bold\">\n                            \u0421\u0443\u043C\u043C\u0430: <span class=\"whitespace-nowrap\"> {{ orderItem.getCostRubStr() }} </span>\n                        </p>\n                        <sc-price-warehouse-stock\n                            [product]=\"product\"\n                            [fromMain]=\"false\"\n                        ></sc-price-warehouse-stock>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-template #skeleton>\n        <div class=\"flex w-full gap-2\">\n            <div class=\"size-20 rounded-xl bg-tui-base-02\"></div>\n            <div class=\"flex grow flex-col gap-2.5 bg-white\">\n                <div class=\"h-4 w-full rounded-xl bg-tui-base-02\"></div>\n                <div class=\"h-4 w-3/5 rounded-xl bg-tui-base-02\"></div>\n                <div class=\"h-4 w-4/5 rounded-xl bg-tui-base-02\"></div>\n            </div>\n        </div>\n    </ng-template>\n</div>\n" }]
+            args: [{ selector: 'sc-order-item-mobile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    [style.opacity]=\"product?.isHidden ? 'var(--tui-disabled-opacity)' : ''\"\n    class=\"relative flex flex-wrap gap-x-4 gap-y-2 rounded-xl border border-tui-base-04 bg-white p-4 shadow-sc-2\"\n>\n    <ng-container *ngIf=\"orderItem && product; else skeleton\">\n        <button\n            tuiIconButton\n            (click)=\"clickActionsEvent.emit()\"\n            size=\"m\"\n            iconStart=\"@tui.ellipsis-vertical\"\n            appearance=\"float\"\n            class=\"!absolute right-0 top-0 !hidden\"\n        ></button>\n        <div class=\"flex grow gap-2\">\n            <div class=\"flex size-20 shrink-0 items-center justify-center overflow-hidden\">\n                <img\n                    (click)=\"product.isHidden ? null : clickCardEvent.emit()\"\n                    [src]=\"getCardImage(product)\"\n                    [alt]=\"product.name\"\n                    [class.p-5]=\"!product.images?.length\"\n                    class=\"cursor-pointer\"\n                />\n            </div>\n\n            <div class=\"flex grow flex-wrap gap-x-8 self-center\">\n                <div class=\"flex grow basis-min-content flex-col\">\n                    <a\n                        [attr.href]=\"href ?? null\"\n                        [class.disabled]=\"product.isHidden\"\n                        tuiLink\n                        (click)=\"$event.preventDefault(); clickCardEvent.emit()\"\n                    >\n                        <span class=\"font-bold\">{{ product.name }}</span>\n                    </a>\n                    <div class=\"flex flex-col gap-y-0.5 text-tui-text-02\">\n                        <div class=\"flex flex-wrap\">\n                            <p class=\"w-40\">\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                            <p\n                                class=\"w-40\"\n                                *ngIf=\"product.pack\"\n                            >\n                                \u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}\n                            </p>\n                        </div>\n                        <a\n                            tuiLink\n                            *ngIf=\"orderItem.specificationImgUrl\"\n                            (click)=\"showSpecification()\"\n                        >\n                            \u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F\n                        </a>\n                        <ng-template\n                            #specificationPreview\n                            let-preview\n                        >\n                            <tui-preview\n                                [rotatable]=\"false\"\n                                [zoomable]=\"false\"\n                            >\n                                <img\n                                    *polymorpheusOutlet=\"orderItem.specificationImgUrl as src\"\n                                    alt=\"preview\"\n                                    [src]=\"orderItem.specificationImgUrl\"\n                                />\n                                <button\n                                    iconStart=\"@tui.x\"\n                                    title=\"Close\"\n                                    tuiIconButton\n                                    tuiPreviewAction\n                                    type=\"button\"\n                                    (click)=\"preview.complete()\"\n                                ></button>\n                            </tui-preview>\n                        </ng-template>\n                    </div>\n\n                    <sc-cost-with-discount [product]=\"product\" />\n                </div>\n                <div class=\"flex flex-wrap content-center\">\n                    <div class=\"w-50 flex flex-col gap-x-8 gap-y-0.5\">\n                        <ng-container *ngIf=\"orderItem.height; else length\">\n                            <p>\u0412\u044B\u0441\u043E\u0442\u0430: {{ orderItem.height }} \u043C.</p>\n                        </ng-container>\n                        <ng-template #length>\n                            <p *ngIf=\"orderItem.length\">\u0414\u043B\u0438\u043D\u0430: {{ orderItem.length }} \u043C.</p>\n                        </ng-template>\n                        <p *ngIf=\"orderItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ orderItem.width }} \u043C.</p>\n                        <p class=\"flex flex-col items-baseline gap-x-2\">\n                            <span class=\"whitespace-nowrap text-body-m-bold\">\n                                \u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E: <span class=\"whitespace-nowrap\">{{ orderItem.quantity }}</span>\n                            </span>\n                        </p>\n                    </div>\n\n                    <div class=\"w-50 flex flex-col gap-y-0.5\">\n                        <p class=\"whitespace-nowrap text-body-m-bold\">\n                            \u0421\u0443\u043C\u043C\u0430: <span class=\"whitespace-nowrap\"> {{ orderItem.getCostRubStr() }} </span>\n                        </p>\n                        <sc-price-warehouse-stock\n                            [product]=\"product\"\n                            [fromMain]=\"false\"\n                        />\n                    </div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-template #skeleton>\n        <div class=\"flex w-full gap-2\">\n            <div class=\"size-20 rounded-xl bg-tui-base-02\"></div>\n            <div class=\"flex grow flex-col gap-2.5 bg-white\">\n                <div class=\"h-4 w-full rounded-xl bg-tui-base-02\"></div>\n                <div class=\"h-4 w-3/5 rounded-xl bg-tui-base-02\"></div>\n                <div class=\"h-4 w-4/5 rounded-xl bg-tui-base-02\"></div>\n            </div>\n        </div>\n    </ng-template>\n</div>\n", styles: ["a[tuilink].disabled{pointer-events:none!important;cursor:default;opacity:var(--tui-disabled-opacity)}\n"] }]
         }], ctorParameters: () => [{ type: i2$1.TuiPreviewDialogService, decorators: [{
                     type: Inject,
                     args: [TuiPreviewDialogService]