@snabcentr/client-ui 5.3.4 → 5.5.0

package/fesm2022/snabcentr-client-ui.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, Injectable, NgZone, EventEmitter, Output, Input, ChangeDetectionStrategy, Component, signal, ChangeDetectorRef, Directive, Pipe, ElementRef, Renderer2, HostListener, input, computed, model, output, DestroyRef, effect, ViewChild, ContentChild, viewChild, HostBinding, ContentChildren, forwardRef, contentChild, TemplateRef, RESPONSE_INIT } from '@angular/core';
-import { ScContactsService, ScUserService, ScLocationsService, ScSuggestionService, ScISuggestionType, SC_MIN_LENGTH_SEARCH_TERM, ScAuthService, SEARCH_TERM, ScUnitsHelper, ScImageHelper, SC_PATH_IMAGE_NOT_FOUND, ScImage, ScPhoneService, ScUserMetrikaService, ScUserMetrikaGoalsEnum, ScVCardService, IS_RUNNING_ON_TERMINAL, ScVerificationService, ScConvertersService, ScReferencesService, ScOpfList, ScBannerService, ScMediaImageTransformerPipe, ScCartService, ScUploadedFile, loadingPlaceholder, SC_ORDER_LOADER, ScMimeTypes, ScCatalogService, IS_SERVER, ScWarehouseService, SEARCH_TERM_PROVIDERS, ScPaginationService, SC_NEXT_PAGE_PAGINATION_CLICK, SC_PRODUCT_PAGINATION_OPTIONS, ScCatalogFilterService, ScIdOrSlugPipe, SC_CATEGORY_INFO, ScConfiguratorService, ScContragentService, ScDeliveryAddressService, SC_URLS, ScIconTypesEnum, ScDocumentInfoTypesEnum, ScFilesService, ScOrdersService, ScUIService, SC_USER_INFO as SC_USER_INFO$1, ScPaymentType, ScDeliveryType, TERMINAL_PROVIDERS, ScOrderDraftsService, ScRouteKeys, ScSeoService, scOrderIsLoaded, ScFrequentlyAskedQuestionsService, SC_COMPANY_INFO, ScFeedbackService } from '@snabcentr/client-core';
-import { EMPTY, BehaviorSubject, switchMap, of, shareReplay, filter, map, debounceTime, startWith, catchError, throwError, share, Subject, tap, finalize, timer, scan, takeWhile, endWith, distinctUntilChanged, combineLatest, Observable, pairwise, Subscription, merge, skip, from, concatMap, noop, first, retry } from 'rxjs';
+import { ScContactsService, ScUserService, ScLocationsService, ScSuggestionService, ScISuggestionType, SC_MIN_LENGTH_SEARCH_TERM, ScAuthService, SEARCH_TERM, ScUnitsHelper, ScImageHelper, SC_PATH_IMAGE_NOT_FOUND, ScImage, ScPhoneService, ScUserMetrikaService, ScUserMetrikaGoalsEnum, ScVCardService, IS_RUNNING_ON_TERMINAL, ScVerificationService, ScConvertersService, ScReferencesService, ScOpfList, ScBannerService, ScMediaImageTransformerPipe, ScCartService, ScUploadedFile, loadingPlaceholder, SC_ORDER_LOADER, ScMimeTypes, ScCatalogService, IS_SERVER, ScWarehouseService, SEARCH_TERM_PROVIDERS, ScPaginationService, SC_NEXT_PAGE_PAGINATION_CLICK, SC_PRODUCT_PAGINATION_OPTIONS, ScCatalogFilterService, ScIdOrSlugPipe, SC_CATEGORY_INFO, ScConfiguratorService, ScContragentService, ScDeliveryAddressService, SC_URLS, ScIconTypesEnum, ScDocumentInfoTypesEnum, ScFilesService, ScOrdersService, ScUIService, SC_USER_INFO as SC_USER_INFO$1, ScPaymentType, ScDeliveryType, TERMINAL_PROVIDERS, ScOrderDraftsService, ScRouteKeys, ScSeoService, scOrderIsLoaded, ScFrequentlyAskedQuestionsService, SchemaOrgFactory, SC_COMPANY_INFO, ScFeedbackService } from '@snabcentr/client-core';
+import { EMPTY, BehaviorSubject, switchMap, of, shareReplay, filter, map, debounceTime, startWith, catchError, throwError, share, Subject, tap, finalize, timer, scan, takeWhile, endWith, distinctUntilChanged, combineLatest, Observable, pairwise, Subscription, merge, skip, from, concatMap, noop as noop$1, first, retry } from 'rxjs';
 import { WA_WINDOW, WA_NAVIGATOR } from '@ng-web-apis/common';
 import { takeUntilDestroyed, toSignal, outputFromObservable, toObservable } from '@angular/core/rxjs-interop';
 import { tuiIsPresent, TuiDay, TuiTime, TuiValueTransformer, tuiControlValue, tuiMarkControlAsTouchedAndValidate, TuiAutoFocus, TuiHovered, TuiDayRange, TuiMonth, tuiProvide, TuiValidationError, TUI_WINDOW_SIZE, TUI_TRUE_HANDLER } from '@taiga-ui/cdk';
@@ -17,7 +17,7 @@ import { AsyncPipe, DOCUMENT, NgTemplateOutlet, NgClass, CommonModule, DecimalPi
 import { isValidPhoneNumber } from 'libphonenumber-js/max';
 import { MaskitoDirective } from '@maskito/angular';
 import { getCountries } from 'libphonenumber-js';
-import { isNil, isUndefined, isObject, isString, isArray } from 'lodash-es';
+import { isNil, isUndefined, isObject, noop, isString, isArray } from 'lodash-es';
 import { POLYMORPHEUS_CONTEXT, PolymorpheusComponent, PolymorpheusTemplate, PolymorpheusOutlet, injectContext } from '@taiga-ui/polymorpheus';
 import { QRCodeComponent } from 'angularx-qrcode';
 import * as i3 from '@taiga-ui/core/portals/dropdown';
@@ -2404,12 +2404,14 @@ class ScNewContragentFormComponent {
          *
          * @param opf Организационно-правовая форма.
          */
+        // eslint-disable-next-line security/detect-object-injection
         this.innMask = (opf) => (ScOpfList[opf] > ScOpfList.entrepreneur ? scLegalInnMask : scEntrepreneurInnMask);
         /**
          * Маска поля ввода ОКПО.
          *
          * @param opf Организационно-правовая форма.
          */
+        // eslint-disable-next-line security/detect-object-injection
         this.okpoMask = (opf) => (ScOpfList[opf] > ScOpfList.entrepreneur ? scLegalOkpoMask : scEntrepreneurOkpoMask);
         /**
          * Функция преобразования объекта сортировки в значение, отображаемое в поле ввода.
@@ -2953,7 +2955,7 @@ class ScSignUpFormComponent {
         this.clickOfferEvent.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ScSignUpFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ScSignUpFormComponent, isStandalone: true, selector: "sc-sign-up-form", outputs: { successAuth: "successAuth", clickOfferEvent: "clickOfferEvent" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [tuiDropdownOptionsProvider({ limitWidth: 'fixed' })], ngImport: i0, template: "@if (opfControl.value; as selectOpf) {\n    <form\n        [formGroup]=\"form\"\n        (ngSubmit)=\"onSubmit.next()\"\n        class=\"flex flex-col gap-5\"\n    >\n        @let isIndividual = opfListEnum[selectOpf] === opfListEnum.individual;\n        @if (!isIndividual && form.controls.contragent) {\n            <tui-stepper [(activeItemIndex)]=\"stepIndex\">\n                @for (_ of steps; track $index) {\n                    <button\n                        [stepState]=\"$index && !canNextStep($index) ? 'error' : 'pass'\"\n                        [attr.disabled]=\"$index && !canNextStep($index - 1) ? '' : null\"\n                        type=\"button\"\n                        tuiStep\n                    >\n                        {{ steps[$index] }}\n                    </button>\n                }\n            </tui-stepper>\n        }\n        <div\n            [class.!hidden]=\"stepIndex !== 0\"\n            class=\"flex flex-col gap-3\"\n        >\n            <label tuiLabel>\n                \u0422\u0438\u043F \u043A\u043B\u0438\u0435\u043D\u0442\u0430\n                <tui-textfield\n                    tuiChevron\n                    [content]=\"opfContent\"\n                >\n                    <input\n                        tuiSelect\n                        [formControl]=\"opfControl\"\n                        placeholder=\"\u0422\u0438\u043F \u043A\u043B\u0438\u0435\u043D\u0442\u0430\"\n                    />\n                    <tui-data-list *tuiDropdown>\n                        @for (item of getOpf$() | async; track item; let index = $index) {\n                            <button\n                                tuiOption\n                                [value]=\"item.slug\"\n                            >\n                                {{ item.name }}\n                            </button>\n                        }\n                    </tui-data-list>\n                </tui-textfield>\n            </label>\n            <ng-template\n                #opfContent\n                let-data\n            >\n                <div>{{ (getOpfBySlug$(data) | async)?.name }}</div>\n            </ng-template>\n\n            @let nameLabel = opfListEnum[selectOpf] === opfListEnum.individual ? '\u0424.\u0418.\u041E.' : '\u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438';\n            <label tuiLabel>\n                {{ nameLabel }}\n                <tui-textfield>\n                    <input\n                        tuiInput\n                        formControlName=\"name\"\n                        [placeholder]=\"nameLabel\"\n                    />\n                    @if (opfListEnum[selectOpf] === opfListEnum.individual) {\n                        <sc-suggestion-field\n                            *tuiDropdown\n                            [type]=\"suggestionType.fio\"\n                        />\n                    } @else if (opfListEnum[selectOpf] !== opfListEnum.non_resident_legal) {\n                        <sc-suggestion-field\n                            *tuiDropdown\n                            [type]=\"suggestionType.organization\"\n                            (selectedClick)=\"onSelectedOrganization($event)\"\n                        />\n                    }\n                </tui-textfield>\n                <tui-error formControlName=\"name\" />\n            </label>\n\n            <div class=\"grid items-start gap-5 sm:grid-cols-2\">\n                <sc-verification-phone-check-form [shouldBeBusy]=\"false\" />\n                <div>\n                    <label tuiLabel>\n                        \u0410\u0434\u0440\u0435\u0441 \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u044B\n                        <tui-textfield>\n                            <input\n                                tuiInput\n                                formControlName=\"email\"\n                                placeholder=\"\u0410\u0434\u0440\u0435\u0441 \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u044B\"\n                            />\n                            <sc-suggestion-field\n                                *tuiDropdown\n                                [type]=\"suggestionType.email\"\n                            />\n                        </tui-textfield>\n                        <tui-error formControlName=\"email\" />\n                    </label>\n                </div>\n            </div>\n            <sc-addresses-selection-field [canSelectCountry]=\"opfListEnum[selectOpf] === opfListEnum.non_resident_legal\" />\n            <div class=\"grid items-start gap-5 sm:grid-cols-2\">\n                <div>\n                    <label tuiLabel>\n                        \u041F\u0430\u0440\u043E\u043B\u044C\n                        <tui-textfield>\n                            <input\n                                tuiInput\n                                type=\"password\"\n                                formControlName=\"password\"\n                                autocomplete=\"new-password\"\n                                placeholder=\"\u041F\u0430\u0440\u043E\u043B\u044C\"\n                            />\n                            <tui-icon tuiPassword />\n                        </tui-textfield>\n                        <tui-error formControlName=\"password\" />\n                    </label>\n                </div>\n                <div>\n                    <label tuiLabel>\n                        \u041F\u043E\u0432\u0442\u043E\u0440 \u043F\u0430\u0440\u043E\u043B\u044F\n                        <tui-textfield>\n                            <input\n                                tuiInput\n                                type=\"password\"\n                                formControlName=\"passwordConfirm\"\n                                autocomplete=\"new-password\"\n                                placeholder=\"\u041F\u043E\u0432\u0442\u043E\u0440 \u043F\u0430\u0440\u043E\u043B\u044F\"\n                            />\n                            <tui-icon tuiPassword />\n                        </tui-textfield>\n                        <tui-error formControlName=\"passwordConfirm\" />\n                    </label>\n                </div>\n            </div>\n            <tui-error class=\"self-center\" />\n            <div class=\"grid items-start gap-5 sm:grid-cols-2\">\n                <label tuiLabel>\n                    <input\n                        tuiCheckbox\n                        type=\"checkbox\"\n                        formControlName=\"getNews\"\n                    />\n                    \u042F \u0445\u043E\u0447\u0443 \u043F\u043E\u043B\u0443\u0447\u0430\u0442\u044C \u0440\u0430\u0441\u0441\u044B\u043B\u043A\u0443 \u0421\u043D\u0430\u0431\u0446\u0435\u043D\u0442\u0440 \u043E \u0441\u043A\u0438\u0434\u043A\u0430\u0445 \u0438 \u043D\u043E\u0432\u043E\u0441\u0442\u044F\u0445 \u043F\u043E \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u0435.\n                </label>\n                <label tuiLabel>\n                    <input\n                        tuiCheckbox\n                        type=\"checkbox\"\n                        required=\"true\"\n                        formControlName=\"acceptRules\"\n                    />\n                    <div>\n                        <span>\n                            \u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u044F\u0441\u044C \u043D\u0430 \u0441\u0430\u0439\u0442\u0435, \u044F \u0441\u043E\u0433\u043B\u0430\u0448\u0430\u044E\u0441\u044C \u0441\n                            <a\n                                tuiLink\n                                [style.text-decoration-line]=\"'underline'\"\n                                (click)=\"$event.preventDefault(); onClickOffer()\"\n                            >\n                                \u0414\u043E\u0433\u043E\u0432\u043E\u0440\u043E\u043C \u043E\u0444\u0435\u0440\u0442\u044B\n                            </a>\n                            .\n                        </span>\n                        <span class=\"text-tui-negative\">*</span>\n                        <tui-error formControlName=\"acceptRules\" />\n                    </div>\n                </label>\n            </div>\n        </div>\n        @if (!isIndividual) {\n            <sc-new-contragent-form\n                [opfControl]=\"opfControl\"\n                [class.!hidden]=\"stepIndex !== 1\"\n            />\n            <div [class.!hidden]=\"stepIndex !== 2\">\n                @if (contacts) {\n                    <div class=\"flex flex-col gap-5 pb-1\">\n                        <p class=\"text-lg font-bold\">\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u044B</p>\n                        @for (contact of contacts.controls; track contact; let index = $index; let count = $count; let last = $last) {\n                            <div class=\"flex flex-col gap-3\">\n                                <div class=\"flex h-10 items-center justify-between\">\n                                    <p class=\"font-bold\">\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u043D\u043E\u0435 \u043B\u0438\u0446\u043E \u2116{{ index + 1 }}:</p>\n                                    @if (count - 1) {\n                                        <button\n                                            tuiIconButton\n                                            appearance=\"secondary\"\n                                            (click)=\"removeContactGroup(index)\"\n                                            iconStart=\"@tui.trash-2\"\n                                        ></button>\n                                    }\n                                </div>\n                                <sc-new-contact-form [form]=\"contact\" />\n                                @if (!last) {\n                                    <hr class=\"h-px w-full bg-tui-base-04\" />\n                                }\n                            </div>\n                        }\n                        <button\n                            tuiButton\n                            iconStart=\"@tui.plus\"\n                            appearance=\"secondary\"\n                            (click)=\"addContactGroup()\"\n                            type=\"button\"\n                            class=\"self-center\"\n                        >\n                            \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043A\u043E\u043D\u0442\u0430\u043A\u0442\n                        </button>\n                    </div>\n                }\n            </div>\n            <div [class.!hidden]=\"stepIndex !== 3\">\n                @if (bankAccounts) {\n                    <div class=\"flex flex-col gap-5 pb-1\">\n                        <p class=\"text-lg font-bold\">\u0411\u0430\u043D\u043A\u043E\u0432\u0441\u043A\u0438\u0435 \u0440\u0435\u043A\u0432\u0438\u0437\u0438\u0442\u044B</p>\n                        @for (bankAccount of bankAccounts.controls; track bankAccount; let index = $index; let count = $count; let last = $last) {\n                            <div class=\"flex flex-col gap-3\">\n                                <div class=\"flex h-12 items-center justify-between\">\n                                    <p class=\"font-bold\">\u0411\u0430\u043D\u043A\u043E\u0432\u0441\u043A\u0438\u0435 \u0440\u0435\u043A\u0432\u0438\u0437\u0438\u0442\u044B \u2116{{ index + 1 }}:</p>\n                                    @if (count - 1) {\n                                        <button\n                                            tuiIconButton\n                                            appearance=\"secondary\"\n                                            (click)=\"removeBankAccountGroup(index)\"\n                                            iconStart=\"@tui.trash-2\"\n                                        ></button>\n                                    }\n                                </div>\n                                @if (opfControl.value; as selectOpf) {\n                                    <sc-new-contragent-bank-account-form\n                                        [opf]=\"selectOpf\"\n                                        [form]=\"bankAccount\"\n                                    />\n                                }\n                                @if (!last) {\n                                    <hr class=\"h-px w-full bg-tui-base-04\" />\n                                }\n                            </div>\n                        }\n                        <button\n                            tuiButton\n                            iconStart=\"@tui.plus\"\n                            appearance=\"secondary\"\n                            (click)=\"addBankAccountGroup()\"\n                            type=\"button\"\n                            class=\"self-center\"\n                        >\n                            \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0431\u0430\u043D\u043A\u043E\u0432\u0441\u043A\u0438\u0435 \u0440\u0435\u043A\u0432\u0438\u0437\u0438\u0442\u044B\n                        </button>\n                    </div>\n                }\n            </div>\n        }\n        <div class=\"flex justify-center gap-2\">\n            @if (stepIndex > 0) {\n                <button\n                    tuiButton\n                    appearance=\"secondary\"\n                    type=\"button\"\n                    (click)=\"navigate(-1)\"\n                >\n                    \u041D\u0430\u0437\u0430\u0434\n                </button>\n            }\n            @if (isIndividual || (stepIndex === 2 && !form.controls.contragent.controls['bankAccounts']) || stepIndex === 3) {\n                <button\n                    tuiButton\n                    [disabled]=\"form.invalid\"\n                    [loading]=\"!!(loading$ | async)\"\n                    class=\"self-center\"\n                >\n                    \u0417\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u0442\u044C\u0441\u044F\n                </button>\n            } @else {\n                <button\n                    tuiButton\n                    type=\"button\"\n                    [disabled]=\"!canNextStep(stepIndex)\"\n                    (click)=\"navigate(1)\"\n                >\n                    \u0414\u0430\u043B\u0435\u0435\n                </button>\n            }\n        </div>\n    </form>\n}\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: i2.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler"] }, { kind: "directive", type: i3.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "directive", type: i2.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "invalid", "focused", "state"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "component", type: i2.TuiErrorComponent, selector: "tui-error", inputs: ["error"] }, { kind: "directive", type: i2.TuiErrorDirective, selector: "tui-error[ngModel], tui-error[formControlName], tui-error[formControl], tui-error[formGroup], tui-error[formGroupName], tui-error[formArrayName], tui-error[formArray]", inputs: ["order"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiButtonLoading, selector: "[tuiButton][loading],[tuiIconButton][loading]", inputs: ["size", "loading"] }, { kind: "component", type: TuiCheckbox, selector: "input[type=\"checkbox\"][tuiCheckbox]" }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }, { kind: "component", type: i2.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i2.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i2.TuiOptionWithValue, selector: "button[tuiOption][value], a[tuiOption][value], label[tuiOption][value]", inputs: ["disabled", "value"] }, { kind: "component", type: i1$1.TuiStepperComponent, selector: "tui-stepper", inputs: ["orientation", "activeItemIndex"], outputs: ["activeItemIndexChange"] }, { kind: "component", type: i1$1.TuiStep, selector: "button[tuiStep], a[tuiStep]:not([routerLink]), a[tuiStep][routerLink][routerLinkActive]", inputs: ["stepState", "icon"] }, { kind: "component", type: ScAddressesSelectionFieldComponent, selector: "sc-addresses-selection-field", inputs: ["canSelectCountry"], outputs: ["canSelectCountryChange"] }, { kind: "component", type: ScSuggestionFieldComponent, selector: "sc-suggestion-field", inputs: ["type"], outputs: ["selectedClick"] }, { kind: "component", type: ScVerificationPhoneCheckFormComponent, selector: "sc-verification-phone-check-form", inputs: ["showCodeFields", "readOnly", "pseudoInvalid", "required", "subtitle", "shouldBeBusy", "shouldBeConfirmed", "haveCode"], outputs: ["haveCodeChange", "isBusyChange", "isConfirmedChange"] }, { kind: "component", type: ScNewContragentFormComponent, selector: "sc-new-contragent-form", inputs: ["opfControl"] }, { kind: "component", type: ScNewContragentBankAccountsFormComponent, selector: "sc-new-contragent-bank-account-form", inputs: ["form", "opf"] }, { kind: "component", type: ScNewContactFormComponent, selector: "sc-new-contact-form", inputs: ["form"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ScSignUpFormComponent, isStandalone: true, selector: "sc-sign-up-form", outputs: { successAuth: "successAuth", clickOfferEvent: "clickOfferEvent" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [tuiDropdownOptionsProvider({ limitWidth: 'fixed' })], ngImport: i0, template: "@if (opfControl.value; as selectOpf) {\n    <form\n        [formGroup]=\"form\"\n        (ngSubmit)=\"onSubmit.next()\"\n        class=\"flex flex-col gap-5\"\n    >\n        @let isIndividual = opfListEnum[selectOpf] === opfListEnum.individual;\n        @if (!isIndividual && form.controls.contragent) {\n            <tui-stepper [(activeItemIndex)]=\"stepIndex\">\n                @for (_ of steps; track $index) {\n                    <button\n                        [stepState]=\"$index && !canNextStep($index) ? 'error' : 'pass'\"\n                        [attr.disabled]=\"$index && !canNextStep($index - 1) ? '' : null\"\n                        type=\"button\"\n                        tuiStep\n                    >\n                        {{ steps[$index] }}\n                    </button>\n                }\n            </tui-stepper>\n        }\n        <div\n            [class.!hidden]=\"stepIndex !== 0\"\n            class=\"flex flex-col gap-3\"\n        >\n            <label tuiLabel>\n                \u0422\u0438\u043F \u043A\u043B\u0438\u0435\u043D\u0442\u0430\n                <tui-textfield\n                    tuiChevron\n                    [content]=\"opfContent\"\n                >\n                    <input\n                        tuiSelect\n                        [formControl]=\"opfControl\"\n                        placeholder=\"\u0422\u0438\u043F \u043A\u043B\u0438\u0435\u043D\u0442\u0430\"\n                    />\n                    <tui-data-list *tuiDropdown>\n                        @for (item of getOpf$() | async; track item; let index = $index) {\n                            <button\n                                tuiOption\n                                [value]=\"item.slug\"\n                            >\n                                {{ item.name }}\n                            </button>\n                        }\n                    </tui-data-list>\n                </tui-textfield>\n            </label>\n            <ng-template\n                #opfContent\n                let-data\n            >\n                <div>{{ (getOpfBySlug$(data) | async)?.name }}</div>\n            </ng-template>\n\n            @let nameLabel = opfListEnum[selectOpf] === opfListEnum.individual ? '\u0424.\u0418.\u041E.' : '\u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438';\n            <label tuiLabel>\n                {{ nameLabel }}\n                <tui-textfield>\n                    <input\n                        tuiInput\n                        formControlName=\"name\"\n                        [placeholder]=\"nameLabel\"\n                    />\n                    @if (opfListEnum[selectOpf] === opfListEnum.individual) {\n                        <sc-suggestion-field\n                            *tuiDropdown\n                            [type]=\"suggestionType.fio\"\n                        />\n                    } @else if (opfListEnum[selectOpf] !== opfListEnum.non_resident_legal) {\n                        <sc-suggestion-field\n                            *tuiDropdown\n                            [type]=\"suggestionType.organization\"\n                            (selectedClick)=\"onSelectedOrganization($event)\"\n                        />\n                    }\n                </tui-textfield>\n                <tui-error formControlName=\"name\" />\n            </label>\n\n            <div class=\"grid items-start gap-5 sm:grid-cols-2\">\n                <sc-verification-phone-check-form [shouldBeBusy]=\"false\" />\n                <div>\n                    <label tuiLabel>\n                        \u0410\u0434\u0440\u0435\u0441 \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u044B\n                        <tui-textfield>\n                            <input\n                                tuiInput\n                                formControlName=\"email\"\n                                placeholder=\"\u0410\u0434\u0440\u0435\u0441 \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u044B\"\n                            />\n                            <sc-suggestion-field\n                                *tuiDropdown\n                                [type]=\"suggestionType.email\"\n                            />\n                        </tui-textfield>\n                        <tui-error formControlName=\"email\" />\n                    </label>\n                </div>\n            </div>\n            <sc-addresses-selection-field [canSelectCountry]=\"opfListEnum[selectOpf] === opfListEnum.non_resident_legal\" />\n            <div class=\"grid items-start gap-5 sm:grid-cols-2\">\n                <div>\n                    <label tuiLabel>\n                        \u041F\u0430\u0440\u043E\u043B\u044C\n                        <tui-textfield>\n                            <input\n                                tuiInput\n                                type=\"password\"\n                                formControlName=\"password\"\n                                autocomplete=\"new-password\"\n                                placeholder=\"\u041F\u0430\u0440\u043E\u043B\u044C\"\n                            />\n                            <tui-icon tuiPassword />\n                        </tui-textfield>\n                        <tui-error formControlName=\"password\" />\n                    </label>\n                </div>\n                <div>\n                    <label tuiLabel>\n                        \u041F\u043E\u0432\u0442\u043E\u0440 \u043F\u0430\u0440\u043E\u043B\u044F\n                        <tui-textfield>\n                            <input\n                                tuiInput\n                                type=\"password\"\n                                formControlName=\"passwordConfirm\"\n                                autocomplete=\"new-password\"\n                                placeholder=\"\u041F\u043E\u0432\u0442\u043E\u0440 \u043F\u0430\u0440\u043E\u043B\u044F\"\n                            />\n                            <tui-icon tuiPassword />\n                        </tui-textfield>\n                        <tui-error formControlName=\"passwordConfirm\" />\n                    </label>\n                </div>\n            </div>\n            <tui-error class=\"self-center\" />\n            <div class=\"grid items-start gap-5 sm:grid-cols-2\">\n                <label tuiLabel>\n                    <input\n                        tuiCheckbox\n                        type=\"checkbox\"\n                        formControlName=\"getNews\"\n                    />\n                    \u042F \u0445\u043E\u0447\u0443 \u043F\u043E\u043B\u0443\u0447\u0430\u0442\u044C \u0440\u0430\u0441\u0441\u044B\u043B\u043A\u0443 \u0421\u043D\u0430\u0431\u0446\u0435\u043D\u0442\u0440 \u043E \u0441\u043A\u0438\u0434\u043A\u0430\u0445 \u0438 \u043D\u043E\u0432\u043E\u0441\u0442\u044F\u0445 \u043F\u043E \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u0435.\n                </label>\n                <label tuiLabel>\n                    <input\n                        tuiCheckbox\n                        type=\"checkbox\"\n                        required=\"true\"\n                        formControlName=\"acceptRules\"\n                    />\n                    <div>\n                        <span>\n                            \u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u044F\u0441\u044C \u043D\u0430 \u0441\u0430\u0439\u0442\u0435, \u044F \u0441\u043E\u0433\u043B\u0430\u0448\u0430\u044E\u0441\u044C \u0441\n                            <a\n                                tuiLink\n                                [style.text-decoration-line]=\"'underline'\"\n                                (click)=\"$event.preventDefault(); onClickOffer()\"\n                            >\n                                \u0414\u043E\u0433\u043E\u0432\u043E\u0440\u043E\u043C \u043E\u0444\u0435\u0440\u0442\u044B\n                            </a>\n                            .\n                        </span>\n                        <span class=\"text-tui-negative\">*</span>\n                        <tui-error formControlName=\"acceptRules\" />\n                    </div>\n                </label>\n            </div>\n        </div>\n        @if (!isIndividual) {\n            <sc-new-contragent-form\n                [opfControl]=\"opfControl\"\n                [class.!hidden]=\"stepIndex !== 1\"\n            />\n            <div [class.!hidden]=\"stepIndex !== 2\">\n                @if (contacts) {\n                    <div class=\"flex flex-col gap-5 pb-1\">\n                        <p class=\"text-lg font-bold\">\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u044B</p>\n                        @for (contact of contacts.controls; track contact; let index = $index; let count = $count; let last = $last) {\n                            <div class=\"flex flex-col gap-3\">\n                                <div class=\"flex h-10 items-center justify-between\">\n                                    <p class=\"font-bold\">\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u043D\u043E\u0435 \u043B\u0438\u0446\u043E \u2116{{ index + 1 }}:</p>\n                                    @if (count - 1) {\n                                        <button\n                                            tuiIconButton\n                                            appearance=\"secondary\"\n                                            (click)=\"removeContactGroup(index)\"\n                                        >\n                                            <tui-icon icon=\"@tui.trash-2\" />\n                                        </button>\n                                    }\n                                </div>\n                                <sc-new-contact-form [form]=\"contact\" />\n                                @if (!last) {\n                                    <hr class=\"h-px w-full bg-tui-base-04\" />\n                                }\n                            </div>\n                        }\n                        <button\n                            tuiButton\n                            iconStart=\"@tui.plus\"\n                            appearance=\"secondary\"\n                            (click)=\"addContactGroup()\"\n                            type=\"button\"\n                            class=\"self-center\"\n                        >\n                            \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043A\u043E\u043D\u0442\u0430\u043A\u0442\n                        </button>\n                    </div>\n                }\n            </div>\n            <div [class.!hidden]=\"stepIndex !== 3\">\n                @if (bankAccounts) {\n                    <div class=\"flex flex-col gap-5 pb-1\">\n                        <p class=\"text-lg font-bold\">\u0411\u0430\u043D\u043A\u043E\u0432\u0441\u043A\u0438\u0435 \u0440\u0435\u043A\u0432\u0438\u0437\u0438\u0442\u044B</p>\n                        @for (bankAccount of bankAccounts.controls; track bankAccount; let index = $index; let count = $count; let last = $last) {\n                            <div class=\"flex flex-col gap-3\">\n                                <div class=\"flex h-12 items-center justify-between\">\n                                    <p class=\"font-bold\">\u0411\u0430\u043D\u043A\u043E\u0432\u0441\u043A\u0438\u0435 \u0440\u0435\u043A\u0432\u0438\u0437\u0438\u0442\u044B \u2116{{ index + 1 }}:</p>\n                                    @if (count - 1) {\n                                        <button\n                                            tuiIconButton\n                                            appearance=\"secondary\"\n                                            (click)=\"removeBankAccountGroup(index)\"\n                                        >\n                                            <tui-icon icon=\"@tui.trash-2\" />\n                                        </button>\n                                    }\n                                </div>\n                                @if (opfControl.value; as selectOpf) {\n                                    <sc-new-contragent-bank-account-form\n                                        [opf]=\"selectOpf\"\n                                        [form]=\"bankAccount\"\n                                    />\n                                }\n                                @if (!last) {\n                                    <hr class=\"h-px w-full bg-tui-base-04\" />\n                                }\n                            </div>\n                        }\n                        <button\n                            tuiButton\n                            iconStart=\"@tui.plus\"\n                            appearance=\"secondary\"\n                            (click)=\"addBankAccountGroup()\"\n                            type=\"button\"\n                            class=\"self-center\"\n                        >\n                            \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0431\u0430\u043D\u043A\u043E\u0432\u0441\u043A\u0438\u0435 \u0440\u0435\u043A\u0432\u0438\u0437\u0438\u0442\u044B\n                        </button>\n                    </div>\n                }\n            </div>\n        }\n        <div class=\"flex justify-center gap-2\">\n            @if (stepIndex > 0) {\n                <button\n                    tuiButton\n                    appearance=\"secondary\"\n                    type=\"button\"\n                    (click)=\"navigate(-1)\"\n                >\n                    \u041D\u0430\u0437\u0430\u0434\n                </button>\n            }\n            @if (isIndividual || (stepIndex === 2 && !form.controls.contragent.controls['bankAccounts']) || stepIndex === 3) {\n                <button\n                    tuiButton\n                    [disabled]=\"form.invalid\"\n                    [loading]=\"!!(loading$ | async)\"\n                    class=\"self-center\"\n                >\n                    \u0417\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u0442\u044C\u0441\u044F\n                </button>\n            } @else {\n                <button\n                    tuiButton\n                    type=\"button\"\n                    [disabled]=\"!canNextStep(stepIndex)\"\n                    (click)=\"navigate(1)\"\n                >\n                    \u0414\u0430\u043B\u0435\u0435\n                </button>\n            }\n        </div>\n    </form>\n}\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: i2.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler"] }, { kind: "directive", type: i3.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "directive", type: i2.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "invalid", "focused", "state"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "component", type: i2.TuiErrorComponent, selector: "tui-error", inputs: ["error"] }, { kind: "directive", type: i2.TuiErrorDirective, selector: "tui-error[ngModel], tui-error[formControlName], tui-error[formControl], tui-error[formGroup], tui-error[formGroupName], tui-error[formArrayName], tui-error[formArray]", inputs: ["order"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiButtonLoading, selector: "[tuiButton][loading],[tuiIconButton][loading]", inputs: ["size", "loading"] }, { kind: "component", type: TuiCheckbox, selector: "input[type=\"checkbox\"][tuiCheckbox]" }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }, { kind: "component", type: i2.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i2.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i2.TuiOptionWithValue, selector: "button[tuiOption][value], a[tuiOption][value], label[tuiOption][value]", inputs: ["disabled", "value"] }, { kind: "component", type: i1$1.TuiStepperComponent, selector: "tui-stepper", inputs: ["orientation", "activeItemIndex"], outputs: ["activeItemIndexChange"] }, { kind: "component", type: i1$1.TuiStep, selector: "button[tuiStep], a[tuiStep]:not([routerLink]), a[tuiStep][routerLink][routerLinkActive]", inputs: ["stepState", "icon"] }, { kind: "component", type: ScAddressesSelectionFieldComponent, selector: "sc-addresses-selection-field", inputs: ["canSelectCountry"], outputs: ["canSelectCountryChange"] }, { kind: "component", type: ScSuggestionFieldComponent, selector: "sc-suggestion-field", inputs: ["type"], outputs: ["selectedClick"] }, { kind: "component", type: ScVerificationPhoneCheckFormComponent, selector: "sc-verification-phone-check-form", inputs: ["showCodeFields", "readOnly", "pseudoInvalid", "required", "subtitle", "shouldBeBusy", "shouldBeConfirmed", "haveCode"], outputs: ["haveCodeChange", "isBusyChange", "isConfirmedChange"] }, { kind: "component", type: ScNewContragentFormComponent, selector: "sc-new-contragent-form", inputs: ["opfControl"] }, { kind: "component", type: ScNewContragentBankAccountsFormComponent, selector: "sc-new-contragent-bank-account-form", inputs: ["form", "opf"] }, { kind: "component", type: ScNewContactFormComponent, selector: "sc-new-contact-form", inputs: ["form"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ScSignUpFormComponent, decorators: [{
             type: Component,
@@ -2977,7 +2979,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         ScNewContragentFormComponent,
                         ScNewContragentBankAccountsFormComponent,
                         ScNewContactFormComponent,
-                    ], template: "@if (opfControl.value; as selectOpf) {\n    <form\n        [formGroup]=\"form\"\n        (ngSubmit)=\"onSubmit.next()\"\n        class=\"flex flex-col gap-5\"\n    >\n        @let isIndividual = opfListEnum[selectOpf] === opfListEnum.individual;\n        @if (!isIndividual && form.controls.contragent) {\n            <tui-stepper [(activeItemIndex)]=\"stepIndex\">\n                @for (_ of steps; track $index) {\n                    <button\n                        [stepState]=\"$index && !canNextStep($index) ? 'error' : 'pass'\"\n                        [attr.disabled]=\"$index && !canNextStep($index - 1) ? '' : null\"\n                        type=\"button\"\n                        tuiStep\n                    >\n                        {{ steps[$index] }}\n                    </button>\n                }\n            </tui-stepper>\n        }\n        <div\n            [class.!hidden]=\"stepIndex !== 0\"\n            class=\"flex flex-col gap-3\"\n        >\n            <label tuiLabel>\n                \u0422\u0438\u043F \u043A\u043B\u0438\u0435\u043D\u0442\u0430\n                <tui-textfield\n                    tuiChevron\n                    [content]=\"opfContent\"\n                >\n                    <input\n                        tuiSelect\n                        [formControl]=\"opfControl\"\n                        placeholder=\"\u0422\u0438\u043F \u043A\u043B\u0438\u0435\u043D\u0442\u0430\"\n                    />\n                    <tui-data-list *tuiDropdown>\n                        @for (item of getOpf$() | async; track item; let index = $index) {\n                            <button\n                                tuiOption\n                                [value]=\"item.slug\"\n                            >\n                                {{ item.name }}\n                            </button>\n                        }\n                    </tui-data-list>\n                </tui-textfield>\n            </label>\n            <ng-template\n                #opfContent\n                let-data\n            >\n                <div>{{ (getOpfBySlug$(data) | async)?.name }}</div>\n            </ng-template>\n\n            @let nameLabel = opfListEnum[selectOpf] === opfListEnum.individual ? '\u0424.\u0418.\u041E.' : '\u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438';\n            <label tuiLabel>\n                {{ nameLabel }}\n                <tui-textfield>\n                    <input\n                        tuiInput\n                        formControlName=\"name\"\n                        [placeholder]=\"nameLabel\"\n                    />\n                    @if (opfListEnum[selectOpf] === opfListEnum.individual) {\n                        <sc-suggestion-field\n                            *tuiDropdown\n                            [type]=\"suggestionType.fio\"\n                        />\n                    } @else if (opfListEnum[selectOpf] !== opfListEnum.non_resident_legal) {\n                        <sc-suggestion-field\n                            *tuiDropdown\n                            [type]=\"suggestionType.organization\"\n                            (selectedClick)=\"onSelectedOrganization($event)\"\n                        />\n                    }\n                </tui-textfield>\n                <tui-error formControlName=\"name\" />\n            </label>\n\n            <div class=\"grid items-start gap-5 sm:grid-cols-2\">\n                <sc-verification-phone-check-form [shouldBeBusy]=\"false\" />\n                <div>\n                    <label tuiLabel>\n                        \u0410\u0434\u0440\u0435\u0441 \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u044B\n                        <tui-textfield>\n                            <input\n                                tuiInput\n                                formControlName=\"email\"\n                                placeholder=\"\u0410\u0434\u0440\u0435\u0441 \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u044B\"\n                            />\n                            <sc-suggestion-field\n                                *tuiDropdown\n                                [type]=\"suggestionType.email\"\n                            />\n                        </tui-textfield>\n                        <tui-error formControlName=\"email\" />\n                    </label>\n                </div>\n            </div>\n            <sc-addresses-selection-field [canSelectCountry]=\"opfListEnum[selectOpf] === opfListEnum.non_resident_legal\" />\n            <div class=\"grid items-start gap-5 sm:grid-cols-2\">\n                <div>\n                    <label tuiLabel>\n                        \u041F\u0430\u0440\u043E\u043B\u044C\n                        <tui-textfield>\n                            <input\n                                tuiInput\n                                type=\"password\"\n                                formControlName=\"password\"\n                                autocomplete=\"new-password\"\n                                placeholder=\"\u041F\u0430\u0440\u043E\u043B\u044C\"\n                            />\n                            <tui-icon tuiPassword />\n                        </tui-textfield>\n                        <tui-error formControlName=\"password\" />\n                    </label>\n                </div>\n                <div>\n                    <label tuiLabel>\n                        \u041F\u043E\u0432\u0442\u043E\u0440 \u043F\u0430\u0440\u043E\u043B\u044F\n                        <tui-textfield>\n                            <input\n                                tuiInput\n                                type=\"password\"\n                                formControlName=\"passwordConfirm\"\n                                autocomplete=\"new-password\"\n                                placeholder=\"\u041F\u043E\u0432\u0442\u043E\u0440 \u043F\u0430\u0440\u043E\u043B\u044F\"\n                            />\n                            <tui-icon tuiPassword />\n                        </tui-textfield>\n                        <tui-error formControlName=\"passwordConfirm\" />\n                    </label>\n                </div>\n            </div>\n            <tui-error class=\"self-center\" />\n            <div class=\"grid items-start gap-5 sm:grid-cols-2\">\n                <label tuiLabel>\n                    <input\n                        tuiCheckbox\n                        type=\"checkbox\"\n                        formControlName=\"getNews\"\n                    />\n                    \u042F \u0445\u043E\u0447\u0443 \u043F\u043E\u043B\u0443\u0447\u0430\u0442\u044C \u0440\u0430\u0441\u0441\u044B\u043B\u043A\u0443 \u0421\u043D\u0430\u0431\u0446\u0435\u043D\u0442\u0440 \u043E \u0441\u043A\u0438\u0434\u043A\u0430\u0445 \u0438 \u043D\u043E\u0432\u043E\u0441\u0442\u044F\u0445 \u043F\u043E \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u0435.\n                </label>\n                <label tuiLabel>\n                    <input\n                        tuiCheckbox\n                        type=\"checkbox\"\n                        required=\"true\"\n                        formControlName=\"acceptRules\"\n                    />\n                    <div>\n                        <span>\n                            \u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u044F\u0441\u044C \u043D\u0430 \u0441\u0430\u0439\u0442\u0435, \u044F \u0441\u043E\u0433\u043B\u0430\u0448\u0430\u044E\u0441\u044C \u0441\n                            <a\n                                tuiLink\n                                [style.text-decoration-line]=\"'underline'\"\n                                (click)=\"$event.preventDefault(); onClickOffer()\"\n                            >\n                                \u0414\u043E\u0433\u043E\u0432\u043E\u0440\u043E\u043C \u043E\u0444\u0435\u0440\u0442\u044B\n                            </a>\n                            .\n                        </span>\n                        <span class=\"text-tui-negative\">*</span>\n                        <tui-error formControlName=\"acceptRules\" />\n                    </div>\n                </label>\n            </div>\n        </div>\n        @if (!isIndividual) {\n            <sc-new-contragent-form\n                [opfControl]=\"opfControl\"\n                [class.!hidden]=\"stepIndex !== 1\"\n            />\n            <div [class.!hidden]=\"stepIndex !== 2\">\n                @if (contacts) {\n                    <div class=\"flex flex-col gap-5 pb-1\">\n                        <p class=\"text-lg font-bold\">\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u044B</p>\n                        @for (contact of contacts.controls; track contact; let index = $index; let count = $count; let last = $last) {\n                            <div class=\"flex flex-col gap-3\">\n                                <div class=\"flex h-10 items-center justify-between\">\n                                    <p class=\"font-bold\">\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u043D\u043E\u0435 \u043B\u0438\u0446\u043E \u2116{{ index + 1 }}:</p>\n                                    @if (count - 1) {\n                                        <button\n                                            tuiIconButton\n                                            appearance=\"secondary\"\n                                            (click)=\"removeContactGroup(index)\"\n                                            iconStart=\"@tui.trash-2\"\n                                        ></button>\n                                    }\n                                </div>\n                                <sc-new-contact-form [form]=\"contact\" />\n                                @if (!last) {\n                                    <hr class=\"h-px w-full bg-tui-base-04\" />\n                                }\n                            </div>\n                        }\n                        <button\n                            tuiButton\n                            iconStart=\"@tui.plus\"\n                            appearance=\"secondary\"\n                            (click)=\"addContactGroup()\"\n                            type=\"button\"\n                            class=\"self-center\"\n                        >\n                            \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043A\u043E\u043D\u0442\u0430\u043A\u0442\n                        </button>\n                    </div>\n                }\n            </div>\n            <div [class.!hidden]=\"stepIndex !== 3\">\n                @if (bankAccounts) {\n                    <div class=\"flex flex-col gap-5 pb-1\">\n                        <p class=\"text-lg font-bold\">\u0411\u0430\u043D\u043A\u043E\u0432\u0441\u043A\u0438\u0435 \u0440\u0435\u043A\u0432\u0438\u0437\u0438\u0442\u044B</p>\n                        @for (bankAccount of bankAccounts.controls; track bankAccount; let index = $index; let count = $count; let last = $last) {\n                            <div class=\"flex flex-col gap-3\">\n                                <div class=\"flex h-12 items-center justify-between\">\n                                    <p class=\"font-bold\">\u0411\u0430\u043D\u043A\u043E\u0432\u0441\u043A\u0438\u0435 \u0440\u0435\u043A\u0432\u0438\u0437\u0438\u0442\u044B \u2116{{ index + 1 }}:</p>\n                                    @if (count - 1) {\n                                        <button\n                                            tuiIconButton\n                                            appearance=\"secondary\"\n                                            (click)=\"removeBankAccountGroup(index)\"\n                                            iconStart=\"@tui.trash-2\"\n                                        ></button>\n                                    }\n                                </div>\n                                @if (opfControl.value; as selectOpf) {\n                                    <sc-new-contragent-bank-account-form\n                                        [opf]=\"selectOpf\"\n                                        [form]=\"bankAccount\"\n                                    />\n                                }\n                                @if (!last) {\n                                    <hr class=\"h-px w-full bg-tui-base-04\" />\n                                }\n                            </div>\n                        }\n                        <button\n                            tuiButton\n                            iconStart=\"@tui.plus\"\n                            appearance=\"secondary\"\n                            (click)=\"addBankAccountGroup()\"\n                            type=\"button\"\n                            class=\"self-center\"\n                        >\n                            \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0431\u0430\u043D\u043A\u043E\u0432\u0441\u043A\u0438\u0435 \u0440\u0435\u043A\u0432\u0438\u0437\u0438\u0442\u044B\n                        </button>\n                    </div>\n                }\n            </div>\n        }\n        <div class=\"flex justify-center gap-2\">\n            @if (stepIndex > 0) {\n                <button\n                    tuiButton\n                    appearance=\"secondary\"\n                    type=\"button\"\n                    (click)=\"navigate(-1)\"\n                >\n                    \u041D\u0430\u0437\u0430\u0434\n                </button>\n            }\n            @if (isIndividual || (stepIndex === 2 && !form.controls.contragent.controls['bankAccounts']) || stepIndex === 3) {\n                <button\n                    tuiButton\n                    [disabled]=\"form.invalid\"\n                    [loading]=\"!!(loading$ | async)\"\n                    class=\"self-center\"\n                >\n                    \u0417\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u0442\u044C\u0441\u044F\n                </button>\n            } @else {\n                <button\n                    tuiButton\n                    type=\"button\"\n                    [disabled]=\"!canNextStep(stepIndex)\"\n                    (click)=\"navigate(1)\"\n                >\n                    \u0414\u0430\u043B\u0435\u0435\n                </button>\n            }\n        </div>\n    </form>\n}\n" }]
+                    ], template: "@if (opfControl.value; as selectOpf) {\n    <form\n        [formGroup]=\"form\"\n        (ngSubmit)=\"onSubmit.next()\"\n        class=\"flex flex-col gap-5\"\n    >\n        @let isIndividual = opfListEnum[selectOpf] === opfListEnum.individual;\n        @if (!isIndividual && form.controls.contragent) {\n            <tui-stepper [(activeItemIndex)]=\"stepIndex\">\n                @for (_ of steps; track $index) {\n                    <button\n                        [stepState]=\"$index && !canNextStep($index) ? 'error' : 'pass'\"\n                        [attr.disabled]=\"$index && !canNextStep($index - 1) ? '' : null\"\n                        type=\"button\"\n                        tuiStep\n                    >\n                        {{ steps[$index] }}\n                    </button>\n                }\n            </tui-stepper>\n        }\n        <div\n            [class.!hidden]=\"stepIndex !== 0\"\n            class=\"flex flex-col gap-3\"\n        >\n            <label tuiLabel>\n                \u0422\u0438\u043F \u043A\u043B\u0438\u0435\u043D\u0442\u0430\n                <tui-textfield\n                    tuiChevron\n                    [content]=\"opfContent\"\n                >\n                    <input\n                        tuiSelect\n                        [formControl]=\"opfControl\"\n                        placeholder=\"\u0422\u0438\u043F \u043A\u043B\u0438\u0435\u043D\u0442\u0430\"\n                    />\n                    <tui-data-list *tuiDropdown>\n                        @for (item of getOpf$() | async; track item; let index = $index) {\n                            <button\n                                tuiOption\n                                [value]=\"item.slug\"\n                            >\n                                {{ item.name }}\n                            </button>\n                        }\n                    </tui-data-list>\n                </tui-textfield>\n            </label>\n            <ng-template\n                #opfContent\n                let-data\n            >\n                <div>{{ (getOpfBySlug$(data) | async)?.name }}</div>\n            </ng-template>\n\n            @let nameLabel = opfListEnum[selectOpf] === opfListEnum.individual ? '\u0424.\u0418.\u041E.' : '\u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438';\n            <label tuiLabel>\n                {{ nameLabel }}\n                <tui-textfield>\n                    <input\n                        tuiInput\n                        formControlName=\"name\"\n                        [placeholder]=\"nameLabel\"\n                    />\n                    @if (opfListEnum[selectOpf] === opfListEnum.individual) {\n                        <sc-suggestion-field\n                            *tuiDropdown\n                            [type]=\"suggestionType.fio\"\n                        />\n                    } @else if (opfListEnum[selectOpf] !== opfListEnum.non_resident_legal) {\n                        <sc-suggestion-field\n                            *tuiDropdown\n                            [type]=\"suggestionType.organization\"\n                            (selectedClick)=\"onSelectedOrganization($event)\"\n                        />\n                    }\n                </tui-textfield>\n                <tui-error formControlName=\"name\" />\n            </label>\n\n            <div class=\"grid items-start gap-5 sm:grid-cols-2\">\n                <sc-verification-phone-check-form [shouldBeBusy]=\"false\" />\n                <div>\n                    <label tuiLabel>\n                        \u0410\u0434\u0440\u0435\u0441 \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u044B\n                        <tui-textfield>\n                            <input\n                                tuiInput\n                                formControlName=\"email\"\n                                placeholder=\"\u0410\u0434\u0440\u0435\u0441 \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u044B\"\n                            />\n                            <sc-suggestion-field\n                                *tuiDropdown\n                                [type]=\"suggestionType.email\"\n                            />\n                        </tui-textfield>\n                        <tui-error formControlName=\"email\" />\n                    </label>\n                </div>\n            </div>\n            <sc-addresses-selection-field [canSelectCountry]=\"opfListEnum[selectOpf] === opfListEnum.non_resident_legal\" />\n            <div class=\"grid items-start gap-5 sm:grid-cols-2\">\n                <div>\n                    <label tuiLabel>\n                        \u041F\u0430\u0440\u043E\u043B\u044C\n                        <tui-textfield>\n                            <input\n                                tuiInput\n                                type=\"password\"\n                                formControlName=\"password\"\n                                autocomplete=\"new-password\"\n                                placeholder=\"\u041F\u0430\u0440\u043E\u043B\u044C\"\n                            />\n                            <tui-icon tuiPassword />\n                        </tui-textfield>\n                        <tui-error formControlName=\"password\" />\n                    </label>\n                </div>\n                <div>\n                    <label tuiLabel>\n                        \u041F\u043E\u0432\u0442\u043E\u0440 \u043F\u0430\u0440\u043E\u043B\u044F\n                        <tui-textfield>\n                            <input\n                                tuiInput\n                                type=\"password\"\n                                formControlName=\"passwordConfirm\"\n                                autocomplete=\"new-password\"\n                                placeholder=\"\u041F\u043E\u0432\u0442\u043E\u0440 \u043F\u0430\u0440\u043E\u043B\u044F\"\n                            />\n                            <tui-icon tuiPassword />\n                        </tui-textfield>\n                        <tui-error formControlName=\"passwordConfirm\" />\n                    </label>\n                </div>\n            </div>\n            <tui-error class=\"self-center\" />\n            <div class=\"grid items-start gap-5 sm:grid-cols-2\">\n                <label tuiLabel>\n                    <input\n                        tuiCheckbox\n                        type=\"checkbox\"\n                        formControlName=\"getNews\"\n                    />\n                    \u042F \u0445\u043E\u0447\u0443 \u043F\u043E\u043B\u0443\u0447\u0430\u0442\u044C \u0440\u0430\u0441\u0441\u044B\u043B\u043A\u0443 \u0421\u043D\u0430\u0431\u0446\u0435\u043D\u0442\u0440 \u043E \u0441\u043A\u0438\u0434\u043A\u0430\u0445 \u0438 \u043D\u043E\u0432\u043E\u0441\u0442\u044F\u0445 \u043F\u043E \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u0435.\n                </label>\n                <label tuiLabel>\n                    <input\n                        tuiCheckbox\n                        type=\"checkbox\"\n                        required=\"true\"\n                        formControlName=\"acceptRules\"\n                    />\n                    <div>\n                        <span>\n                            \u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u044F\u0441\u044C \u043D\u0430 \u0441\u0430\u0439\u0442\u0435, \u044F \u0441\u043E\u0433\u043B\u0430\u0448\u0430\u044E\u0441\u044C \u0441\n                            <a\n                                tuiLink\n                                [style.text-decoration-line]=\"'underline'\"\n                                (click)=\"$event.preventDefault(); onClickOffer()\"\n                            >\n                                \u0414\u043E\u0433\u043E\u0432\u043E\u0440\u043E\u043C \u043E\u0444\u0435\u0440\u0442\u044B\n                            </a>\n                            .\n                        </span>\n                        <span class=\"text-tui-negative\">*</span>\n                        <tui-error formControlName=\"acceptRules\" />\n                    </div>\n                </label>\n            </div>\n        </div>\n        @if (!isIndividual) {\n            <sc-new-contragent-form\n                [opfControl]=\"opfControl\"\n                [class.!hidden]=\"stepIndex !== 1\"\n            />\n            <div [class.!hidden]=\"stepIndex !== 2\">\n                @if (contacts) {\n                    <div class=\"flex flex-col gap-5 pb-1\">\n                        <p class=\"text-lg font-bold\">\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u044B</p>\n                        @for (contact of contacts.controls; track contact; let index = $index; let count = $count; let last = $last) {\n                            <div class=\"flex flex-col gap-3\">\n                                <div class=\"flex h-10 items-center justify-between\">\n                                    <p class=\"font-bold\">\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u043D\u043E\u0435 \u043B\u0438\u0446\u043E \u2116{{ index + 1 }}:</p>\n                                    @if (count - 1) {\n                                        <button\n                                            tuiIconButton\n                                            appearance=\"secondary\"\n                                            (click)=\"removeContactGroup(index)\"\n                                        >\n                                            <tui-icon icon=\"@tui.trash-2\" />\n                                        </button>\n                                    }\n                                </div>\n                                <sc-new-contact-form [form]=\"contact\" />\n                                @if (!last) {\n                                    <hr class=\"h-px w-full bg-tui-base-04\" />\n                                }\n                            </div>\n                        }\n                        <button\n                            tuiButton\n                            iconStart=\"@tui.plus\"\n                            appearance=\"secondary\"\n                            (click)=\"addContactGroup()\"\n                            type=\"button\"\n                            class=\"self-center\"\n                        >\n                            \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043A\u043E\u043D\u0442\u0430\u043A\u0442\n                        </button>\n                    </div>\n                }\n            </div>\n            <div [class.!hidden]=\"stepIndex !== 3\">\n                @if (bankAccounts) {\n                    <div class=\"flex flex-col gap-5 pb-1\">\n                        <p class=\"text-lg font-bold\">\u0411\u0430\u043D\u043A\u043E\u0432\u0441\u043A\u0438\u0435 \u0440\u0435\u043A\u0432\u0438\u0437\u0438\u0442\u044B</p>\n                        @for (bankAccount of bankAccounts.controls; track bankAccount; let index = $index; let count = $count; let last = $last) {\n                            <div class=\"flex flex-col gap-3\">\n                                <div class=\"flex h-12 items-center justify-between\">\n                                    <p class=\"font-bold\">\u0411\u0430\u043D\u043A\u043E\u0432\u0441\u043A\u0438\u0435 \u0440\u0435\u043A\u0432\u0438\u0437\u0438\u0442\u044B \u2116{{ index + 1 }}:</p>\n                                    @if (count - 1) {\n                                        <button\n                                            tuiIconButton\n                                            appearance=\"secondary\"\n                                            (click)=\"removeBankAccountGroup(index)\"\n                                        >\n                                            <tui-icon icon=\"@tui.trash-2\" />\n                                        </button>\n                                    }\n                                </div>\n                                @if (opfControl.value; as selectOpf) {\n                                    <sc-new-contragent-bank-account-form\n                                        [opf]=\"selectOpf\"\n                                        [form]=\"bankAccount\"\n                                    />\n                                }\n                                @if (!last) {\n                                    <hr class=\"h-px w-full bg-tui-base-04\" />\n                                }\n                            </div>\n                        }\n                        <button\n                            tuiButton\n                            iconStart=\"@tui.plus\"\n                            appearance=\"secondary\"\n                            (click)=\"addBankAccountGroup()\"\n                            type=\"button\"\n                            class=\"self-center\"\n                        >\n                            \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0431\u0430\u043D\u043A\u043E\u0432\u0441\u043A\u0438\u0435 \u0440\u0435\u043A\u0432\u0438\u0437\u0438\u0442\u044B\n                        </button>\n                    </div>\n                }\n            </div>\n        }\n        <div class=\"flex justify-center gap-2\">\n            @if (stepIndex > 0) {\n                <button\n                    tuiButton\n                    appearance=\"secondary\"\n                    type=\"button\"\n                    (click)=\"navigate(-1)\"\n                >\n                    \u041D\u0430\u0437\u0430\u0434\n                </button>\n            }\n            @if (isIndividual || (stepIndex === 2 && !form.controls.contragent.controls['bankAccounts']) || stepIndex === 3) {\n                <button\n                    tuiButton\n                    [disabled]=\"form.invalid\"\n                    [loading]=\"!!(loading$ | async)\"\n                    class=\"self-center\"\n                >\n                    \u0417\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u0442\u044C\u0441\u044F\n                </button>\n            } @else {\n                <button\n                    tuiButton\n                    type=\"button\"\n                    [disabled]=\"!canNextStep(stepIndex)\"\n                    (click)=\"navigate(1)\"\n                >\n                    \u0414\u0430\u043B\u0435\u0435\n                </button>\n            }\n        </div>\n    </form>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { successAuth: [{ type: i0.Output, args: ["successAuth"] }], clickOfferEvent: [{ type: i0.Output, args: ["clickOfferEvent"] }] } });
 
 /**
@@ -3041,16 +3043,16 @@ class ScAccordionComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ScAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ScAccordionComponent, isStandalone: true, selector: "sc-accordion", inputs: { showAddButton: { classPropertyName: "showAddButton", publicName: "showAddButton", isSignal: false, isRequired: false, transformFunction: null }, showDeleteButton: { classPropertyName: "showDeleteButton", publicName: "showDeleteButton", isSignal: false, isRequired: false, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "showArrow", isSignal: false, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, disabledButtons: { classPropertyName: "disabledButtons", publicName: "disabledButtons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addButtonClick: "addButtonClick", deleteButtonClick: "deleteButtonClick" }, host: { properties: { "class._has-add-button": "showAddButton", "class._has-delete-button": "showDeleteButton", "class._has-arrow": "showArrow", "attr.data-size": "size" } }, queries: [{ propertyName: "content", first: true, predicate: ScAccordionContentDirective, descendants: true }], viewQueries: [{ propertyName: "accordion", first: true, predicate: ["accordionBtn"], descendants: true, read: TuiAccordionDirective }], ngImport: i0, template: "<tui-accordion>\n    <button\n        [tuiAccordion]=\"open\"\n        #accordionBtn\n    >\n        <div class=\"flex grow justify-between\">\n            <div class=\"self-center font-bold\">\n                <ng-content />\n            </div>\n            @if (showAddButton || showDeleteButton) {\n                <div class=\"flex\">\n                    @if (showDeleteButton) {\n                        <button\n                            tuiIconButton\n                            size=\"m\"\n                            type=\"button\"\n                            [disabled]=\"disabledButtons()\"\n                            iconStart=\"@tui.trash-2\"\n                            appearance=\"secondary\"\n                            (click)=\"$event.stopPropagation(); deleteButtonClick.emit()\"\n                        ></button>\n                    }\n                    @if (showAddButton) {\n                        <button\n                            tuiIconButton\n                            size=\"m\"\n                            type=\"button\"\n                            [disabled]=\"disabledButtons()\"\n                            iconStart=\"@tui.plus\"\n                            appearance=\"secondary\"\n                            (click)=\"$event.stopPropagation(); addButtonClick.emit()\"\n                        ></button>\n                    }\n                </div>\n            }\n        </div>\n    </button>\n    <tui-expand>\n        @if (content) {\n            <tui-elastic-container>\n                <ng-container *polymorpheusOutlet=\"content as text\">\n                    {{ text }}\n                </ng-container>\n            </tui-elastic-container>\n        }\n    </tui-expand>\n</tui-accordion>\n", styles: ["::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header{border-radius:.75rem;flex-direction:row-reverse;min-height:var(--tui-height-m);font:var(--tui-typography-body-m);padding:0 .5rem 0 1rem;gap:.75rem}:host[data-size=s] ::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header{padding:0 .5rem 0 1rem;font:var(--tui-typography-body-s)}:host._has-arrow ::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header{padding-left:.75rem}:host._has-add-button ::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header,:host._has-delete-button ::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header{padding-right:0}::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header{background:var(--tui-background-base-alt)}::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header_hoverable:hover:not([data-mode]){background:var(--tui-background-neutral-1-hover)!important}::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header .t-icon{color:var(--tui-text-action)}:host:hover:not([data-mode]) ::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header .t-icon{color:var(--tui-text-action)}::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-title{white-space:normal}:host._has-arrow ::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-title{margin-right:0}::ng-deep sc-accordion tui-accordion-item>.t-wrapper tui-expand>.t-wrapper>.t-content{padding-inline:0!important;padding-block:1rem}:host._has-arrow ::ng-deep sc-accordion tui-accordion-item>.t-wrapper tui-expand>.t-wrapper>.t-content,:host[data-size=s]:host._has-arrow ::ng-deep sc-accordion tui-accordion-item>.t-wrapper tui-expand>.t-wrapper>.t-content{padding-left:1rem!important}\n"], dependencies: [{ kind: "component", type: i1$1.TuiAccordionComponent, selector: "tui-accordion", inputs: ["closeOthers", "size"] }, { kind: "directive", type: i1$1.TuiAccordionDirective, selector: "button[tuiAccordion]", inputs: ["tuiAccordion"], outputs: ["tuiAccordionChange"] }, { kind: "component", type: i2$1.TuiExpand, selector: "tui-expand", inputs: ["expanded"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiElasticContainer, selector: "tui-elastic-container" }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ScAccordionComponent, isStandalone: true, selector: "sc-accordion", inputs: { showAddButton: { classPropertyName: "showAddButton", publicName: "showAddButton", isSignal: false, isRequired: false, transformFunction: null }, showDeleteButton: { classPropertyName: "showDeleteButton", publicName: "showDeleteButton", isSignal: false, isRequired: false, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "showArrow", isSignal: false, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, disabledButtons: { classPropertyName: "disabledButtons", publicName: "disabledButtons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addButtonClick: "addButtonClick", deleteButtonClick: "deleteButtonClick" }, host: { properties: { "class._has-add-button": "showAddButton", "class._has-delete-button": "showDeleteButton", "class._has-arrow": "showArrow", "attr.data-size": "size" } }, queries: [{ propertyName: "content", first: true, predicate: ScAccordionContentDirective, descendants: true }], viewQueries: [{ propertyName: "accordion", first: true, predicate: ["accordionBtn"], descendants: true, read: TuiAccordionDirective }], ngImport: i0, template: "<tui-accordion>\n    <button\n        [tuiAccordion]=\"open\"\n        #accordionBtn\n    >\n        <div class=\"flex grow justify-between\">\n            <div class=\"self-center font-bold\">\n                <ng-content />\n            </div>\n            @if (showAddButton || showDeleteButton) {\n                <div class=\"flex\">\n                    @if (showDeleteButton) {\n                        <button\n                            tuiIconButton\n                            size=\"m\"\n                            type=\"button\"\n                            [disabled]=\"disabledButtons()\"\n                            appearance=\"secondary\"\n                            (click)=\"$event.stopPropagation(); deleteButtonClick.emit()\"\n                        >\n                            <tui-icon icon=\"@tui.trash-2\" />\n                        </button>\n                    }\n                    @if (showAddButton) {\n                        <button\n                            tuiIconButton\n                            size=\"m\"\n                            type=\"button\"\n                            [disabled]=\"disabledButtons()\"\n                            appearance=\"secondary\"\n                            (click)=\"$event.stopPropagation(); addButtonClick.emit()\"\n                        >\n                            <tui-icon icon=\"@tui.plus\" />\n                        </button>\n                    }\n                </div>\n            }\n        </div>\n    </button>\n    <tui-expand>\n        @if (content) {\n            <tui-elastic-container>\n                <ng-container *polymorpheusOutlet=\"content as text\">\n                    {{ text }}\n                </ng-container>\n            </tui-elastic-container>\n        }\n    </tui-expand>\n</tui-accordion>\n", styles: ["::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header{border-radius:.75rem;flex-direction:row-reverse;min-height:var(--tui-height-m);font:var(--tui-typography-body-m);padding:0 .5rem 0 1rem;gap:.75rem}:host[data-size=s] ::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header{padding:0 .5rem 0 1rem;font:var(--tui-typography-body-s)}:host._has-arrow ::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header{padding-left:.75rem}:host._has-add-button ::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header,:host._has-delete-button ::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header{padding-right:0}::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header{background:var(--tui-background-base-alt)}::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header_hoverable:hover:not([data-mode]){background:var(--tui-background-neutral-1-hover)!important}::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header .t-icon{color:var(--tui-text-action)}:host:hover:not([data-mode]) ::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header .t-icon{color:var(--tui-text-action)}::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-title{white-space:normal}:host._has-arrow ::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-title{margin-right:0}::ng-deep sc-accordion tui-accordion-item>.t-wrapper tui-expand>.t-wrapper>.t-content{padding-inline:0!important;padding-block:1rem}:host._has-arrow ::ng-deep sc-accordion tui-accordion-item>.t-wrapper tui-expand>.t-wrapper>.t-content,:host[data-size=s]:host._has-arrow ::ng-deep sc-accordion tui-accordion-item>.t-wrapper tui-expand>.t-wrapper>.t-content{padding-left:1rem!important}\n"], dependencies: [{ kind: "component", type: i1$1.TuiAccordionComponent, selector: "tui-accordion", inputs: ["closeOthers", "size"] }, { kind: "directive", type: i1$1.TuiAccordionDirective, selector: "button[tuiAccordion]", inputs: ["tuiAccordion"], outputs: ["tuiAccordionChange"] }, { kind: "component", type: i2$1.TuiExpand, selector: "tui-expand", inputs: ["expanded"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "component", type: TuiElasticContainer, selector: "tui-elastic-container" }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ScAccordionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-accordion', imports: [TuiGroup, TuiAccordion, TuiTransitioned, TuiAppearance$1, TuiWithAppearance$1, TuiIcons$1, TuiWithIcons$1, TuiButton, TuiElasticContainer, PolymorpheusOutlet], host: {
+            args: [{ selector: 'sc-accordion', imports: [TuiGroup, TuiAccordion, TuiTransitioned, TuiAppearance$1, TuiWithAppearance$1, TuiIcons$1, TuiWithIcons$1, TuiButton, TuiIcon, TuiElasticContainer, PolymorpheusOutlet], host: {
                         '[class._has-add-button]': 'showAddButton',
                         '[class._has-delete-button]': 'showDeleteButton',
                         '[class._has-arrow]': 'showArrow',
                         '[attr.data-size]': 'size',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<tui-accordion>\n    <button\n        [tuiAccordion]=\"open\"\n        #accordionBtn\n    >\n        <div class=\"flex grow justify-between\">\n            <div class=\"self-center font-bold\">\n                <ng-content />\n            </div>\n            @if (showAddButton || showDeleteButton) {\n                <div class=\"flex\">\n                    @if (showDeleteButton) {\n                        <button\n                            tuiIconButton\n                            size=\"m\"\n                            type=\"button\"\n                            [disabled]=\"disabledButtons()\"\n                            iconStart=\"@tui.trash-2\"\n                            appearance=\"secondary\"\n                            (click)=\"$event.stopPropagation(); deleteButtonClick.emit()\"\n                        ></button>\n                    }\n                    @if (showAddButton) {\n                        <button\n                            tuiIconButton\n                            size=\"m\"\n                            type=\"button\"\n                            [disabled]=\"disabledButtons()\"\n                            iconStart=\"@tui.plus\"\n                            appearance=\"secondary\"\n                            (click)=\"$event.stopPropagation(); addButtonClick.emit()\"\n                        ></button>\n                    }\n                </div>\n            }\n        </div>\n    </button>\n    <tui-expand>\n        @if (content) {\n            <tui-elastic-container>\n                <ng-container *polymorpheusOutlet=\"content as text\">\n                    {{ text }}\n                </ng-container>\n            </tui-elastic-container>\n        }\n    </tui-expand>\n</tui-accordion>\n", styles: ["::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header{border-radius:.75rem;flex-direction:row-reverse;min-height:var(--tui-height-m);font:var(--tui-typography-body-m);padding:0 .5rem 0 1rem;gap:.75rem}:host[data-size=s] ::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header{padding:0 .5rem 0 1rem;font:var(--tui-typography-body-s)}:host._has-arrow ::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header{padding-left:.75rem}:host._has-add-button ::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header,:host._has-delete-button ::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header{padding-right:0}::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header{background:var(--tui-background-base-alt)}::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header_hoverable:hover:not([data-mode]){background:var(--tui-background-neutral-1-hover)!important}::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header .t-icon{color:var(--tui-text-action)}:host:hover:not([data-mode]) ::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header .t-icon{color:var(--tui-text-action)}::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-title{white-space:normal}:host._has-arrow ::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-title{margin-right:0}::ng-deep sc-accordion tui-accordion-item>.t-wrapper tui-expand>.t-wrapper>.t-content{padding-inline:0!important;padding-block:1rem}:host._has-arrow ::ng-deep sc-accordion tui-accordion-item>.t-wrapper tui-expand>.t-wrapper>.t-content,:host[data-size=s]:host._has-arrow ::ng-deep sc-accordion tui-accordion-item>.t-wrapper tui-expand>.t-wrapper>.t-content{padding-left:1rem!important}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<tui-accordion>\n    <button\n        [tuiAccordion]=\"open\"\n        #accordionBtn\n    >\n        <div class=\"flex grow justify-between\">\n            <div class=\"self-center font-bold\">\n                <ng-content />\n            </div>\n            @if (showAddButton || showDeleteButton) {\n                <div class=\"flex\">\n                    @if (showDeleteButton) {\n                        <button\n                            tuiIconButton\n                            size=\"m\"\n                            type=\"button\"\n                            [disabled]=\"disabledButtons()\"\n                            appearance=\"secondary\"\n                            (click)=\"$event.stopPropagation(); deleteButtonClick.emit()\"\n                        >\n                            <tui-icon icon=\"@tui.trash-2\" />\n                        </button>\n                    }\n                    @if (showAddButton) {\n                        <button\n                            tuiIconButton\n                            size=\"m\"\n                            type=\"button\"\n                            [disabled]=\"disabledButtons()\"\n                            appearance=\"secondary\"\n                            (click)=\"$event.stopPropagation(); addButtonClick.emit()\"\n                        >\n                            <tui-icon icon=\"@tui.plus\" />\n                        </button>\n                    }\n                </div>\n            }\n        </div>\n    </button>\n    <tui-expand>\n        @if (content) {\n            <tui-elastic-container>\n                <ng-container *polymorpheusOutlet=\"content as text\">\n                    {{ text }}\n                </ng-container>\n            </tui-elastic-container>\n        }\n    </tui-expand>\n</tui-accordion>\n", styles: ["::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header{border-radius:.75rem;flex-direction:row-reverse;min-height:var(--tui-height-m);font:var(--tui-typography-body-m);padding:0 .5rem 0 1rem;gap:.75rem}:host[data-size=s] ::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header{padding:0 .5rem 0 1rem;font:var(--tui-typography-body-s)}:host._has-arrow ::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header{padding-left:.75rem}:host._has-add-button ::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header,:host._has-delete-button ::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header{padding-right:0}::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header{background:var(--tui-background-base-alt)}::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header_hoverable:hover:not([data-mode]){background:var(--tui-background-neutral-1-hover)!important}::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header .t-icon{color:var(--tui-text-action)}:host:hover:not([data-mode]) ::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-header .t-icon{color:var(--tui-text-action)}::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-title{white-space:normal}:host._has-arrow ::ng-deep sc-accordion tui-accordion-item>.t-wrapper .t-title{margin-right:0}::ng-deep sc-accordion tui-accordion-item>.t-wrapper tui-expand>.t-wrapper>.t-content{padding-inline:0!important;padding-block:1rem}:host._has-arrow ::ng-deep sc-accordion tui-accordion-item>.t-wrapper tui-expand>.t-wrapper>.t-content,:host[data-size=s]:host._has-arrow ::ng-deep sc-accordion tui-accordion-item>.t-wrapper tui-expand>.t-wrapper>.t-content{padding-left:1rem!important}\n"] }]
         }], propDecorators: { showAddButton: [{
                 type: Input
             }], showDeleteButton: [{
@@ -3162,14 +3164,14 @@ class ScBannerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ScBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ScBannerComponent, isStandalone: true, selector: "sc-banner", inputs: { navigateButton: { classPropertyName: "navigateButton", publicName: "navigateButton", isSignal: false, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: false, isRequired: false, transformFunction: null }, bannerLocation: { classPropertyName: "bannerLocation", publicName: "bannerLocation", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { loadBannersEvent: "loadBannersEvent", clickBannerEvent: "clickBannerEvent" }, host: { attributes: { "ngSkipHydration": "true" }, properties: { "class.!hidden": "totalItems() === 0", "style.aspect-ratio": "this.aspectRatio" } }, providers: [WaIntersectionObserverService], queries: [{ propertyName: "bannersListRef", predicate: ["banner"] }], viewQueries: [{ propertyName: "carouselRef", first: true, predicate: TuiCarouselComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@let effectiveDuration = totalItems() > 1 ? duration : 0;\n\n<tui-carousel\n    [duration]=\"effectiveDuration\"\n    [attr.resizable]=\"resizable\"\n    [max]=\"maxIndex()\"\n    class=\"size-full overflow-hidden rounded-xl bg-white\"\n    [(index)]=\"currentBannerId\"\n>\n    <ng-container *tuiItem=\"let slide\">\n        @let banner = slide < banners().length ? banners()[slide] : undefined;\n        @if (banner) {\n            @switch (banner.mediaType) {\n                @case ('image') {\n                    <a\n                        (click)=\"onClick(banner)\"\n                        target=\"_blank\"\n                        [title]=\"banner.title\"\n                        [style.aspect-ratio]=\"aspectRatio\"\n                        [attr.href]=\"banner.url ? banner.url : null\"\n                        class=\"size-full\"\n                    >\n                        <picture>\n                            @if (banner.mediaFileWebp) {\n                                <source\n                                    type=\"image/webp\"\n                                    [srcset]=\"banner.mediaFileWebp | scMediaImageTransformer\"\n                                />\n                            }\n                            <img\n                                [src]=\"banner.mediaFile | scMediaImageTransformer: true\"\n                                [alt]=\"banner.title\"\n                                class=\"size-full object-cover\"\n                            />\n                        </picture>\n                    </a>\n                }\n            }\n        } @else {\n            @let contentRef = bannersListRef.get(slide - banners().length);\n            @if (contentRef) {\n                <div\n                    [style.aspect-ratio]=\"aspectRatio\"\n                    class=\"size-full overflow-hidden\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"contentRef\"></ng-container>\n                </div>\n            }\n        }\n    </ng-container>\n</tui-carousel>\n\n@if (navigateButton && duration && banners() && totalItems() > 1) {\n    <div\n        tuiTheme=\"light\"\n        class=\"flex items-center\"\n    >\n        <button\n            tuiIconButton\n            iconStart=\"@tui.chevron-left\"\n            size=\"m\"\n            [style.border-radius.%]=\"100\"\n            appearance=\"flat\"\n            (click)=\"carouselRef().prev()\"\n            class=\"!absolute left-2\"\n        ></button>\n        <button\n            tuiIconButton\n            iconStart=\"@tui.chevron-right\"\n            size=\"m\"\n            [style.border-radius.%]=\"100\"\n            appearance=\"flat\"\n            (click)=\"carouselRef().next()\"\n            class=\"!absolute right-2\"\n        ></button>\n    </div>\n}\n", styles: [":host{--tui-carousel-padding: 0;display:flex;position:relative}::ng-deep tui-carousel[resizable=true] .t-scroller,::ng-deep tui-carousel[resizable=true] .t-items{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.TuiCarouselComponent, selector: "tui-carousel", inputs: ["index", "min", "max"], outputs: ["indexChange"] }, { kind: "directive", type: i2.TuiCarouselDirective, selector: "tui-carousel[duration]", inputs: ["duration"], exportAs: ["tuiCarousel"] }, { kind: "directive", type: i2$2.TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "pipe", type: ScMediaImageTransformerPipe, name: "scMediaImageTransformer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ScBannerComponent, isStandalone: true, selector: "sc-banner", inputs: { navigateButton: { classPropertyName: "navigateButton", publicName: "navigateButton", isSignal: false, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: false, isRequired: false, transformFunction: null }, bannerLocation: { classPropertyName: "bannerLocation", publicName: "bannerLocation", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { loadBannersEvent: "loadBannersEvent", clickBannerEvent: "clickBannerEvent" }, host: { attributes: { "ngSkipHydration": "true" }, properties: { "class.!hidden": "totalItems() === 0", "style.aspect-ratio": "this.aspectRatio" } }, providers: [WaIntersectionObserverService], queries: [{ propertyName: "bannersListRef", predicate: ["banner"] }], viewQueries: [{ propertyName: "carouselRef", first: true, predicate: TuiCarouselComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@let effectiveDuration = totalItems() > 1 ? duration : 0;\n\n<tui-carousel\n    [duration]=\"effectiveDuration\"\n    [attr.resizable]=\"resizable\"\n    [max]=\"maxIndex()\"\n    class=\"size-full overflow-hidden rounded-xl bg-white\"\n    [(index)]=\"currentBannerId\"\n>\n    <ng-container *tuiItem=\"let slide\">\n        @let banner = slide < banners().length ? banners()[slide] : undefined;\n        @if (banner) {\n            @switch (banner.mediaType) {\n                @case ('image') {\n                    <a\n                        (click)=\"onClick(banner)\"\n                        target=\"_blank\"\n                        [title]=\"banner.title\"\n                        [style.aspect-ratio]=\"aspectRatio\"\n                        [attr.href]=\"banner.url ? banner.url : null\"\n                        class=\"size-full\"\n                    >\n                        <picture>\n                            @if (banner.mediaFileWebp) {\n                                <source\n                                    type=\"image/webp\"\n                                    [srcset]=\"banner.mediaFileWebp | scMediaImageTransformer\"\n                                />\n                            }\n                            <img\n                                [src]=\"banner.mediaFile | scMediaImageTransformer: true\"\n                                [alt]=\"banner.title\"\n                                class=\"size-full object-cover\"\n                            />\n                        </picture>\n                    </a>\n                }\n            }\n        } @else {\n            @let contentRef = bannersListRef.get(slide - banners().length);\n            @if (contentRef) {\n                <div\n                    [style.aspect-ratio]=\"aspectRatio\"\n                    class=\"size-full overflow-hidden\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"contentRef\"></ng-container>\n                </div>\n            }\n        }\n    </ng-container>\n</tui-carousel>\n\n@if (navigateButton && duration && banners() && totalItems() > 1) {\n    <div\n        tuiTheme=\"light\"\n        class=\"flex items-center\"\n    >\n        <button\n            tuiIconButton\n            size=\"m\"\n            [style.border-radius.%]=\"100\"\n            appearance=\"flat\"\n            (click)=\"carouselRef().prev()\"\n            class=\"!absolute left-2\"\n        >\n            <tui-icon icon=\"@tui.chevron-left\" />\n        </button>\n        <button\n            tuiIconButton\n            size=\"m\"\n            [style.border-radius.%]=\"100\"\n            appearance=\"flat\"\n            (click)=\"carouselRef().next()\"\n            class=\"!absolute right-2\"\n        >\n            <tui-icon icon=\"@tui.chevron-right\" />\n        </button>\n    </div>\n}\n", styles: [":host{--tui-carousel-padding: 0;display:flex;position:relative}::ng-deep tui-carousel[resizable=true] .t-scroller,::ng-deep tui-carousel[resizable=true] .t-items{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.TuiCarouselComponent, selector: "tui-carousel", inputs: ["index", "min", "max"], outputs: ["indexChange"] }, { kind: "directive", type: i2.TuiCarouselDirective, selector: "tui-carousel[duration]", inputs: ["duration"], exportAs: ["tuiCarousel"] }, { kind: "directive", type: i2$2.TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "pipe", type: ScMediaImageTransformerPipe, name: "scMediaImageTransformer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ScBannerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sc-banner', providers: [WaIntersectionObserverService], host: {
                         ngSkipHydration: 'true',
                         '[class.!hidden]': 'totalItems() === 0',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, TuiCarousel, TuiButton, TuiIcon, ScMediaImageTransformerPipe], template: "@let effectiveDuration = totalItems() > 1 ? duration : 0;\n\n<tui-carousel\n    [duration]=\"effectiveDuration\"\n    [attr.resizable]=\"resizable\"\n    [max]=\"maxIndex()\"\n    class=\"size-full overflow-hidden rounded-xl bg-white\"\n    [(index)]=\"currentBannerId\"\n>\n    <ng-container *tuiItem=\"let slide\">\n        @let banner = slide < banners().length ? banners()[slide] : undefined;\n        @if (banner) {\n            @switch (banner.mediaType) {\n                @case ('image') {\n                    <a\n                        (click)=\"onClick(banner)\"\n                        target=\"_blank\"\n                        [title]=\"banner.title\"\n                        [style.aspect-ratio]=\"aspectRatio\"\n                        [attr.href]=\"banner.url ? banner.url : null\"\n                        class=\"size-full\"\n                    >\n                        <picture>\n                            @if (banner.mediaFileWebp) {\n                                <source\n                                    type=\"image/webp\"\n                                    [srcset]=\"banner.mediaFileWebp | scMediaImageTransformer\"\n                                />\n                            }\n                            <img\n                                [src]=\"banner.mediaFile | scMediaImageTransformer: true\"\n                                [alt]=\"banner.title\"\n                                class=\"size-full object-cover\"\n                            />\n                        </picture>\n                    </a>\n                }\n            }\n        } @else {\n            @let contentRef = bannersListRef.get(slide - banners().length);\n            @if (contentRef) {\n                <div\n                    [style.aspect-ratio]=\"aspectRatio\"\n                    class=\"size-full overflow-hidden\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"contentRef\"></ng-container>\n                </div>\n            }\n        }\n    </ng-container>\n</tui-carousel>\n\n@if (navigateButton && duration && banners() && totalItems() > 1) {\n    <div\n        tuiTheme=\"light\"\n        class=\"flex items-center\"\n    >\n        <button\n            tuiIconButton\n            iconStart=\"@tui.chevron-left\"\n            size=\"m\"\n            [style.border-radius.%]=\"100\"\n            appearance=\"flat\"\n            (click)=\"carouselRef().prev()\"\n            class=\"!absolute left-2\"\n        ></button>\n        <button\n            tuiIconButton\n            iconStart=\"@tui.chevron-right\"\n            size=\"m\"\n            [style.border-radius.%]=\"100\"\n            appearance=\"flat\"\n            (click)=\"carouselRef().next()\"\n            class=\"!absolute right-2\"\n        ></button>\n    </div>\n}\n", styles: [":host{--tui-carousel-padding: 0;display:flex;position:relative}::ng-deep tui-carousel[resizable=true] .t-scroller,::ng-deep tui-carousel[resizable=true] .t-items{width:100%;height:100%}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, TuiCarousel, TuiButton, TuiIcon, ScMediaImageTransformerPipe], template: "@let effectiveDuration = totalItems() > 1 ? duration : 0;\n\n<tui-carousel\n    [duration]=\"effectiveDuration\"\n    [attr.resizable]=\"resizable\"\n    [max]=\"maxIndex()\"\n    class=\"size-full overflow-hidden rounded-xl bg-white\"\n    [(index)]=\"currentBannerId\"\n>\n    <ng-container *tuiItem=\"let slide\">\n        @let banner = slide < banners().length ? banners()[slide] : undefined;\n        @if (banner) {\n            @switch (banner.mediaType) {\n                @case ('image') {\n                    <a\n                        (click)=\"onClick(banner)\"\n                        target=\"_blank\"\n                        [title]=\"banner.title\"\n                        [style.aspect-ratio]=\"aspectRatio\"\n                        [attr.href]=\"banner.url ? banner.url : null\"\n                        class=\"size-full\"\n                    >\n                        <picture>\n                            @if (banner.mediaFileWebp) {\n                                <source\n                                    type=\"image/webp\"\n                                    [srcset]=\"banner.mediaFileWebp | scMediaImageTransformer\"\n                                />\n                            }\n                            <img\n                                [src]=\"banner.mediaFile | scMediaImageTransformer: true\"\n                                [alt]=\"banner.title\"\n                                class=\"size-full object-cover\"\n                            />\n                        </picture>\n                    </a>\n                }\n            }\n        } @else {\n            @let contentRef = bannersListRef.get(slide - banners().length);\n            @if (contentRef) {\n                <div\n                    [style.aspect-ratio]=\"aspectRatio\"\n                    class=\"size-full overflow-hidden\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"contentRef\"></ng-container>\n                </div>\n            }\n        }\n    </ng-container>\n</tui-carousel>\n\n@if (navigateButton && duration && banners() && totalItems() > 1) {\n    <div\n        tuiTheme=\"light\"\n        class=\"flex items-center\"\n    >\n        <button\n            tuiIconButton\n            size=\"m\"\n            [style.border-radius.%]=\"100\"\n            appearance=\"flat\"\n            (click)=\"carouselRef().prev()\"\n            class=\"!absolute left-2\"\n        >\n            <tui-icon icon=\"@tui.chevron-left\" />\n        </button>\n        <button\n            tuiIconButton\n            size=\"m\"\n            [style.border-radius.%]=\"100\"\n            appearance=\"flat\"\n            (click)=\"carouselRef().next()\"\n            class=\"!absolute right-2\"\n        >\n            <tui-icon icon=\"@tui.chevron-right\" />\n        </button>\n    </div>\n}\n", styles: [":host{--tui-carousel-padding: 0;display:flex;position:relative}::ng-deep tui-carousel[resizable=true] .t-scroller,::ng-deep tui-carousel[resizable=true] .t-items{width:100%;height:100%}\n"] }]
         }], propDecorators: { carouselRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TuiCarouselComponent), { isSignal: true }] }], navigateButton: [{
                 type: Input
             }], duration: [{
@@ -3900,14 +3902,14 @@ class ScHoverImageCarouselComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ScHoverImageCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ScHoverImageCarouselComponent, isStandalone: true, selector: "sc-hover-image-carousel", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: true, transformFunction: null }, isShowActions: { classPropertyName: "isShowActions", publicName: "isShowActions", isSignal: true, isRequired: false, transformFunction: null }, productName: { classPropertyName: "productName", publicName: "productName", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mousemove.silent": "onHover($any($event).offsetX, $any($event).target)", "mouseleave.silent": "onLeave()" } }, ngImport: i0, template: "<div\n    class=\"overflow-hidden rounded-xl\"\n    [class.mb-2]=\"images().length <= 1 && isShowActions()\"\n    [style.aspect-ratio]=\"'20/19'\"\n>\n    @let image = currentImage();\n    <picture>\n        @if (image.imageWebp) {\n            <source\n                type=\"image/webp\"\n                [srcset]=\"image.imageWebp\"\n            />\n        }\n\n        @if (image.image) {\n            <img\n                [src]=\"image.image\"\n                [alt]=\"image.alt\"\n                class=\"size-full rounded-xl object-contain\"\n            />\n        }\n    </picture>\n</div>\n@if (images().length > 1 && isShowActions()) {\n    <div\n        (mousemove.silent)=\"$event.stopPropagation()\"\n        class=\"flex justify-center\"\n    >\n        @for (indexItem of images(); track $index) {\n            <button\n                tuiButton\n                type=\"button\"\n                class=\"button button_small\"\n                [appearance]=\"$index === currentIndex() ? 'primary' : 'secondary'\"\n                (tuiHoveredChange)=\"onDotHovered($event, $index)\"\n            ></button>\n        }\n    </div>\n}\n", styles: [".button{flex-shrink:0}.button:first-child{margin-inline-start:0}.button:last-child{margin-inline-end:0}.button_small{inline-size:.5rem;block-size:.5rem;font-size:0;padding:0;margin:0}.button_small:not(:first-child){margin-left:.5rem}\n"], dependencies: [{ kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiHovered, selector: "[tuiHoveredChange]", outputs: ["tuiHoveredChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ScHoverImageCarouselComponent, isStandalone: true, selector: "sc-hover-image-carousel", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: true, transformFunction: null }, isShowActions: { classPropertyName: "isShowActions", publicName: "isShowActions", isSignal: true, isRequired: false, transformFunction: null }, productName: { classPropertyName: "productName", publicName: "productName", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mousemove.silent": "onHover($any($event).offsetX, $any($event).target)", "mouseleave.silent": "onLeave()" } }, ngImport: i0, template: "<div\n    class=\"overflow-hidden rounded-xl\"\n    [class.mb-2]=\"images().length <= 1 && isShowActions()\"\n    [style.aspect-ratio]=\"'20/19'\"\n>\n    @let image = currentImage();\n    <picture>\n        @if (image.imageWebp) {\n            <source\n                type=\"image/webp\"\n                [srcset]=\"image.imageWebp\"\n            />\n        }\n\n        @if (image.image) {\n            <img\n                [src]=\"image.image\"\n                [alt]=\"image.alt\"\n                class=\"size-full rounded-xl object-contain\"\n            />\n        }\n    </picture>\n</div>\n@if (images().length > 1 && isShowActions()) {\n    <div\n        (mousemove.silent)=\"$event.stopPropagation()\"\n        class=\"flex justify-center\"\n    >\n        @for (indexItem of images(); track $index) {\n            <button\n                tuiButton\n                type=\"button\"\n                class=\"button button_small\"\n                [appearance]=\"$index === currentIndex() ? 'primary' : 'secondary'\"\n                aria-label=\"\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 {{ $index + 1 }}\"\n                (tuiHoveredChange)=\"onDotHovered($event, $index)\"\n            ></button>\n        }\n    </div>\n}\n", styles: [".button{flex-shrink:0}.button:first-child{margin-inline-start:0}.button:last-child{margin-inline-end:0}.button_small{inline-size:.5rem;block-size:.5rem;font-size:0;padding:0;margin:0}.button_small:not(:first-child){margin-left:.5rem}\n"], dependencies: [{ kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiHovered, selector: "[tuiHoveredChange]", outputs: ["tuiHoveredChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ScHoverImageCarouselComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sc-hover-image-carousel', imports: [TuiButton, TuiHovered], host: {
                         '(mousemove.silent)': 'onHover($any($event).offsetX, $any($event).target)',
                         '(mouseleave.silent)': 'onLeave()',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"overflow-hidden rounded-xl\"\n    [class.mb-2]=\"images().length <= 1 && isShowActions()\"\n    [style.aspect-ratio]=\"'20/19'\"\n>\n    @let image = currentImage();\n    <picture>\n        @if (image.imageWebp) {\n            <source\n                type=\"image/webp\"\n                [srcset]=\"image.imageWebp\"\n            />\n        }\n\n        @if (image.image) {\n            <img\n                [src]=\"image.image\"\n                [alt]=\"image.alt\"\n                class=\"size-full rounded-xl object-contain\"\n            />\n        }\n    </picture>\n</div>\n@if (images().length > 1 && isShowActions()) {\n    <div\n        (mousemove.silent)=\"$event.stopPropagation()\"\n        class=\"flex justify-center\"\n    >\n        @for (indexItem of images(); track $index) {\n            <button\n                tuiButton\n                type=\"button\"\n                class=\"button button_small\"\n                [appearance]=\"$index === currentIndex() ? 'primary' : 'secondary'\"\n                (tuiHoveredChange)=\"onDotHovered($event, $index)\"\n            ></button>\n        }\n    </div>\n}\n", styles: [".button{flex-shrink:0}.button:first-child{margin-inline-start:0}.button:last-child{margin-inline-end:0}.button_small{inline-size:.5rem;block-size:.5rem;font-size:0;padding:0;margin:0}.button_small:not(:first-child){margin-left:.5rem}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"overflow-hidden rounded-xl\"\n    [class.mb-2]=\"images().length <= 1 && isShowActions()\"\n    [style.aspect-ratio]=\"'20/19'\"\n>\n    @let image = currentImage();\n    <picture>\n        @if (image.imageWebp) {\n            <source\n                type=\"image/webp\"\n                [srcset]=\"image.imageWebp\"\n            />\n        }\n\n        @if (image.image) {\n            <img\n                [src]=\"image.image\"\n                [alt]=\"image.alt\"\n                class=\"size-full rounded-xl object-contain\"\n            />\n        }\n    </picture>\n</div>\n@if (images().length > 1 && isShowActions()) {\n    <div\n        (mousemove.silent)=\"$event.stopPropagation()\"\n        class=\"flex justify-center\"\n    >\n        @for (indexItem of images(); track $index) {\n            <button\n                tuiButton\n                type=\"button\"\n                class=\"button button_small\"\n                [appearance]=\"$index === currentIndex() ? 'primary' : 'secondary'\"\n                aria-label=\"\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 {{ $index + 1 }}\"\n                (tuiHoveredChange)=\"onDotHovered($event, $index)\"\n            ></button>\n        }\n    </div>\n}\n", styles: [".button{flex-shrink:0}.button:first-child{margin-inline-start:0}.button:last-child{margin-inline-end:0}.button_small{inline-size:.5rem;block-size:.5rem;font-size:0;padding:0;margin:0}.button_small:not(:first-child){margin-left:.5rem}\n"] }]
         }], propDecorators: { images: [{ type: i0.Input, args: [{ isSignal: true, alias: "images", required: true }] }], isShowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "isShowActions", required: false }] }], productName: [{ type: i0.Input, args: [{ isSignal: true, alias: "productName", required: false }] }] } });
 
 /* eslint-disable @typescript-eslint/dot-notation */
@@ -3953,9 +3955,9 @@ class ScInputQuantityComponent {
          */
         this.cdr = inject(ChangeDetectorRef);
         // eslint-disable-next-line @typescript-eslint/no-empty-function, class-methods-use-this
-        this.onTouched = () => { };
+        this.onTouched = noop;
         // eslint-disable-next-line @typescript-eslint/no-empty-function, class-methods-use-this
-        this.onChange = () => { };
+        this.onChange = noop;
         /**
          * Признак игнорирования шаговых валидаторов.
          */
@@ -5074,7 +5076,7 @@ class ScCatalogFiltersComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ScCatalogFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ScCatalogFiltersComponent, isStandalone: true, selector: "sc-catalog-filters", inputs: { showResultsButton: { classPropertyName: "showResultsButton", publicName: "showResultsButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resetFilters: "resetFilters", showResults: "showResults" }, ngImport: i0, template: "@if (filters()?.length) {\n    <form\n        [formGroup]=\"form\"\n        class=\"flex flex-col pb-1\"\n    >\n        @for (filter of filters(); track filter.id; let isFirst = $first) {\n            @if (!isFirst) {\n                <hr class=\"my-3 w-full h-px\" />\n            }\n\n            <div class=\"flex flex-col gap-2\">\n                <!-- \u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \u0433\u0440\u0443\u043F\u043F\u044B. \u0414\u043B\u044F toggle \u043F\u043E\u0434\u043F\u0438\u0441\u0438 \u043D\u0435\u0442: \u043C\u0435\u0442\u043A\u0430 \u0438\u0434\u0451\u0442 \u043F\u0440\u044F\u043C\u043E \u0440\u044F\u0434\u043E\u043C \u0441 \u0441\u0430\u043C\u0438\u043C checkbox. -->\n                @if (filter.type !== 'toggle') {\n                    <label class=\"text-body-s-bold\">{{ filter.label }}</label>\n                }\n\n                <!-- Checkbox: FormGroup(value.id \u2192 boolean) \u0434\u043B\u044F \u043B\u044E\u0431\u043E\u0433\u043E \u0447\u0438\u0441\u043B\u0430 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0439.\n                     \u0420\u0430\u0437\u0432\u0438\u043B\u043A\u0430 \u043E\u0434\u043D\u043E/\u043C\u043D\u043E\u0433\u043E \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0439 \u0432\u044B\u043D\u0435\u0441\u0435\u043D\u0430 \u0432 TS (\u0441\u043C. processCheckboxFilter).\n                     ng-template \u0432\u043D\u0443\u0442\u0440\u0438 formGroupName: \u0438\u043D\u0430\u0447\u0435 reactive forms \u043D\u0435 \u043D\u0430\u0439\u0434\u0451\u0442 ControlContainer \u043F\u0440\u0438 \u043F\u0440\u043E\u0435\u043A\u0446\u0438\u0438 \u0432 \u0434\u043E\u0447\u0435\u0440\u043D\u0438\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442. -->\n                @if (filter.type === 'checkbox') {\n                    <div\n                        class=\"flex flex-col gap-2\"\n                        [formGroupName]=\"filter.id\"\n                    >\n                        <sc-catalog-filter-collapsible\n                            [itemsCount]=\"filter.values.length\"\n                            [showReset]=\"form.get(filter.id)?.dirty ?? false\"\n                            (resetGroup)=\"resetCheckboxGroup(filter.id)\"\n                        >\n                            <ng-template>\n                                <div class=\"flex flex-col gap-2\">\n                                    @for (value of filter.values; track value.id) {\n                                        <label class=\"flex items-center gap-2\">\n                                            <input\n                                                [formControlName]=\"value.id\"\n                                                tuiCheckbox\n                                                type=\"checkbox\"\n                                            />\n                                            <span class=\"text-body-s\">{{ value.label }}</span>\n                                        </label>\n                                    }\n                                </div>\n                            </ng-template>\n                        </sc-catalog-filter-collapsible>\n                    </div>\n\n                    <!-- Toggle: \u043E\u0434\u0438\u043D boolean \u043D\u0430 \u043A\u043E\u0440\u043D\u0435 \u0444\u043E\u0440\u043C\u044B, \u043F\u043E\u0434\u043F\u0438\u0441\u044C = filter.label -->\n                } @else if (filter.type === 'toggle') {\n                    <label class=\"flex items-center gap-2\">\n                        <input\n                            [formControlName]=\"filter.id\"\n                            tuiCheckbox\n                            type=\"checkbox\"\n                        />\n                        <span class=\"text-body-s-bold\">{{ filter.label }}</span>\n                    </label>\n\n                    <!-- Range: FormGroup(from, to, slider) \u0441 \u0434\u0432\u0443\u0441\u0442\u043E\u0440\u043E\u043D\u043D\u0435\u0439 \u0441\u0438\u043D\u0445\u0440\u043E\u043D\u0438\u0437\u0430\u0446\u0438\u0435\u0439 -->\n                } @else if (filter.type === 'range') {\n                    <div\n                        [formGroupName]=\"filter.id\"\n                        class=\"flex flex-col gap-3\"\n                    >\n                        <div class=\"flex gap-3 px-1\">\n                            <label\n                                tuiLabel\n                                class=\"min-w-0 flex-1\"\n                            >\n                                \u041E\u0442\n                                <tui-textfield [tuiTextfieldCleaner]=\"false\">\n                                    <input\n                                        scSelectOnFocusin\n                                        tuiInputNumber\n                                        formControlName=\"from\"\n                                        [tuiNumberFormat]=\"{ precision: 0 }\"\n                                        [min]=\"+filter.min\"\n                                        [max]=\"+filter.max\"\n                                        autocomplete=\"off\"\n                                        placeholder=\"\u041E\u0442\"\n                                    />\n                                    @if (form.get(filter.id)?.get('from')?.dirty) {\n                                        <button\n                                            tuiIconButton\n                                            type=\"button\"\n                                            size=\"xs\"\n                                            appearance=\"icon\"\n                                            iconStart=\"@tui.x\"\n                                            (click)=\"resetRangeFrom(filter.id, filter.min)\"\n                                        ></button>\n                                    }\n                                </tui-textfield>\n                            </label>\n                            <label\n                                tuiLabel\n                                class=\"min-w-0 flex-1\"\n                            >\n                                \u0414\u043E\n                                <tui-textfield [tuiTextfieldCleaner]=\"false\">\n                                    <input\n                                        scSelectOnFocusin\n                                        tuiInputNumber\n                                        formControlName=\"to\"\n                                        [tuiNumberFormat]=\"{ precision: 0 }\"\n                                        [min]=\"+filter.min\"\n                                        [max]=\"+filter.max\"\n                                        autocomplete=\"off\"\n                                        placeholder=\"\u0414\u043E\"\n                                    />\n                                    @if (form.get(filter.id)?.get('to')?.dirty) {\n                                        <button\n                                            tuiIconButton\n                                            type=\"button\"\n                                            size=\"xs\"\n                                            appearance=\"icon\"\n                                            iconStart=\"@tui.x\"\n                                            (click)=\"resetRangeTo(filter.id, filter.max)\"\n                                        ></button>\n                                    }\n                                </tui-textfield>\n                            </label>\n                        </div>\n\n                        <tui-range\n                            size=\"m\"\n                            formControlName=\"slider\"\n                            [min]=\"+filter.min\"\n                            [max]=\"+filter.max\"\n                            [style.--tui-thickness.rem]=\"0.25\"\n                        />\n                    </div>\n                }\n            </div>\n        }\n        <button\n            tuiButton\n            appearance=\"secondary\"\n            type=\"button\"\n            class=\"mt-2\"\n            (click)=\"onResetFiltersClick()\"\n        >\n            \u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C \u0444\u0438\u043B\u044C\u0442\u0440\u044B\n        </button>\n        @if (showResultsButton()) {\n            <button\n                tuiButton\n                appearance=\"primary\"\n                type=\"button\"\n                class=\"mt-2\"\n                (click)=\"onShowResultsClick()\"\n            >\n                \u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u044B\n            </button>\n        }\n    </form>\n}\n", styles: [".accordion [tuiAccordion]{border:none;-webkit-mask:none;mask:none}.accordion tui-expand{box-shadow:none}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2$3.TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: i2.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler"] }, { kind: "directive", type: i2.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: ScSelectOnFocusinDirective, selector: "tui-input-number, tui-input, tui-input-phone, tui-input-date, tui-input-password, input[tuiInput], input[tuiInputNumber], input[tuiTextfield], input[tuiInputSlider]" }, { kind: "component", type: ScCatalogFilterCollapsibleComponent, selector: "sc-catalog-filter-collapsible", inputs: ["itemsCount", "showReset"], outputs: ["resetGroup"] }, { kind: "directive", type: TuiNumberFormat, selector: "[tuiNumberFormat]", inputs: ["tuiNumberFormat"] }, { kind: "component", type: TuiCheckbox, selector: "input[type=\"checkbox\"][tuiCheckbox]" }, { kind: "directive", type: i1$1.TuiInputNumberDirective, selector: "input[tuiInputNumber]" }, { kind: "component", type: TuiRange, selector: "tui-range", inputs: ["min", "max", "step", "segments", "keySteps", "focusable", "margin", "limit"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ScCatalogFiltersComponent, isStandalone: true, selector: "sc-catalog-filters", inputs: { showResultsButton: { classPropertyName: "showResultsButton", publicName: "showResultsButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resetFilters: "resetFilters", showResults: "showResults" }, ngImport: i0, template: "@if (filters()?.length) {\n    <form\n        [formGroup]=\"form\"\n        class=\"flex flex-col pb-1\"\n    >\n        @for (filter of filters(); track filter.id; let isFirst = $first) {\n            @if (!isFirst) {\n                <hr class=\"my-3 w-full h-px\" />\n            }\n\n            <div class=\"flex flex-col gap-2\">\n                <!-- \u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \u0433\u0440\u0443\u043F\u043F\u044B. \u0414\u043B\u044F toggle \u043F\u043E\u0434\u043F\u0438\u0441\u0438 \u043D\u0435\u0442: \u043C\u0435\u0442\u043A\u0430 \u0438\u0434\u0451\u0442 \u043F\u0440\u044F\u043C\u043E \u0440\u044F\u0434\u043E\u043C \u0441 \u0441\u0430\u043C\u0438\u043C checkbox. -->\n                @if (filter.type !== 'toggle') {\n                    <label class=\"text-body-s-bold\">{{ filter.label }}</label>\n                }\n\n                <!-- Checkbox: FormGroup(value.id \u2192 boolean) \u0434\u043B\u044F \u043B\u044E\u0431\u043E\u0433\u043E \u0447\u0438\u0441\u043B\u0430 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0439.\n                     \u0420\u0430\u0437\u0432\u0438\u043B\u043A\u0430 \u043E\u0434\u043D\u043E/\u043C\u043D\u043E\u0433\u043E \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0439 \u0432\u044B\u043D\u0435\u0441\u0435\u043D\u0430 \u0432 TS (\u0441\u043C. processCheckboxFilter).\n                     ng-template \u0432\u043D\u0443\u0442\u0440\u0438 formGroupName: \u0438\u043D\u0430\u0447\u0435 reactive forms \u043D\u0435 \u043D\u0430\u0439\u0434\u0451\u0442 ControlContainer \u043F\u0440\u0438 \u043F\u0440\u043E\u0435\u043A\u0446\u0438\u0438 \u0432 \u0434\u043E\u0447\u0435\u0440\u043D\u0438\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442. -->\n                @if (filter.type === 'checkbox') {\n                    <div\n                        class=\"flex flex-col gap-2\"\n                        [formGroupName]=\"filter.id\"\n                    >\n                        <sc-catalog-filter-collapsible\n                            [itemsCount]=\"filter.values.length\"\n                            [showReset]=\"form.get(filter.id)?.dirty ?? false\"\n                            (resetGroup)=\"resetCheckboxGroup(filter.id)\"\n                        >\n                            <ng-template>\n                                <div class=\"flex flex-col gap-2\">\n                                    @for (value of filter.values; track value.id) {\n                                        <label class=\"flex items-center gap-2\">\n                                            <input\n                                                [formControlName]=\"value.id\"\n                                                tuiCheckbox\n                                                type=\"checkbox\"\n                                            />\n                                            <span class=\"text-body-s\">{{ value.label }}</span>\n                                        </label>\n                                    }\n                                </div>\n                            </ng-template>\n                        </sc-catalog-filter-collapsible>\n                    </div>\n\n                    <!-- Toggle: \u043E\u0434\u0438\u043D boolean \u043D\u0430 \u043A\u043E\u0440\u043D\u0435 \u0444\u043E\u0440\u043C\u044B, \u043F\u043E\u0434\u043F\u0438\u0441\u044C = filter.label -->\n                } @else if (filter.type === 'toggle') {\n                    <label class=\"flex items-center gap-2\">\n                        <input\n                            [formControlName]=\"filter.id\"\n                            tuiCheckbox\n                            type=\"checkbox\"\n                        />\n                        <span class=\"text-body-s-bold\">{{ filter.label }}</span>\n                    </label>\n\n                    <!-- Range: FormGroup(from, to, slider) \u0441 \u0434\u0432\u0443\u0441\u0442\u043E\u0440\u043E\u043D\u043D\u0435\u0439 \u0441\u0438\u043D\u0445\u0440\u043E\u043D\u0438\u0437\u0430\u0446\u0438\u0435\u0439 -->\n                } @else if (filter.type === 'range') {\n                    <div\n                        [formGroupName]=\"filter.id\"\n                        class=\"flex flex-col gap-3\"\n                    >\n                        <div class=\"flex gap-3 px-1\">\n                            <label\n                                tuiLabel\n                                class=\"min-w-0 flex-1\"\n                            >\n                                \u041E\u0442\n                                <tui-textfield [tuiTextfieldCleaner]=\"false\">\n                                    <input\n                                        scSelectOnFocusin\n                                        tuiInputNumber\n                                        formControlName=\"from\"\n                                        [tuiNumberFormat]=\"{ precision: 0 }\"\n                                        [min]=\"+filter.min\"\n                                        [max]=\"+filter.max\"\n                                        autocomplete=\"off\"\n                                        placeholder=\"\u041E\u0442\"\n                                    />\n                                    @if (form.get(filter.id)?.get('from')?.dirty) {\n                                        <button\n                                            tuiIconButton\n                                            type=\"button\"\n                                            size=\"xs\"\n                                            appearance=\"icon\"\n                                            (click)=\"resetRangeFrom(filter.id, filter.min)\"\n                                        >\n                                            <tui-icon icon=\"@tui.x\" />\n                                        </button>\n                                    }\n                                </tui-textfield>\n                            </label>\n                            <label\n                                tuiLabel\n                                class=\"min-w-0 flex-1\"\n                            >\n                                \u0414\u043E\n                                <tui-textfield [tuiTextfieldCleaner]=\"false\">\n                                    <input\n                                        scSelectOnFocusin\n                                        tuiInputNumber\n                                        formControlName=\"to\"\n                                        [tuiNumberFormat]=\"{ precision: 0 }\"\n                                        [min]=\"+filter.min\"\n                                        [max]=\"+filter.max\"\n                                        autocomplete=\"off\"\n                                        placeholder=\"\u0414\u043E\"\n                                    />\n                                    @if (form.get(filter.id)?.get('to')?.dirty) {\n                                        <button\n                                            tuiIconButton\n                                            type=\"button\"\n                                            size=\"xs\"\n                                            appearance=\"icon\"\n                                            (click)=\"resetRangeTo(filter.id, filter.max)\"\n                                        >\n                                            <tui-icon icon=\"@tui.x\" />\n                                        </button>\n                                    }\n                                </tui-textfield>\n                            </label>\n                        </div>\n\n                        <tui-range\n                            size=\"m\"\n                            formControlName=\"slider\"\n                            [min]=\"+filter.min\"\n                            [max]=\"+filter.max\"\n                            [style.--tui-thickness.rem]=\"0.25\"\n                        />\n                    </div>\n                }\n            </div>\n        }\n        <button\n            tuiButton\n            appearance=\"secondary\"\n            type=\"button\"\n            class=\"mt-2\"\n            (click)=\"onResetFiltersClick()\"\n        >\n            \u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C \u0444\u0438\u043B\u044C\u0442\u0440\u044B\n        </button>\n        @if (showResultsButton()) {\n            <button\n                tuiButton\n                appearance=\"primary\"\n                type=\"button\"\n                class=\"mt-2\"\n                (click)=\"onShowResultsClick()\"\n            >\n                \u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u044B\n            </button>\n        }\n    </form>\n}\n", styles: [".accordion [tuiAccordion]{border:none;-webkit-mask:none;mask:none}.accordion tui-expand{box-shadow:none}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2$3.TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: i2.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler"] }, { kind: "directive", type: i2.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: ScSelectOnFocusinDirective, selector: "tui-input-number, tui-input, tui-input-phone, tui-input-date, tui-input-password, input[tuiInput], input[tuiInputNumber], input[tuiTextfield], input[tuiInputSlider]" }, { kind: "component", type: ScCatalogFilterCollapsibleComponent, selector: "sc-catalog-filter-collapsible", inputs: ["itemsCount", "showReset"], outputs: ["resetGroup"] }, { kind: "directive", type: TuiNumberFormat, selector: "[tuiNumberFormat]", inputs: ["tuiNumberFormat"] }, { kind: "component", type: TuiCheckbox, selector: "input[type=\"checkbox\"][tuiCheckbox]" }, { kind: "directive", type: i1$1.TuiInputNumberDirective, selector: "input[tuiInputNumber]" }, { kind: "component", type: TuiRange, selector: "tui-range", inputs: ["min", "max", "step", "segments", "keySteps", "focusable", "margin", "limit"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ScCatalogFiltersComponent, decorators: [{
             type: Component,
@@ -5089,7 +5091,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         TuiInputNumber,
                         TuiRange,
                         TuiButton,
-                    ], template: "@if (filters()?.length) {\n    <form\n        [formGroup]=\"form\"\n        class=\"flex flex-col pb-1\"\n    >\n        @for (filter of filters(); track filter.id; let isFirst = $first) {\n            @if (!isFirst) {\n                <hr class=\"my-3 w-full h-px\" />\n            }\n\n            <div class=\"flex flex-col gap-2\">\n                <!-- \u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \u0433\u0440\u0443\u043F\u043F\u044B. \u0414\u043B\u044F toggle \u043F\u043E\u0434\u043F\u0438\u0441\u0438 \u043D\u0435\u0442: \u043C\u0435\u0442\u043A\u0430 \u0438\u0434\u0451\u0442 \u043F\u0440\u044F\u043C\u043E \u0440\u044F\u0434\u043E\u043C \u0441 \u0441\u0430\u043C\u0438\u043C checkbox. -->\n                @if (filter.type !== 'toggle') {\n                    <label class=\"text-body-s-bold\">{{ filter.label }}</label>\n                }\n\n                <!-- Checkbox: FormGroup(value.id \u2192 boolean) \u0434\u043B\u044F \u043B\u044E\u0431\u043E\u0433\u043E \u0447\u0438\u0441\u043B\u0430 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0439.\n                     \u0420\u0430\u0437\u0432\u0438\u043B\u043A\u0430 \u043E\u0434\u043D\u043E/\u043C\u043D\u043E\u0433\u043E \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0439 \u0432\u044B\u043D\u0435\u0441\u0435\u043D\u0430 \u0432 TS (\u0441\u043C. processCheckboxFilter).\n                     ng-template \u0432\u043D\u0443\u0442\u0440\u0438 formGroupName: \u0438\u043D\u0430\u0447\u0435 reactive forms \u043D\u0435 \u043D\u0430\u0439\u0434\u0451\u0442 ControlContainer \u043F\u0440\u0438 \u043F\u0440\u043E\u0435\u043A\u0446\u0438\u0438 \u0432 \u0434\u043E\u0447\u0435\u0440\u043D\u0438\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442. -->\n                @if (filter.type === 'checkbox') {\n                    <div\n                        class=\"flex flex-col gap-2\"\n                        [formGroupName]=\"filter.id\"\n                    >\n                        <sc-catalog-filter-collapsible\n                            [itemsCount]=\"filter.values.length\"\n                            [showReset]=\"form.get(filter.id)?.dirty ?? false\"\n                            (resetGroup)=\"resetCheckboxGroup(filter.id)\"\n                        >\n                            <ng-template>\n                                <div class=\"flex flex-col gap-2\">\n                                    @for (value of filter.values; track value.id) {\n                                        <label class=\"flex items-center gap-2\">\n                                            <input\n                                                [formControlName]=\"value.id\"\n                                                tuiCheckbox\n                                                type=\"checkbox\"\n                                            />\n                                            <span class=\"text-body-s\">{{ value.label }}</span>\n                                        </label>\n                                    }\n                                </div>\n                            </ng-template>\n                        </sc-catalog-filter-collapsible>\n                    </div>\n\n                    <!-- Toggle: \u043E\u0434\u0438\u043D boolean \u043D\u0430 \u043A\u043E\u0440\u043D\u0435 \u0444\u043E\u0440\u043C\u044B, \u043F\u043E\u0434\u043F\u0438\u0441\u044C = filter.label -->\n                } @else if (filter.type === 'toggle') {\n                    <label class=\"flex items-center gap-2\">\n                        <input\n                            [formControlName]=\"filter.id\"\n                            tuiCheckbox\n                            type=\"checkbox\"\n                        />\n                        <span class=\"text-body-s-bold\">{{ filter.label }}</span>\n                    </label>\n\n                    <!-- Range: FormGroup(from, to, slider) \u0441 \u0434\u0432\u0443\u0441\u0442\u043E\u0440\u043E\u043D\u043D\u0435\u0439 \u0441\u0438\u043D\u0445\u0440\u043E\u043D\u0438\u0437\u0430\u0446\u0438\u0435\u0439 -->\n                } @else if (filter.type === 'range') {\n                    <div\n                        [formGroupName]=\"filter.id\"\n                        class=\"flex flex-col gap-3\"\n                    >\n                        <div class=\"flex gap-3 px-1\">\n                            <label\n                                tuiLabel\n                                class=\"min-w-0 flex-1\"\n                            >\n                                \u041E\u0442\n                                <tui-textfield [tuiTextfieldCleaner]=\"false\">\n                                    <input\n                                        scSelectOnFocusin\n                                        tuiInputNumber\n                                        formControlName=\"from\"\n                                        [tuiNumberFormat]=\"{ precision: 0 }\"\n                                        [min]=\"+filter.min\"\n                                        [max]=\"+filter.max\"\n                                        autocomplete=\"off\"\n                                        placeholder=\"\u041E\u0442\"\n                                    />\n                                    @if (form.get(filter.id)?.get('from')?.dirty) {\n                                        <button\n                                            tuiIconButton\n                                            type=\"button\"\n                                            size=\"xs\"\n                                            appearance=\"icon\"\n                                            iconStart=\"@tui.x\"\n                                            (click)=\"resetRangeFrom(filter.id, filter.min)\"\n                                        ></button>\n                                    }\n                                </tui-textfield>\n                            </label>\n                            <label\n                                tuiLabel\n                                class=\"min-w-0 flex-1\"\n                            >\n                                \u0414\u043E\n                                <tui-textfield [tuiTextfieldCleaner]=\"false\">\n                                    <input\n                                        scSelectOnFocusin\n                                        tuiInputNumber\n                                        formControlName=\"to\"\n                                        [tuiNumberFormat]=\"{ precision: 0 }\"\n                                        [min]=\"+filter.min\"\n                                        [max]=\"+filter.max\"\n                                        autocomplete=\"off\"\n                                        placeholder=\"\u0414\u043E\"\n                                    />\n                                    @if (form.get(filter.id)?.get('to')?.dirty) {\n                                        <button\n                                            tuiIconButton\n                                            type=\"button\"\n                                            size=\"xs\"\n                                            appearance=\"icon\"\n                                            iconStart=\"@tui.x\"\n                                            (click)=\"resetRangeTo(filter.id, filter.max)\"\n                                        ></button>\n                                    }\n                                </tui-textfield>\n                            </label>\n                        </div>\n\n                        <tui-range\n                            size=\"m\"\n                            formControlName=\"slider\"\n                            [min]=\"+filter.min\"\n                            [max]=\"+filter.max\"\n                            [style.--tui-thickness.rem]=\"0.25\"\n                        />\n                    </div>\n                }\n            </div>\n        }\n        <button\n            tuiButton\n            appearance=\"secondary\"\n            type=\"button\"\n            class=\"mt-2\"\n            (click)=\"onResetFiltersClick()\"\n        >\n            \u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C \u0444\u0438\u043B\u044C\u0442\u0440\u044B\n        </button>\n        @if (showResultsButton()) {\n            <button\n                tuiButton\n                appearance=\"primary\"\n                type=\"button\"\n                class=\"mt-2\"\n                (click)=\"onShowResultsClick()\"\n            >\n                \u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u044B\n            </button>\n        }\n    </form>\n}\n", styles: [".accordion [tuiAccordion]{border:none;-webkit-mask:none;mask:none}.accordion tui-expand{box-shadow:none}\n"] }]
+                        TuiIcon,
+                    ], template: "@if (filters()?.length) {\n    <form\n        [formGroup]=\"form\"\n        class=\"flex flex-col pb-1\"\n    >\n        @for (filter of filters(); track filter.id; let isFirst = $first) {\n            @if (!isFirst) {\n                <hr class=\"my-3 w-full h-px\" />\n            }\n\n            <div class=\"flex flex-col gap-2\">\n                <!-- \u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \u0433\u0440\u0443\u043F\u043F\u044B. \u0414\u043B\u044F toggle \u043F\u043E\u0434\u043F\u0438\u0441\u0438 \u043D\u0435\u0442: \u043C\u0435\u0442\u043A\u0430 \u0438\u0434\u0451\u0442 \u043F\u0440\u044F\u043C\u043E \u0440\u044F\u0434\u043E\u043C \u0441 \u0441\u0430\u043C\u0438\u043C checkbox. -->\n                @if (filter.type !== 'toggle') {\n                    <label class=\"text-body-s-bold\">{{ filter.label }}</label>\n                }\n\n                <!-- Checkbox: FormGroup(value.id \u2192 boolean) \u0434\u043B\u044F \u043B\u044E\u0431\u043E\u0433\u043E \u0447\u0438\u0441\u043B\u0430 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0439.\n                     \u0420\u0430\u0437\u0432\u0438\u043B\u043A\u0430 \u043E\u0434\u043D\u043E/\u043C\u043D\u043E\u0433\u043E \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0439 \u0432\u044B\u043D\u0435\u0441\u0435\u043D\u0430 \u0432 TS (\u0441\u043C. processCheckboxFilter).\n                     ng-template \u0432\u043D\u0443\u0442\u0440\u0438 formGroupName: \u0438\u043D\u0430\u0447\u0435 reactive forms \u043D\u0435 \u043D\u0430\u0439\u0434\u0451\u0442 ControlContainer \u043F\u0440\u0438 \u043F\u0440\u043E\u0435\u043A\u0446\u0438\u0438 \u0432 \u0434\u043E\u0447\u0435\u0440\u043D\u0438\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442. -->\n                @if (filter.type === 'checkbox') {\n                    <div\n                        class=\"flex flex-col gap-2\"\n                        [formGroupName]=\"filter.id\"\n                    >\n                        <sc-catalog-filter-collapsible\n                            [itemsCount]=\"filter.values.length\"\n                            [showReset]=\"form.get(filter.id)?.dirty ?? false\"\n                            (resetGroup)=\"resetCheckboxGroup(filter.id)\"\n                        >\n                            <ng-template>\n                                <div class=\"flex flex-col gap-2\">\n                                    @for (value of filter.values; track value.id) {\n                                        <label class=\"flex items-center gap-2\">\n                                            <input\n                                                [formControlName]=\"value.id\"\n                                                tuiCheckbox\n                                                type=\"checkbox\"\n                                            />\n                                            <span class=\"text-body-s\">{{ value.label }}</span>\n                                        </label>\n                                    }\n                                </div>\n                            </ng-template>\n                        </sc-catalog-filter-collapsible>\n                    </div>\n\n                    <!-- Toggle: \u043E\u0434\u0438\u043D boolean \u043D\u0430 \u043A\u043E\u0440\u043D\u0435 \u0444\u043E\u0440\u043C\u044B, \u043F\u043E\u0434\u043F\u0438\u0441\u044C = filter.label -->\n                } @else if (filter.type === 'toggle') {\n                    <label class=\"flex items-center gap-2\">\n                        <input\n                            [formControlName]=\"filter.id\"\n                            tuiCheckbox\n                            type=\"checkbox\"\n                        />\n                        <span class=\"text-body-s-bold\">{{ filter.label }}</span>\n                    </label>\n\n                    <!-- Range: FormGroup(from, to, slider) \u0441 \u0434\u0432\u0443\u0441\u0442\u043E\u0440\u043E\u043D\u043D\u0435\u0439 \u0441\u0438\u043D\u0445\u0440\u043E\u043D\u0438\u0437\u0430\u0446\u0438\u0435\u0439 -->\n                } @else if (filter.type === 'range') {\n                    <div\n                        [formGroupName]=\"filter.id\"\n                        class=\"flex flex-col gap-3\"\n                    >\n                        <div class=\"flex gap-3 px-1\">\n                            <label\n                                tuiLabel\n                                class=\"min-w-0 flex-1\"\n                            >\n                                \u041E\u0442\n                                <tui-textfield [tuiTextfieldCleaner]=\"false\">\n                                    <input\n                                        scSelectOnFocusin\n                                        tuiInputNumber\n                                        formControlName=\"from\"\n                                        [tuiNumberFormat]=\"{ precision: 0 }\"\n                                        [min]=\"+filter.min\"\n                                        [max]=\"+filter.max\"\n                                        autocomplete=\"off\"\n                                        placeholder=\"\u041E\u0442\"\n                                    />\n                                    @if (form.get(filter.id)?.get('from')?.dirty) {\n                                        <button\n                                            tuiIconButton\n                                            type=\"button\"\n                                            size=\"xs\"\n                                            appearance=\"icon\"\n                                            (click)=\"resetRangeFrom(filter.id, filter.min)\"\n                                        >\n                                            <tui-icon icon=\"@tui.x\" />\n                                        </button>\n                                    }\n                                </tui-textfield>\n                            </label>\n                            <label\n                                tuiLabel\n                                class=\"min-w-0 flex-1\"\n                            >\n                                \u0414\u043E\n                                <tui-textfield [tuiTextfieldCleaner]=\"false\">\n                                    <input\n                                        scSelectOnFocusin\n                                        tuiInputNumber\n                                        formControlName=\"to\"\n                                        [tuiNumberFormat]=\"{ precision: 0 }\"\n                                        [min]=\"+filter.min\"\n                                        [max]=\"+filter.max\"\n                                        autocomplete=\"off\"\n                                        placeholder=\"\u0414\u043E\"\n                                    />\n                                    @if (form.get(filter.id)?.get('to')?.dirty) {\n                                        <button\n                                            tuiIconButton\n                                            type=\"button\"\n                                            size=\"xs\"\n                                            appearance=\"icon\"\n                                            (click)=\"resetRangeTo(filter.id, filter.max)\"\n                                        >\n                                            <tui-icon icon=\"@tui.x\" />\n                                        </button>\n                                    }\n                                </tui-textfield>\n                            </label>\n                        </div>\n\n                        <tui-range\n                            size=\"m\"\n                            formControlName=\"slider\"\n                            [min]=\"+filter.min\"\n                            [max]=\"+filter.max\"\n                            [style.--tui-thickness.rem]=\"0.25\"\n                        />\n                    </div>\n                }\n            </div>\n        }\n        <button\n            tuiButton\n            appearance=\"secondary\"\n            type=\"button\"\n            class=\"mt-2\"\n            (click)=\"onResetFiltersClick()\"\n        >\n            \u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C \u0444\u0438\u043B\u044C\u0442\u0440\u044B\n        </button>\n        @if (showResultsButton()) {\n            <button\n                tuiButton\n                appearance=\"primary\"\n                type=\"button\"\n                class=\"mt-2\"\n                (click)=\"onShowResultsClick()\"\n            >\n                \u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u044B\n            </button>\n        }\n    </form>\n}\n", styles: [".accordion [tuiAccordion]{border:none;-webkit-mask:none;mask:none}.accordion tui-expand{box-shadow:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { showResultsButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showResultsButton", required: false }] }], resetFilters: [{ type: i0.Output, args: ["resetFilters"] }], showResults: [{ type: i0.Output, args: ["showResults"] }] } });
 
 /* eslint-disable @typescript-eslint/unbound-method */
@@ -5416,12 +5419,13 @@ class ScSandwichComponent {
                 stringify: signal((x) => x.name),
                 identityMatcher: signal((a, b) => a.id === b.id),
             }),
-        ], ngImport: i0, template: "@if (!orderItem() && settings()?.allowShowTable) {\n    <div class=\"mb-5 flex justify-center\">\n        <button\n            tuiButton\n            appearance=\"secondary\"\n            (click)=\"toggleShowEvent.emit()\"\n            type=\"button\"\n            iconStart=\"@tui.layout-list\"\n        >\n            \u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0432 \u0432\u0438\u0434\u0435 \u0441\u043F\u0438\u0441\u043A\u0430\n        </button>\n    </div>\n}\n<div>\n    @let calculateResult = calculateResult$ | async;\n    @let products = products$ | async;\n    @let productValue = product.value;\n    @let validatorWidth = validatorWidth$ | async;\n    @let validatorLength = validatorLength$ | async;\n\n    <form\n        [formGroup]=\"form\"\n        (ngSubmit)=\"onSubmit(calculateResult)\"\n        ScNextInputFocus\n        class=\"flex flex-col gap-3\"\n    >\n        <label\n            tuiLabel\n            class=\"grow\"\n        >\n            \u0422\u043E\u0432\u0430\u0440\n            <tui-textfield\n                tuiChevron\n                [tuiTextfieldCleaner]=\"false\"\n            >\n                <input\n                    tuiChevron\n                    tuiSelect\n                    [formControl]=\"product\"\n                    placeholder=\"\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043C\u0430\u0442\u0435\u0440\u0438\u0430\u043B\"\n                />\n\n                <tui-data-list-wrapper\n                    *tuiDropdown\n                    new\n                    [items]=\"products\"\n                />\n            </tui-textfield>\n            <tui-error [formControl]=\"product\" />\n        </label>\n\n        @if (productValue && productValue.costRub) {\n            <div class=\"-mt-1 text-sm text-tui-text-secondary\">\n                <span class=\"font-bold\">{{ productValue.code }}</span>\n                \u2014 {{ productValue.costRub.toLocaleString() }} {{ productValue.currency.symbol }}/\u0448\u0442.\n            </div>\n        }\n\n        @if (product.value && validatorWidth && validatorLength) {\n            <div class=\"mt-4 flex flex-col gap-1.5\">\n                <div class=\"w-full font-bold\">\u0420\u0430\u0437\u043C\u0435\u0440\u044B \u0438\u0437\u0434\u0435\u043B\u0438\u0439</div>\n                <div class=\"flex flex-col gap-1 text-sm text-tui-text-secondary\">\n                    @if (widthRangeText()) {\n                        <div>\u0428\u0438\u0440\u0438\u043D\u0430 {{ widthRangeText() }}.</div>\n                    }\n                    @if (lengthRangeText()) {\n                        <div>\u0414\u043B\u0438\u043D\u0430 {{ lengthRangeText() }}.</div>\n                    }\n                </div>\n            </div>\n        } @else if (product.value) {\n            <tui-error error=\"\u0420\u0430\u0441\u0447\u0435\u0442 \u043F\u043E \u043F\u0440\u043E\u0434\u0443\u043A\u0442\u0443 \u043D\u0435\u0432\u043E\u0437\u043C\u043E\u0436\u0435\u043D. \u041E\u0431\u0440\u0430\u0442\u0438\u0442\u0435\u0441\u044C \u043A \u043C\u0435\u043D\u0435\u0434\u0436\u0435\u0440\u0443\" />\n        }\n\n        <div\n            formArrayName=\"items\"\n            class=\"flex flex-col gap-3\"\n        >\n            @for (item of items.controls; track item) {\n                <div\n                    class=\"flex grow gap-2\"\n                    [formGroupName]=\"$index\"\n                >\n                    <div class=\"grid grow grid-cols-1 items-start gap-2 sm:grid-cols-3\">\n                        <label tuiLabel>\n                            \u0428\u0438\u0440\u0438\u043D\u0430, \u043C\u043C\n                            <tui-textfield>\n                                <input\n                                    tuiInputSlider\n                                    formControlName=\"width\"\n                                    [min]=\"settings()?.minWidth ?? 0\"\n                                    [max]=\"product.value?.properties?.width ?? 0\"\n                                    [tuiNumberFormat]=\"{ precision: 0 }\"\n                                    [readOnly]=\"!product.value\"\n                                    placeholder=\"\u0428\u0438\u0440\u0438\u043D\u0430\"\n                                    autocomplete=\"off\"\n                                />\n                                @if (product.value) {\n                                    <input\n                                        tuiSlider\n                                        type=\"range\"\n                                    />\n                                }\n                            </tui-textfield>\n                            @if (product.value) {\n                                <div class=\"slider-ticks-labels\">\n                                    <span> 0 </span>\n                                    <span>{{ product.value.properties?.width }}</span>\n                                </div>\n                            }\n                            <tui-error formControlName=\"width\" />\n                        </label>\n\n                        <label tuiLabel>\n                            \u0414\u043B\u0438\u043D\u0430, \u043C\u043C\n                            <tui-textfield>\n                                <input\n                                    tuiInputSlider\n                                    formControlName=\"length\"\n                                    [min]=\"settings()?.minLength ?? 0\"\n                                    [max]=\"product.value?.properties?.length ?? 0\"\n                                    [tuiNumberFormat]=\"{ precision: 0 }\"\n                                    [readOnly]=\"!product.value\"\n                                    placeholder=\"\u0414\u043B\u0438\u043D\u0430\"\n                                    autocomplete=\"off\"\n                                />\n                                @if (product.value) {\n                                    <input\n                                        tuiSlider\n                                        type=\"range\"\n                                    />\n                                }\n                            </tui-textfield>\n                            @if (product.value) {\n                                <div class=\"slider-ticks-labels\">\n                                    <span> 0 </span>\n                                    <span>{{ product.value.properties?.length }}</span>\n                                </div>\n                            }\n                            <tui-error formControlName=\"length\" />\n                        </label>\n                        <label tuiLabel>\n                            <span class=\"whitespace-nowrap\">\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E, \u0448\u0442</span>\n                            <tui-textfield [tuiTextfieldCleaner]=\"false\">\n                                <input\n                                    tuiInputNumber\n                                    formControlName=\"count\"\n                                    [min]=\"1\"\n                                    [tuiNumberFormat]=\"{ precision: 0 }\"\n                                    [readOnly]=\"!product.value\"\n                                    placeholder=\"\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E\"\n                                    autocomplete=\"off\"\n                                />\n                            </tui-textfield>\n                            <tui-error formControlName=\"count\" />\n                        </label>\n                    </div>\n                    <button\n                        tuiIconButton\n                        (click)=\"removeItem($index)\"\n                        [disabled]=\"!product.value || items.length <= 1\"\n                        size=\"m\"\n                        type=\"button\"\n                        iconStart=\"@tui.trash-2\"\n                        appearance=\"secondary\"\n                        class=\"mt-6\"\n                        [style.flex]=\"'0 0 auto'\"\n                    ></button>\n                </div>\n            }\n        </div>\n        @if (product.value) {\n            <button\n                tuiButton\n                appearance=\"secondary\"\n                [disabled]=\"items.invalid\"\n                (click)=\"addItem()\"\n                type=\"button\"\n                class=\"self-center\"\n                iconStart=\"@tui.plus\"\n            >\n                \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u0434\u0435\u043B\u0438\u0435\n            </button>\n        }\n\n        <label tuiLabel>\n            \u041C\u0430\u0440\u043A\u0438\u0440\u043E\u0432\u043A\u0430 \u0440\u0430\u0441\u043F\u0438\u043B\u0430\n            <tui-textfield>\n                <input\n                    tuiInput\n                    formControlName=\"marker\"\n                    placeholder=\"\u041C\u0430\u0440\u043A\u0438\u0440\u043E\u0432\u043A\u0430 \u0440\u0430\u0441\u043F\u0438\u043B\u0430\"\n                    autocomplete=\"marker\"\n                />\n            </tui-textfield>\n\n            <tui-error formControlName=\"marker\" />\n        </label>\n\n        @if (product.value) {\n            <tui-loader [loading]=\"isCalculateLoading()\">\n                @if (calculateResult) {\n                    <div class=\"mt-2 flex flex-wrap items-end gap-2\">\n                        <div>\n                            \u0418\u0442\u043E\u0433\u043E: <span class=\"whitespace-nowrap text-xl font-bold\">{{ getTotalCost(calculateResult).toLocaleString() }} {{ product.value.currency.symbol }}</span>\n                        </div>\n                        @if (calculateResult?.quantity && productValue) {\n                            <div class=\"whitespace-nowrap text-lg text-sc-dark-grey\">\n                                <span class=\"font-bold\">({{ calculateResult.quantity }} \u0448\u0442.</span> x\n                                <span class=\"font-bold\">{{ productValue.costRub?.toLocaleString() }} {{ productValue.currency.symbol }}/\u0448\u0442.)</span>\n                            </div>\n                        }\n                    </div>\n                }\n            </tui-loader>\n        }\n\n        <tui-error />\n        @if (!calculateResult) {\n            <button\n                tuiButton\n                appearance=\"secondary\"\n                [disabled]=\"items.invalid || isCalculateLoading()\"\n                (click)=\"triggerCalculate()\"\n                type=\"button\"\n                class=\"self-center\"\n                iconStart=\"@tui.calculator\"\n            >\n                \u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044C\n            </button>\n        } @else {\n            <button\n                [disabled]=\"form.invalid || isSubmitLoading()\"\n                [loading]=\"isSubmitLoading()\"\n                tuiButton\n                class=\"self-center\"\n                iconStart=\"@tui.check\"\n            >\n                {{ !orderItem() ? '\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0432 \u043A\u043E\u0440\u0437\u0438\u043D\u0443' : '\u0418\u0437\u043C\u0435\u043D\u0438\u0442\u044C' }}\n            </button>\n        }\n    </form>\n</div>\n", styles: [":host{display:block;width:100%;max-width:30rem}.slider-ticks-labels{--t-offset: $thumb-radius;display:flex;font:var(--tui-typography-body-s);color:var(--tui-text-secondary);margin:.25rem var(--t-offset) 0}.slider-ticks-labels>*{position:relative;flex:2;text-align:center}.slider-ticks-labels>*:first-child{inset-inline-start:calc(-1 * var(--t-offset));flex:1;text-align:start}.slider-ticks-labels>*:last-child{inset-inline-end:calc(-1 * var(--t-offset));flex:1;text-align:end}tui-range+.slider-ticks-labels{--t-offset: $thumb-diameter}tui-textfield[data-size=l]+.slider-ticks-labels{--t-offset: calc(map-get($track-inset, \"l\") + $thumb-radius)}tui-textfield[data-size=m]+.slider-ticks-labels{--t-offset: calc(map-get($track-inset, \"m\") + $thumb-radius)}tui-textfield[data-size=s]+.slider-ticks-labels{--t-offset: calc(map-get($track-inset, \"s\") + $thumb-radius)}tui-input-range[data-size=l]+.slider-ticks-labels{--t-offset: calc(map-get($track-inset, \"l\") + $thumb-diameter)}tui-input-range[data-size=m]+.slider-ticks-labels{--t-offset: calc(map-get($track-inset, \"m\") + $thumb-diameter)}tui-input-range[data-size=s]+.slider-ticks-labels{--t-offset: calc(map-get($track-inset, \"s\") + $thumb-diameter)}.slider-ticks-labels{color:var(--tui-text-secondary)}\n"], dependencies: [{ kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: ScNextInputFocusDirective, selector: "form[ScNextInputFocus]" }, { kind: "directive", type: TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "component", type: i2.TuiErrorComponent, selector: "tui-error", inputs: ["error"] }, { kind: "directive", type: i2.TuiErrorDirective, selector: "tui-error[ngModel], tui-error[formControlName], tui-error[formControl], tui-error[formGroup], tui-error[formGroupName], tui-error[formArrayName], tui-error[formArray]", inputs: ["order"] }, { kind: "component", type: i3$1.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler"] }, { kind: "directive", type: i3$1.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i3.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "directive", type: i2.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "invalid", "focused", "state"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "directive", type: i1$1.TuiSelectDirective, selector: "input[tuiSelect]" }, { kind: "directive", type: i1$1.TuiInputNumberDirective, selector: "input[tuiInputNumber]" }, { kind: "directive", type: TuiNumberFormat, selector: "[tuiNumberFormat]", inputs: ["tuiNumberFormat"] }, { kind: "component", type: i6.TuiSliderComponent, selector: "input[type=range][tuiSlider]", inputs: ["segments"] }, { kind: "directive", type: i1$1.TuiInputSliderDirective, selector: "input[tuiInputSlider]" }, { kind: "directive", type: ScSelectOnFocusinDirective, selector: "tui-input-number, tui-input, tui-input-phone, tui-input-date, tui-input-password, input[tuiInput], input[tuiInputNumber], input[tuiTextfield], input[tuiInputSlider]" }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "loading"] }, { kind: "component", type: TuiButtonLoading, selector: "[tuiButton][loading],[tuiIconButton][loading]", inputs: ["size", "loading"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "@if (!orderItem() && settings()?.allowShowTable) {\n    <div class=\"mb-5 flex justify-center\">\n        <button\n            tuiButton\n            appearance=\"secondary\"\n            (click)=\"toggleShowEvent.emit()\"\n            type=\"button\"\n            iconStart=\"@tui.layout-list\"\n        >\n            \u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0432 \u0432\u0438\u0434\u0435 \u0441\u043F\u0438\u0441\u043A\u0430\n        </button>\n    </div>\n}\n<div>\n    @let calculateResult = calculateResult$ | async;\n    @let products = products$ | async;\n    @let productValue = product.value;\n    @let validatorWidth = validatorWidth$ | async;\n    @let validatorLength = validatorLength$ | async;\n\n    <form\n        [formGroup]=\"form\"\n        (ngSubmit)=\"onSubmit(calculateResult)\"\n        ScNextInputFocus\n        class=\"flex flex-col gap-3\"\n    >\n        <label\n            tuiLabel\n            class=\"grow\"\n        >\n            \u0422\u043E\u0432\u0430\u0440\n            <tui-textfield\n                tuiChevron\n                [tuiTextfieldCleaner]=\"false\"\n            >\n                <input\n                    tuiChevron\n                    tuiSelect\n                    [formControl]=\"product\"\n                    placeholder=\"\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043C\u0430\u0442\u0435\u0440\u0438\u0430\u043B\"\n                />\n\n                <tui-data-list-wrapper\n                    *tuiDropdown\n                    new\n                    [items]=\"products\"\n                />\n            </tui-textfield>\n            <tui-error [formControl]=\"product\" />\n        </label>\n\n        @if (productValue && productValue.costRub) {\n            <div class=\"-mt-1 text-sm text-tui-text-secondary\">\n                <span class=\"font-bold\">{{ productValue.code }}</span>\n                \u2014 {{ productValue.costRub.toLocaleString() }} {{ productValue.currency.symbol }}/\u0448\u0442.\n            </div>\n        }\n\n        @if (product.value && validatorWidth && validatorLength) {\n            <div class=\"mt-4 flex flex-col gap-1.5\">\n                <div class=\"w-full font-bold\">\u0420\u0430\u0437\u043C\u0435\u0440\u044B \u0438\u0437\u0434\u0435\u043B\u0438\u0439</div>\n                <div class=\"flex flex-col gap-1 text-sm text-tui-text-secondary\">\n                    @if (widthRangeText()) {\n                        <div>\u0428\u0438\u0440\u0438\u043D\u0430 {{ widthRangeText() }}.</div>\n                    }\n                    @if (lengthRangeText()) {\n                        <div>\u0414\u043B\u0438\u043D\u0430 {{ lengthRangeText() }}.</div>\n                    }\n                </div>\n            </div>\n        } @else if (product.value) {\n            <tui-error error=\"\u0420\u0430\u0441\u0447\u0435\u0442 \u043F\u043E \u043F\u0440\u043E\u0434\u0443\u043A\u0442\u0443 \u043D\u0435\u0432\u043E\u0437\u043C\u043E\u0436\u0435\u043D. \u041E\u0431\u0440\u0430\u0442\u0438\u0442\u0435\u0441\u044C \u043A \u043C\u0435\u043D\u0435\u0434\u0436\u0435\u0440\u0443\" />\n        }\n\n        <div\n            formArrayName=\"items\"\n            class=\"flex flex-col gap-3\"\n        >\n            @for (item of items.controls; track item) {\n                <div\n                    class=\"flex grow gap-2\"\n                    [formGroupName]=\"$index\"\n                >\n                    <div class=\"grid grow grid-cols-1 items-start gap-2 sm:grid-cols-3\">\n                        <label tuiLabel>\n                            \u0428\u0438\u0440\u0438\u043D\u0430, \u043C\u043C\n                            <tui-textfield>\n                                <input\n                                    tuiInputSlider\n                                    formControlName=\"width\"\n                                    [min]=\"settings()?.minWidth ?? 0\"\n                                    [max]=\"product.value?.properties?.width ?? 0\"\n                                    [tuiNumberFormat]=\"{ precision: 0 }\"\n                                    [readOnly]=\"!product.value\"\n                                    placeholder=\"\u0428\u0438\u0440\u0438\u043D\u0430\"\n                                    autocomplete=\"off\"\n                                />\n                                @if (product.value) {\n                                    <input\n                                        tuiSlider\n                                        type=\"range\"\n                                    />\n                                }\n                            </tui-textfield>\n                            @if (product.value) {\n                                <div class=\"slider-ticks-labels\">\n                                    <span> 0 </span>\n                                    <span>{{ product.value.properties?.width }}</span>\n                                </div>\n                            }\n                            <tui-error formControlName=\"width\" />\n                        </label>\n\n                        <label tuiLabel>\n                            \u0414\u043B\u0438\u043D\u0430, \u043C\u043C\n                            <tui-textfield>\n                                <input\n                                    tuiInputSlider\n                                    formControlName=\"length\"\n                                    [min]=\"settings()?.minLength ?? 0\"\n                                    [max]=\"product.value?.properties?.length ?? 0\"\n                                    [tuiNumberFormat]=\"{ precision: 0 }\"\n                                    [readOnly]=\"!product.value\"\n                                    placeholder=\"\u0414\u043B\u0438\u043D\u0430\"\n                                    autocomplete=\"off\"\n                                />\n                                @if (product.value) {\n                                    <input\n                                        tuiSlider\n                                        type=\"range\"\n                                    />\n                                }\n                            </tui-textfield>\n                            @if (product.value) {\n                                <div class=\"slider-ticks-labels\">\n                                    <span> 0 </span>\n                                    <span>{{ product.value.properties?.length }}</span>\n                                </div>\n                            }\n                            <tui-error formControlName=\"length\" />\n                        </label>\n                        <label tuiLabel>\n                            <span class=\"whitespace-nowrap\">\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E, \u0448\u0442</span>\n                            <tui-textfield [tuiTextfieldCleaner]=\"false\">\n                                <input\n                                    tuiInputNumber\n                                    formControlName=\"count\"\n                                    [min]=\"1\"\n                                    [tuiNumberFormat]=\"{ precision: 0 }\"\n                                    [readOnly]=\"!product.value\"\n                                    placeholder=\"\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E\"\n                                    autocomplete=\"off\"\n                                />\n                            </tui-textfield>\n                            <tui-error formControlName=\"count\" />\n                        </label>\n                    </div>\n                    <button\n                        tuiIconButton\n                        (click)=\"removeItem($index)\"\n                        [disabled]=\"!product.value || items.length <= 1\"\n                        size=\"m\"\n                        type=\"button\"\n                        appearance=\"secondary\"\n                        class=\"mt-6\"\n                        [style.flex]=\"'0 0 auto'\"\n                    >\n                        <tui-icon icon=\"@tui.trash-2\" />\n                    </button>\n                </div>\n            }\n        </div>\n        @if (product.value) {\n            <button\n                tuiButton\n                appearance=\"secondary\"\n                [disabled]=\"items.invalid\"\n                (click)=\"addItem()\"\n                type=\"button\"\n                class=\"self-center\"\n                iconStart=\"@tui.plus\"\n            >\n                \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u0434\u0435\u043B\u0438\u0435\n            </button>\n        }\n\n        <label tuiLabel>\n            \u041C\u0430\u0440\u043A\u0438\u0440\u043E\u0432\u043A\u0430 \u0440\u0430\u0441\u043F\u0438\u043B\u0430\n            <tui-textfield>\n                <input\n                    tuiInput\n                    formControlName=\"marker\"\n                    placeholder=\"\u041C\u0430\u0440\u043A\u0438\u0440\u043E\u0432\u043A\u0430 \u0440\u0430\u0441\u043F\u0438\u043B\u0430\"\n                    autocomplete=\"marker\"\n                />\n            </tui-textfield>\n\n            <tui-error formControlName=\"marker\" />\n        </label>\n\n        @if (product.value) {\n            <tui-loader [loading]=\"isCalculateLoading()\">\n                @if (calculateResult) {\n                    <div class=\"mt-2 flex flex-wrap items-end gap-2\">\n                        <div>\n                            \u0418\u0442\u043E\u0433\u043E: <span class=\"whitespace-nowrap text-xl font-bold\">{{ getTotalCost(calculateResult).toLocaleString() }} {{ product.value.currency.symbol }}</span>\n                        </div>\n                        @if (calculateResult?.quantity && productValue) {\n                            <div class=\"whitespace-nowrap text-lg text-sc-dark-grey\">\n                                <span class=\"font-bold\">({{ calculateResult.quantity }} \u0448\u0442.</span> x\n                                <span class=\"font-bold\">{{ productValue.costRub?.toLocaleString() }} {{ productValue.currency.symbol }}/\u0448\u0442.)</span>\n                            </div>\n                        }\n                    </div>\n                }\n            </tui-loader>\n        }\n\n        <tui-error />\n        @if (!calculateResult) {\n            <button\n                tuiButton\n                appearance=\"secondary\"\n                [disabled]=\"items.invalid || isCalculateLoading()\"\n                (click)=\"triggerCalculate()\"\n                type=\"button\"\n                class=\"self-center\"\n                iconStart=\"@tui.calculator\"\n            >\n                \u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044C\n            </button>\n        } @else {\n            <button\n                [disabled]=\"form.invalid || isSubmitLoading()\"\n                [loading]=\"isSubmitLoading()\"\n                tuiButton\n                class=\"self-center\"\n                iconStart=\"@tui.check\"\n            >\n                {{ !orderItem() ? '\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0432 \u043A\u043E\u0440\u0437\u0438\u043D\u0443' : '\u0418\u0437\u043C\u0435\u043D\u0438\u0442\u044C' }}\n            </button>\n        }\n    </form>\n</div>\n", styles: [":host{display:block;width:100%;max-width:30rem}.slider-ticks-labels{--t-offset: $thumb-radius;display:flex;font:var(--tui-typography-body-s);color:var(--tui-text-secondary);margin:.25rem var(--t-offset) 0}.slider-ticks-labels>*{position:relative;flex:2;text-align:center}.slider-ticks-labels>*:first-child{inset-inline-start:calc(-1 * var(--t-offset));flex:1;text-align:start}.slider-ticks-labels>*:last-child{inset-inline-end:calc(-1 * var(--t-offset));flex:1;text-align:end}tui-range+.slider-ticks-labels{--t-offset: $thumb-diameter}tui-textfield[data-size=l]+.slider-ticks-labels{--t-offset: calc(map-get($track-inset, \"l\") + $thumb-radius)}tui-textfield[data-size=m]+.slider-ticks-labels{--t-offset: calc(map-get($track-inset, \"m\") + $thumb-radius)}tui-textfield[data-size=s]+.slider-ticks-labels{--t-offset: calc(map-get($track-inset, \"s\") + $thumb-radius)}tui-input-range[data-size=l]+.slider-ticks-labels{--t-offset: calc(map-get($track-inset, \"l\") + $thumb-diameter)}tui-input-range[data-size=m]+.slider-ticks-labels{--t-offset: calc(map-get($track-inset, \"m\") + $thumb-diameter)}tui-input-range[data-size=s]+.slider-ticks-labels{--t-offset: calc(map-get($track-inset, \"s\") + $thumb-diameter)}.slider-ticks-labels{color:var(--tui-text-secondary)}\n"], dependencies: [{ kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: ScNextInputFocusDirective, selector: "form[ScNextInputFocus]" }, { kind: "directive", type: TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "component", type: i2.TuiErrorComponent, selector: "tui-error", inputs: ["error"] }, { kind: "directive", type: i2.TuiErrorDirective, selector: "tui-error[ngModel], tui-error[formControlName], tui-error[formControl], tui-error[formGroup], tui-error[formGroupName], tui-error[formArrayName], tui-error[formArray]", inputs: ["order"] }, { kind: "component", type: i3$1.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler"] }, { kind: "directive", type: i3$1.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i3.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "directive", type: i2.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "invalid", "focused", "state"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "directive", type: i1$1.TuiSelectDirective, selector: "input[tuiSelect]" }, { kind: "directive", type: i1$1.TuiInputNumberDirective, selector: "input[tuiInputNumber]" }, { kind: "directive", type: TuiNumberFormat, selector: "[tuiNumberFormat]", inputs: ["tuiNumberFormat"] }, { kind: "component", type: i6.TuiSliderComponent, selector: "input[type=range][tuiSlider]", inputs: ["segments"] }, { kind: "directive", type: i1$1.TuiInputSliderDirective, selector: "input[tuiInputSlider]" }, { kind: "directive", type: ScSelectOnFocusinDirective, selector: "tui-input-number, tui-input, tui-input-phone, tui-input-date, tui-input-password, input[tuiInput], input[tuiInputNumber], input[tuiTextfield], input[tuiInputSlider]" }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "loading"] }, { kind: "component", type: TuiButtonLoading, selector: "[tuiButton][loading],[tuiIconButton][loading]", inputs: ["size", "loading"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ScSandwichComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'sc-sandwich', imports: [
                         TuiButton,
+                        TuiIcon,
                         FormsModule,
                         ReactiveFormsModule,
                         ScNextInputFocusDirective,
@@ -5447,7 +5451,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                             stringify: signal((x) => x.name),
                             identityMatcher: signal((a, b) => a.id === b.id),
                         }),
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!orderItem() && settings()?.allowShowTable) {\n    <div class=\"mb-5 flex justify-center\">\n        <button\n            tuiButton\n            appearance=\"secondary\"\n            (click)=\"toggleShowEvent.emit()\"\n            type=\"button\"\n            iconStart=\"@tui.layout-list\"\n        >\n            \u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0432 \u0432\u0438\u0434\u0435 \u0441\u043F\u0438\u0441\u043A\u0430\n        </button>\n    </div>\n}\n<div>\n    @let calculateResult = calculateResult$ | async;\n    @let products = products$ | async;\n    @let productValue = product.value;\n    @let validatorWidth = validatorWidth$ | async;\n    @let validatorLength = validatorLength$ | async;\n\n    <form\n        [formGroup]=\"form\"\n        (ngSubmit)=\"onSubmit(calculateResult)\"\n        ScNextInputFocus\n        class=\"flex flex-col gap-3\"\n    >\n        <label\n            tuiLabel\n            class=\"grow\"\n        >\n            \u0422\u043E\u0432\u0430\u0440\n            <tui-textfield\n                tuiChevron\n                [tuiTextfieldCleaner]=\"false\"\n            >\n                <input\n                    tuiChevron\n                    tuiSelect\n                    [formControl]=\"product\"\n                    placeholder=\"\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043C\u0430\u0442\u0435\u0440\u0438\u0430\u043B\"\n                />\n\n                <tui-data-list-wrapper\n                    *tuiDropdown\n                    new\n                    [items]=\"products\"\n                />\n            </tui-textfield>\n            <tui-error [formControl]=\"product\" />\n        </label>\n\n        @if (productValue && productValue.costRub) {\n            <div class=\"-mt-1 text-sm text-tui-text-secondary\">\n                <span class=\"font-bold\">{{ productValue.code }}</span>\n                \u2014 {{ productValue.costRub.toLocaleString() }} {{ productValue.currency.symbol }}/\u0448\u0442.\n            </div>\n        }\n\n        @if (product.value && validatorWidth && validatorLength) {\n            <div class=\"mt-4 flex flex-col gap-1.5\">\n                <div class=\"w-full font-bold\">\u0420\u0430\u0437\u043C\u0435\u0440\u044B \u0438\u0437\u0434\u0435\u043B\u0438\u0439</div>\n                <div class=\"flex flex-col gap-1 text-sm text-tui-text-secondary\">\n                    @if (widthRangeText()) {\n                        <div>\u0428\u0438\u0440\u0438\u043D\u0430 {{ widthRangeText() }}.</div>\n                    }\n                    @if (lengthRangeText()) {\n                        <div>\u0414\u043B\u0438\u043D\u0430 {{ lengthRangeText() }}.</div>\n                    }\n                </div>\n            </div>\n        } @else if (product.value) {\n            <tui-error error=\"\u0420\u0430\u0441\u0447\u0435\u0442 \u043F\u043E \u043F\u0440\u043E\u0434\u0443\u043A\u0442\u0443 \u043D\u0435\u0432\u043E\u0437\u043C\u043E\u0436\u0435\u043D. \u041E\u0431\u0440\u0430\u0442\u0438\u0442\u0435\u0441\u044C \u043A \u043C\u0435\u043D\u0435\u0434\u0436\u0435\u0440\u0443\" />\n        }\n\n        <div\n            formArrayName=\"items\"\n            class=\"flex flex-col gap-3\"\n        >\n            @for (item of items.controls; track item) {\n                <div\n                    class=\"flex grow gap-2\"\n                    [formGroupName]=\"$index\"\n                >\n                    <div class=\"grid grow grid-cols-1 items-start gap-2 sm:grid-cols-3\">\n                        <label tuiLabel>\n                            \u0428\u0438\u0440\u0438\u043D\u0430, \u043C\u043C\n                            <tui-textfield>\n                                <input\n                                    tuiInputSlider\n                                    formControlName=\"width\"\n                                    [min]=\"settings()?.minWidth ?? 0\"\n                                    [max]=\"product.value?.properties?.width ?? 0\"\n                                    [tuiNumberFormat]=\"{ precision: 0 }\"\n                                    [readOnly]=\"!product.value\"\n                                    placeholder=\"\u0428\u0438\u0440\u0438\u043D\u0430\"\n                                    autocomplete=\"off\"\n                                />\n                                @if (product.value) {\n                                    <input\n                                        tuiSlider\n                                        type=\"range\"\n                                    />\n                                }\n                            </tui-textfield>\n                            @if (product.value) {\n                                <div class=\"slider-ticks-labels\">\n                                    <span> 0 </span>\n                                    <span>{{ product.value.properties?.width }}</span>\n                                </div>\n                            }\n                            <tui-error formControlName=\"width\" />\n                        </label>\n\n                        <label tuiLabel>\n                            \u0414\u043B\u0438\u043D\u0430, \u043C\u043C\n                            <tui-textfield>\n                                <input\n                                    tuiInputSlider\n                                    formControlName=\"length\"\n                                    [min]=\"settings()?.minLength ?? 0\"\n                                    [max]=\"product.value?.properties?.length ?? 0\"\n                                    [tuiNumberFormat]=\"{ precision: 0 }\"\n                                    [readOnly]=\"!product.value\"\n                                    placeholder=\"\u0414\u043B\u0438\u043D\u0430\"\n                                    autocomplete=\"off\"\n                                />\n                                @if (product.value) {\n                                    <input\n                                        tuiSlider\n                                        type=\"range\"\n                                    />\n                                }\n                            </tui-textfield>\n                            @if (product.value) {\n                                <div class=\"slider-ticks-labels\">\n                                    <span> 0 </span>\n                                    <span>{{ product.value.properties?.length }}</span>\n                                </div>\n                            }\n                            <tui-error formControlName=\"length\" />\n                        </label>\n                        <label tuiLabel>\n                            <span class=\"whitespace-nowrap\">\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E, \u0448\u0442</span>\n                            <tui-textfield [tuiTextfieldCleaner]=\"false\">\n                                <input\n                                    tuiInputNumber\n                                    formControlName=\"count\"\n                                    [min]=\"1\"\n                                    [tuiNumberFormat]=\"{ precision: 0 }\"\n                                    [readOnly]=\"!product.value\"\n                                    placeholder=\"\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E\"\n                                    autocomplete=\"off\"\n                                />\n                            </tui-textfield>\n                            <tui-error formControlName=\"count\" />\n                        </label>\n                    </div>\n                    <button\n                        tuiIconButton\n                        (click)=\"removeItem($index)\"\n                        [disabled]=\"!product.value || items.length <= 1\"\n                        size=\"m\"\n                        type=\"button\"\n                        iconStart=\"@tui.trash-2\"\n                        appearance=\"secondary\"\n                        class=\"mt-6\"\n                        [style.flex]=\"'0 0 auto'\"\n                    ></button>\n                </div>\n            }\n        </div>\n        @if (product.value) {\n            <button\n                tuiButton\n                appearance=\"secondary\"\n                [disabled]=\"items.invalid\"\n                (click)=\"addItem()\"\n                type=\"button\"\n                class=\"self-center\"\n                iconStart=\"@tui.plus\"\n            >\n                \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u0434\u0435\u043B\u0438\u0435\n            </button>\n        }\n\n        <label tuiLabel>\n            \u041C\u0430\u0440\u043A\u0438\u0440\u043E\u0432\u043A\u0430 \u0440\u0430\u0441\u043F\u0438\u043B\u0430\n            <tui-textfield>\n                <input\n                    tuiInput\n                    formControlName=\"marker\"\n                    placeholder=\"\u041C\u0430\u0440\u043A\u0438\u0440\u043E\u0432\u043A\u0430 \u0440\u0430\u0441\u043F\u0438\u043B\u0430\"\n                    autocomplete=\"marker\"\n                />\n            </tui-textfield>\n\n            <tui-error formControlName=\"marker\" />\n        </label>\n\n        @if (product.value) {\n            <tui-loader [loading]=\"isCalculateLoading()\">\n                @if (calculateResult) {\n                    <div class=\"mt-2 flex flex-wrap items-end gap-2\">\n                        <div>\n                            \u0418\u0442\u043E\u0433\u043E: <span class=\"whitespace-nowrap text-xl font-bold\">{{ getTotalCost(calculateResult).toLocaleString() }} {{ product.value.currency.symbol }}</span>\n                        </div>\n                        @if (calculateResult?.quantity && productValue) {\n                            <div class=\"whitespace-nowrap text-lg text-sc-dark-grey\">\n                                <span class=\"font-bold\">({{ calculateResult.quantity }} \u0448\u0442.</span> x\n                                <span class=\"font-bold\">{{ productValue.costRub?.toLocaleString() }} {{ productValue.currency.symbol }}/\u0448\u0442.)</span>\n                            </div>\n                        }\n                    </div>\n                }\n            </tui-loader>\n        }\n\n        <tui-error />\n        @if (!calculateResult) {\n            <button\n                tuiButton\n                appearance=\"secondary\"\n                [disabled]=\"items.invalid || isCalculateLoading()\"\n                (click)=\"triggerCalculate()\"\n                type=\"button\"\n                class=\"self-center\"\n                iconStart=\"@tui.calculator\"\n            >\n                \u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044C\n            </button>\n        } @else {\n            <button\n                [disabled]=\"form.invalid || isSubmitLoading()\"\n                [loading]=\"isSubmitLoading()\"\n                tuiButton\n                class=\"self-center\"\n                iconStart=\"@tui.check\"\n            >\n                {{ !orderItem() ? '\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0432 \u043A\u043E\u0440\u0437\u0438\u043D\u0443' : '\u0418\u0437\u043C\u0435\u043D\u0438\u0442\u044C' }}\n            </button>\n        }\n    </form>\n</div>\n", styles: [":host{display:block;width:100%;max-width:30rem}.slider-ticks-labels{--t-offset: $thumb-radius;display:flex;font:var(--tui-typography-body-s);color:var(--tui-text-secondary);margin:.25rem var(--t-offset) 0}.slider-ticks-labels>*{position:relative;flex:2;text-align:center}.slider-ticks-labels>*:first-child{inset-inline-start:calc(-1 * var(--t-offset));flex:1;text-align:start}.slider-ticks-labels>*:last-child{inset-inline-end:calc(-1 * var(--t-offset));flex:1;text-align:end}tui-range+.slider-ticks-labels{--t-offset: $thumb-diameter}tui-textfield[data-size=l]+.slider-ticks-labels{--t-offset: calc(map-get($track-inset, \"l\") + $thumb-radius)}tui-textfield[data-size=m]+.slider-ticks-labels{--t-offset: calc(map-get($track-inset, \"m\") + $thumb-radius)}tui-textfield[data-size=s]+.slider-ticks-labels{--t-offset: calc(map-get($track-inset, \"s\") + $thumb-radius)}tui-input-range[data-size=l]+.slider-ticks-labels{--t-offset: calc(map-get($track-inset, \"l\") + $thumb-diameter)}tui-input-range[data-size=m]+.slider-ticks-labels{--t-offset: calc(map-get($track-inset, \"m\") + $thumb-diameter)}tui-input-range[data-size=s]+.slider-ticks-labels{--t-offset: calc(map-get($track-inset, \"s\") + $thumb-diameter)}.slider-ticks-labels{color:var(--tui-text-secondary)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!orderItem() && settings()?.allowShowTable) {\n    <div class=\"mb-5 flex justify-center\">\n        <button\n            tuiButton\n            appearance=\"secondary\"\n            (click)=\"toggleShowEvent.emit()\"\n            type=\"button\"\n            iconStart=\"@tui.layout-list\"\n        >\n            \u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0432 \u0432\u0438\u0434\u0435 \u0441\u043F\u0438\u0441\u043A\u0430\n        </button>\n    </div>\n}\n<div>\n    @let calculateResult = calculateResult$ | async;\n    @let products = products$ | async;\n    @let productValue = product.value;\n    @let validatorWidth = validatorWidth$ | async;\n    @let validatorLength = validatorLength$ | async;\n\n    <form\n        [formGroup]=\"form\"\n        (ngSubmit)=\"onSubmit(calculateResult)\"\n        ScNextInputFocus\n        class=\"flex flex-col gap-3\"\n    >\n        <label\n            tuiLabel\n            class=\"grow\"\n        >\n            \u0422\u043E\u0432\u0430\u0440\n            <tui-textfield\n                tuiChevron\n                [tuiTextfieldCleaner]=\"false\"\n            >\n                <input\n                    tuiChevron\n                    tuiSelect\n                    [formControl]=\"product\"\n                    placeholder=\"\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043C\u0430\u0442\u0435\u0440\u0438\u0430\u043B\"\n                />\n\n                <tui-data-list-wrapper\n                    *tuiDropdown\n                    new\n                    [items]=\"products\"\n                />\n            </tui-textfield>\n            <tui-error [formControl]=\"product\" />\n        </label>\n\n        @if (productValue && productValue.costRub) {\n            <div class=\"-mt-1 text-sm text-tui-text-secondary\">\n                <span class=\"font-bold\">{{ productValue.code }}</span>\n                \u2014 {{ productValue.costRub.toLocaleString() }} {{ productValue.currency.symbol }}/\u0448\u0442.\n            </div>\n        }\n\n        @if (product.value && validatorWidth && validatorLength) {\n            <div class=\"mt-4 flex flex-col gap-1.5\">\n                <div class=\"w-full font-bold\">\u0420\u0430\u0437\u043C\u0435\u0440\u044B \u0438\u0437\u0434\u0435\u043B\u0438\u0439</div>\n                <div class=\"flex flex-col gap-1 text-sm text-tui-text-secondary\">\n                    @if (widthRangeText()) {\n                        <div>\u0428\u0438\u0440\u0438\u043D\u0430 {{ widthRangeText() }}.</div>\n                    }\n                    @if (lengthRangeText()) {\n                        <div>\u0414\u043B\u0438\u043D\u0430 {{ lengthRangeText() }}.</div>\n                    }\n                </div>\n            </div>\n        } @else if (product.value) {\n            <tui-error error=\"\u0420\u0430\u0441\u0447\u0435\u0442 \u043F\u043E \u043F\u0440\u043E\u0434\u0443\u043A\u0442\u0443 \u043D\u0435\u0432\u043E\u0437\u043C\u043E\u0436\u0435\u043D. \u041E\u0431\u0440\u0430\u0442\u0438\u0442\u0435\u0441\u044C \u043A \u043C\u0435\u043D\u0435\u0434\u0436\u0435\u0440\u0443\" />\n        }\n\n        <div\n            formArrayName=\"items\"\n            class=\"flex flex-col gap-3\"\n        >\n            @for (item of items.controls; track item) {\n                <div\n                    class=\"flex grow gap-2\"\n                    [formGroupName]=\"$index\"\n                >\n                    <div class=\"grid grow grid-cols-1 items-start gap-2 sm:grid-cols-3\">\n                        <label tuiLabel>\n                            \u0428\u0438\u0440\u0438\u043D\u0430, \u043C\u043C\n                            <tui-textfield>\n                                <input\n                                    tuiInputSlider\n                                    formControlName=\"width\"\n                                    [min]=\"settings()?.minWidth ?? 0\"\n                                    [max]=\"product.value?.properties?.width ?? 0\"\n                                    [tuiNumberFormat]=\"{ precision: 0 }\"\n                                    [readOnly]=\"!product.value\"\n                                    placeholder=\"\u0428\u0438\u0440\u0438\u043D\u0430\"\n                                    autocomplete=\"off\"\n                                />\n                                @if (product.value) {\n                                    <input\n                                        tuiSlider\n                                        type=\"range\"\n                                    />\n                                }\n                            </tui-textfield>\n                            @if (product.value) {\n                                <div class=\"slider-ticks-labels\">\n                                    <span> 0 </span>\n                                    <span>{{ product.value.properties?.width }}</span>\n                                </div>\n                            }\n                            <tui-error formControlName=\"width\" />\n                        </label>\n\n                        <label tuiLabel>\n                            \u0414\u043B\u0438\u043D\u0430, \u043C\u043C\n                            <tui-textfield>\n                                <input\n                                    tuiInputSlider\n                                    formControlName=\"length\"\n                                    [min]=\"settings()?.minLength ?? 0\"\n                                    [max]=\"product.value?.properties?.length ?? 0\"\n                                    [tuiNumberFormat]=\"{ precision: 0 }\"\n                                    [readOnly]=\"!product.value\"\n                                    placeholder=\"\u0414\u043B\u0438\u043D\u0430\"\n                                    autocomplete=\"off\"\n                                />\n                                @if (product.value) {\n                                    <input\n                                        tuiSlider\n                                        type=\"range\"\n                                    />\n                                }\n                            </tui-textfield>\n                            @if (product.value) {\n                                <div class=\"slider-ticks-labels\">\n                                    <span> 0 </span>\n                                    <span>{{ product.value.properties?.length }}</span>\n                                </div>\n                            }\n                            <tui-error formControlName=\"length\" />\n                        </label>\n                        <label tuiLabel>\n                            <span class=\"whitespace-nowrap\">\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E, \u0448\u0442</span>\n                            <tui-textfield [tuiTextfieldCleaner]=\"false\">\n                                <input\n                                    tuiInputNumber\n                                    formControlName=\"count\"\n                                    [min]=\"1\"\n                                    [tuiNumberFormat]=\"{ precision: 0 }\"\n                                    [readOnly]=\"!product.value\"\n                                    placeholder=\"\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E\"\n                                    autocomplete=\"off\"\n                                />\n                            </tui-textfield>\n                            <tui-error formControlName=\"count\" />\n                        </label>\n                    </div>\n                    <button\n                        tuiIconButton\n                        (click)=\"removeItem($index)\"\n                        [disabled]=\"!product.value || items.length <= 1\"\n                        size=\"m\"\n                        type=\"button\"\n                        appearance=\"secondary\"\n                        class=\"mt-6\"\n                        [style.flex]=\"'0 0 auto'\"\n                    >\n                        <tui-icon icon=\"@tui.trash-2\" />\n                    </button>\n                </div>\n            }\n        </div>\n        @if (product.value) {\n            <button\n                tuiButton\n                appearance=\"secondary\"\n                [disabled]=\"items.invalid\"\n                (click)=\"addItem()\"\n                type=\"button\"\n                class=\"self-center\"\n                iconStart=\"@tui.plus\"\n            >\n                \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u0434\u0435\u043B\u0438\u0435\n            </button>\n        }\n\n        <label tuiLabel>\n            \u041C\u0430\u0440\u043A\u0438\u0440\u043E\u0432\u043A\u0430 \u0440\u0430\u0441\u043F\u0438\u043B\u0430\n            <tui-textfield>\n                <input\n                    tuiInput\n                    formControlName=\"marker\"\n                    placeholder=\"\u041C\u0430\u0440\u043A\u0438\u0440\u043E\u0432\u043A\u0430 \u0440\u0430\u0441\u043F\u0438\u043B\u0430\"\n                    autocomplete=\"marker\"\n                />\n            </tui-textfield>\n\n            <tui-error formControlName=\"marker\" />\n        </label>\n\n        @if (product.value) {\n            <tui-loader [loading]=\"isCalculateLoading()\">\n                @if (calculateResult) {\n                    <div class=\"mt-2 flex flex-wrap items-end gap-2\">\n                        <div>\n                            \u0418\u0442\u043E\u0433\u043E: <span class=\"whitespace-nowrap text-xl font-bold\">{{ getTotalCost(calculateResult).toLocaleString() }} {{ product.value.currency.symbol }}</span>\n                        </div>\n                        @if (calculateResult?.quantity && productValue) {\n                            <div class=\"whitespace-nowrap text-lg text-sc-dark-grey\">\n                                <span class=\"font-bold\">({{ calculateResult.quantity }} \u0448\u0442.</span> x\n                                <span class=\"font-bold\">{{ productValue.costRub?.toLocaleString() }} {{ productValue.currency.symbol }}/\u0448\u0442.)</span>\n                            </div>\n                        }\n                    </div>\n                }\n            </tui-loader>\n        }\n\n        <tui-error />\n        @if (!calculateResult) {\n            <button\n                tuiButton\n                appearance=\"secondary\"\n                [disabled]=\"items.invalid || isCalculateLoading()\"\n                (click)=\"triggerCalculate()\"\n                type=\"button\"\n                class=\"self-center\"\n                iconStart=\"@tui.calculator\"\n            >\n                \u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044C\n            </button>\n        } @else {\n            <button\n                [disabled]=\"form.invalid || isSubmitLoading()\"\n                [loading]=\"isSubmitLoading()\"\n                tuiButton\n                class=\"self-center\"\n                iconStart=\"@tui.check\"\n            >\n                {{ !orderItem() ? '\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0432 \u043A\u043E\u0440\u0437\u0438\u043D\u0443' : '\u0418\u0437\u043C\u0435\u043D\u0438\u0442\u044C' }}\n            </button>\n        }\n    </form>\n</div>\n", styles: [":host{display:block;width:100%;max-width:30rem}.slider-ticks-labels{--t-offset: $thumb-radius;display:flex;font:var(--tui-typography-body-s);color:var(--tui-text-secondary);margin:.25rem var(--t-offset) 0}.slider-ticks-labels>*{position:relative;flex:2;text-align:center}.slider-ticks-labels>*:first-child{inset-inline-start:calc(-1 * var(--t-offset));flex:1;text-align:start}.slider-ticks-labels>*:last-child{inset-inline-end:calc(-1 * var(--t-offset));flex:1;text-align:end}tui-range+.slider-ticks-labels{--t-offset: $thumb-diameter}tui-textfield[data-size=l]+.slider-ticks-labels{--t-offset: calc(map-get($track-inset, \"l\") + $thumb-radius)}tui-textfield[data-size=m]+.slider-ticks-labels{--t-offset: calc(map-get($track-inset, \"m\") + $thumb-radius)}tui-textfield[data-size=s]+.slider-ticks-labels{--t-offset: calc(map-get($track-inset, \"s\") + $thumb-radius)}tui-input-range[data-size=l]+.slider-ticks-labels{--t-offset: calc(map-get($track-inset, \"l\") + $thumb-diameter)}tui-input-range[data-size=m]+.slider-ticks-labels{--t-offset: calc(map-get($track-inset, \"m\") + $thumb-diameter)}tui-input-range[data-size=s]+.slider-ticks-labels{--t-offset: calc(map-get($track-inset, \"s\") + $thumb-diameter)}.slider-ticks-labels{color:var(--tui-text-secondary)}\n"] }]
         }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: false }] }], categoryId: [{ type: i0.Input, args: [{ isSignal: true, alias: "categoryId", required: true }] }], editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: true }] }], orderItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "orderItem", required: true }] }], orderId: [{
                 type: Input
             }], toggleShowEvent: [{ type: i0.Output, args: ["toggleShowEvent"] }] } });
@@ -5457,11 +5461,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  */
 class ScSandwichSkeletonComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ScSandwichSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: ScSandwichSkeletonComponent, isStandalone: true, selector: "sc-sandwich-skeleton", ngImport: i0, template: "<div class=\"w-100\">\n    <div class=\"flex flex-col gap-3\">\n        <!-- \u041F\u043E\u043B\u0435 \u0432\u044B\u0431\u043E\u0440\u0430 \u0442\u043E\u0432\u0430\u0440\u0430. -->\n        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n\n        <!-- \u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \"\u0420\u0430\u0437\u043C\u0435\u0440\u044B \u0438\u0437\u0434\u0435\u043B\u0438\u0439\". -->\n        <div class=\"my-1.5 h-5 w-1/3 rounded bg-sc-light-grey\"></div>\n\n        <!-- \u0422\u0435\u043A\u0441\u0442 \u0441 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u0430\u043C\u0438. -->\n        <div class=\"flex flex-col gap-1\">\n            <div class=\"my-1 h-3 w-2/3 rounded bg-sc-light-grey\"></div>\n            <div class=\"my-1 h-3 w-2/3 rounded bg-sc-light-grey\"></div>\n            <div class=\"my-1 h-3 w-2/3 rounded bg-sc-light-grey\"></div>\n            <div class=\"my-1 h-3 w-2/3 rounded bg-sc-light-grey\"></div>\n        </div>\n\n        <!-- \u0411\u043B\u043E\u043A \u0441 \u0438\u0437\u0434\u0435\u043B\u0438\u044F\u043C\u0438. -->\n        <div class=\"flex flex-col gap-3\">\n            <!-- \u041F\u0435\u0440\u0432\u043E\u0435 \u0438\u0437\u0434\u0435\u043B\u0438\u0435. -->\n            <div class=\"flex grow gap-4\">\n                <div class=\"grid grow grid-cols-3 gap-4\">\n                    <!-- \u0428\u0438\u0440\u0438\u043D\u0430. -->\n                    <div class=\"flex flex-col gap-1\">\n                        <div class=\"my-1 h-3 w-1/2 rounded bg-sc-light-grey\"></div>\n                        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n                        <div class=\"my-1 h-3 w-1/3 rounded bg-sc-light-grey\"></div>\n                        <div class=\"my-1 h-2 w-2/3 rounded bg-sc-light-grey\"></div>\n                    </div>\n                    <!-- \u0414\u043B\u0438\u043D\u0430. -->\n                    <div class=\"flex flex-col gap-1\">\n                        <div class=\"my-1 h-3 w-1/2 rounded bg-sc-light-grey\"></div>\n                        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n                        <div class=\"my-1 h-3 w-1/3 rounded bg-sc-light-grey\"></div>\n                        <div class=\"my-1 h-2 w-2/3 rounded bg-sc-light-grey\"></div>\n                    </div>\n                    <!-- \u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E. -->\n                    <div class=\"flex flex-col gap-1\">\n                        <div class=\"my-1 h-3 w-1/2 rounded bg-sc-light-grey\"></div>\n                        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n                    </div>\n                </div>\n                <div class=\"mt-6 size-8 shrink-0 rounded-sm bg-sc-light-grey\"></div>\n            </div>\n        </div>\n\n        <!-- \u041A\u043D\u043E\u043F\u043A\u0430 \"\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u0434\u0435\u043B\u0438\u0435\". -->\n        <button\n            tuiButton\n            appearance=\"secondary\"\n            class=\"sc-skeleton self-center\"\n        ></button>\n\n        <!-- \u041F\u043E\u043B\u0435 \"\u0418\u0442\u043E\u0433\u043E\u0432\u043E\u0435 \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u043B\u0438\u0441\u0442\u043E\u0432\". -->\n        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n\n        <!-- \u041F\u043E\u043B\u0435 \"\u041C\u0430\u0440\u043A\u0438\u0440\u043E\u0432\u043A\u0430\". -->\n        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n\n        <!-- \u0418\u0442\u043E\u0433\u043E\u0432\u0430\u044F \u0441\u0442\u043E\u0438\u043C\u043E\u0441\u0442\u044C. -->\n        <div class=\"my-2.5 h-6 w-1/3 rounded bg-sc-light-grey\"></div>\n\n        <!-- \u041A\u043D\u043E\u043F\u043A\u0430 \u043E\u0442\u043F\u0440\u0430\u0432\u043A\u0438. -->\n        <button\n            tuiButton\n            class=\"sc-skeleton self-center\"\n        ></button>\n    </div>\n</div>\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: ScSandwichSkeletonComponent, isStandalone: true, selector: "sc-sandwich-skeleton", ngImport: i0, template: "<div class=\"w-100\">\n    <div class=\"flex flex-col gap-3\">\n        <!-- \u041F\u043E\u043B\u0435 \u0432\u044B\u0431\u043E\u0440\u0430 \u0442\u043E\u0432\u0430\u0440\u0430. -->\n        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n\n        <!-- \u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \"\u0420\u0430\u0437\u043C\u0435\u0440\u044B \u0438\u0437\u0434\u0435\u043B\u0438\u0439\". -->\n        <div class=\"my-1.5 h-5 w-1/3 rounded bg-sc-light-grey\"></div>\n\n        <!-- \u0422\u0435\u043A\u0441\u0442 \u0441 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u0430\u043C\u0438. -->\n        <div class=\"flex flex-col gap-1\">\n            <div class=\"my-1 h-3 w-2/3 rounded bg-sc-light-grey\"></div>\n            <div class=\"my-1 h-3 w-2/3 rounded bg-sc-light-grey\"></div>\n            <div class=\"my-1 h-3 w-2/3 rounded bg-sc-light-grey\"></div>\n            <div class=\"my-1 h-3 w-2/3 rounded bg-sc-light-grey\"></div>\n        </div>\n\n        <!-- \u0411\u043B\u043E\u043A \u0441 \u0438\u0437\u0434\u0435\u043B\u0438\u044F\u043C\u0438. -->\n        <div class=\"flex flex-col gap-3\">\n            <!-- \u041F\u0435\u0440\u0432\u043E\u0435 \u0438\u0437\u0434\u0435\u043B\u0438\u0435. -->\n            <div class=\"flex grow gap-4\">\n                <div class=\"grid grow grid-cols-3 gap-4\">\n                    <!-- \u0428\u0438\u0440\u0438\u043D\u0430. -->\n                    <div class=\"flex flex-col gap-1\">\n                        <div class=\"my-1 h-3 w-1/2 rounded bg-sc-light-grey\"></div>\n                        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n                        <div class=\"my-1 h-3 w-1/3 rounded bg-sc-light-grey\"></div>\n                        <div class=\"my-1 h-2 w-2/3 rounded bg-sc-light-grey\"></div>\n                    </div>\n                    <!-- \u0414\u043B\u0438\u043D\u0430. -->\n                    <div class=\"flex flex-col gap-1\">\n                        <div class=\"my-1 h-3 w-1/2 rounded bg-sc-light-grey\"></div>\n                        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n                        <div class=\"my-1 h-3 w-1/3 rounded bg-sc-light-grey\"></div>\n                        <div class=\"my-1 h-2 w-2/3 rounded bg-sc-light-grey\"></div>\n                    </div>\n                    <!-- \u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E. -->\n                    <div class=\"flex flex-col gap-1\">\n                        <div class=\"my-1 h-3 w-1/2 rounded bg-sc-light-grey\"></div>\n                        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n                    </div>\n                </div>\n                <div class=\"mt-6 size-8 shrink-0 rounded-sm bg-sc-light-grey\"></div>\n            </div>\n        </div>\n\n        <!-- \u041A\u043D\u043E\u043F\u043A\u0430 \"\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u0434\u0435\u043B\u0438\u0435\". -->\n        <button\n            tuiButton\n            appearance=\"secondary\"\n            class=\"sc-skeleton self-center\"\n            aria-hidden=\"true\"\n        ></button>\n\n        <!-- \u041F\u043E\u043B\u0435 \"\u0418\u0442\u043E\u0433\u043E\u0432\u043E\u0435 \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u043B\u0438\u0441\u0442\u043E\u0432\". -->\n        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n\n        <!-- \u041F\u043E\u043B\u0435 \"\u041C\u0430\u0440\u043A\u0438\u0440\u043E\u0432\u043A\u0430\". -->\n        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n\n        <!-- \u0418\u0442\u043E\u0433\u043E\u0432\u0430\u044F \u0441\u0442\u043E\u0438\u043C\u043E\u0441\u0442\u044C. -->\n        <div class=\"my-2.5 h-6 w-1/3 rounded bg-sc-light-grey\"></div>\n\n        <!-- \u041A\u043D\u043E\u043F\u043A\u0430 \u043E\u0442\u043F\u0440\u0430\u0432\u043A\u0438. -->\n        <button\n            tuiButton\n            class=\"sc-skeleton self-center\"\n            aria-hidden=\"true\"\n        ></button>\n    </div>\n</div>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ScSandwichSkeletonComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'sc-sandwich-skeleton', template: "<div class=\"w-100\">\n    <div class=\"flex flex-col gap-3\">\n        <!-- \u041F\u043E\u043B\u0435 \u0432\u044B\u0431\u043E\u0440\u0430 \u0442\u043E\u0432\u0430\u0440\u0430. -->\n        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n\n        <!-- \u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \"\u0420\u0430\u0437\u043C\u0435\u0440\u044B \u0438\u0437\u0434\u0435\u043B\u0438\u0439\". -->\n        <div class=\"my-1.5 h-5 w-1/3 rounded bg-sc-light-grey\"></div>\n\n        <!-- \u0422\u0435\u043A\u0441\u0442 \u0441 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u0430\u043C\u0438. -->\n        <div class=\"flex flex-col gap-1\">\n            <div class=\"my-1 h-3 w-2/3 rounded bg-sc-light-grey\"></div>\n            <div class=\"my-1 h-3 w-2/3 rounded bg-sc-light-grey\"></div>\n            <div class=\"my-1 h-3 w-2/3 rounded bg-sc-light-grey\"></div>\n            <div class=\"my-1 h-3 w-2/3 rounded bg-sc-light-grey\"></div>\n        </div>\n\n        <!-- \u0411\u043B\u043E\u043A \u0441 \u0438\u0437\u0434\u0435\u043B\u0438\u044F\u043C\u0438. -->\n        <div class=\"flex flex-col gap-3\">\n            <!-- \u041F\u0435\u0440\u0432\u043E\u0435 \u0438\u0437\u0434\u0435\u043B\u0438\u0435. -->\n            <div class=\"flex grow gap-4\">\n                <div class=\"grid grow grid-cols-3 gap-4\">\n                    <!-- \u0428\u0438\u0440\u0438\u043D\u0430. -->\n                    <div class=\"flex flex-col gap-1\">\n                        <div class=\"my-1 h-3 w-1/2 rounded bg-sc-light-grey\"></div>\n                        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n                        <div class=\"my-1 h-3 w-1/3 rounded bg-sc-light-grey\"></div>\n                        <div class=\"my-1 h-2 w-2/3 rounded bg-sc-light-grey\"></div>\n                    </div>\n                    <!-- \u0414\u043B\u0438\u043D\u0430. -->\n                    <div class=\"flex flex-col gap-1\">\n                        <div class=\"my-1 h-3 w-1/2 rounded bg-sc-light-grey\"></div>\n                        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n                        <div class=\"my-1 h-3 w-1/3 rounded bg-sc-light-grey\"></div>\n                        <div class=\"my-1 h-2 w-2/3 rounded bg-sc-light-grey\"></div>\n                    </div>\n                    <!-- \u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E. -->\n                    <div class=\"flex flex-col gap-1\">\n                        <div class=\"my-1 h-3 w-1/2 rounded bg-sc-light-grey\"></div>\n                        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n                    </div>\n                </div>\n                <div class=\"mt-6 size-8 shrink-0 rounded-sm bg-sc-light-grey\"></div>\n            </div>\n        </div>\n\n        <!-- \u041A\u043D\u043E\u043F\u043A\u0430 \"\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u0434\u0435\u043B\u0438\u0435\". -->\n        <button\n            tuiButton\n            appearance=\"secondary\"\n            class=\"sc-skeleton self-center\"\n        ></button>\n\n        <!-- \u041F\u043E\u043B\u0435 \"\u0418\u0442\u043E\u0433\u043E\u0432\u043E\u0435 \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u043B\u0438\u0441\u0442\u043E\u0432\". -->\n        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n\n        <!-- \u041F\u043E\u043B\u0435 \"\u041C\u0430\u0440\u043A\u0438\u0440\u043E\u0432\u043A\u0430\". -->\n        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n\n        <!-- \u0418\u0442\u043E\u0433\u043E\u0432\u0430\u044F \u0441\u0442\u043E\u0438\u043C\u043E\u0441\u0442\u044C. -->\n        <div class=\"my-2.5 h-6 w-1/3 rounded bg-sc-light-grey\"></div>\n\n        <!-- \u041A\u043D\u043E\u043F\u043A\u0430 \u043E\u0442\u043F\u0440\u0430\u0432\u043A\u0438. -->\n        <button\n            tuiButton\n            class=\"sc-skeleton self-center\"\n        ></button>\n    </div>\n</div>\n" }]
+            args: [{ standalone: true, selector: 'sc-sandwich-skeleton', template: "<div class=\"w-100\">\n    <div class=\"flex flex-col gap-3\">\n        <!-- \u041F\u043E\u043B\u0435 \u0432\u044B\u0431\u043E\u0440\u0430 \u0442\u043E\u0432\u0430\u0440\u0430. -->\n        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n\n        <!-- \u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \"\u0420\u0430\u0437\u043C\u0435\u0440\u044B \u0438\u0437\u0434\u0435\u043B\u0438\u0439\". -->\n        <div class=\"my-1.5 h-5 w-1/3 rounded bg-sc-light-grey\"></div>\n\n        <!-- \u0422\u0435\u043A\u0441\u0442 \u0441 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u0430\u043C\u0438. -->\n        <div class=\"flex flex-col gap-1\">\n            <div class=\"my-1 h-3 w-2/3 rounded bg-sc-light-grey\"></div>\n            <div class=\"my-1 h-3 w-2/3 rounded bg-sc-light-grey\"></div>\n            <div class=\"my-1 h-3 w-2/3 rounded bg-sc-light-grey\"></div>\n            <div class=\"my-1 h-3 w-2/3 rounded bg-sc-light-grey\"></div>\n        </div>\n\n        <!-- \u0411\u043B\u043E\u043A \u0441 \u0438\u0437\u0434\u0435\u043B\u0438\u044F\u043C\u0438. -->\n        <div class=\"flex flex-col gap-3\">\n            <!-- \u041F\u0435\u0440\u0432\u043E\u0435 \u0438\u0437\u0434\u0435\u043B\u0438\u0435. -->\n            <div class=\"flex grow gap-4\">\n                <div class=\"grid grow grid-cols-3 gap-4\">\n                    <!-- \u0428\u0438\u0440\u0438\u043D\u0430. -->\n                    <div class=\"flex flex-col gap-1\">\n                        <div class=\"my-1 h-3 w-1/2 rounded bg-sc-light-grey\"></div>\n                        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n                        <div class=\"my-1 h-3 w-1/3 rounded bg-sc-light-grey\"></div>\n                        <div class=\"my-1 h-2 w-2/3 rounded bg-sc-light-grey\"></div>\n                    </div>\n                    <!-- \u0414\u043B\u0438\u043D\u0430. -->\n                    <div class=\"flex flex-col gap-1\">\n                        <div class=\"my-1 h-3 w-1/2 rounded bg-sc-light-grey\"></div>\n                        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n                        <div class=\"my-1 h-3 w-1/3 rounded bg-sc-light-grey\"></div>\n                        <div class=\"my-1 h-2 w-2/3 rounded bg-sc-light-grey\"></div>\n                    </div>\n                    <!-- \u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E. -->\n                    <div class=\"flex flex-col gap-1\">\n                        <div class=\"my-1 h-3 w-1/2 rounded bg-sc-light-grey\"></div>\n                        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n                    </div>\n                </div>\n                <div class=\"mt-6 size-8 shrink-0 rounded-sm bg-sc-light-grey\"></div>\n            </div>\n        </div>\n\n        <!-- \u041A\u043D\u043E\u043F\u043A\u0430 \"\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u0434\u0435\u043B\u0438\u0435\". -->\n        <button\n            tuiButton\n            appearance=\"secondary\"\n            class=\"sc-skeleton self-center\"\n            aria-hidden=\"true\"\n        ></button>\n\n        <!-- \u041F\u043E\u043B\u0435 \"\u0418\u0442\u043E\u0433\u043E\u0432\u043E\u0435 \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u043B\u0438\u0441\u0442\u043E\u0432\". -->\n        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n\n        <!-- \u041F\u043E\u043B\u0435 \"\u041C\u0430\u0440\u043A\u0438\u0440\u043E\u0432\u043A\u0430\". -->\n        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n\n        <!-- \u0418\u0442\u043E\u0433\u043E\u0432\u0430\u044F \u0441\u0442\u043E\u0438\u043C\u043E\u0441\u0442\u044C. -->\n        <div class=\"my-2.5 h-6 w-1/3 rounded bg-sc-light-grey\"></div>\n\n        <!-- \u041A\u043D\u043E\u043F\u043A\u0430 \u043E\u0442\u043F\u0440\u0430\u0432\u043A\u0438. -->\n        <button\n            tuiButton\n            class=\"sc-skeleton self-center\"\n            aria-hidden=\"true\"\n        ></button>\n    </div>\n</div>\n" }]
         }] });
 
 /**
@@ -6013,11 +6017,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  */
 class ScSandwichM2SkeletonComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ScSandwichM2SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: ScSandwichM2SkeletonComponent, isStandalone: true, selector: "sc-sandwich-m2-skeleton", ngImport: i0, template: "<div class=\"w-100\">\n    <div class=\"flex flex-col gap-3\">\n        <!-- \u041F\u043E\u043B\u0435 \u0432\u044B\u0431\u043E\u0440\u0430 \u0442\u043E\u0432\u0430\u0440\u0430. -->\n        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n\n        <!-- \u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \"\u0420\u0430\u0437\u043C\u0435\u0440\u044B \u0438\u0437\u0434\u0435\u043B\u0438\u0439\". -->\n        <div class=\"my-1.5 h-5 w-1/3 rounded bg-sc-light-grey\"></div>\n\n        <!-- \u0422\u0435\u043A\u0441\u0442 \u0441 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u0430\u043C\u0438. -->\n        <div class=\"flex flex-col gap-1\">\n            <div class=\"my-1 h-3 w-2/3 rounded bg-sc-light-grey\"></div>\n            <div class=\"my-1 h-3 w-2/3 rounded bg-sc-light-grey\"></div>\n            <div class=\"my-1 h-3 w-2/3 rounded bg-sc-light-grey\"></div>\n            <div class=\"my-1 h-3 w-2/3 rounded bg-sc-light-grey\"></div>\n        </div>\n\n        <!-- \u0411\u043B\u043E\u043A \u0441 \u0438\u0437\u0434\u0435\u043B\u0438\u044F\u043C\u0438. -->\n        <div class=\"flex flex-col gap-3\">\n            <div class=\"flex grow gap-4\">\n                <div class=\"grid grow grid-cols-4 gap-4\">\n                    <div class=\"flex flex-col gap-1\">\n                        <div class=\"my-1 h-3 w-1/2 rounded bg-sc-light-grey\"></div>\n                        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n                    </div>\n                    <div class=\"flex flex-col gap-1\">\n                        <div class=\"my-1 h-3 w-1/2 rounded bg-sc-light-grey\"></div>\n                        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n                    </div>\n                    <div class=\"flex flex-col gap-1\">\n                        <div class=\"my-1 h-3 w-1/2 rounded bg-sc-light-grey\"></div>\n                        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n                    </div>\n                    <div class=\"flex flex-col gap-1\">\n                        <div class=\"my-1 h-3 w-1/2 rounded bg-sc-light-grey\"></div>\n                        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n                    </div>\n                </div>\n                <div class=\"mt-6 size-8 shrink-0 rounded-sm bg-sc-light-grey\"></div>\n            </div>\n        </div>\n\n        <!-- \u041A\u043D\u043E\u043F\u043A\u0430 \"\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u0434\u0435\u043B\u0438\u0435\". -->\n        <button\n            tuiButton\n            appearance=\"secondary\"\n            class=\"sc-skeleton self-center\"\n        ></button>\n\n        <!-- \u0418\u0442\u043E\u0433\u043E\u0432\u0430\u044F \u043F\u043B\u043E\u0449\u0430\u0434\u044C \u0438 \u0441\u0442\u043E\u0438\u043C\u043E\u0441\u0442\u044C. -->\n        <div class=\"my-2.5 h-6 w-1/3 rounded bg-sc-light-grey\"></div>\n\n        <!-- \u041A\u043D\u043E\u043F\u043A\u0430 \u043E\u0442\u043F\u0440\u0430\u0432\u043A\u0438. -->\n        <button\n            tuiButton\n            class=\"sc-skeleton self-center\"\n        ></button>\n    </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: ScSandwichM2SkeletonComponent, isStandalone: true, selector: "sc-sandwich-m2-skeleton", ngImport: i0, template: "<div class=\"w-100\">\n    <div class=\"flex flex-col gap-3\">\n        <!-- \u041F\u043E\u043B\u0435 \u0432\u044B\u0431\u043E\u0440\u0430 \u0442\u043E\u0432\u0430\u0440\u0430. -->\n        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n\n        <!-- \u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \"\u0420\u0430\u0437\u043C\u0435\u0440\u044B \u0438\u0437\u0434\u0435\u043B\u0438\u0439\". -->\n        <div class=\"my-1.5 h-5 w-1/3 rounded bg-sc-light-grey\"></div>\n\n        <!-- \u0422\u0435\u043A\u0441\u0442 \u0441 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u0430\u043C\u0438. -->\n        <div class=\"flex flex-col gap-1\">\n            <div class=\"my-1 h-3 w-2/3 rounded bg-sc-light-grey\"></div>\n            <div class=\"my-1 h-3 w-2/3 rounded bg-sc-light-grey\"></div>\n            <div class=\"my-1 h-3 w-2/3 rounded bg-sc-light-grey\"></div>\n            <div class=\"my-1 h-3 w-2/3 rounded bg-sc-light-grey\"></div>\n        </div>\n\n        <!-- \u0411\u043B\u043E\u043A \u0441 \u0438\u0437\u0434\u0435\u043B\u0438\u044F\u043C\u0438. -->\n        <div class=\"flex flex-col gap-3\">\n            <div class=\"flex grow gap-4\">\n                <div class=\"grid grow grid-cols-4 gap-4\">\n                    <div class=\"flex flex-col gap-1\">\n                        <div class=\"my-1 h-3 w-1/2 rounded bg-sc-light-grey\"></div>\n                        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n                    </div>\n                    <div class=\"flex flex-col gap-1\">\n                        <div class=\"my-1 h-3 w-1/2 rounded bg-sc-light-grey\"></div>\n                        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n                    </div>\n                    <div class=\"flex flex-col gap-1\">\n                        <div class=\"my-1 h-3 w-1/2 rounded bg-sc-light-grey\"></div>\n                        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n                    </div>\n                    <div class=\"flex flex-col gap-1\">\n                        <div class=\"my-1 h-3 w-1/2 rounded bg-sc-light-grey\"></div>\n                        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n                    </div>\n                </div>\n                <div class=\"mt-6 size-8 shrink-0 rounded-sm bg-sc-light-grey\"></div>\n            </div>\n        </div>\n\n        <!-- \u041A\u043D\u043E\u043F\u043A\u0430 \"\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u0434\u0435\u043B\u0438\u0435\". -->\n        <button\n            tuiButton\n            appearance=\"secondary\"\n            class=\"sc-skeleton self-center\"\n            aria-hidden=\"true\"\n        ></button>\n\n        <!-- \u0418\u0442\u043E\u0433\u043E\u0432\u0430\u044F \u043F\u043B\u043E\u0449\u0430\u0434\u044C \u0438 \u0441\u0442\u043E\u0438\u043C\u043E\u0441\u0442\u044C. -->\n        <div class=\"my-2.5 h-6 w-1/3 rounded bg-sc-light-grey\"></div>\n\n        <!-- \u041A\u043D\u043E\u043F\u043A\u0430 \u043E\u0442\u043F\u0440\u0430\u0432\u043A\u0438. -->\n        <button\n            tuiButton\n            class=\"sc-skeleton self-center\"\n            aria-hidden=\"true\"\n        ></button>\n    </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ScSandwichM2SkeletonComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'sc-sandwich-m2-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"w-100\">\n    <div class=\"flex flex-col gap-3\">\n        <!-- \u041F\u043E\u043B\u0435 \u0432\u044B\u0431\u043E\u0440\u0430 \u0442\u043E\u0432\u0430\u0440\u0430. -->\n        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n\n        <!-- \u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \"\u0420\u0430\u0437\u043C\u0435\u0440\u044B \u0438\u0437\u0434\u0435\u043B\u0438\u0439\". -->\n        <div class=\"my-1.5 h-5 w-1/3 rounded bg-sc-light-grey\"></div>\n\n        <!-- \u0422\u0435\u043A\u0441\u0442 \u0441 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u0430\u043C\u0438. -->\n        <div class=\"flex flex-col gap-1\">\n            <div class=\"my-1 h-3 w-2/3 rounded bg-sc-light-grey\"></div>\n            <div class=\"my-1 h-3 w-2/3 rounded bg-sc-light-grey\"></div>\n            <div class=\"my-1 h-3 w-2/3 rounded bg-sc-light-grey\"></div>\n            <div class=\"my-1 h-3 w-2/3 rounded bg-sc-light-grey\"></div>\n        </div>\n\n        <!-- \u0411\u043B\u043E\u043A \u0441 \u0438\u0437\u0434\u0435\u043B\u0438\u044F\u043C\u0438. -->\n        <div class=\"flex flex-col gap-3\">\n            <div class=\"flex grow gap-4\">\n                <div class=\"grid grow grid-cols-4 gap-4\">\n                    <div class=\"flex flex-col gap-1\">\n                        <div class=\"my-1 h-3 w-1/2 rounded bg-sc-light-grey\"></div>\n                        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n                    </div>\n                    <div class=\"flex flex-col gap-1\">\n                        <div class=\"my-1 h-3 w-1/2 rounded bg-sc-light-grey\"></div>\n                        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n                    </div>\n                    <div class=\"flex flex-col gap-1\">\n                        <div class=\"my-1 h-3 w-1/2 rounded bg-sc-light-grey\"></div>\n                        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n                    </div>\n                    <div class=\"flex flex-col gap-1\">\n                        <div class=\"my-1 h-3 w-1/2 rounded bg-sc-light-grey\"></div>\n                        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n                    </div>\n                </div>\n                <div class=\"mt-6 size-8 shrink-0 rounded-sm bg-sc-light-grey\"></div>\n            </div>\n        </div>\n\n        <!-- \u041A\u043D\u043E\u043F\u043A\u0430 \"\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u0434\u0435\u043B\u0438\u0435\". -->\n        <button\n            tuiButton\n            appearance=\"secondary\"\n            class=\"sc-skeleton self-center\"\n        ></button>\n\n        <!-- \u0418\u0442\u043E\u0433\u043E\u0432\u0430\u044F \u043F\u043B\u043E\u0449\u0430\u0434\u044C \u0438 \u0441\u0442\u043E\u0438\u043C\u043E\u0441\u0442\u044C. -->\n        <div class=\"my-2.5 h-6 w-1/3 rounded bg-sc-light-grey\"></div>\n\n        <!-- \u041A\u043D\u043E\u043F\u043A\u0430 \u043E\u0442\u043F\u0440\u0430\u0432\u043A\u0438. -->\n        <button\n            tuiButton\n            class=\"sc-skeleton self-center\"\n        ></button>\n    </div>\n</div>\n" }]
+            args: [{ standalone: true, selector: 'sc-sandwich-m2-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"w-100\">\n    <div class=\"flex flex-col gap-3\">\n        <!-- \u041F\u043E\u043B\u0435 \u0432\u044B\u0431\u043E\u0440\u0430 \u0442\u043E\u0432\u0430\u0440\u0430. -->\n        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n\n        <!-- \u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \"\u0420\u0430\u0437\u043C\u0435\u0440\u044B \u0438\u0437\u0434\u0435\u043B\u0438\u0439\". -->\n        <div class=\"my-1.5 h-5 w-1/3 rounded bg-sc-light-grey\"></div>\n\n        <!-- \u0422\u0435\u043A\u0441\u0442 \u0441 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u0430\u043C\u0438. -->\n        <div class=\"flex flex-col gap-1\">\n            <div class=\"my-1 h-3 w-2/3 rounded bg-sc-light-grey\"></div>\n            <div class=\"my-1 h-3 w-2/3 rounded bg-sc-light-grey\"></div>\n            <div class=\"my-1 h-3 w-2/3 rounded bg-sc-light-grey\"></div>\n            <div class=\"my-1 h-3 w-2/3 rounded bg-sc-light-grey\"></div>\n        </div>\n\n        <!-- \u0411\u043B\u043E\u043A \u0441 \u0438\u0437\u0434\u0435\u043B\u0438\u044F\u043C\u0438. -->\n        <div class=\"flex flex-col gap-3\">\n            <div class=\"flex grow gap-4\">\n                <div class=\"grid grow grid-cols-4 gap-4\">\n                    <div class=\"flex flex-col gap-1\">\n                        <div class=\"my-1 h-3 w-1/2 rounded bg-sc-light-grey\"></div>\n                        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n                    </div>\n                    <div class=\"flex flex-col gap-1\">\n                        <div class=\"my-1 h-3 w-1/2 rounded bg-sc-light-grey\"></div>\n                        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n                    </div>\n                    <div class=\"flex flex-col gap-1\">\n                        <div class=\"my-1 h-3 w-1/2 rounded bg-sc-light-grey\"></div>\n                        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n                    </div>\n                    <div class=\"flex flex-col gap-1\">\n                        <div class=\"my-1 h-3 w-1/2 rounded bg-sc-light-grey\"></div>\n                        <div class=\"mb-4 mt-2 h-10 w-full rounded-sm bg-sc-light-grey\"></div>\n                    </div>\n                </div>\n                <div class=\"mt-6 size-8 shrink-0 rounded-sm bg-sc-light-grey\"></div>\n            </div>\n        </div>\n\n        <!-- \u041A\u043D\u043E\u043F\u043A\u0430 \"\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u0434\u0435\u043B\u0438\u0435\". -->\n        <button\n            tuiButton\n            appearance=\"secondary\"\n            class=\"sc-skeleton self-center\"\n            aria-hidden=\"true\"\n        ></button>\n\n        <!-- \u0418\u0442\u043E\u0433\u043E\u0432\u0430\u044F \u043F\u043B\u043E\u0449\u0430\u0434\u044C \u0438 \u0441\u0442\u043E\u0438\u043C\u043E\u0441\u0442\u044C. -->\n        <div class=\"my-2.5 h-6 w-1/3 rounded bg-sc-light-grey\"></div>\n\n        <!-- \u041A\u043D\u043E\u043F\u043A\u0430 \u043E\u0442\u043F\u0440\u0430\u0432\u043A\u0438. -->\n        <button\n            tuiButton\n            class=\"sc-skeleton self-center\"\n            aria-hidden=\"true\"\n        ></button>\n    </div>\n</div>\n" }]
         }] });
 
 /* eslint-disable no-restricted-syntax,@typescript-eslint/unbound-method */
@@ -6324,7 +6328,7 @@ class ScAddContragentDialogComponent {
         this.contacts.removeAt(index);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ScAddContragentDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ScAddContragentDialogComponent, isStandalone: true, selector: "sc-add-contragent-dialog", ngImport: i0, template: "<form\n    [formGroup]=\"form\"\n    (ngSubmit)=\"onSubmit.next()\"\n    class=\"flex flex-col gap-4\"\n>\n    <tui-stepper [(activeItemIndex)]=\"stepIndex\">\n        @for (step of steps; track $index) {\n            @if ($index !== 2 || form.controls.contragent.controls['bankAccounts']) {\n                <button\n                    [stepState]=\"!canNextStep($index) ? 'error' : 'pass'\"\n                    [attr.disabled]=\"$index && !canNextStep($index - 1) ? '' : null\"\n                    type=\"button\"\n                    tuiStep\n                >\n                    {{ step }}\n                </button>\n            }\n        }\n    </tui-stepper>\n    <tui-elastic-container>\n        <sc-new-contragent-form [class.!hidden]=\"stepIndex !== 0\" />\n\n        <div [class.!hidden]=\"stepIndex !== 1\">\n            @if (contacts) {\n                <div class=\"flex flex-col gap-5 pb-1\">\n                    <p class=\"text-lg font-bold\">\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u044B</p>\n                    @for (contact of contacts.controls; track contact; let index = $index; let count = $count; let last = $last) {\n                        <div class=\"flex flex-col gap-3\">\n                            <div class=\"flex h-10 items-center justify-between\">\n                                <p class=\"font-bold\">\u041A\u043E\u043D\u0442\u0430\u043A\u0442 \u2116{{ index + 1 }}:</p>\n                                @if (count - 1) {\n                                    <button\n                                        tuiIconButton\n                                        appearance=\"secondary\"\n                                        (click)=\"removeContactGroup(index)\"\n                                        iconStart=\"@tui.trash-2\"\n                                    ></button>\n                                }\n                            </div>\n                            <sc-new-contact-form [form]=\"contact\" />\n                            @if (!last) {\n                                <hr class=\"h-px w-full bg-tui-base-04\" />\n                            }\n                        </div>\n                    }\n                    <button\n                        tuiButton\n                        iconStart=\"@tui.plus\"\n                        appearance=\"secondary\"\n                        (click)=\"addContactGroup()\"\n                        type=\"button\"\n                        class=\"self-center\"\n                    >\n                        \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043A\u043E\u043D\u0442\u0430\u043A\u0442\n                    </button>\n                </div>\n            }\n        </div>\n\n        <div [class.!hidden]=\"stepIndex !== 2\">\n            @if (bankAccounts) {\n                <div class=\"flex flex-col gap-5 pb-1\">\n                    <p class=\"text-lg font-bold\">\u0411\u0430\u043D\u043A\u043E\u0432\u0441\u043A\u0438\u0435 \u0440\u0435\u043A\u0432\u0438\u0437\u0438\u0442\u044B</p>\n                    @for (bankAccount of bankAccounts.controls; track bankAccount; let index = $index; let count = $count; let last = $last) {\n                        <div class=\"flex flex-col gap-3\">\n                            <div class=\"flex h-12 items-center justify-between\">\n                                <p class=\"font-bold\">\u0411\u0430\u043D\u043A\u043E\u0432\u0441\u043A\u0438\u0435 \u0440\u0435\u043A\u0432\u0438\u0437\u0438\u0442\u044B \u2116{{ index + 1 }}:</p>\n                                @if (count - 1) {\n                                    <button\n                                        tuiIconButton\n                                        appearance=\"secondary\"\n                                        (click)=\"removeBankAccountGroup(index)\"\n                                        iconStart=\"@tui.trash-2\"\n                                    ></button>\n                                }\n                            </div>\n                            @if (form.controls.contragent.controls['opf'].value; as opf) {\n                                <sc-new-contragent-bank-account-form\n                                    [form]=\"bankAccount\"\n                                    [opf]=\"opf\"\n                                />\n                            }\n                            @if (!last) {\n                                <hr class=\"h-px w-full bg-tui-base-04\" />\n                            }\n                        </div>\n                    }\n                    <button\n                        tuiButton\n                        iconStart=\"@tui.plus\"\n                        appearance=\"secondary\"\n                        (click)=\"addBankAccountGroup()\"\n                        type=\"button\"\n                        class=\"self-center\"\n                    >\n                        \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0431\u0430\u043D\u043A\u043E\u0432\u0441\u043A\u0438\u0435 \u0440\u0435\u043A\u0432\u0438\u0437\u0438\u0442\u044B\n                    </button>\n                </div>\n            }\n        </div>\n    </tui-elastic-container>\n    <div class=\"flex justify-center gap-2\">\n        @if (stepIndex > 0) {\n            <button\n                tuiButton\n                appearance=\"secondary\"\n                type=\"button\"\n                (click)=\"stepIndex = (stepIndex - 1) % 3\"\n            >\n                \u041D\u0430\u0437\u0430\u0434\n            </button>\n        }\n        @if (stepIndex === 0) {\n            <button\n                tuiButton\n                (click)=\"context?.$implicit?.complete()\"\n                type=\"button\"\n                appearance=\"secondary\"\n            >\n                \u041E\u0442\u043C\u0435\u043D\u0430\n            </button>\n        }\n        @if (stepIndex === 2 || (stepIndex === 1 && !form.controls.contragent.controls['bankAccounts'])) {\n            <button\n                tuiButton\n                [disabled]=\"form.invalid\"\n                [loading]=\"!!(loading$ | async)\"\n                type=\"submit\"\n                class=\"self-center\"\n            >\n                \u0421\u043E\u0437\u0434\u0430\u0442\u044C\n            </button>\n        } @else {\n            <button\n                tuiButton\n                [disabled]=\"!canNextStep(stepIndex)\"\n                type=\"button\"\n                (click)=\"navigate(1)\"\n            >\n                \u0414\u0430\u043B\u0435\u0435\n            </button>\n        }\n    </div>\n</form>\n", styles: ["tui-carousel{--tui-carousel-padding: .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiButtonLoading, selector: "[tuiButton][loading],[tuiIconButton][loading]", inputs: ["size", "loading"] }, { kind: "component", type: i1$1.TuiStepperComponent, selector: "tui-stepper", inputs: ["orientation", "activeItemIndex"], outputs: ["activeItemIndexChange"] }, { kind: "component", type: i1$1.TuiStep, selector: "button[tuiStep], a[tuiStep]:not([routerLink]), a[tuiStep][routerLink][routerLinkActive]", inputs: ["stepState", "icon"] }, { kind: "component", type: TuiElasticContainer, selector: "tui-elastic-container" }, { kind: "component", type: ScNewContragentFormComponent, selector: "sc-new-contragent-form", inputs: ["opfControl"] }, { kind: "component", type: ScNewContragentBankAccountsFormComponent, selector: "sc-new-contragent-bank-account-form", inputs: ["form", "opf"] }, { kind: "component", type: ScNewContactFormComponent, selector: "sc-new-contact-form", inputs: ["form"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ScAddContragentDialogComponent, isStandalone: true, selector: "sc-add-contragent-dialog", ngImport: i0, template: "<form\n    [formGroup]=\"form\"\n    (ngSubmit)=\"onSubmit.next()\"\n    class=\"flex flex-col gap-4\"\n>\n    <tui-stepper [(activeItemIndex)]=\"stepIndex\">\n        @for (step of steps; track $index) {\n            @if ($index !== 2 || form.controls.contragent.controls['bankAccounts']) {\n                <button\n                    [stepState]=\"!canNextStep($index) ? 'error' : 'pass'\"\n                    [attr.disabled]=\"$index && !canNextStep($index - 1) ? '' : null\"\n                    type=\"button\"\n                    tuiStep\n                >\n                    {{ step }}\n                </button>\n            }\n        }\n    </tui-stepper>\n    <tui-elastic-container>\n        <sc-new-contragent-form [class.!hidden]=\"stepIndex !== 0\" />\n\n        <div [class.!hidden]=\"stepIndex !== 1\">\n            @if (contacts) {\n                <div class=\"flex flex-col gap-5 pb-1\">\n                    <p class=\"text-lg font-bold\">\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u044B</p>\n                    @for (contact of contacts.controls; track contact; let index = $index; let count = $count; let last = $last) {\n                        <div class=\"flex flex-col gap-3\">\n                            <div class=\"flex h-10 items-center justify-between\">\n                                <p class=\"font-bold\">\u041A\u043E\u043D\u0442\u0430\u043A\u0442 \u2116{{ index + 1 }}:</p>\n                                @if (count - 1) {\n                                    <button\n                                        tuiIconButton\n                                        appearance=\"secondary\"\n                                        (click)=\"removeContactGroup(index)\"\n                                    >\n                                        <tui-icon icon=\"@tui.trash-2\" />\n                                    </button>\n                                }\n                            </div>\n                            <sc-new-contact-form [form]=\"contact\" />\n                            @if (!last) {\n                                <hr class=\"h-px w-full bg-tui-base-04\" />\n                            }\n                        </div>\n                    }\n                    <button\n                        tuiButton\n                        iconStart=\"@tui.plus\"\n                        appearance=\"secondary\"\n                        (click)=\"addContactGroup()\"\n                        type=\"button\"\n                        class=\"self-center\"\n                    >\n                        \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043A\u043E\u043D\u0442\u0430\u043A\u0442\n                    </button>\n                </div>\n            }\n        </div>\n\n        <div [class.!hidden]=\"stepIndex !== 2\">\n            @if (bankAccounts) {\n                <div class=\"flex flex-col gap-5 pb-1\">\n                    <p class=\"text-lg font-bold\">\u0411\u0430\u043D\u043A\u043E\u0432\u0441\u043A\u0438\u0435 \u0440\u0435\u043A\u0432\u0438\u0437\u0438\u0442\u044B</p>\n                    @for (bankAccount of bankAccounts.controls; track bankAccount; let index = $index; let count = $count; let last = $last) {\n                        <div class=\"flex flex-col gap-3\">\n                            <div class=\"flex h-12 items-center justify-between\">\n                                <p class=\"font-bold\">\u0411\u0430\u043D\u043A\u043E\u0432\u0441\u043A\u0438\u0435 \u0440\u0435\u043A\u0432\u0438\u0437\u0438\u0442\u044B \u2116{{ index + 1 }}:</p>\n                                @if (count - 1) {\n                                    <button\n                                        tuiIconButton\n                                        appearance=\"secondary\"\n                                        (click)=\"removeBankAccountGroup(index)\"\n                                    >\n                                        <tui-icon icon=\"@tui.trash-2\" />\n                                    </button>\n                                }\n                            </div>\n                            @if (form.controls.contragent.controls['opf'].value; as opf) {\n                                <sc-new-contragent-bank-account-form\n                                    [form]=\"bankAccount\"\n                                    [opf]=\"opf\"\n                                />\n                            }\n                            @if (!last) {\n                                <hr class=\"h-px w-full bg-tui-base-04\" />\n                            }\n                        </div>\n                    }\n                    <button\n                        tuiButton\n                        iconStart=\"@tui.plus\"\n                        appearance=\"secondary\"\n                        (click)=\"addBankAccountGroup()\"\n                        type=\"button\"\n                        class=\"self-center\"\n                    >\n                        \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0431\u0430\u043D\u043A\u043E\u0432\u0441\u043A\u0438\u0435 \u0440\u0435\u043A\u0432\u0438\u0437\u0438\u0442\u044B\n                    </button>\n                </div>\n            }\n        </div>\n    </tui-elastic-container>\n    <div class=\"flex justify-center gap-2\">\n        @if (stepIndex > 0) {\n            <button\n                tuiButton\n                appearance=\"secondary\"\n                type=\"button\"\n                (click)=\"stepIndex = (stepIndex - 1) % 3\"\n            >\n                \u041D\u0430\u0437\u0430\u0434\n            </button>\n        }\n        @if (stepIndex === 0) {\n            <button\n                tuiButton\n                (click)=\"context?.$implicit?.complete()\"\n                type=\"button\"\n                appearance=\"secondary\"\n            >\n                \u041E\u0442\u043C\u0435\u043D\u0430\n            </button>\n        }\n        @if (stepIndex === 2 || (stepIndex === 1 && !form.controls.contragent.controls['bankAccounts'])) {\n            <button\n                tuiButton\n                [disabled]=\"form.invalid\"\n                [loading]=\"!!(loading$ | async)\"\n                type=\"submit\"\n                class=\"self-center\"\n            >\n                \u0421\u043E\u0437\u0434\u0430\u0442\u044C\n            </button>\n        } @else {\n            <button\n                tuiButton\n                [disabled]=\"!canNextStep(stepIndex)\"\n                type=\"button\"\n                (click)=\"navigate(1)\"\n            >\n                \u0414\u0430\u043B\u0435\u0435\n            </button>\n        }\n    </div>\n</form>\n", styles: ["tui-carousel{--tui-carousel-padding: .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "component", type: TuiButtonLoading, selector: "[tuiButton][loading],[tuiIconButton][loading]", inputs: ["size", "loading"] }, { kind: "component", type: i1$1.TuiStepperComponent, selector: "tui-stepper", inputs: ["orientation", "activeItemIndex"], outputs: ["activeItemIndexChange"] }, { kind: "component", type: i1$1.TuiStep, selector: "button[tuiStep], a[tuiStep]:not([routerLink]), a[tuiStep][routerLink][routerLinkActive]", inputs: ["stepState", "icon"] }, { kind: "component", type: TuiElasticContainer, selector: "tui-elastic-container" }, { kind: "component", type: ScNewContragentFormComponent, selector: "sc-new-contragent-form", inputs: ["opfControl"] }, { kind: "component", type: ScNewContragentBankAccountsFormComponent, selector: "sc-new-contragent-bank-account-form", inputs: ["form", "opf"] }, { kind: "component", type: ScNewContactFormComponent, selector: "sc-new-contact-form", inputs: ["form"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ScAddContragentDialogComponent, decorators: [{
             type: Component,
@@ -6332,13 +6336,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         ReactiveFormsModule,
                         AsyncPipe,
                         TuiButton,
+                        TuiIcon,
                         TuiButtonLoading,
                         TuiStepper,
                         TuiElasticContainer,
                         ScNewContragentFormComponent,
                         ScNewContragentBankAccountsFormComponent,
                         ScNewContactFormComponent,
-                    ], template: "<form\n    [formGroup]=\"form\"\n    (ngSubmit)=\"onSubmit.next()\"\n    class=\"flex flex-col gap-4\"\n>\n    <tui-stepper [(activeItemIndex)]=\"stepIndex\">\n        @for (step of steps; track $index) {\n            @if ($index !== 2 || form.controls.contragent.controls['bankAccounts']) {\n                <button\n                    [stepState]=\"!canNextStep($index) ? 'error' : 'pass'\"\n                    [attr.disabled]=\"$index && !canNextStep($index - 1) ? '' : null\"\n                    type=\"button\"\n                    tuiStep\n                >\n                    {{ step }}\n                </button>\n            }\n        }\n    </tui-stepper>\n    <tui-elastic-container>\n        <sc-new-contragent-form [class.!hidden]=\"stepIndex !== 0\" />\n\n        <div [class.!hidden]=\"stepIndex !== 1\">\n            @if (contacts) {\n                <div class=\"flex flex-col gap-5 pb-1\">\n                    <p class=\"text-lg font-bold\">\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u044B</p>\n                    @for (contact of contacts.controls; track contact; let index = $index; let count = $count; let last = $last) {\n                        <div class=\"flex flex-col gap-3\">\n                            <div class=\"flex h-10 items-center justify-between\">\n                                <p class=\"font-bold\">\u041A\u043E\u043D\u0442\u0430\u043A\u0442 \u2116{{ index + 1 }}:</p>\n                                @if (count - 1) {\n                                    <button\n                                        tuiIconButton\n                                        appearance=\"secondary\"\n                                        (click)=\"removeContactGroup(index)\"\n                                        iconStart=\"@tui.trash-2\"\n                                    ></button>\n                                }\n                            </div>\n                            <sc-new-contact-form [form]=\"contact\" />\n                            @if (!last) {\n                                <hr class=\"h-px w-full bg-tui-base-04\" />\n                            }\n                        </div>\n                    }\n                    <button\n                        tuiButton\n                        iconStart=\"@tui.plus\"\n                        appearance=\"secondary\"\n                        (click)=\"addContactGroup()\"\n                        type=\"button\"\n                        class=\"self-center\"\n                    >\n                        \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043A\u043E\u043D\u0442\u0430\u043A\u0442\n                    </button>\n                </div>\n            }\n        </div>\n\n        <div [class.!hidden]=\"stepIndex !== 2\">\n            @if (bankAccounts) {\n                <div class=\"flex flex-col gap-5 pb-1\">\n                    <p class=\"text-lg font-bold\">\u0411\u0430\u043D\u043A\u043E\u0432\u0441\u043A\u0438\u0435 \u0440\u0435\u043A\u0432\u0438\u0437\u0438\u0442\u044B</p>\n                    @for (bankAccount of bankAccounts.controls; track bankAccount; let index = $index; let count = $count; let last = $last) {\n                        <div class=\"flex flex-col gap-3\">\n                            <div class=\"flex h-12 items-center justify-between\">\n                                <p class=\"font-bold\">\u0411\u0430\u043D\u043A\u043E\u0432\u0441\u043A\u0438\u0435 \u0440\u0435\u043A\u0432\u0438\u0437\u0438\u0442\u044B \u2116{{ index + 1 }}:</p>\n                                @if (count - 1) {\n                                    <button\n                                        tuiIconButton\n                                        appearance=\"secondary\"\n                                        (click)=\"removeBankAccountGroup(index)\"\n                                        iconStart=\"@tui.trash-2\"\n                                    ></button>\n                                }\n                            </div>\n                            @if (form.controls.contragent.controls['opf'].value; as opf) {\n                                <sc-new-contragent-bank-account-form\n                                    [form]=\"bankAccount\"\n                                    [opf]=\"opf\"\n                                />\n                            }\n                            @if (!last) {\n                                <hr class=\"h-px w-full bg-tui-base-04\" />\n                            }\n                        </div>\n                    }\n                    <button\n                        tuiButton\n                        iconStart=\"@tui.plus\"\n                        appearance=\"secondary\"\n                        (click)=\"addBankAccountGroup()\"\n                        type=\"button\"\n                        class=\"self-center\"\n                    >\n                        \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0431\u0430\u043D\u043A\u043E\u0432\u0441\u043A\u0438\u0435 \u0440\u0435\u043A\u0432\u0438\u0437\u0438\u0442\u044B\n                    </button>\n                </div>\n            }\n        </div>\n    </tui-elastic-container>\n    <div class=\"flex justify-center gap-2\">\n        @if (stepIndex > 0) {\n            <button\n                tuiButton\n                appearance=\"secondary\"\n                type=\"button\"\n                (click)=\"stepIndex = (stepIndex - 1) % 3\"\n            >\n                \u041D\u0430\u0437\u0430\u0434\n            </button>\n        }\n        @if (stepIndex === 0) {\n            <button\n                tuiButton\n                (click)=\"context?.$implicit?.complete()\"\n                type=\"button\"\n                appearance=\"secondary\"\n            >\n                \u041E\u0442\u043C\u0435\u043D\u0430\n            </button>\n        }\n        @if (stepIndex === 2 || (stepIndex === 1 && !form.controls.contragent.controls['bankAccounts'])) {\n            <button\n                tuiButton\n                [disabled]=\"form.invalid\"\n                [loading]=\"!!(loading$ | async)\"\n                type=\"submit\"\n                class=\"self-center\"\n            >\n                \u0421\u043E\u0437\u0434\u0430\u0442\u044C\n            </button>\n        } @else {\n            <button\n                tuiButton\n                [disabled]=\"!canNextStep(stepIndex)\"\n                type=\"button\"\n                (click)=\"navigate(1)\"\n            >\n                \u0414\u0430\u043B\u0435\u0435\n            </button>\n        }\n    </div>\n</form>\n", styles: ["tui-carousel{--tui-carousel-padding: .5rem}\n"] }]
+                    ], template: "<form\n    [formGroup]=\"form\"\n    (ngSubmit)=\"onSubmit.next()\"\n    class=\"flex flex-col gap-4\"\n>\n    <tui-stepper [(activeItemIndex)]=\"stepIndex\">\n        @for (step of steps; track $index) {\n            @if ($index !== 2 || form.controls.contragent.controls['bankAccounts']) {\n                <button\n                    [stepState]=\"!canNextStep($index) ? 'error' : 'pass'\"\n                    [attr.disabled]=\"$index && !canNextStep($index - 1) ? '' : null\"\n                    type=\"button\"\n                    tuiStep\n                >\n                    {{ step }}\n                </button>\n            }\n        }\n    </tui-stepper>\n    <tui-elastic-container>\n        <sc-new-contragent-form [class.!hidden]=\"stepIndex !== 0\" />\n\n        <div [class.!hidden]=\"stepIndex !== 1\">\n            @if (contacts) {\n                <div class=\"flex flex-col gap-5 pb-1\">\n                    <p class=\"text-lg font-bold\">\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u044B</p>\n                    @for (contact of contacts.controls; track contact; let index = $index; let count = $count; let last = $last) {\n                        <div class=\"flex flex-col gap-3\">\n                            <div class=\"flex h-10 items-center justify-between\">\n                                <p class=\"font-bold\">\u041A\u043E\u043D\u0442\u0430\u043A\u0442 \u2116{{ index + 1 }}:</p>\n                                @if (count - 1) {\n                                    <button\n                                        tuiIconButton\n                                        appearance=\"secondary\"\n                                        (click)=\"removeContactGroup(index)\"\n                                    >\n                                        <tui-icon icon=\"@tui.trash-2\" />\n                                    </button>\n                                }\n                            </div>\n                            <sc-new-contact-form [form]=\"contact\" />\n                            @if (!last) {\n                                <hr class=\"h-px w-full bg-tui-base-04\" />\n                            }\n                        </div>\n                    }\n                    <button\n                        tuiButton\n                        iconStart=\"@tui.plus\"\n                        appearance=\"secondary\"\n                        (click)=\"addContactGroup()\"\n                        type=\"button\"\n                        class=\"self-center\"\n                    >\n                        \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043A\u043E\u043D\u0442\u0430\u043A\u0442\n                    </button>\n                </div>\n            }\n        </div>\n\n        <div [class.!hidden]=\"stepIndex !== 2\">\n            @if (bankAccounts) {\n                <div class=\"flex flex-col gap-5 pb-1\">\n                    <p class=\"text-lg font-bold\">\u0411\u0430\u043D\u043A\u043E\u0432\u0441\u043A\u0438\u0435 \u0440\u0435\u043A\u0432\u0438\u0437\u0438\u0442\u044B</p>\n                    @for (bankAccount of bankAccounts.controls; track bankAccount; let index = $index; let count = $count; let last = $last) {\n                        <div class=\"flex flex-col gap-3\">\n                            <div class=\"flex h-12 items-center justify-between\">\n                                <p class=\"font-bold\">\u0411\u0430\u043D\u043A\u043E\u0432\u0441\u043A\u0438\u0435 \u0440\u0435\u043A\u0432\u0438\u0437\u0438\u0442\u044B \u2116{{ index + 1 }}:</p>\n                                @if (count - 1) {\n                                    <button\n                                        tuiIconButton\n                                        appearance=\"secondary\"\n                                        (click)=\"removeBankAccountGroup(index)\"\n                                    >\n                                        <tui-icon icon=\"@tui.trash-2\" />\n                                    </button>\n                                }\n                            </div>\n                            @if (form.controls.contragent.controls['opf'].value; as opf) {\n                                <sc-new-contragent-bank-account-form\n                                    [form]=\"bankAccount\"\n                                    [opf]=\"opf\"\n                                />\n                            }\n                            @if (!last) {\n                                <hr class=\"h-px w-full bg-tui-base-04\" />\n                            }\n                        </div>\n                    }\n                    <button\n                        tuiButton\n                        iconStart=\"@tui.plus\"\n                        appearance=\"secondary\"\n                        (click)=\"addBankAccountGroup()\"\n                        type=\"button\"\n                        class=\"self-center\"\n                    >\n                        \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0431\u0430\u043D\u043A\u043E\u0432\u0441\u043A\u0438\u0435 \u0440\u0435\u043A\u0432\u0438\u0437\u0438\u0442\u044B\n                    </button>\n                </div>\n            }\n        </div>\n    </tui-elastic-container>\n    <div class=\"flex justify-center gap-2\">\n        @if (stepIndex > 0) {\n            <button\n                tuiButton\n                appearance=\"secondary\"\n                type=\"button\"\n                (click)=\"stepIndex = (stepIndex - 1) % 3\"\n            >\n                \u041D\u0430\u0437\u0430\u0434\n            </button>\n        }\n        @if (stepIndex === 0) {\n            <button\n                tuiButton\n                (click)=\"context?.$implicit?.complete()\"\n                type=\"button\"\n                appearance=\"secondary\"\n            >\n                \u041E\u0442\u043C\u0435\u043D\u0430\n            </button>\n        }\n        @if (stepIndex === 2 || (stepIndex === 1 && !form.controls.contragent.controls['bankAccounts'])) {\n            <button\n                tuiButton\n                [disabled]=\"form.invalid\"\n                [loading]=\"!!(loading$ | async)\"\n                type=\"submit\"\n                class=\"self-center\"\n            >\n                \u0421\u043E\u0437\u0434\u0430\u0442\u044C\n            </button>\n        } @else {\n            <button\n                tuiButton\n                [disabled]=\"!canNextStep(stepIndex)\"\n                type=\"button\"\n                (click)=\"navigate(1)\"\n            >\n                \u0414\u0430\u043B\u0435\u0435\n            </button>\n        }\n    </div>\n</form>\n", styles: ["tui-carousel{--tui-carousel-padding: .5rem}\n"] }]
         }] });
 
 /**
@@ -7068,7 +7073,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  */
 // eslint-disable-next-line unicorn/consistent-function-scoping
 const SC_ERROR_CHANGE_HANDLER = new InjectionToken(ngDevMode ? 'SC_ERROR_CHANGE_HANDLER' : '', {
-    factory: () => () => noop,
+    factory: () => () => noop$1,
 });
 
 /**
@@ -7773,7 +7778,7 @@ class ScOrderItemComponent extends AbstractScPriceCard {
                 appearance: signal('textfield'),
             }),
             tuiHintOptionsProvider({ direction: 'top', showDelay: 100, hideDelay: 100 }),
-        ], usesInheritance: true, ngImport: i0, template: "@if (product && orderItem) {\n    <div class=\"@container relative flex w-full gap-4 rounded-xl p-1 text-body-s hover:bg-tui-background-neutral-1\">\n        <sc-noindex-wrapper>\n            @let isDisabled = product.isHidden || product.isNull;\n            <sc-hover-image-carousel\n                (click)=\"isDisabled ? null : clickCardEvent.emit()\"\n                [images]=\"!isMobile ? getCardImagePreviewList(product) : [getCardImagePreview()]\"\n                [isShowActions]=\"false\"\n                class=\"aspect-square w-24 shrink-0 cursor-pointer self-start\"\n            />\n            <div class=\"flex w-full flex-col gap-y-1 gap-x-4 @5xl:flex-row @5xl:items-center @5xl:gap-5\">\n                <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n                    <div\n                        [tuiHighlight]=\"(search$ | async) ?? ''\"\n                        class=\"text-tui-text-02\"\n                    >\n                        \u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}\n                    </div>\n                    <div class=\"flex flex-col gap-1\">\n                        <a\n                            tuiLink\n                            [attr.href]=\"href ?? null\"\n                            [tuiHighlight]=\"(search$ | async) ?? ''\"\n                            (click)=\"$event.preventDefault(); clickCardEvent.emit()\"\n                            [class.disabled]=\"isDisabled\"\n                            class=\"!text-body-m-bold\"\n                        >\n                            {{ product.name }}\n                        </a>\n                        @if (product.supplierSku) {\n                            <span class=\"text-tui-text-02\"> \u0410\u0440\u0442\u0438\u043A\u0443\u043B \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u0434\u0438\u0442\u0435\u043B\u044F: {{ product.supplierSku }} </span>\n                        }\n                        @if (product.pack) {\n                            <div class=\"flex items-center gap-1 text-tui-text-02\">\n                                \u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}\n                                @if (product.ignoreMinCountCheck) {\n                                    <tui-icon\n                                        icon=\"@tui.package\"\n                                        [tuiHint]=\"minCountHint\"\n                                        [tuiHintShowDelay]=\"100\"\n                                        tuiHintDirection=\"top\"\n                                        class=\"text-body-xl text-tui-text-01 opacity-90\"\n                                    />\n                                    <ng-template #minCountHint>\n                                        \u0414\u043E\u0441\u0442\u0443\u043F\u0435\u043D \u0437\u0430\u043A\u0430\u0437 <br />\n                                        \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u043B\u044C\u043D\u043E\u0433\u043E <br />\n                                        \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u0430\n                                    </ng-template>\n                                }\n                            </div>\n                        }\n\n                        <sc-cost-with-discount\n                            scPrint=\"cost\"\n                            [product]=\"product\"\n                        />\n                    </div>\n                    @if (orderItem.specificationImgUrl) {\n                        <a\n                            tuiLink\n                            (click)=\"showSpecification(specificationPreview)\"\n                            [class.disabled]=\"isDisabled\"\n                        >\n                            \u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F\n                        </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                <div class=\"grid grid-cols-1 @lg:grid-cols-3 gap-2 @2xl:gap-4 @2xl:grid-rows-1\">\n                    <div class=\"grid grid-cols-1 items-center @lg:gap-2 @2xl:grid-cols-2 @lg:col-span-2\">\n                        <!-- \u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u0442\u043E\u0432\u0430\u0440\u0430. -->\n                        @if (isShowEditControls() && showQuantityControl) {\n                            <!-- \u041F\u043E\u043B\u0435 \u0432\u0432\u043E\u0434\u0430 \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0442\u043E\u0432\u0430\u0440\u0430. -->\n                            <sc-input-quantity\n                                #inputQuantity\n                                [tuiAutoFocus]=\"autoFocuseQuantityInput()\"\n                                [formControl]=\"quantityControl\"\n                                size=\"m\"\n                                [showCross]=\"false\"\n                                [isDisabled]=\"isDisabled\"\n                                [step]=\"getProductMultiplicity(product)\"\n                                [ignoreStepValidators]=\"product.ignoreMinCountCheck\"\n                                [showLoader]=\"showLoader()\"\n                                (clickClearEvent)=\"clickClearEvent.emit(orderItem)\"\n                                (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n                                class=\"w-32 shrink-0\"\n                            />\n                        } @else {\n                            <button\n                                [appearance]=\"isShowEditControls() ? 'action-grayscale' : ''\"\n                                tuiTheme=\"light\"\n                                tuiHint=\"\u0414\u043B\u044F \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u044F \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0432\u043E\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435\u0441\u044C \u043A\u043E\u043D\u0444\u0438\u0433\u0443\u0440\u0430\u0442\u043E\u0440\u043E\u043C\"\n                                (tuiHintVisible)=\"configuratorHintVisible($event)\"\n                                tuiLink\n                                [style.text-decoration-line]=\"isShowEditControls() ? 'underline' : 'none'\"\n                                [class.pointer-events-none]=\"!isShowEditControls()\"\n                            >\n                                <div class=\"!text-body-m text-start\">\n                                    \u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E:\n                                    <strong> {{ orderItem.quantity }} \u0448\u0442.</strong>\n                                </div>\n                            </button>\n                        }\n\n                        @let showAdditionalInfo = orderItem.configurator || orderItem.height || orderItem.length || orderItem.width || orderItem.marker;\n                        @if (showAdditionalInfo) {\n                            <div class=\"flex items-center gap-2 @lg:gap-3 max-w-min\">\n                                <!-- \u041A\u043D\u043E\u043F\u043A\u0430 \u0440\u0435\u0434\u0430\u043A\u0442\u0438\u0440\u043E\u0432\u0430\u043D\u0438\u044F \u0442\u043E\u0432\u0430\u0440\u0430. -->\n                                @if (isShowEditControls()) {\n                                    <button\n                                        tuiIconButton\n                                        iconStart=\"@tui.settings\"\n                                        [disabled]=\"isDisabled\"\n                                        [loading]=\"showLoader()\"\n                                        (click)=\"clickSettings.emit()\"\n                                        size=\"s\"\n                                        [appearance]=\"isConfiguratorHintVisible() ? 'primary' : 'secondary'\"\n                                        class=\"shrink-0\"\n                                    ></button>\n                                }\n\n                                <!-- \u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u0430\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F \u043E \u0442\u043E\u0432\u0430\u0440\u0435. -->\n                                <div\n                                    class=\"flex flex-col gap-x-1 text-tui-base-07\"\n                                    [class.text-body-m]=\"!isShowEditControls()\"\n                                >\n                                    @if (orderItem.marker) {\n                                        <p>\u041C\u0430\u0440\u043A\u0438\u0440\u043E\u0432\u043A\u0430: {{ orderItem.marker }}</p>\n                                    }\n                                    @if (orderItem.width) {\n                                        <button\n                                            [appearance]=\"isShowEditControls() ? 'action-grayscale' : ''\"\n                                            tuiTheme=\"light\"\n                                            tuiHint=\"\u0414\u043B\u044F \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u044F \u0448\u0438\u0440\u0438\u043D\u044B \u0432\u043E\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435\u0441\u044C \u043A\u043E\u043D\u0444\u0438\u0433\u0443\u0440\u0430\u0442\u043E\u0440\u043E\u043C\"\n                                            (tuiHintVisible)=\"configuratorHintVisible($event)\"\n                                            tuiLink\n                                            [style.text-decoration-line]=\"isShowEditControls() ? 'underline' : 'none'\"\n                                            [class.pointer-events-none]=\"!isShowEditControls()\"\n                                            class=\"text-body-s self-start whitespace-nowrap\"\n                                        >\n                                            \u0428\u0438\u0440\u0438\u043D\u0430: <span class=\"text-body-s-bold\">{{ orderItem.width }} \u043C.</span>\n                                        </button>\n                                    }\n                                    @if (orderItem.height) {\n                                        <button\n                                            [appearance]=\"isShowEditControls() ? 'action-grayscale' : ''\"\n                                            tuiTheme=\"light\"\n                                            tuiHint=\"\u0414\u043B\u044F \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u044F \u0432\u044B\u0441\u043E\u0442\u044B \u0432\u043E\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435\u0441\u044C \u043A\u043E\u043D\u0444\u0438\u0433\u0443\u0440\u0430\u0442\u043E\u0440\u043E\u043C\"\n                                            (tuiHintVisible)=\"configuratorHintVisible($event)\"\n                                            tuiLink\n                                            [style.text-decoration-line]=\"isShowEditControls() ? 'underline' : 'none'\"\n                                            [class.pointer-events-none]=\"!isShowEditControls()\"\n                                            class=\"text-body-s self-start whitespace-nowrap\"\n                                        >\n                                            \u0412\u044B\u0441\u043E\u0442\u0430: <span class=\"text-body-s-bold\">{{ orderItem.height }} \u043C.</span>\n                                        </button>\n                                    } @else if (orderItem.length) {\n                                        <button\n                                            [appearance]=\"isShowEditControls() ? 'action-grayscale' : ''\"\n                                            tuiTheme=\"light\"\n                                            tuiHint=\"\u0414\u043B\u044F \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u044F \u0434\u043B\u0438\u043D\u044B \u0432\u043E\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435\u0441\u044C \u043A\u043E\u043D\u0444\u0438\u0433\u0443\u0440\u0430\u0442\u043E\u0440\u043E\u043C\"\n                                            (tuiHintVisible)=\"configuratorHintVisible($event)\"\n                                            tuiLink\n                                            [style.text-decoration-line]=\"isShowEditControls() ? 'underline' : 'none'\"\n                                            [class.pointer-events-none]=\"!isShowEditControls()\"\n                                            class=\"text-body-s self-start whitespace-nowrap\"\n                                        >\n                                            \u0414\u043B\u0438\u043D\u0430: <span class=\"text-body-s-bold\">{{ orderItem.length }} \u043C.</span>\n                                        </button>\n                                    }\n                                </div>\n                            </div>\n                        }\n                    </div>\n\n                    <!-- \u0421\u0443\u043C\u043C\u0430 \u0442\u043E\u0432\u0430\u0440\u0430 \u0438 \u0441\u043A\u043B\u0430\u0434\u0441\u043A\u043E\u0435 \u043D\u0430\u043B\u0438\u0447\u0438\u0435. -->\n                    <div\n                        scPrint=\"cost\"\n                        class=\"flex min-w-[11rem] flex-col @lg:justify-end @2xl:!justify-center text-body-m\"\n                    >\n                        <p class=\"whitespace-nowrap\">\n                            \u0421\u0443\u043C\u043C\u0430:\n                            <strong> {{ orderItem.costRub | tuiFormatNumber: { precision: 2, decimalSeparator: '.', rounding: 'ceil' } }} {{ 'RUB' | tuiCurrency }}</strong>\n                        </p>\n                        <sc-price-warehouse-stock\n                            scPrint=\"defaultNoPrint\"\n                            [product]=\"product\"\n                        />\n                    </div>\n                </div>\n            </div>\n        </sc-noindex-wrapper>\n    </div>\n} @else {\n    <div class=\"tui-skeleton flex h-[8.25rem] w-full overflow-hidden rounded-xl\"></div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"], outputs: ["tuiHintVisible"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }, { kind: "directive", type: TuiHighlight, selector: "[tuiHighlight]", inputs: ["tuiHighlight", "tuiHighlightColor"] }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "component", type: ScHoverImageCarouselComponent, selector: "sc-hover-image-carousel", inputs: ["images", "isShowActions", "productName"] }, { kind: "component", type: CostWithDiscountComponent, selector: "sc-cost-with-discount", inputs: ["product", "size"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint", "fromMain"] }, { kind: "component", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: ["step", "showLoader", "showCross", "appearance", "isDisabled", "size", "ignoreStepValidators"], outputs: ["clickClearEvent"] }, { kind: "component", type: i1$1.TuiPreviewComponent, selector: "tui-preview", inputs: ["zoomable", "rotatable", "initialScale"] }, { kind: "directive", type: i1$1.TuiPreviewAction, selector: "[tuiPreviewAction]" }, { kind: "component", type: ScNoindexWrapperComponent, selector: "sc-noindex-wrapper" }, { kind: "component", type: TuiButtonLoading, selector: "[tuiButton][loading],[tuiIconButton][loading]", inputs: ["size", "loading"] }, { kind: "directive", type: ScPrintDirective, selector: "[scPrint]", inputs: ["scPrint"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: TuiCurrencyPipe, name: "tuiCurrency" }, { kind: "pipe", type: TuiFormatNumberPipe, name: "tuiFormatNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "@if (product && orderItem) {\n    <div class=\"@container relative flex w-full gap-4 rounded-xl p-1 text-body-s hover:bg-tui-background-neutral-1\">\n        <sc-noindex-wrapper>\n            @let isDisabled = product.isHidden || product.isNull;\n            <sc-hover-image-carousel\n                (click)=\"isDisabled ? null : clickCardEvent.emit()\"\n                [images]=\"!isMobile ? getCardImagePreviewList(product) : [getCardImagePreview()]\"\n                [isShowActions]=\"false\"\n                class=\"aspect-square w-24 shrink-0 cursor-pointer self-start\"\n            />\n            <div class=\"flex w-full flex-col gap-y-1 gap-x-4 @5xl:flex-row @5xl:items-center @5xl:gap-5\">\n                <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n                    <div\n                        [tuiHighlight]=\"(search$ | async) ?? ''\"\n                        class=\"text-tui-text-02\"\n                    >\n                        \u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}\n                    </div>\n                    <div class=\"flex flex-col gap-1\">\n                        <a\n                            tuiLink\n                            [attr.href]=\"href ?? null\"\n                            [tuiHighlight]=\"(search$ | async) ?? ''\"\n                            (click)=\"$event.preventDefault(); clickCardEvent.emit()\"\n                            [class.disabled]=\"isDisabled\"\n                            class=\"!text-body-m-bold\"\n                        >\n                            {{ product.name }}\n                        </a>\n                        @if (product.supplierSku) {\n                            <span class=\"text-tui-text-02\"> \u0410\u0440\u0442\u0438\u043A\u0443\u043B \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u0434\u0438\u0442\u0435\u043B\u044F: {{ product.supplierSku }} </span>\n                        }\n                        @if (product.pack) {\n                            <div class=\"flex items-center gap-1 text-tui-text-02\">\n                                \u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}\n                                @if (product.ignoreMinCountCheck) {\n                                    <tui-icon\n                                        icon=\"@tui.package\"\n                                        [tuiHint]=\"minCountHint\"\n                                        [tuiHintShowDelay]=\"100\"\n                                        tuiHintDirection=\"top\"\n                                        class=\"text-body-xl text-tui-text-01 opacity-90\"\n                                    />\n                                    <ng-template #minCountHint>\n                                        \u0414\u043E\u0441\u0442\u0443\u043F\u0435\u043D \u0437\u0430\u043A\u0430\u0437 <br />\n                                        \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u043B\u044C\u043D\u043E\u0433\u043E <br />\n                                        \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u0430\n                                    </ng-template>\n                                }\n                            </div>\n                        }\n\n                        <sc-cost-with-discount\n                            scPrint=\"cost\"\n                            [product]=\"product\"\n                        />\n                    </div>\n                    @if (orderItem.specificationImgUrl) {\n                        <a\n                            tuiLink\n                            (click)=\"showSpecification(specificationPreview)\"\n                            [class.disabled]=\"isDisabled\"\n                        >\n                            \u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F\n                        </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                <div class=\"grid grid-cols-1 @lg:grid-cols-3 gap-2 @2xl:gap-4 @2xl:grid-rows-1\">\n                    <div class=\"grid grid-cols-1 items-center @lg:gap-2 @2xl:grid-cols-2 @lg:col-span-2\">\n                        <!-- \u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u0442\u043E\u0432\u0430\u0440\u0430. -->\n                        @if (isShowEditControls() && showQuantityControl) {\n                            <!-- \u041F\u043E\u043B\u0435 \u0432\u0432\u043E\u0434\u0430 \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0442\u043E\u0432\u0430\u0440\u0430. -->\n                            <sc-input-quantity\n                                #inputQuantity\n                                [tuiAutoFocus]=\"autoFocuseQuantityInput()\"\n                                [formControl]=\"quantityControl\"\n                                size=\"m\"\n                                [showCross]=\"false\"\n                                [isDisabled]=\"isDisabled\"\n                                [step]=\"getProductMultiplicity(product)\"\n                                [ignoreStepValidators]=\"product.ignoreMinCountCheck\"\n                                [showLoader]=\"showLoader()\"\n                                (clickClearEvent)=\"clickClearEvent.emit(orderItem)\"\n                                (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n                                class=\"w-32 shrink-0\"\n                            />\n                        } @else {\n                            <button\n                                [appearance]=\"isShowEditControls() ? 'action-grayscale' : ''\"\n                                tuiTheme=\"light\"\n                                tuiHint=\"\u0414\u043B\u044F \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u044F \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0432\u043E\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435\u0441\u044C \u043A\u043E\u043D\u0444\u0438\u0433\u0443\u0440\u0430\u0442\u043E\u0440\u043E\u043C\"\n                                (tuiHintVisible)=\"configuratorHintVisible($event)\"\n                                tuiLink\n                                [style.text-decoration-line]=\"isShowEditControls() ? 'underline' : 'none'\"\n                                [class.pointer-events-none]=\"!isShowEditControls()\"\n                            >\n                                <div class=\"!text-body-m text-start\">\n                                    \u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E:\n                                    <strong> {{ orderItem.quantity }} \u0448\u0442.</strong>\n                                </div>\n                            </button>\n                        }\n\n                        @let showAdditionalInfo = orderItem.configurator || orderItem.height || orderItem.length || orderItem.width || orderItem.marker;\n                        @if (showAdditionalInfo) {\n                            <div class=\"flex items-center gap-2 @lg:gap-3 max-w-min\">\n                                <!-- \u041A\u043D\u043E\u043F\u043A\u0430 \u0440\u0435\u0434\u0430\u043A\u0442\u0438\u0440\u043E\u0432\u0430\u043D\u0438\u044F \u0442\u043E\u0432\u0430\u0440\u0430. -->\n                                @if (isShowEditControls()) {\n                                    <button\n                                        tuiIconButton\n                                        [disabled]=\"isDisabled\"\n                                        [loading]=\"showLoader()\"\n                                        (click)=\"clickSettings.emit()\"\n                                        size=\"s\"\n                                        [appearance]=\"isConfiguratorHintVisible() ? 'primary' : 'secondary'\"\n                                        class=\"shrink-0\"\n                                    >\n                                        <tui-icon icon=\"@tui.settings\" />\n                                    </button>\n                                }\n\n                                <!-- \u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u0430\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F \u043E \u0442\u043E\u0432\u0430\u0440\u0435. -->\n                                <div\n                                    class=\"flex flex-col gap-x-1 text-tui-base-07\"\n                                    [class.text-body-m]=\"!isShowEditControls()\"\n                                >\n                                    @if (orderItem.marker) {\n                                        <p>\u041C\u0430\u0440\u043A\u0438\u0440\u043E\u0432\u043A\u0430: {{ orderItem.marker }}</p>\n                                    }\n                                    @if (orderItem.width) {\n                                        <button\n                                            [appearance]=\"isShowEditControls() ? 'action-grayscale' : ''\"\n                                            tuiTheme=\"light\"\n                                            tuiHint=\"\u0414\u043B\u044F \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u044F \u0448\u0438\u0440\u0438\u043D\u044B \u0432\u043E\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435\u0441\u044C \u043A\u043E\u043D\u0444\u0438\u0433\u0443\u0440\u0430\u0442\u043E\u0440\u043E\u043C\"\n                                            (tuiHintVisible)=\"configuratorHintVisible($event)\"\n                                            tuiLink\n                                            [style.text-decoration-line]=\"isShowEditControls() ? 'underline' : 'none'\"\n                                            [class.pointer-events-none]=\"!isShowEditControls()\"\n                                            class=\"text-body-s self-start whitespace-nowrap\"\n                                        >\n                                            \u0428\u0438\u0440\u0438\u043D\u0430: <span class=\"text-body-s-bold\">{{ orderItem.width }} \u043C.</span>\n                                        </button>\n                                    }\n                                    @if (orderItem.height) {\n                                        <button\n                                            [appearance]=\"isShowEditControls() ? 'action-grayscale' : ''\"\n                                            tuiTheme=\"light\"\n                                            tuiHint=\"\u0414\u043B\u044F \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u044F \u0432\u044B\u0441\u043E\u0442\u044B \u0432\u043E\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435\u0441\u044C \u043A\u043E\u043D\u0444\u0438\u0433\u0443\u0440\u0430\u0442\u043E\u0440\u043E\u043C\"\n                                            (tuiHintVisible)=\"configuratorHintVisible($event)\"\n                                            tuiLink\n                                            [style.text-decoration-line]=\"isShowEditControls() ? 'underline' : 'none'\"\n                                            [class.pointer-events-none]=\"!isShowEditControls()\"\n                                            class=\"text-body-s self-start whitespace-nowrap\"\n                                        >\n                                            \u0412\u044B\u0441\u043E\u0442\u0430: <span class=\"text-body-s-bold\">{{ orderItem.height }} \u043C.</span>\n                                        </button>\n                                    } @else if (orderItem.length) {\n                                        <button\n                                            [appearance]=\"isShowEditControls() ? 'action-grayscale' : ''\"\n                                            tuiTheme=\"light\"\n                                            tuiHint=\"\u0414\u043B\u044F \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u044F \u0434\u043B\u0438\u043D\u044B \u0432\u043E\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435\u0441\u044C \u043A\u043E\u043D\u0444\u0438\u0433\u0443\u0440\u0430\u0442\u043E\u0440\u043E\u043C\"\n                                            (tuiHintVisible)=\"configuratorHintVisible($event)\"\n                                            tuiLink\n                                            [style.text-decoration-line]=\"isShowEditControls() ? 'underline' : 'none'\"\n                                            [class.pointer-events-none]=\"!isShowEditControls()\"\n                                            class=\"text-body-s self-start whitespace-nowrap\"\n                                        >\n                                            \u0414\u043B\u0438\u043D\u0430: <span class=\"text-body-s-bold\">{{ orderItem.length }} \u043C.</span>\n                                        </button>\n                                    }\n                                </div>\n                            </div>\n                        }\n                    </div>\n\n                    <!-- \u0421\u0443\u043C\u043C\u0430 \u0442\u043E\u0432\u0430\u0440\u0430 \u0438 \u0441\u043A\u043B\u0430\u0434\u0441\u043A\u043E\u0435 \u043D\u0430\u043B\u0438\u0447\u0438\u0435. -->\n                    <div\n                        scPrint=\"cost\"\n                        class=\"flex min-w-[11rem] flex-col @lg:justify-end @2xl:!justify-center text-body-m\"\n                    >\n                        <p class=\"whitespace-nowrap\">\n                            \u0421\u0443\u043C\u043C\u0430:\n                            <strong> {{ orderItem.costRub | tuiFormatNumber: { precision: 2, decimalSeparator: '.', rounding: 'ceil' } }} {{ 'RUB' | tuiCurrency }}</strong>\n                        </p>\n                        <sc-price-warehouse-stock\n                            scPrint=\"defaultNoPrint\"\n                            [product]=\"product\"\n                        />\n                    </div>\n                </div>\n            </div>\n        </sc-noindex-wrapper>\n    </div>\n} @else {\n    <div class=\"tui-skeleton flex h-[8.25rem] w-full overflow-hidden rounded-xl\"></div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"], outputs: ["tuiHintVisible"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }, { kind: "directive", type: TuiHighlight, selector: "[tuiHighlight]", inputs: ["tuiHighlight", "tuiHighlightColor"] }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "component", type: ScHoverImageCarouselComponent, selector: "sc-hover-image-carousel", inputs: ["images", "isShowActions", "productName"] }, { kind: "component", type: CostWithDiscountComponent, selector: "sc-cost-with-discount", inputs: ["product", "size"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint", "fromMain"] }, { kind: "component", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: ["step", "showLoader", "showCross", "appearance", "isDisabled", "size", "ignoreStepValidators"], outputs: ["clickClearEvent"] }, { kind: "component", type: i1$1.TuiPreviewComponent, selector: "tui-preview", inputs: ["zoomable", "rotatable", "initialScale"] }, { kind: "directive", type: i1$1.TuiPreviewAction, selector: "[tuiPreviewAction]" }, { kind: "component", type: ScNoindexWrapperComponent, selector: "sc-noindex-wrapper" }, { kind: "component", type: TuiButtonLoading, selector: "[tuiButton][loading],[tuiIconButton][loading]", inputs: ["size", "loading"] }, { kind: "directive", type: ScPrintDirective, selector: "[scPrint]", inputs: ["scPrint"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: TuiCurrencyPipe, name: "tuiCurrency" }, { kind: "pipe", type: TuiFormatNumberPipe, name: "tuiFormatNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ScOrderItemComponent, decorators: [{
             type: Component,
@@ -7809,7 +7814,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                             appearance: signal('textfield'),
                         }),
                         tuiHintOptionsProvider({ direction: 'top', showDelay: 100, hideDelay: 100 }),
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (product && orderItem) {\n    <div class=\"@container relative flex w-full gap-4 rounded-xl p-1 text-body-s hover:bg-tui-background-neutral-1\">\n        <sc-noindex-wrapper>\n            @let isDisabled = product.isHidden || product.isNull;\n            <sc-hover-image-carousel\n                (click)=\"isDisabled ? null : clickCardEvent.emit()\"\n                [images]=\"!isMobile ? getCardImagePreviewList(product) : [getCardImagePreview()]\"\n                [isShowActions]=\"false\"\n                class=\"aspect-square w-24 shrink-0 cursor-pointer self-start\"\n            />\n            <div class=\"flex w-full flex-col gap-y-1 gap-x-4 @5xl:flex-row @5xl:items-center @5xl:gap-5\">\n                <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n                    <div\n                        [tuiHighlight]=\"(search$ | async) ?? ''\"\n                        class=\"text-tui-text-02\"\n                    >\n                        \u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}\n                    </div>\n                    <div class=\"flex flex-col gap-1\">\n                        <a\n                            tuiLink\n                            [attr.href]=\"href ?? null\"\n                            [tuiHighlight]=\"(search$ | async) ?? ''\"\n                            (click)=\"$event.preventDefault(); clickCardEvent.emit()\"\n                            [class.disabled]=\"isDisabled\"\n                            class=\"!text-body-m-bold\"\n                        >\n                            {{ product.name }}\n                        </a>\n                        @if (product.supplierSku) {\n                            <span class=\"text-tui-text-02\"> \u0410\u0440\u0442\u0438\u043A\u0443\u043B \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u0434\u0438\u0442\u0435\u043B\u044F: {{ product.supplierSku }} </span>\n                        }\n                        @if (product.pack) {\n                            <div class=\"flex items-center gap-1 text-tui-text-02\">\n                                \u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}\n                                @if (product.ignoreMinCountCheck) {\n                                    <tui-icon\n                                        icon=\"@tui.package\"\n                                        [tuiHint]=\"minCountHint\"\n                                        [tuiHintShowDelay]=\"100\"\n                                        tuiHintDirection=\"top\"\n                                        class=\"text-body-xl text-tui-text-01 opacity-90\"\n                                    />\n                                    <ng-template #minCountHint>\n                                        \u0414\u043E\u0441\u0442\u0443\u043F\u0435\u043D \u0437\u0430\u043A\u0430\u0437 <br />\n                                        \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u043B\u044C\u043D\u043E\u0433\u043E <br />\n                                        \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u0430\n                                    </ng-template>\n                                }\n                            </div>\n                        }\n\n                        <sc-cost-with-discount\n                            scPrint=\"cost\"\n                            [product]=\"product\"\n                        />\n                    </div>\n                    @if (orderItem.specificationImgUrl) {\n                        <a\n                            tuiLink\n                            (click)=\"showSpecification(specificationPreview)\"\n                            [class.disabled]=\"isDisabled\"\n                        >\n                            \u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F\n                        </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                <div class=\"grid grid-cols-1 @lg:grid-cols-3 gap-2 @2xl:gap-4 @2xl:grid-rows-1\">\n                    <div class=\"grid grid-cols-1 items-center @lg:gap-2 @2xl:grid-cols-2 @lg:col-span-2\">\n                        <!-- \u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u0442\u043E\u0432\u0430\u0440\u0430. -->\n                        @if (isShowEditControls() && showQuantityControl) {\n                            <!-- \u041F\u043E\u043B\u0435 \u0432\u0432\u043E\u0434\u0430 \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0442\u043E\u0432\u0430\u0440\u0430. -->\n                            <sc-input-quantity\n                                #inputQuantity\n                                [tuiAutoFocus]=\"autoFocuseQuantityInput()\"\n                                [formControl]=\"quantityControl\"\n                                size=\"m\"\n                                [showCross]=\"false\"\n                                [isDisabled]=\"isDisabled\"\n                                [step]=\"getProductMultiplicity(product)\"\n                                [ignoreStepValidators]=\"product.ignoreMinCountCheck\"\n                                [showLoader]=\"showLoader()\"\n                                (clickClearEvent)=\"clickClearEvent.emit(orderItem)\"\n                                (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n                                class=\"w-32 shrink-0\"\n                            />\n                        } @else {\n                            <button\n                                [appearance]=\"isShowEditControls() ? 'action-grayscale' : ''\"\n                                tuiTheme=\"light\"\n                                tuiHint=\"\u0414\u043B\u044F \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u044F \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0432\u043E\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435\u0441\u044C \u043A\u043E\u043D\u0444\u0438\u0433\u0443\u0440\u0430\u0442\u043E\u0440\u043E\u043C\"\n                                (tuiHintVisible)=\"configuratorHintVisible($event)\"\n                                tuiLink\n                                [style.text-decoration-line]=\"isShowEditControls() ? 'underline' : 'none'\"\n                                [class.pointer-events-none]=\"!isShowEditControls()\"\n                            >\n                                <div class=\"!text-body-m text-start\">\n                                    \u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E:\n                                    <strong> {{ orderItem.quantity }} \u0448\u0442.</strong>\n                                </div>\n                            </button>\n                        }\n\n                        @let showAdditionalInfo = orderItem.configurator || orderItem.height || orderItem.length || orderItem.width || orderItem.marker;\n                        @if (showAdditionalInfo) {\n                            <div class=\"flex items-center gap-2 @lg:gap-3 max-w-min\">\n                                <!-- \u041A\u043D\u043E\u043F\u043A\u0430 \u0440\u0435\u0434\u0430\u043A\u0442\u0438\u0440\u043E\u0432\u0430\u043D\u0438\u044F \u0442\u043E\u0432\u0430\u0440\u0430. -->\n                                @if (isShowEditControls()) {\n                                    <button\n                                        tuiIconButton\n                                        iconStart=\"@tui.settings\"\n                                        [disabled]=\"isDisabled\"\n                                        [loading]=\"showLoader()\"\n                                        (click)=\"clickSettings.emit()\"\n                                        size=\"s\"\n                                        [appearance]=\"isConfiguratorHintVisible() ? 'primary' : 'secondary'\"\n                                        class=\"shrink-0\"\n                                    ></button>\n                                }\n\n                                <!-- \u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u0430\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F \u043E \u0442\u043E\u0432\u0430\u0440\u0435. -->\n                                <div\n                                    class=\"flex flex-col gap-x-1 text-tui-base-07\"\n                                    [class.text-body-m]=\"!isShowEditControls()\"\n                                >\n                                    @if (orderItem.marker) {\n                                        <p>\u041C\u0430\u0440\u043A\u0438\u0440\u043E\u0432\u043A\u0430: {{ orderItem.marker }}</p>\n                                    }\n                                    @if (orderItem.width) {\n                                        <button\n                                            [appearance]=\"isShowEditControls() ? 'action-grayscale' : ''\"\n                                            tuiTheme=\"light\"\n                                            tuiHint=\"\u0414\u043B\u044F \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u044F \u0448\u0438\u0440\u0438\u043D\u044B \u0432\u043E\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435\u0441\u044C \u043A\u043E\u043D\u0444\u0438\u0433\u0443\u0440\u0430\u0442\u043E\u0440\u043E\u043C\"\n                                            (tuiHintVisible)=\"configuratorHintVisible($event)\"\n                                            tuiLink\n                                            [style.text-decoration-line]=\"isShowEditControls() ? 'underline' : 'none'\"\n                                            [class.pointer-events-none]=\"!isShowEditControls()\"\n                                            class=\"text-body-s self-start whitespace-nowrap\"\n                                        >\n                                            \u0428\u0438\u0440\u0438\u043D\u0430: <span class=\"text-body-s-bold\">{{ orderItem.width }} \u043C.</span>\n                                        </button>\n                                    }\n                                    @if (orderItem.height) {\n                                        <button\n                                            [appearance]=\"isShowEditControls() ? 'action-grayscale' : ''\"\n                                            tuiTheme=\"light\"\n                                            tuiHint=\"\u0414\u043B\u044F \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u044F \u0432\u044B\u0441\u043E\u0442\u044B \u0432\u043E\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435\u0441\u044C \u043A\u043E\u043D\u0444\u0438\u0433\u0443\u0440\u0430\u0442\u043E\u0440\u043E\u043C\"\n                                            (tuiHintVisible)=\"configuratorHintVisible($event)\"\n                                            tuiLink\n                                            [style.text-decoration-line]=\"isShowEditControls() ? 'underline' : 'none'\"\n                                            [class.pointer-events-none]=\"!isShowEditControls()\"\n                                            class=\"text-body-s self-start whitespace-nowrap\"\n                                        >\n                                            \u0412\u044B\u0441\u043E\u0442\u0430: <span class=\"text-body-s-bold\">{{ orderItem.height }} \u043C.</span>\n                                        </button>\n                                    } @else if (orderItem.length) {\n                                        <button\n                                            [appearance]=\"isShowEditControls() ? 'action-grayscale' : ''\"\n                                            tuiTheme=\"light\"\n                                            tuiHint=\"\u0414\u043B\u044F \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u044F \u0434\u043B\u0438\u043D\u044B \u0432\u043E\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435\u0441\u044C \u043A\u043E\u043D\u0444\u0438\u0433\u0443\u0440\u0430\u0442\u043E\u0440\u043E\u043C\"\n                                            (tuiHintVisible)=\"configuratorHintVisible($event)\"\n                                            tuiLink\n                                            [style.text-decoration-line]=\"isShowEditControls() ? 'underline' : 'none'\"\n                                            [class.pointer-events-none]=\"!isShowEditControls()\"\n                                            class=\"text-body-s self-start whitespace-nowrap\"\n                                        >\n                                            \u0414\u043B\u0438\u043D\u0430: <span class=\"text-body-s-bold\">{{ orderItem.length }} \u043C.</span>\n                                        </button>\n                                    }\n                                </div>\n                            </div>\n                        }\n                    </div>\n\n                    <!-- \u0421\u0443\u043C\u043C\u0430 \u0442\u043E\u0432\u0430\u0440\u0430 \u0438 \u0441\u043A\u043B\u0430\u0434\u0441\u043A\u043E\u0435 \u043D\u0430\u043B\u0438\u0447\u0438\u0435. -->\n                    <div\n                        scPrint=\"cost\"\n                        class=\"flex min-w-[11rem] flex-col @lg:justify-end @2xl:!justify-center text-body-m\"\n                    >\n                        <p class=\"whitespace-nowrap\">\n                            \u0421\u0443\u043C\u043C\u0430:\n                            <strong> {{ orderItem.costRub | tuiFormatNumber: { precision: 2, decimalSeparator: '.', rounding: 'ceil' } }} {{ 'RUB' | tuiCurrency }}</strong>\n                        </p>\n                        <sc-price-warehouse-stock\n                            scPrint=\"defaultNoPrint\"\n                            [product]=\"product\"\n                        />\n                    </div>\n                </div>\n            </div>\n        </sc-noindex-wrapper>\n    </div>\n} @else {\n    <div class=\"tui-skeleton flex h-[8.25rem] w-full overflow-hidden rounded-xl\"></div>\n}\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (product && orderItem) {\n    <div class=\"@container relative flex w-full gap-4 rounded-xl p-1 text-body-s hover:bg-tui-background-neutral-1\">\n        <sc-noindex-wrapper>\n            @let isDisabled = product.isHidden || product.isNull;\n            <sc-hover-image-carousel\n                (click)=\"isDisabled ? null : clickCardEvent.emit()\"\n                [images]=\"!isMobile ? getCardImagePreviewList(product) : [getCardImagePreview()]\"\n                [isShowActions]=\"false\"\n                class=\"aspect-square w-24 shrink-0 cursor-pointer self-start\"\n            />\n            <div class=\"flex w-full flex-col gap-y-1 gap-x-4 @5xl:flex-row @5xl:items-center @5xl:gap-5\">\n                <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n                    <div\n                        [tuiHighlight]=\"(search$ | async) ?? ''\"\n                        class=\"text-tui-text-02\"\n                    >\n                        \u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}\n                    </div>\n                    <div class=\"flex flex-col gap-1\">\n                        <a\n                            tuiLink\n                            [attr.href]=\"href ?? null\"\n                            [tuiHighlight]=\"(search$ | async) ?? ''\"\n                            (click)=\"$event.preventDefault(); clickCardEvent.emit()\"\n                            [class.disabled]=\"isDisabled\"\n                            class=\"!text-body-m-bold\"\n                        >\n                            {{ product.name }}\n                        </a>\n                        @if (product.supplierSku) {\n                            <span class=\"text-tui-text-02\"> \u0410\u0440\u0442\u0438\u043A\u0443\u043B \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u0434\u0438\u0442\u0435\u043B\u044F: {{ product.supplierSku }} </span>\n                        }\n                        @if (product.pack) {\n                            <div class=\"flex items-center gap-1 text-tui-text-02\">\n                                \u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}\n                                @if (product.ignoreMinCountCheck) {\n                                    <tui-icon\n                                        icon=\"@tui.package\"\n                                        [tuiHint]=\"minCountHint\"\n                                        [tuiHintShowDelay]=\"100\"\n                                        tuiHintDirection=\"top\"\n                                        class=\"text-body-xl text-tui-text-01 opacity-90\"\n                                    />\n                                    <ng-template #minCountHint>\n                                        \u0414\u043E\u0441\u0442\u0443\u043F\u0435\u043D \u0437\u0430\u043A\u0430\u0437 <br />\n                                        \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u043B\u044C\u043D\u043E\u0433\u043E <br />\n                                        \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u0430\n                                    </ng-template>\n                                }\n                            </div>\n                        }\n\n                        <sc-cost-with-discount\n                            scPrint=\"cost\"\n                            [product]=\"product\"\n                        />\n                    </div>\n                    @if (orderItem.specificationImgUrl) {\n                        <a\n                            tuiLink\n                            (click)=\"showSpecification(specificationPreview)\"\n                            [class.disabled]=\"isDisabled\"\n                        >\n                            \u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F\n                        </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                <div class=\"grid grid-cols-1 @lg:grid-cols-3 gap-2 @2xl:gap-4 @2xl:grid-rows-1\">\n                    <div class=\"grid grid-cols-1 items-center @lg:gap-2 @2xl:grid-cols-2 @lg:col-span-2\">\n                        <!-- \u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u0442\u043E\u0432\u0430\u0440\u0430. -->\n                        @if (isShowEditControls() && showQuantityControl) {\n                            <!-- \u041F\u043E\u043B\u0435 \u0432\u0432\u043E\u0434\u0430 \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0442\u043E\u0432\u0430\u0440\u0430. -->\n                            <sc-input-quantity\n                                #inputQuantity\n                                [tuiAutoFocus]=\"autoFocuseQuantityInput()\"\n                                [formControl]=\"quantityControl\"\n                                size=\"m\"\n                                [showCross]=\"false\"\n                                [isDisabled]=\"isDisabled\"\n                                [step]=\"getProductMultiplicity(product)\"\n                                [ignoreStepValidators]=\"product.ignoreMinCountCheck\"\n                                [showLoader]=\"showLoader()\"\n                                (clickClearEvent)=\"clickClearEvent.emit(orderItem)\"\n                                (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n                                class=\"w-32 shrink-0\"\n                            />\n                        } @else {\n                            <button\n                                [appearance]=\"isShowEditControls() ? 'action-grayscale' : ''\"\n                                tuiTheme=\"light\"\n                                tuiHint=\"\u0414\u043B\u044F \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u044F \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0432\u043E\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435\u0441\u044C \u043A\u043E\u043D\u0444\u0438\u0433\u0443\u0440\u0430\u0442\u043E\u0440\u043E\u043C\"\n                                (tuiHintVisible)=\"configuratorHintVisible($event)\"\n                                tuiLink\n                                [style.text-decoration-line]=\"isShowEditControls() ? 'underline' : 'none'\"\n                                [class.pointer-events-none]=\"!isShowEditControls()\"\n                            >\n                                <div class=\"!text-body-m text-start\">\n                                    \u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E:\n                                    <strong> {{ orderItem.quantity }} \u0448\u0442.</strong>\n                                </div>\n                            </button>\n                        }\n\n                        @let showAdditionalInfo = orderItem.configurator || orderItem.height || orderItem.length || orderItem.width || orderItem.marker;\n                        @if (showAdditionalInfo) {\n                            <div class=\"flex items-center gap-2 @lg:gap-3 max-w-min\">\n                                <!-- \u041A\u043D\u043E\u043F\u043A\u0430 \u0440\u0435\u0434\u0430\u043A\u0442\u0438\u0440\u043E\u0432\u0430\u043D\u0438\u044F \u0442\u043E\u0432\u0430\u0440\u0430. -->\n                                @if (isShowEditControls()) {\n                                    <button\n                                        tuiIconButton\n                                        [disabled]=\"isDisabled\"\n                                        [loading]=\"showLoader()\"\n                                        (click)=\"clickSettings.emit()\"\n                                        size=\"s\"\n                                        [appearance]=\"isConfiguratorHintVisible() ? 'primary' : 'secondary'\"\n                                        class=\"shrink-0\"\n                                    >\n                                        <tui-icon icon=\"@tui.settings\" />\n                                    </button>\n                                }\n\n                                <!-- \u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u0430\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F \u043E \u0442\u043E\u0432\u0430\u0440\u0435. -->\n                                <div\n                                    class=\"flex flex-col gap-x-1 text-tui-base-07\"\n                                    [class.text-body-m]=\"!isShowEditControls()\"\n                                >\n                                    @if (orderItem.marker) {\n                                        <p>\u041C\u0430\u0440\u043A\u0438\u0440\u043E\u0432\u043A\u0430: {{ orderItem.marker }}</p>\n                                    }\n                                    @if (orderItem.width) {\n                                        <button\n                                            [appearance]=\"isShowEditControls() ? 'action-grayscale' : ''\"\n                                            tuiTheme=\"light\"\n                                            tuiHint=\"\u0414\u043B\u044F \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u044F \u0448\u0438\u0440\u0438\u043D\u044B \u0432\u043E\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435\u0441\u044C \u043A\u043E\u043D\u0444\u0438\u0433\u0443\u0440\u0430\u0442\u043E\u0440\u043E\u043C\"\n                                            (tuiHintVisible)=\"configuratorHintVisible($event)\"\n                                            tuiLink\n                                            [style.text-decoration-line]=\"isShowEditControls() ? 'underline' : 'none'\"\n                                            [class.pointer-events-none]=\"!isShowEditControls()\"\n                                            class=\"text-body-s self-start whitespace-nowrap\"\n                                        >\n                                            \u0428\u0438\u0440\u0438\u043D\u0430: <span class=\"text-body-s-bold\">{{ orderItem.width }} \u043C.</span>\n                                        </button>\n                                    }\n                                    @if (orderItem.height) {\n                                        <button\n                                            [appearance]=\"isShowEditControls() ? 'action-grayscale' : ''\"\n                                            tuiTheme=\"light\"\n                                            tuiHint=\"\u0414\u043B\u044F \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u044F \u0432\u044B\u0441\u043E\u0442\u044B \u0432\u043E\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435\u0441\u044C \u043A\u043E\u043D\u0444\u0438\u0433\u0443\u0440\u0430\u0442\u043E\u0440\u043E\u043C\"\n                                            (tuiHintVisible)=\"configuratorHintVisible($event)\"\n                                            tuiLink\n                                            [style.text-decoration-line]=\"isShowEditControls() ? 'underline' : 'none'\"\n                                            [class.pointer-events-none]=\"!isShowEditControls()\"\n                                            class=\"text-body-s self-start whitespace-nowrap\"\n                                        >\n                                            \u0412\u044B\u0441\u043E\u0442\u0430: <span class=\"text-body-s-bold\">{{ orderItem.height }} \u043C.</span>\n                                        </button>\n                                    } @else if (orderItem.length) {\n                                        <button\n                                            [appearance]=\"isShowEditControls() ? 'action-grayscale' : ''\"\n                                            tuiTheme=\"light\"\n                                            tuiHint=\"\u0414\u043B\u044F \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u044F \u0434\u043B\u0438\u043D\u044B \u0432\u043E\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435\u0441\u044C \u043A\u043E\u043D\u0444\u0438\u0433\u0443\u0440\u0430\u0442\u043E\u0440\u043E\u043C\"\n                                            (tuiHintVisible)=\"configuratorHintVisible($event)\"\n                                            tuiLink\n                                            [style.text-decoration-line]=\"isShowEditControls() ? 'underline' : 'none'\"\n                                            [class.pointer-events-none]=\"!isShowEditControls()\"\n                                            class=\"text-body-s self-start whitespace-nowrap\"\n                                        >\n                                            \u0414\u043B\u0438\u043D\u0430: <span class=\"text-body-s-bold\">{{ orderItem.length }} \u043C.</span>\n                                        </button>\n                                    }\n                                </div>\n                            </div>\n                        }\n                    </div>\n\n                    <!-- \u0421\u0443\u043C\u043C\u0430 \u0442\u043E\u0432\u0430\u0440\u0430 \u0438 \u0441\u043A\u043B\u0430\u0434\u0441\u043A\u043E\u0435 \u043D\u0430\u043B\u0438\u0447\u0438\u0435. -->\n                    <div\n                        scPrint=\"cost\"\n                        class=\"flex min-w-[11rem] flex-col @lg:justify-end @2xl:!justify-center text-body-m\"\n                    >\n                        <p class=\"whitespace-nowrap\">\n                            \u0421\u0443\u043C\u043C\u0430:\n                            <strong> {{ orderItem.costRub | tuiFormatNumber: { precision: 2, decimalSeparator: '.', rounding: 'ceil' } }} {{ 'RUB' | tuiCurrency }}</strong>\n                        </p>\n                        <sc-price-warehouse-stock\n                            scPrint=\"defaultNoPrint\"\n                            [product]=\"product\"\n                        />\n                    </div>\n                </div>\n            </div>\n        </sc-noindex-wrapper>\n    </div>\n} @else {\n    <div class=\"tui-skeleton flex h-[8.25rem] w-full overflow-hidden rounded-xl\"></div>\n}\n" }]
         }], propDecorators: { clickSettings: [{ type: i0.Output, args: ["clickSettings"] }], isShowEditControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "isShowEditControls", required: false }] }] } });
 
 /* eslint-disable no-param-reassign */
@@ -7995,11 +8000,11 @@ class ScOrderItemsListComponent {
         this.scDialogService.openPriceHistoryChartDialog(product);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ScOrderItemsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ScOrderItemsListComponent, isStandalone: true, selector: "sc-order-items-list", inputs: { selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: true, transformFunction: null } }, outputs: { selectedItemsIdsChange: "selectedItemsIdsChange" }, ngImport: i0, template: "<div\n    [formGroup]=\"selectionFormGroup\"\n    class=\"flex flex-col gap-5\"\n>\n    <!-- \u0413\u0440\u0443\u043F\u043F\u044B \u0442\u043E\u0432\u0430\u0440\u043E\u0432 \u043F\u043E \u043D\u0430\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u0438\u044F\u043C \u043F\u0440\u043E\u0434\u0430\u0436. -->\n\n    @for (item of itemsSignal(); track item.id) {\n        @if ($index !== 0) {\n            <hr class=\"mt-auto h-px w-full bg-tui-clear\" />\n        }\n\n        <div class=\"flex items-center gap-4 relative\">\n            @let isActive = !selectable() || selectionFormGroup.get(item.id)?.value;\n\n            <!-- \u0427\u0435\u043A\u0431\u043E\u043A\u0441 \u0432\u044B\u0431\u043E\u0440\u0430 \u0442\u043E\u0432\u0430\u0440\u0430. -->\n            @if (selectable()) {\n                <input\n                    tuiCheckbox\n                    [disabled]=\"itemComponent.showLoader()\"\n                    type=\"checkbox\"\n                    size=\"m\"\n                    [formControlName]=\"item.id\"\n                />\n            }\n\n            <!-- \u041A\u0430\u0440\u0442\u043E\u0447\u043A\u0430 \u0442\u043E\u0432\u0430\u0440\u0430. -->\n            <sc-order-item\n                #itemComponent\n                [product]=\"item.product\"\n                [orderItem]=\"item\"\n                [showQuantityControl]=\"canEdit() && !item.configurator\"\n                [isShowEditControls]=\"canEdit()\"\n                class=\"w-full duration-200\"\n                [class.opacity-60]=\"selectable() && !selectionFormGroup.get(item.id)?.value\"\n                (clickCardEvent)=\"openProductInfoDialog(item.product, item, orderOptions?.orderId())\"\n                (quantityValueChanges)=\"patchItem($event, itemComponent)\"\n                (clickPriceHistoryEvent)=\"openPriceHistoryChartDialog(item.product)\"\n                (clickSettings)=\"openSettingsDialog(item)\"\n                [class.pointer-events-none]=\"!isActive\"\n            />\n\n            <!-- \u041A\u043D\u043E\u043F\u043A\u0430 \u0443\u0434\u0430\u043B\u0435\u043D\u0438\u044F \u0442\u043E\u0432\u0430\u0440\u0430. -->\n            @if (canEdit()) {\n                <button\n                    tuiIconButton\n                    iconStart=\"@tui.trash\"\n                    (click)=\"deleteItem(item, itemComponent)\"\n                    [loading]=\"itemComponent.showLoader()\"\n                    size=\"s\"\n                    appearance=\"secondary\"\n                    class=\"!absolute left-1 top-1 lg:!relative lg:left-0 lg:top-0 lg:!self-center\"\n                ></button>\n            }\n        </div>\n    }\n\n    <!-- \u0424\u0443\u0442\u0435\u0440 \u0433\u0440\u0443\u043F\u043F\u044B \u0442\u043E\u0432\u0430\u0440\u043E\u0432. -->\n    <div\n        scPrint=\"cost\"\n        class=\"flex flex-col items-end gap-2.5\"\n    >\n        @let totalSum = sumSelectedItems();\n        <!-- \u0418\u0442\u043E\u0433\u043E\u0432\u0430\u044F \u0441\u0443\u043C\u043C\u0430. -->\n        <div class=\"text-base font-bold\">\u0418\u0442\u043E\u0433\u043E: {{ totalSum | tuiFormatNumber: { precision: 2, decimalSeparator: '.', rounding: 'ceil' } }} {{ 'RUB' | tuiCurrency }}</div>\n    </div>\n</div>\n", dependencies: [{ kind: "component", type: ScOrderItemComponent, selector: "sc-order-item", inputs: ["isShowEditControls"], outputs: ["clickSettings"] }, { kind: "directive", type: ScPrintDirective, selector: "[scPrint]", inputs: ["scPrint"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TuiCheckbox, selector: "input[type=\"checkbox\"][tuiCheckbox]" }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiButtonLoading, selector: "[tuiButton][loading],[tuiIconButton][loading]", inputs: ["size", "loading"] }, { kind: "pipe", type: TuiCurrencyPipe, name: "tuiCurrency" }, { kind: "pipe", type: TuiFormatNumberPipe, name: "tuiFormatNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ScOrderItemsListComponent, isStandalone: true, selector: "sc-order-items-list", inputs: { selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: true, transformFunction: null } }, outputs: { selectedItemsIdsChange: "selectedItemsIdsChange" }, ngImport: i0, template: "<div\n    [formGroup]=\"selectionFormGroup\"\n    class=\"flex flex-col gap-5\"\n>\n    <!-- \u0413\u0440\u0443\u043F\u043F\u044B \u0442\u043E\u0432\u0430\u0440\u043E\u0432 \u043F\u043E \u043D\u0430\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u0438\u044F\u043C \u043F\u0440\u043E\u0434\u0430\u0436. -->\n\n    @for (item of itemsSignal(); track item.id) {\n        @if ($index !== 0) {\n            <hr class=\"mt-auto h-px w-full bg-tui-clear\" />\n        }\n\n        <div class=\"flex items-center gap-4 relative\">\n            @let isActive = !selectable() || selectionFormGroup.get(item.id)?.value;\n\n            <!-- \u0427\u0435\u043A\u0431\u043E\u043A\u0441 \u0432\u044B\u0431\u043E\u0440\u0430 \u0442\u043E\u0432\u0430\u0440\u0430. -->\n            @if (selectable()) {\n                <input\n                    tuiCheckbox\n                    [disabled]=\"itemComponent.showLoader()\"\n                    type=\"checkbox\"\n                    size=\"m\"\n                    [formControlName]=\"item.id\"\n                />\n            }\n\n            <!-- \u041A\u0430\u0440\u0442\u043E\u0447\u043A\u0430 \u0442\u043E\u0432\u0430\u0440\u0430. -->\n            <sc-order-item\n                #itemComponent\n                [product]=\"item.product\"\n                [orderItem]=\"item\"\n                [showQuantityControl]=\"canEdit() && !item.configurator\"\n                [isShowEditControls]=\"canEdit()\"\n                class=\"w-full duration-200\"\n                [class.opacity-60]=\"selectable() && !selectionFormGroup.get(item.id)?.value\"\n                (clickCardEvent)=\"openProductInfoDialog(item.product, item, orderOptions?.orderId())\"\n                (quantityValueChanges)=\"patchItem($event, itemComponent)\"\n                (clickPriceHistoryEvent)=\"openPriceHistoryChartDialog(item.product)\"\n                (clickSettings)=\"openSettingsDialog(item)\"\n                [class.pointer-events-none]=\"!isActive\"\n            />\n\n            <!-- \u041A\u043D\u043E\u043F\u043A\u0430 \u0443\u0434\u0430\u043B\u0435\u043D\u0438\u044F \u0442\u043E\u0432\u0430\u0440\u0430. -->\n            @if (canEdit()) {\n                <button\n                    tuiIconButton\n                    (click)=\"deleteItem(item, itemComponent)\"\n                    [loading]=\"itemComponent.showLoader()\"\n                    size=\"s\"\n                    appearance=\"secondary\"\n                    class=\"!absolute left-1 top-1 lg:!relative lg:left-0 lg:top-0 lg:!self-center\"\n                >\n                    <tui-icon icon=\"@tui.trash\" />\n                </button>\n            }\n        </div>\n    }\n\n    <!-- \u0424\u0443\u0442\u0435\u0440 \u0433\u0440\u0443\u043F\u043F\u044B \u0442\u043E\u0432\u0430\u0440\u043E\u0432. -->\n    <div\n        scPrint=\"cost\"\n        class=\"flex flex-col items-end gap-2.5\"\n    >\n        @let totalSum = sumSelectedItems();\n        <!-- \u0418\u0442\u043E\u0433\u043E\u0432\u0430\u044F \u0441\u0443\u043C\u043C\u0430. -->\n        <div class=\"text-base font-bold\">\u0418\u0442\u043E\u0433\u043E: {{ totalSum | tuiFormatNumber: { precision: 2, decimalSeparator: '.', rounding: 'ceil' } }} {{ 'RUB' | tuiCurrency }}</div>\n    </div>\n</div>\n", dependencies: [{ kind: "component", type: ScOrderItemComponent, selector: "sc-order-item", inputs: ["isShowEditControls"], outputs: ["clickSettings"] }, { kind: "directive", type: ScPrintDirective, selector: "[scPrint]", inputs: ["scPrint"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TuiCheckbox, selector: "input[type=\"checkbox\"][tuiCheckbox]" }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "component", type: TuiButtonLoading, selector: "[tuiButton][loading],[tuiIconButton][loading]", inputs: ["size", "loading"] }, { kind: "pipe", type: TuiCurrencyPipe, name: "tuiCurrency" }, { kind: "pipe", type: TuiFormatNumberPipe, name: "tuiFormatNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ScOrderItemsListComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'sc-order-items-list', imports: [ScOrderItemComponent, ScPrintDirective, ReactiveFormsModule, TuiCheckbox, TuiButton, TuiButtonLoading, TuiCurrencyPipe, AsyncPipe, TuiFormatNumberPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    [formGroup]=\"selectionFormGroup\"\n    class=\"flex flex-col gap-5\"\n>\n    <!-- \u0413\u0440\u0443\u043F\u043F\u044B \u0442\u043E\u0432\u0430\u0440\u043E\u0432 \u043F\u043E \u043D\u0430\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u0438\u044F\u043C \u043F\u0440\u043E\u0434\u0430\u0436. -->\n\n    @for (item of itemsSignal(); track item.id) {\n        @if ($index !== 0) {\n            <hr class=\"mt-auto h-px w-full bg-tui-clear\" />\n        }\n\n        <div class=\"flex items-center gap-4 relative\">\n            @let isActive = !selectable() || selectionFormGroup.get(item.id)?.value;\n\n            <!-- \u0427\u0435\u043A\u0431\u043E\u043A\u0441 \u0432\u044B\u0431\u043E\u0440\u0430 \u0442\u043E\u0432\u0430\u0440\u0430. -->\n            @if (selectable()) {\n                <input\n                    tuiCheckbox\n                    [disabled]=\"itemComponent.showLoader()\"\n                    type=\"checkbox\"\n                    size=\"m\"\n                    [formControlName]=\"item.id\"\n                />\n            }\n\n            <!-- \u041A\u0430\u0440\u0442\u043E\u0447\u043A\u0430 \u0442\u043E\u0432\u0430\u0440\u0430. -->\n            <sc-order-item\n                #itemComponent\n                [product]=\"item.product\"\n                [orderItem]=\"item\"\n                [showQuantityControl]=\"canEdit() && !item.configurator\"\n                [isShowEditControls]=\"canEdit()\"\n                class=\"w-full duration-200\"\n                [class.opacity-60]=\"selectable() && !selectionFormGroup.get(item.id)?.value\"\n                (clickCardEvent)=\"openProductInfoDialog(item.product, item, orderOptions?.orderId())\"\n                (quantityValueChanges)=\"patchItem($event, itemComponent)\"\n                (clickPriceHistoryEvent)=\"openPriceHistoryChartDialog(item.product)\"\n                (clickSettings)=\"openSettingsDialog(item)\"\n                [class.pointer-events-none]=\"!isActive\"\n            />\n\n            <!-- \u041A\u043D\u043E\u043F\u043A\u0430 \u0443\u0434\u0430\u043B\u0435\u043D\u0438\u044F \u0442\u043E\u0432\u0430\u0440\u0430. -->\n            @if (canEdit()) {\n                <button\n                    tuiIconButton\n                    iconStart=\"@tui.trash\"\n                    (click)=\"deleteItem(item, itemComponent)\"\n                    [loading]=\"itemComponent.showLoader()\"\n                    size=\"s\"\n                    appearance=\"secondary\"\n                    class=\"!absolute left-1 top-1 lg:!relative lg:left-0 lg:top-0 lg:!self-center\"\n                ></button>\n            }\n        </div>\n    }\n\n    <!-- \u0424\u0443\u0442\u0435\u0440 \u0433\u0440\u0443\u043F\u043F\u044B \u0442\u043E\u0432\u0430\u0440\u043E\u0432. -->\n    <div\n        scPrint=\"cost\"\n        class=\"flex flex-col items-end gap-2.5\"\n    >\n        @let totalSum = sumSelectedItems();\n        <!-- \u0418\u0442\u043E\u0433\u043E\u0432\u0430\u044F \u0441\u0443\u043C\u043C\u0430. -->\n        <div class=\"text-base font-bold\">\u0418\u0442\u043E\u0433\u043E: {{ totalSum | tuiFormatNumber: { precision: 2, decimalSeparator: '.', rounding: 'ceil' } }} {{ 'RUB' | tuiCurrency }}</div>\n    </div>\n</div>\n" }]
+            args: [{ standalone: true, selector: 'sc-order-items-list', imports: [ScOrderItemComponent, ScPrintDirective, ReactiveFormsModule, TuiCheckbox, TuiButton, TuiIcon, TuiButtonLoading, TuiCurrencyPipe, AsyncPipe, TuiFormatNumberPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    [formGroup]=\"selectionFormGroup\"\n    class=\"flex flex-col gap-5\"\n>\n    <!-- \u0413\u0440\u0443\u043F\u043F\u044B \u0442\u043E\u0432\u0430\u0440\u043E\u0432 \u043F\u043E \u043D\u0430\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u0438\u044F\u043C \u043F\u0440\u043E\u0434\u0430\u0436. -->\n\n    @for (item of itemsSignal(); track item.id) {\n        @if ($index !== 0) {\n            <hr class=\"mt-auto h-px w-full bg-tui-clear\" />\n        }\n\n        <div class=\"flex items-center gap-4 relative\">\n            @let isActive = !selectable() || selectionFormGroup.get(item.id)?.value;\n\n            <!-- \u0427\u0435\u043A\u0431\u043E\u043A\u0441 \u0432\u044B\u0431\u043E\u0440\u0430 \u0442\u043E\u0432\u0430\u0440\u0430. -->\n            @if (selectable()) {\n                <input\n                    tuiCheckbox\n                    [disabled]=\"itemComponent.showLoader()\"\n                    type=\"checkbox\"\n                    size=\"m\"\n                    [formControlName]=\"item.id\"\n                />\n            }\n\n            <!-- \u041A\u0430\u0440\u0442\u043E\u0447\u043A\u0430 \u0442\u043E\u0432\u0430\u0440\u0430. -->\n            <sc-order-item\n                #itemComponent\n                [product]=\"item.product\"\n                [orderItem]=\"item\"\n                [showQuantityControl]=\"canEdit() && !item.configurator\"\n                [isShowEditControls]=\"canEdit()\"\n                class=\"w-full duration-200\"\n                [class.opacity-60]=\"selectable() && !selectionFormGroup.get(item.id)?.value\"\n                (clickCardEvent)=\"openProductInfoDialog(item.product, item, orderOptions?.orderId())\"\n                (quantityValueChanges)=\"patchItem($event, itemComponent)\"\n                (clickPriceHistoryEvent)=\"openPriceHistoryChartDialog(item.product)\"\n                (clickSettings)=\"openSettingsDialog(item)\"\n                [class.pointer-events-none]=\"!isActive\"\n            />\n\n            <!-- \u041A\u043D\u043E\u043F\u043A\u0430 \u0443\u0434\u0430\u043B\u0435\u043D\u0438\u044F \u0442\u043E\u0432\u0430\u0440\u0430. -->\n            @if (canEdit()) {\n                <button\n                    tuiIconButton\n                    (click)=\"deleteItem(item, itemComponent)\"\n                    [loading]=\"itemComponent.showLoader()\"\n                    size=\"s\"\n                    appearance=\"secondary\"\n                    class=\"!absolute left-1 top-1 lg:!relative lg:left-0 lg:top-0 lg:!self-center\"\n                >\n                    <tui-icon icon=\"@tui.trash\" />\n                </button>\n            }\n        </div>\n    }\n\n    <!-- \u0424\u0443\u0442\u0435\u0440 \u0433\u0440\u0443\u043F\u043F\u044B \u0442\u043E\u0432\u0430\u0440\u043E\u0432. -->\n    <div\n        scPrint=\"cost\"\n        class=\"flex flex-col items-end gap-2.5\"\n    >\n        @let totalSum = sumSelectedItems();\n        <!-- \u0418\u0442\u043E\u0433\u043E\u0432\u0430\u044F \u0441\u0443\u043C\u043C\u0430. -->\n        <div class=\"text-base font-bold\">\u0418\u0442\u043E\u0433\u043E: {{ totalSum | tuiFormatNumber: { precision: 2, decimalSeparator: '.', rounding: 'ceil' } }} {{ 'RUB' | tuiCurrency }}</div>\n    </div>\n</div>\n" }]
         }], propDecorators: { selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], selectedItemsIdsChange: [{ type: i0.Output, args: ["selectedItemsIdsChange"] }], items: [{
                 type: Input,
                 args: [{ required: true }]
@@ -8769,7 +8774,7 @@ class ScDraftComponent {
      */
     goToNewOrder(direction) {
         const ids = this.selectedItemsIds().filter((id) => direction.items.some((item) => item.id === id));
-        this.router.navigate(['orders', 'new', this.draft()?.id, direction.direction.id, 'draft'], { queryParams: { itemsIds: ids } }).catch(noop);
+        this.router.navigate(['orders', 'new', this.draft()?.id, direction.direction.id, 'draft'], { queryParams: { itemsIds: ids } }).catch(noop$1);
     }
     /**
      * Удаляет черновик и перенаправляет к списку черновиков.
@@ -8791,7 +8796,7 @@ class ScDraftComponent {
             .pipe(filter(Boolean), switchMap(() => this.draftsService.delete$(id)), takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
             this.deleteEvent.emit();
-            this.router.navigate(['/drafts']).catch(noop);
+            this.router.navigate(['/drafts']).catch(noop$1);
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ScDraftComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -8856,7 +8861,7 @@ class ScFrequentlyAskedQuestionsComponent {
          */
         this.showLoading = input(false, ...(ngDevMode ? [{ debugName: "showLoading" }] : /* istanbul ignore next */ []));
         /**
-         * Признак что приложение запущено на сервере.
+         * Признак, что приложение запущено на сервере.
          */
         this.isServer = inject(IS_SERVER);
     }
@@ -8948,6 +8953,18 @@ class ScFrequentlyAskedQuestionsWithGroupsComponent {
          * Сервис конвертации данных.
          */
         this.convertersService = inject(ScConvertersService);
+        /**
+         * Сервис установки SEO-данных приложения.
+         */
+        this.seoService = inject(ScSeoService);
+        /**
+         * Фабрика для создания данных Schema.org.
+         */
+        this.schemaOrgFactory = inject(SchemaOrgFactory);
+        /**
+         * Сервис маршрутизации.
+         */
+        this.router = inject(Router);
         /**
          * Индекс первой страницы.
          */
@@ -8984,7 +9001,12 @@ class ScFrequentlyAskedQuestionsWithGroupsComponent {
         // Нулевой debounceTime для случая, когда меняются направление и поле сортировки одновременно.
         debounceTime(0), switchMap((value) => this.frequentlyAskedQuestionsService
             .getFrequentlyAskedQuestions$(this.convertersService.removeNull(value))
-            .pipe(startWith(null))), shareReplay({ refCount: true, bufferSize: 1 }));
+            .pipe(startWith(null))), tap((data) => {
+            if (data) {
+                const pageTitle = 'Часто задаваемые вопросы - FAQ';
+                this.seoService.setByDefault(pageTitle, undefined, this.schemaOrgFactory.generateForFaqPage(data.data, this.router.url, pageTitle));
+            }
+        }), shareReplay({ refCount: true, bufferSize: 1 }));
         /**
          * {@link Observable} изменения общего количества страниц пагинации.
          */
@@ -9160,11 +9182,11 @@ class ScPreviewSampleComponent {
         this.isReverse = input(false, ...(ngDevMode ? [{ debugName: "isReverse" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ScPreviewSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ScPreviewSampleComponent, isStandalone: true, selector: "sc-preview-sample", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, sample: { classPropertyName: "sample", publicName: "sample", isSignal: true, isRequired: true, transformFunction: null }, isShowCarouselSwitches: { classPropertyName: "isShowCarouselSwitches", publicName: "isShowCarouselSwitches", isSignal: true, isRequired: false, transformFunction: null }, isReverse: { classPropertyName: "isReverse", publicName: "isReverse", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { index: "indexChange" }, host: { attributes: { "ngSkipHydration": "true" } }, ngImport: i0, template: "@if (sample(); as sample) {\n    <div\n        class=\"mb-4 flex flex-col-reverse gap-4 md:mb-0 md:flex-row md:gap-8\"\n        [class.md:!flex-row-reverse]=\"isReverse()\"\n    >\n        @let isShownSwitches = sample.items && sample.items.length > 1;\n        <div class=\"flex max-w-96 flex-1 flex-col justify-center self-center md:max-w-none md:gap-4\">\n            <div class=\"flex w-full flex-col gap-3 md:gap-4 md:px-8\">\n                <div class=\"text-body-l-bold\">{{ sample.title }}</div>\n                @if (isShownSwitches) {\n                    <div class=\"flex gap-4\">\n                        @for (item of sample.items; track item; let itemIndex = $index) {\n                            <span\n                                tuiAvatar\n                                [round]=\"false\"\n                                (tuiHoveredChange)=\"index.set(itemIndex)\"\n                                [class.active]=\"index() === itemIndex\"\n                            >\n                                <picture>\n                                    <source\n                                        type=\"image/webp\"\n                                        [srcset]=\"item.buttonImageUrl.webp\"\n                                    />\n                                    <img\n                                        [src]=\"item.buttonImageUrl.defaultFormat\"\n                                        [alt]=\"item.buttonImageUrl.alt ?? '\u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0430\u0442\u0435\u043B\u044F \u0446\u0432\u0435\u0442\u0430 ' + item.color\"\n                                    />\n                                </picture>\n                            </span>\n                        }\n                    </div>\n                }\n                @if (sample.items; as items) {\n                    <div class=\"text-body-m-bold\">\n                        {{ items[index()].color }}\n                    </div>\n                }\n                <div>{{ sample.description }}</div>\n                @if (sample.descriptionImageUrl) {\n                    <img\n                        [src]=\"sample.descriptionImageUrl\"\n                        alt=\"\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 \u0432 \u043E\u043F\u0438\u0441\u0430\u043D\u0438\u0438 \u043E\u0431\u0440\u0430\u0437\u0446\u0430 {{ sample.title }}\"\n                        class=\"w-fit\"\n                    />\n                }\n                @if (sample.items && sample.items[index()].actions?.length) {\n                    <div class=\"flex flex-wrap gap-3 md:gap-4\">\n                        @for (action of sample.items[index()].actions; track action) {\n                            <a\n                                tuiButton\n                                [attr.href]=\"action.href\"\n                                (click)=\"action.handler ? $event.preventDefault() : {}; action.handler?.()\"\n                                [iconStart]=\"action.icon\"\n                                appearance=\"secondary\"\n                            >\n                                {{ action.label }}\n                            </a>\n                        }\n                    </div>\n                }\n            </div>\n        </div>\n        <div class=\"relative h-[19em] flex-1 overflow-hidden rounded-xl shadow-tui-shadow md:h-96 lg:h-[28rem]\">\n            @if (isShownSwitches && isShowCarouselSwitches()) {\n                <button\n                    tuiIconButton\n                    (click)=\"carousel.prev()\"\n                    iconStart=\"@tui.chevron-left\"\n                    appearance=\"icon\"\n                    class=\"!absolute left-0 top-1/2 z-10 ml-2 -translate-y-1/2\"\n                ></button>\n            }\n            <tui-carousel\n                #carousel\n                [(index)]=\"index\"\n                [duration]=\"duration()\"\n                [max]=\"(sample.items?.length ?? 1) - 1\"\n                class=\"h-[19em] w-full md:h-96 lg:h-[28rem]\"\n            >\n                <ng-container *tuiItem=\"let slide\">\n                    @let items = sample.items ?? [];\n                    @let item = slide < items.length ? items[slide] : undefined;\n                    @if (item) {\n                        <picture>\n                            <source\n                                type=\"image/webp\"\n                                [srcset]=\"item.carouselItemImage.webp\"\n                            />\n                            <img\n                                [src]=\"item.carouselItemImage.defaultFormat\"\n                                [alt]=\"item.carouselItemImage.alt ?? '\u041E\u0431\u0440\u0430\u0437\u0435\u0446 \u0442\u043E\u0432\u0430\u0440\u0430 ' + sample.title + ' \u0432 \u0446\u0432\u0435\u0442\u0435 ' + item.color + slide\"\n                                class=\"h-[19em] w-full object-cover object-right md:h-96 lg:h-[28rem]\"\n                            />\n                        </picture>\n                    }\n                </ng-container>\n            </tui-carousel>\n            @if (isShownSwitches && isShowCarouselSwitches()) {\n                <button\n                    tuiIconButton\n                    (click)=\"carousel.next()\"\n                    iconStart=\"@tui.chevron-right\"\n                    appearance=\"icon\"\n                    class=\"!absolute right-0 top-1/2 z-10 mr-2 -translate-y-1/2\"\n                ></button>\n            }\n        </div>\n    </div>\n}\n", styles: [":host{--tui-carousel-padding: 0}tui-avatar.active{--tw-ring-color: var(--tui-background-accent-1);--tw-ring-offset-width: 2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))}\n"], dependencies: [{ kind: "directive", type: TuiAvatar, selector: "[tuiAvatar]", inputs: ["size", "round", "badge"] }, { kind: "directive", type: TuiHovered, selector: "[tuiHoveredChange]", outputs: ["tuiHoveredChange"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: i2.TuiCarouselComponent, selector: "tui-carousel", inputs: ["index", "min", "max"], outputs: ["indexChange"] }, { kind: "directive", type: i2.TuiCarouselDirective, selector: "tui-carousel[duration]", inputs: ["duration"], exportAs: ["tuiCarousel"] }, { kind: "directive", type: i2$2.TuiItem, selector: "[tuiItem]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ScPreviewSampleComponent, isStandalone: true, selector: "sc-preview-sample", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, sample: { classPropertyName: "sample", publicName: "sample", isSignal: true, isRequired: true, transformFunction: null }, isShowCarouselSwitches: { classPropertyName: "isShowCarouselSwitches", publicName: "isShowCarouselSwitches", isSignal: true, isRequired: false, transformFunction: null }, isReverse: { classPropertyName: "isReverse", publicName: "isReverse", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { index: "indexChange" }, host: { attributes: { "ngSkipHydration": "true" } }, ngImport: i0, template: "@if (sample(); as sample) {\n    <div\n        class=\"mb-4 flex flex-col-reverse gap-4 md:mb-0 md:flex-row md:gap-8\"\n        [class.md:!flex-row-reverse]=\"isReverse()\"\n    >\n        @let isShownSwitches = sample.items && sample.items.length > 1;\n        <div class=\"flex max-w-96 flex-1 flex-col justify-center self-center md:max-w-none md:gap-4\">\n            <div class=\"flex w-full flex-col gap-3 md:gap-4 md:px-8\">\n                <div class=\"text-body-l-bold\">{{ sample.title }}</div>\n                @if (isShownSwitches) {\n                    <div class=\"flex gap-4\">\n                        @for (item of sample.items; track item; let itemIndex = $index) {\n                            <span\n                                tuiAvatar\n                                [round]=\"false\"\n                                (tuiHoveredChange)=\"index.set(itemIndex)\"\n                                [class.active]=\"index() === itemIndex\"\n                            >\n                                <picture>\n                                    <source\n                                        type=\"image/webp\"\n                                        [srcset]=\"item.buttonImageUrl.webp\"\n                                    />\n                                    <img\n                                        [src]=\"item.buttonImageUrl.defaultFormat\"\n                                        [alt]=\"item.buttonImageUrl.alt ?? '\u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0430\u0442\u0435\u043B\u044F \u0446\u0432\u0435\u0442\u0430 ' + item.color\"\n                                    />\n                                </picture>\n                            </span>\n                        }\n                    </div>\n                }\n                @if (sample.items; as items) {\n                    <div class=\"text-body-m-bold\">\n                        {{ items[index()].color }}\n                    </div>\n                }\n                <div>{{ sample.description }}</div>\n                @if (sample.descriptionImageUrl) {\n                    <img\n                        [src]=\"sample.descriptionImageUrl\"\n                        alt=\"\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 \u0432 \u043E\u043F\u0438\u0441\u0430\u043D\u0438\u0438 \u043E\u0431\u0440\u0430\u0437\u0446\u0430 {{ sample.title }}\"\n                        class=\"w-fit\"\n                    />\n                }\n                @if (sample.items && sample.items[index()].actions?.length) {\n                    <div class=\"flex flex-wrap gap-3 md:gap-4\">\n                        @for (action of sample.items[index()].actions; track action) {\n                            <a\n                                tuiButton\n                                [attr.href]=\"action.href\"\n                                (click)=\"action.handler ? $event.preventDefault() : {}; action.handler?.()\"\n                                [iconStart]=\"action.icon\"\n                                appearance=\"secondary\"\n                            >\n                                {{ action.label }}\n                            </a>\n                        }\n                    </div>\n                }\n            </div>\n        </div>\n        <div class=\"relative h-[19em] flex-1 overflow-hidden rounded-xl shadow-tui-shadow md:h-96 lg:h-[28rem]\">\n            @if (isShownSwitches && isShowCarouselSwitches()) {\n                <button\n                    tuiIconButton\n                    (click)=\"carousel.prev()\"\n                    appearance=\"icon\"\n                    class=\"!absolute left-0 top-1/2 z-10 ml-2 -translate-y-1/2\"\n                >\n                    <tui-icon icon=\"@tui.chevron-left\" />\n                </button>\n            }\n            <tui-carousel\n                #carousel\n                [(index)]=\"index\"\n                [duration]=\"duration()\"\n                [max]=\"(sample.items?.length ?? 1) - 1\"\n                class=\"h-[19em] w-full md:h-96 lg:h-[28rem]\"\n            >\n                <ng-container *tuiItem=\"let slide\">\n                    @let items = sample.items ?? [];\n                    @let item = slide < items.length ? items[slide] : undefined;\n                    @if (item) {\n                        <picture>\n                            <source\n                                type=\"image/webp\"\n                                [srcset]=\"item.carouselItemImage.webp\"\n                            />\n                            <img\n                                [src]=\"item.carouselItemImage.defaultFormat\"\n                                [alt]=\"item.carouselItemImage.alt ?? '\u041E\u0431\u0440\u0430\u0437\u0435\u0446 \u0442\u043E\u0432\u0430\u0440\u0430 ' + sample.title + ' \u0432 \u0446\u0432\u0435\u0442\u0435 ' + item.color + slide\"\n                                class=\"h-[19em] w-full object-cover object-right md:h-96 lg:h-[28rem]\"\n                            />\n                        </picture>\n                    }\n                </ng-container>\n            </tui-carousel>\n            @if (isShownSwitches && isShowCarouselSwitches()) {\n                <button\n                    tuiIconButton\n                    (click)=\"carousel.next()\"\n                    appearance=\"icon\"\n                    class=\"!absolute right-0 top-1/2 z-10 mr-2 -translate-y-1/2\"\n                >\n                    <tui-icon icon=\"@tui.chevron-right\" />\n                </button>\n            }\n        </div>\n    </div>\n}\n", styles: [":host{--tui-carousel-padding: 0}tui-avatar.active{--tw-ring-color: var(--tui-background-accent-1);--tw-ring-offset-width: 2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))}\n"], dependencies: [{ kind: "directive", type: TuiAvatar, selector: "[tuiAvatar]", inputs: ["size", "round", "badge"] }, { kind: "directive", type: TuiHovered, selector: "[tuiHoveredChange]", outputs: ["tuiHoveredChange"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "component", type: i2.TuiCarouselComponent, selector: "tui-carousel", inputs: ["index", "min", "max"], outputs: ["indexChange"] }, { kind: "directive", type: i2.TuiCarouselDirective, selector: "tui-carousel[duration]", inputs: ["duration"], exportAs: ["tuiCarousel"] }, { kind: "directive", type: i2$2.TuiItem, selector: "[tuiItem]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ScPreviewSampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-preview-sample', host: { ngSkipHydration: 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TuiTransitioned, TuiAppearance$1, TuiWithAppearance$1, TuiIcons$1, TuiAvatar, TuiHovered, TuiWithIcons$1, TuiButton, TuiCarousel], template: "@if (sample(); as sample) {\n    <div\n        class=\"mb-4 flex flex-col-reverse gap-4 md:mb-0 md:flex-row md:gap-8\"\n        [class.md:!flex-row-reverse]=\"isReverse()\"\n    >\n        @let isShownSwitches = sample.items && sample.items.length > 1;\n        <div class=\"flex max-w-96 flex-1 flex-col justify-center self-center md:max-w-none md:gap-4\">\n            <div class=\"flex w-full flex-col gap-3 md:gap-4 md:px-8\">\n                <div class=\"text-body-l-bold\">{{ sample.title }}</div>\n                @if (isShownSwitches) {\n                    <div class=\"flex gap-4\">\n                        @for (item of sample.items; track item; let itemIndex = $index) {\n                            <span\n                                tuiAvatar\n                                [round]=\"false\"\n                                (tuiHoveredChange)=\"index.set(itemIndex)\"\n                                [class.active]=\"index() === itemIndex\"\n                            >\n                                <picture>\n                                    <source\n                                        type=\"image/webp\"\n                                        [srcset]=\"item.buttonImageUrl.webp\"\n                                    />\n                                    <img\n                                        [src]=\"item.buttonImageUrl.defaultFormat\"\n                                        [alt]=\"item.buttonImageUrl.alt ?? '\u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0430\u0442\u0435\u043B\u044F \u0446\u0432\u0435\u0442\u0430 ' + item.color\"\n                                    />\n                                </picture>\n                            </span>\n                        }\n                    </div>\n                }\n                @if (sample.items; as items) {\n                    <div class=\"text-body-m-bold\">\n                        {{ items[index()].color }}\n                    </div>\n                }\n                <div>{{ sample.description }}</div>\n                @if (sample.descriptionImageUrl) {\n                    <img\n                        [src]=\"sample.descriptionImageUrl\"\n                        alt=\"\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 \u0432 \u043E\u043F\u0438\u0441\u0430\u043D\u0438\u0438 \u043E\u0431\u0440\u0430\u0437\u0446\u0430 {{ sample.title }}\"\n                        class=\"w-fit\"\n                    />\n                }\n                @if (sample.items && sample.items[index()].actions?.length) {\n                    <div class=\"flex flex-wrap gap-3 md:gap-4\">\n                        @for (action of sample.items[index()].actions; track action) {\n                            <a\n                                tuiButton\n                                [attr.href]=\"action.href\"\n                                (click)=\"action.handler ? $event.preventDefault() : {}; action.handler?.()\"\n                                [iconStart]=\"action.icon\"\n                                appearance=\"secondary\"\n                            >\n                                {{ action.label }}\n                            </a>\n                        }\n                    </div>\n                }\n            </div>\n        </div>\n        <div class=\"relative h-[19em] flex-1 overflow-hidden rounded-xl shadow-tui-shadow md:h-96 lg:h-[28rem]\">\n            @if (isShownSwitches && isShowCarouselSwitches()) {\n                <button\n                    tuiIconButton\n                    (click)=\"carousel.prev()\"\n                    iconStart=\"@tui.chevron-left\"\n                    appearance=\"icon\"\n                    class=\"!absolute left-0 top-1/2 z-10 ml-2 -translate-y-1/2\"\n                ></button>\n            }\n            <tui-carousel\n                #carousel\n                [(index)]=\"index\"\n                [duration]=\"duration()\"\n                [max]=\"(sample.items?.length ?? 1) - 1\"\n                class=\"h-[19em] w-full md:h-96 lg:h-[28rem]\"\n            >\n                <ng-container *tuiItem=\"let slide\">\n                    @let items = sample.items ?? [];\n                    @let item = slide < items.length ? items[slide] : undefined;\n                    @if (item) {\n                        <picture>\n                            <source\n                                type=\"image/webp\"\n                                [srcset]=\"item.carouselItemImage.webp\"\n                            />\n                            <img\n                                [src]=\"item.carouselItemImage.defaultFormat\"\n                                [alt]=\"item.carouselItemImage.alt ?? '\u041E\u0431\u0440\u0430\u0437\u0435\u0446 \u0442\u043E\u0432\u0430\u0440\u0430 ' + sample.title + ' \u0432 \u0446\u0432\u0435\u0442\u0435 ' + item.color + slide\"\n                                class=\"h-[19em] w-full object-cover object-right md:h-96 lg:h-[28rem]\"\n                            />\n                        </picture>\n                    }\n                </ng-container>\n            </tui-carousel>\n            @if (isShownSwitches && isShowCarouselSwitches()) {\n                <button\n                    tuiIconButton\n                    (click)=\"carousel.next()\"\n                    iconStart=\"@tui.chevron-right\"\n                    appearance=\"icon\"\n                    class=\"!absolute right-0 top-1/2 z-10 mr-2 -translate-y-1/2\"\n                ></button>\n            }\n        </div>\n    </div>\n}\n", styles: [":host{--tui-carousel-padding: 0}tui-avatar.active{--tw-ring-color: var(--tui-background-accent-1);--tw-ring-offset-width: 2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))}\n"] }]
+            args: [{ selector: 'sc-preview-sample', host: { ngSkipHydration: 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TuiTransitioned, TuiAppearance$1, TuiWithAppearance$1, TuiIcons$1, TuiAvatar, TuiHovered, TuiWithIcons$1, TuiButton, TuiIcon, TuiCarousel], template: "@if (sample(); as sample) {\n    <div\n        class=\"mb-4 flex flex-col-reverse gap-4 md:mb-0 md:flex-row md:gap-8\"\n        [class.md:!flex-row-reverse]=\"isReverse()\"\n    >\n        @let isShownSwitches = sample.items && sample.items.length > 1;\n        <div class=\"flex max-w-96 flex-1 flex-col justify-center self-center md:max-w-none md:gap-4\">\n            <div class=\"flex w-full flex-col gap-3 md:gap-4 md:px-8\">\n                <div class=\"text-body-l-bold\">{{ sample.title }}</div>\n                @if (isShownSwitches) {\n                    <div class=\"flex gap-4\">\n                        @for (item of sample.items; track item; let itemIndex = $index) {\n                            <span\n                                tuiAvatar\n                                [round]=\"false\"\n                                (tuiHoveredChange)=\"index.set(itemIndex)\"\n                                [class.active]=\"index() === itemIndex\"\n                            >\n                                <picture>\n                                    <source\n                                        type=\"image/webp\"\n                                        [srcset]=\"item.buttonImageUrl.webp\"\n                                    />\n                                    <img\n                                        [src]=\"item.buttonImageUrl.defaultFormat\"\n                                        [alt]=\"item.buttonImageUrl.alt ?? '\u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0430\u0442\u0435\u043B\u044F \u0446\u0432\u0435\u0442\u0430 ' + item.color\"\n                                    />\n                                </picture>\n                            </span>\n                        }\n                    </div>\n                }\n                @if (sample.items; as items) {\n                    <div class=\"text-body-m-bold\">\n                        {{ items[index()].color }}\n                    </div>\n                }\n                <div>{{ sample.description }}</div>\n                @if (sample.descriptionImageUrl) {\n                    <img\n                        [src]=\"sample.descriptionImageUrl\"\n                        alt=\"\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 \u0432 \u043E\u043F\u0438\u0441\u0430\u043D\u0438\u0438 \u043E\u0431\u0440\u0430\u0437\u0446\u0430 {{ sample.title }}\"\n                        class=\"w-fit\"\n                    />\n                }\n                @if (sample.items && sample.items[index()].actions?.length) {\n                    <div class=\"flex flex-wrap gap-3 md:gap-4\">\n                        @for (action of sample.items[index()].actions; track action) {\n                            <a\n                                tuiButton\n                                [attr.href]=\"action.href\"\n                                (click)=\"action.handler ? $event.preventDefault() : {}; action.handler?.()\"\n                                [iconStart]=\"action.icon\"\n                                appearance=\"secondary\"\n                            >\n                                {{ action.label }}\n                            </a>\n                        }\n                    </div>\n                }\n            </div>\n        </div>\n        <div class=\"relative h-[19em] flex-1 overflow-hidden rounded-xl shadow-tui-shadow md:h-96 lg:h-[28rem]\">\n            @if (isShownSwitches && isShowCarouselSwitches()) {\n                <button\n                    tuiIconButton\n                    (click)=\"carousel.prev()\"\n                    appearance=\"icon\"\n                    class=\"!absolute left-0 top-1/2 z-10 ml-2 -translate-y-1/2\"\n                >\n                    <tui-icon icon=\"@tui.chevron-left\" />\n                </button>\n            }\n            <tui-carousel\n                #carousel\n                [(index)]=\"index\"\n                [duration]=\"duration()\"\n                [max]=\"(sample.items?.length ?? 1) - 1\"\n                class=\"h-[19em] w-full md:h-96 lg:h-[28rem]\"\n            >\n                <ng-container *tuiItem=\"let slide\">\n                    @let items = sample.items ?? [];\n                    @let item = slide < items.length ? items[slide] : undefined;\n                    @if (item) {\n                        <picture>\n                            <source\n                                type=\"image/webp\"\n                                [srcset]=\"item.carouselItemImage.webp\"\n                            />\n                            <img\n                                [src]=\"item.carouselItemImage.defaultFormat\"\n                                [alt]=\"item.carouselItemImage.alt ?? '\u041E\u0431\u0440\u0430\u0437\u0435\u0446 \u0442\u043E\u0432\u0430\u0440\u0430 ' + sample.title + ' \u0432 \u0446\u0432\u0435\u0442\u0435 ' + item.color + slide\"\n                                class=\"h-[19em] w-full object-cover object-right md:h-96 lg:h-[28rem]\"\n                            />\n                        </picture>\n                    }\n                </ng-container>\n            </tui-carousel>\n            @if (isShownSwitches && isShowCarouselSwitches()) {\n                <button\n                    tuiIconButton\n                    (click)=\"carousel.next()\"\n                    appearance=\"icon\"\n                    class=\"!absolute right-0 top-1/2 z-10 mr-2 -translate-y-1/2\"\n                >\n                    <tui-icon icon=\"@tui.chevron-right\" />\n                </button>\n            }\n        </div>\n    </div>\n}\n", styles: [":host{--tui-carousel-padding: 0}tui-avatar.active{--tw-ring-color: var(--tui-background-accent-1);--tw-ring-offset-width: 2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))}\n"] }]
         }], propDecorators: { index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }, { type: i0.Output, args: ["indexChange"] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], sample: [{ type: i0.Input, args: [{ isSignal: true, alias: "sample", required: true }] }], isShowCarouselSwitches: [{ type: i0.Input, args: [{ isSignal: true, alias: "isShowCarouselSwitches", required: false }] }], isReverse: [{ type: i0.Input, args: [{ isSignal: true, alias: "isReverse", required: false }] }] } });
 
 /**
@@ -9214,11 +9236,11 @@ class ScPreviewSamplesMosquitoComponent {
         this.isShowCarouselSwitches = input(!/Mobi|Android/i.test(inject(WA_NAVIGATOR).userAgent), ...(ngDevMode ? [{ debugName: "isShowCarouselSwitches" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ScPreviewSamplesMosquitoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ScPreviewSamplesMosquitoComponent, isStandalone: true, selector: "sc-preview-samples-mosquito", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, configuratorPageUrl: { classPropertyName: "configuratorPageUrl", publicName: "configuratorPageUrl", isSignal: true, isRequired: false, transformFunction: null }, autoSlideIntervale: { classPropertyName: "autoSlideIntervale", publicName: "autoSlideIntervale", isSignal: true, isRequired: false, transformFunction: null }, isShowCarouselSwitches: { classPropertyName: "isShowCarouselSwitches", publicName: "isShowCarouselSwitches", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openConfiguratorClick: "openConfiguratorClick", openConsultationClick: "openConsultationClick" }, ngImport: i0, template: "@let descriptions = config().descriptions;\n@let colors = config().color;\n@let netTypes = config().netType;\n\n<!-- \u041E\u0441\u043D\u043E\u0432\u043D\u043E\u0439 \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440 \u0441 \u0441\u0435\u0442\u043A\u043E\u0439. -->\n<div class=\"grid grid-cols-1 gap-4 lg:grid-cols-2\">\n    <!-- \u041B\u0435\u0432\u0430\u044F \u043A\u043E\u043B\u043E\u043D\u043A\u0430 \u0441 \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u0435\u0439. -->\n    <div class=\"flex flex-col gap-4\">\n        <!-- \u041A\u043D\u043E\u043F\u043A\u0438 \u0432\u044B\u0431\u043E\u0440\u0430 \u0442\u0438\u043F\u0430 \u0441\u0435\u0442\u043A\u0438. -->\n        <div class=\"flex flex-wrap gap-4\">\n            @for (item of netTypes; track item; let itemIndex = $index) {\n                <button\n                    tuiCardLarge\n                    tuiHeader\n                    tuiSurface=\"floating\"\n                    type=\"button\"\n                    (click)=\"netTypeIndex.set(itemIndex)\"\n                    [class.active]=\"netTypeIndex() === itemIndex\"\n                    class=\"h-12 !items-center gap-2 !rounded-xl !px-4 !py-0\"\n                >\n                    <img\n                        [src]=\"config().icons[item]\"\n                        [alt]=\"'\u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0430\u0442\u0435\u043B\u044F \u0442\u0438\u043F\u0430 \u0441\u0435\u0442\u043A\u0438 ' + descriptions['netType'][item]\"\n                        class=\"size-8\"\n                    />\n                    <div>{{ descriptions['netType'][item] }}</div>\n                </button>\n            }\n        </div>\n\n        <!-- \u041E\u043F\u0438\u0441\u0430\u043D\u0438\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0442\u0438\u043F\u0430 \u0441\u0435\u0442\u043A\u0438. -->\n        <div class=\"text-body-l-bold\">\u0421\u0435\u0442\u043A\u0430 {{ descriptions['netType'][netTypeIndexSelected()] }}</div>\n        {{ config().subtitles[netTypeIndexSelected()] }}\n\n        <!-- \u0418\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u043E\u043D\u043D\u044B\u0435 \u0431\u0435\u0439\u0434\u0436\u0438. -->\n        <div class=\"flex flex-wrap items-center gap-1 text-body-m\">\n            <span\n                tuiBadge\n                appearance=\"custom\"\n                class=\"rounded-full border-2 border-solid border-tui-text-primary bg-white !p-[0.4rem] font-bold text-tui-text-primary\"\n            >\n                {{ colors.length }}\n            </span>\n            - \u043A\u043E\u043B\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u0446\u0432\u0435\u0442\u043E\u0432 \u043F\u0440\u043E\u0444\u0438\u043B\u044F\n        </div>\n        <div class=\"flex flex-wrap items-center gap-1 text-body-m\">\n            <span\n                tuiBadge\n                appearance=\"custom\"\n                class=\"rounded-full border-2 border-solid border-tui-text-primary bg-white !p-[0.4rem] font-bold text-tui-text-primary\"\n            >\n                {{ netTypes.length }}\n            </span>\n            - \u043A\u043E\u043B\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u0442\u0438\u043F\u043E\u0432 \u0441\u0435\u0442\u043E\u043A\n        </div>\n\n        <!-- \u0420\u0430\u0437\u043C\u0435\u0440\u044B \u0441\u0435\u0442\u043E\u043A. -->\n        <div class=\"text-body-m\">\n            <tui-icon icon=\"@tui.sc.grid-height-arrow\" />\n            \u0412\u044B\u0441\u043E\u0442\u0430 \u0441\u0435\u0442\u043E\u043A \u043E\u0442 {{ config().minHeight }} \u0434\u043E {{ config().maxHeights[netTypeIndexSelected()] }} \u043C\u043C\n        </div>\n        <div class=\"text-body-m\">\n            <tui-icon icon=\"@tui.sc.grid-width-arrow\" />\n            \u0428\u0438\u0440\u0438\u043D\u0430 \u0441\u0435\u0442\u043E\u043A \u043E\u0442 {{ config().minWidth }} \u0434\u043E {{ config().maxWidths[netTypeIndexSelected()] }} \u043C\u043C\n        </div>\n\n        <!-- \u0422\u0435\u0433\u0438 \u0445\u0430\u0440\u0430\u043A\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043A. -->\n        <div class=\"flex flex-wrap gap-2\">\n            @for (tag of config().tags[netTypeIndexSelected()]; track tag) {\n                <button\n                    tuiChip\n                    appearance=\"neutral\"\n                >\n                    {{ tag }}\n                </button>\n            }\n        </div>\n\n        <!-- \u0412\u044B\u0431\u043E\u0440 \u0446\u0432\u0435\u0442\u0430 \u043F\u0440\u043E\u0444\u0438\u043B\u044F. -->\n        <div class=\"flex gap-4\">\n            @for (image of config().color; track image; let itemIndex = $index) {\n                <picture\n                    class=\"size-11 rounded-xl\"\n                    (tuiHoveredChange)=\"colorIndex.set(itemIndex)\"\n                >\n                    @let color = config().color[colorIndex()];\n                    <source\n                        type=\"image/webp\"\n                        [srcset]=\"config().colorsIcons[image].webp\"\n                    />\n                    <img\n                        [class.active]=\"colorIndex() === itemIndex\"\n                        [src]=\"config().colorsIcons[image].defaultFormat\"\n                        [alt]=\"config().colorsIcons[image].alt ?? '\u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0430\u0442\u0435\u043B\u044F \u0446\u0432\u0435\u0442\u0430 ' + descriptions['color'][color]\"\n                        class=\"size-11 rounded-xl\"\n                    />\n                </picture>\n            }\n        </div>\n\n        <!-- \u041A\u043D\u043E\u043F\u043A\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439. -->\n        <div class=\"flex gap-2\">\n            <a\n                tuiButton\n                [attr.href]=\"configuratorPageUrl()\"\n                (click)=\"$event.preventDefault(); openConfiguratorClick.emit()\"\n                iconStart=\"@tui.sliders-horizontal\"\n            >\n                \u0421\u0434\u0435\u043B\u0430\u0442\u044C \u0440\u0430\u0441\u0447\u0435\u0442\n            </a>\n\n            <button\n                tuiButton\n                (click)=\"openConsultationClick.emit()\"\n                iconStart=\"@tui.messages-square\"\n            >\n                \u041A\u043E\u043D\u0441\u0443\u043B\u044C\u0442\u0430\u0446\u0438\u044F\n            </button>\n        </div>\n    </div>\n\n    <!-- \u041F\u0440\u0430\u0432\u0430\u044F \u043A\u043E\u043B\u043E\u043D\u043A\u0430 \u0441 \u043A\u0430\u0440\u0443\u0441\u0435\u043B\u044C\u044E \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0439. -->\n    <div class=\"relative -order-1 h-[19em] flex-1 overflow-hidden rounded-xl shadow-tui-shadow md:h-96 lg:order-2 lg:h-[28rem]\">\n        <button\n            tuiIconButton\n            iconStart=\"@tui.chevron-left\"\n            (click)=\"carousel.prev()\"\n            appearance=\"icon\"\n            class=\"!absolute left-0 top-1/2 z-10 ml-2 -translate-y-1/2\"\n        ></button>\n\n        @let imagePreviews = config().imagePreviewsByColor[colorIndexSelected()];\n\n        <tui-carousel\n            #carousel\n            [duration]=\"autoSlideIntervale()\"\n            [max]=\"imagePreviews.length - 1\"\n            class=\"h-[19em] w-full md:h-96 lg:h-[28rem]\"\n        >\n            <ng-container *tuiItem=\"let slide\">\n                @let item = slide < imagePreviews.length ? imagePreviews[slide] : undefined;\n                @if (item) {\n                    <picture>\n                        <source\n                            type=\"image/webp\"\n                            [srcset]=\"item.webp\"\n                        />\n                        <img\n                            [alt]=\"item.alt ?? '\u041C\u043E\u0441\u043A\u0438\u0442\u043D\u0430\u044F \u0441\u0435\u0442\u043A\u0430 \u0432 \u0446\u0432\u0435\u0442\u0435 ' + descriptions['color'][colorIndexSelected()] + slide\"\n                            [src]=\"item.defaultFormat\"\n                            class=\"h-[19em] w-full object-cover object-center md:h-96 lg:h-[28rem]\"\n                        />\n                    </picture>\n                }\n            </ng-container>\n        </tui-carousel>\n        <button\n            tuiIconButton\n            iconStart=\"@tui.chevron-right\"\n            (click)=\"carousel.next()\"\n            appearance=\"icon\"\n            class=\"!absolute right-0 top-1/2 z-10 mr-2 -translate-y-1/2\"\n        ></button>\n    </div>\n</div>\n", styles: [":host{--tui-carousel-padding: 0}img.active{--tw-ring-color: var(--tui-background-accent-1);--tw-ring-offset-width: 2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))}button[tuicardlarge]{border:solid 2px white}button[tuicardlarge].active{border-color:var(--tui-background-accent-1)}\n"], dependencies: [{ kind: "component", type: i2.TuiCarouselComponent, selector: "tui-carousel", inputs: ["index", "min", "max"], outputs: ["indexChange"] }, { kind: "directive", type: i2.TuiCarouselDirective, selector: "tui-carousel[duration]", inputs: ["duration"], exportAs: ["tuiCarousel"] }, { kind: "directive", type: i2$2.TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "directive", type: TuiChip, selector: "[tuiChip]", inputs: ["size"] }, { kind: "directive", type: TuiBadge, selector: "[tuiBadge],tui-icon[tuiBadge]", inputs: ["size"] }, { kind: "directive", type: TuiHovered, selector: "[tuiHoveredChange]", outputs: ["tuiHoveredChange"] }, { kind: "directive", type: TuiCardLarge, selector: "[tuiCardLarge]", inputs: ["tuiCardLarge"] }, { kind: "directive", type: TuiHeader, selector: "[tuiHeader]", inputs: ["tuiHeader"] }, { kind: "directive", type: TuiSurface, selector: "[tuiSurface]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ScPreviewSamplesMosquitoComponent, isStandalone: true, selector: "sc-preview-samples-mosquito", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, configuratorPageUrl: { classPropertyName: "configuratorPageUrl", publicName: "configuratorPageUrl", isSignal: true, isRequired: false, transformFunction: null }, autoSlideIntervale: { classPropertyName: "autoSlideIntervale", publicName: "autoSlideIntervale", isSignal: true, isRequired: false, transformFunction: null }, isShowCarouselSwitches: { classPropertyName: "isShowCarouselSwitches", publicName: "isShowCarouselSwitches", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openConfiguratorClick: "openConfiguratorClick", openConsultationClick: "openConsultationClick" }, ngImport: i0, template: "@let descriptions = config().descriptions;\n@let colors = config().color;\n@let netTypes = config().netType;\n\n<!-- \u041E\u0441\u043D\u043E\u0432\u043D\u043E\u0439 \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440 \u0441 \u0441\u0435\u0442\u043A\u043E\u0439. -->\n<div class=\"grid grid-cols-1 gap-4 lg:grid-cols-2\">\n    <!-- \u041B\u0435\u0432\u0430\u044F \u043A\u043E\u043B\u043E\u043D\u043A\u0430 \u0441 \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u0435\u0439. -->\n    <div class=\"flex flex-col gap-4\">\n        <!-- \u041A\u043D\u043E\u043F\u043A\u0438 \u0432\u044B\u0431\u043E\u0440\u0430 \u0442\u0438\u043F\u0430 \u0441\u0435\u0442\u043A\u0438. -->\n        <div class=\"flex flex-wrap gap-4\">\n            @for (item of netTypes; track item; let itemIndex = $index) {\n                <button\n                    tuiCardLarge\n                    tuiHeader\n                    tuiSurface=\"floating\"\n                    type=\"button\"\n                    (click)=\"netTypeIndex.set(itemIndex)\"\n                    [class.active]=\"netTypeIndex() === itemIndex\"\n                    class=\"h-12 !items-center gap-2 !rounded-xl !px-4 !py-0\"\n                >\n                    <img\n                        [src]=\"config().icons[item]\"\n                        [alt]=\"'\u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0430\u0442\u0435\u043B\u044F \u0442\u0438\u043F\u0430 \u0441\u0435\u0442\u043A\u0438 ' + descriptions['netType'][item]\"\n                        class=\"size-8\"\n                    />\n                    <div>{{ descriptions['netType'][item] }}</div>\n                </button>\n            }\n        </div>\n\n        <!-- \u041E\u043F\u0438\u0441\u0430\u043D\u0438\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0442\u0438\u043F\u0430 \u0441\u0435\u0442\u043A\u0438. -->\n        <div class=\"text-body-l-bold\">\u0421\u0435\u0442\u043A\u0430 {{ descriptions['netType'][netTypeIndexSelected()] }}</div>\n        {{ config().subtitles[netTypeIndexSelected()] }}\n\n        <!-- \u0418\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u043E\u043D\u043D\u044B\u0435 \u0431\u0435\u0439\u0434\u0436\u0438. -->\n        <div class=\"flex flex-wrap items-center gap-1 text-body-m\">\n            <span\n                tuiBadge\n                appearance=\"custom\"\n                class=\"rounded-full border-2 border-solid border-tui-text-primary bg-white !p-[0.4rem] font-bold text-tui-text-primary\"\n            >\n                {{ colors.length }}\n            </span>\n            - \u043A\u043E\u043B\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u0446\u0432\u0435\u0442\u043E\u0432 \u043F\u0440\u043E\u0444\u0438\u043B\u044F\n        </div>\n        <div class=\"flex flex-wrap items-center gap-1 text-body-m\">\n            <span\n                tuiBadge\n                appearance=\"custom\"\n                class=\"rounded-full border-2 border-solid border-tui-text-primary bg-white !p-[0.4rem] font-bold text-tui-text-primary\"\n            >\n                {{ netTypes.length }}\n            </span>\n            - \u043A\u043E\u043B\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u0442\u0438\u043F\u043E\u0432 \u0441\u0435\u0442\u043E\u043A\n        </div>\n\n        <!-- \u0420\u0430\u0437\u043C\u0435\u0440\u044B \u0441\u0435\u0442\u043E\u043A. -->\n        <div class=\"text-body-m\">\n            <tui-icon icon=\"@tui.sc.grid-height-arrow\" />\n            \u0412\u044B\u0441\u043E\u0442\u0430 \u0441\u0435\u0442\u043E\u043A \u043E\u0442 {{ config().minHeight }} \u0434\u043E {{ config().maxHeights[netTypeIndexSelected()] }} \u043C\u043C\n        </div>\n        <div class=\"text-body-m\">\n            <tui-icon icon=\"@tui.sc.grid-width-arrow\" />\n            \u0428\u0438\u0440\u0438\u043D\u0430 \u0441\u0435\u0442\u043E\u043A \u043E\u0442 {{ config().minWidth }} \u0434\u043E {{ config().maxWidths[netTypeIndexSelected()] }} \u043C\u043C\n        </div>\n\n        <!-- \u0422\u0435\u0433\u0438 \u0445\u0430\u0440\u0430\u043A\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043A. -->\n        <div class=\"flex flex-wrap gap-2\">\n            @for (tag of config().tags[netTypeIndexSelected()]; track tag) {\n                <button\n                    tuiChip\n                    appearance=\"neutral\"\n                >\n                    {{ tag }}\n                </button>\n            }\n        </div>\n\n        <!-- \u0412\u044B\u0431\u043E\u0440 \u0446\u0432\u0435\u0442\u0430 \u043F\u0440\u043E\u0444\u0438\u043B\u044F. -->\n        <div class=\"flex gap-4\">\n            @for (image of config().color; track image; let itemIndex = $index) {\n                <picture\n                    class=\"size-11 rounded-xl\"\n                    (tuiHoveredChange)=\"colorIndex.set(itemIndex)\"\n                >\n                    @let color = config().color[colorIndex()];\n                    <source\n                        type=\"image/webp\"\n                        [srcset]=\"config().colorsIcons[image].webp\"\n                    />\n                    <img\n                        [class.active]=\"colorIndex() === itemIndex\"\n                        [src]=\"config().colorsIcons[image].defaultFormat\"\n                        [alt]=\"config().colorsIcons[image].alt ?? '\u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0430\u0442\u0435\u043B\u044F \u0446\u0432\u0435\u0442\u0430 ' + descriptions['color'][color]\"\n                        class=\"size-11 rounded-xl\"\n                    />\n                </picture>\n            }\n        </div>\n\n        <!-- \u041A\u043D\u043E\u043F\u043A\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439. -->\n        <div class=\"flex gap-2\">\n            <a\n                tuiButton\n                [attr.href]=\"configuratorPageUrl()\"\n                (click)=\"$event.preventDefault(); openConfiguratorClick.emit()\"\n                iconStart=\"@tui.sliders-horizontal\"\n            >\n                \u0421\u0434\u0435\u043B\u0430\u0442\u044C \u0440\u0430\u0441\u0447\u0435\u0442\n            </a>\n\n            <button\n                tuiButton\n                (click)=\"openConsultationClick.emit()\"\n                iconStart=\"@tui.messages-square\"\n            >\n                \u041A\u043E\u043D\u0441\u0443\u043B\u044C\u0442\u0430\u0446\u0438\u044F\n            </button>\n        </div>\n    </div>\n\n    <!-- \u041F\u0440\u0430\u0432\u0430\u044F \u043A\u043E\u043B\u043E\u043D\u043A\u0430 \u0441 \u043A\u0430\u0440\u0443\u0441\u0435\u043B\u044C\u044E \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0439. -->\n    <div class=\"relative -order-1 h-[19em] flex-1 overflow-hidden rounded-xl shadow-tui-shadow md:h-96 lg:order-2 lg:h-[28rem]\">\n        <button\n            tuiIconButton\n            (click)=\"carousel.prev()\"\n            appearance=\"icon\"\n            class=\"!absolute left-0 top-1/2 z-10 ml-2 -translate-y-1/2\"\n        >\n            <tui-icon icon=\"@tui.chevron-left\" />\n        </button>\n\n        @let imagePreviews = config().imagePreviewsByColor[colorIndexSelected()];\n\n        <tui-carousel\n            #carousel\n            [duration]=\"autoSlideIntervale()\"\n            [max]=\"imagePreviews.length - 1\"\n            class=\"h-[19em] w-full md:h-96 lg:h-[28rem]\"\n        >\n            <ng-container *tuiItem=\"let slide\">\n                @let item = slide < imagePreviews.length ? imagePreviews[slide] : undefined;\n                @if (item) {\n                    <picture>\n                        <source\n                            type=\"image/webp\"\n                            [srcset]=\"item.webp\"\n                        />\n                        <img\n                            [alt]=\"item.alt ?? '\u041C\u043E\u0441\u043A\u0438\u0442\u043D\u0430\u044F \u0441\u0435\u0442\u043A\u0430 \u0432 \u0446\u0432\u0435\u0442\u0435 ' + descriptions['color'][colorIndexSelected()] + slide\"\n                            [src]=\"item.defaultFormat\"\n                            class=\"h-[19em] w-full object-cover object-center md:h-96 lg:h-[28rem]\"\n                        />\n                    </picture>\n                }\n            </ng-container>\n        </tui-carousel>\n        <button\n            tuiIconButton\n            (click)=\"carousel.next()\"\n            appearance=\"icon\"\n            class=\"!absolute right-0 top-1/2 z-10 mr-2 -translate-y-1/2\"\n        >\n            <tui-icon icon=\"@tui.chevron-right\" />\n        </button>\n    </div>\n</div>\n", styles: [":host{--tui-carousel-padding: 0}img.active{--tw-ring-color: var(--tui-background-accent-1);--tw-ring-offset-width: 2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))}button[tuicardlarge]{border:solid 2px white}button[tuicardlarge].active{border-color:var(--tui-background-accent-1)}\n"], dependencies: [{ kind: "component", type: i2.TuiCarouselComponent, selector: "tui-carousel", inputs: ["index", "min", "max"], outputs: ["indexChange"] }, { kind: "directive", type: i2.TuiCarouselDirective, selector: "tui-carousel[duration]", inputs: ["duration"], exportAs: ["tuiCarousel"] }, { kind: "directive", type: i2$2.TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "directive", type: TuiChip, selector: "[tuiChip]", inputs: ["size"] }, { kind: "directive", type: TuiBadge, selector: "[tuiBadge],tui-icon[tuiBadge]", inputs: ["size"] }, { kind: "directive", type: TuiHovered, selector: "[tuiHoveredChange]", outputs: ["tuiHoveredChange"] }, { kind: "directive", type: TuiCardLarge, selector: "[tuiCardLarge]", inputs: ["tuiCardLarge"] }, { kind: "directive", type: TuiHeader, selector: "[tuiHeader]", inputs: ["tuiHeader"] }, { kind: "directive", type: TuiSurface, selector: "[tuiSurface]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ScPreviewSamplesMosquitoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-preview-samples-mosquito', imports: [TuiCarousel, TuiButton, TuiIcon, TuiChip, TuiBadge, TuiAppearance, TuiHovered, TuiCardLarge, TuiHeader, TuiSurface], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let descriptions = config().descriptions;\n@let colors = config().color;\n@let netTypes = config().netType;\n\n<!-- \u041E\u0441\u043D\u043E\u0432\u043D\u043E\u0439 \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440 \u0441 \u0441\u0435\u0442\u043A\u043E\u0439. -->\n<div class=\"grid grid-cols-1 gap-4 lg:grid-cols-2\">\n    <!-- \u041B\u0435\u0432\u0430\u044F \u043A\u043E\u043B\u043E\u043D\u043A\u0430 \u0441 \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u0435\u0439. -->\n    <div class=\"flex flex-col gap-4\">\n        <!-- \u041A\u043D\u043E\u043F\u043A\u0438 \u0432\u044B\u0431\u043E\u0440\u0430 \u0442\u0438\u043F\u0430 \u0441\u0435\u0442\u043A\u0438. -->\n        <div class=\"flex flex-wrap gap-4\">\n            @for (item of netTypes; track item; let itemIndex = $index) {\n                <button\n                    tuiCardLarge\n                    tuiHeader\n                    tuiSurface=\"floating\"\n                    type=\"button\"\n                    (click)=\"netTypeIndex.set(itemIndex)\"\n                    [class.active]=\"netTypeIndex() === itemIndex\"\n                    class=\"h-12 !items-center gap-2 !rounded-xl !px-4 !py-0\"\n                >\n                    <img\n                        [src]=\"config().icons[item]\"\n                        [alt]=\"'\u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0430\u0442\u0435\u043B\u044F \u0442\u0438\u043F\u0430 \u0441\u0435\u0442\u043A\u0438 ' + descriptions['netType'][item]\"\n                        class=\"size-8\"\n                    />\n                    <div>{{ descriptions['netType'][item] }}</div>\n                </button>\n            }\n        </div>\n\n        <!-- \u041E\u043F\u0438\u0441\u0430\u043D\u0438\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0442\u0438\u043F\u0430 \u0441\u0435\u0442\u043A\u0438. -->\n        <div class=\"text-body-l-bold\">\u0421\u0435\u0442\u043A\u0430 {{ descriptions['netType'][netTypeIndexSelected()] }}</div>\n        {{ config().subtitles[netTypeIndexSelected()] }}\n\n        <!-- \u0418\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u043E\u043D\u043D\u044B\u0435 \u0431\u0435\u0439\u0434\u0436\u0438. -->\n        <div class=\"flex flex-wrap items-center gap-1 text-body-m\">\n            <span\n                tuiBadge\n                appearance=\"custom\"\n                class=\"rounded-full border-2 border-solid border-tui-text-primary bg-white !p-[0.4rem] font-bold text-tui-text-primary\"\n            >\n                {{ colors.length }}\n            </span>\n            - \u043A\u043E\u043B\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u0446\u0432\u0435\u0442\u043E\u0432 \u043F\u0440\u043E\u0444\u0438\u043B\u044F\n        </div>\n        <div class=\"flex flex-wrap items-center gap-1 text-body-m\">\n            <span\n                tuiBadge\n                appearance=\"custom\"\n                class=\"rounded-full border-2 border-solid border-tui-text-primary bg-white !p-[0.4rem] font-bold text-tui-text-primary\"\n            >\n                {{ netTypes.length }}\n            </span>\n            - \u043A\u043E\u043B\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u0442\u0438\u043F\u043E\u0432 \u0441\u0435\u0442\u043E\u043A\n        </div>\n\n        <!-- \u0420\u0430\u0437\u043C\u0435\u0440\u044B \u0441\u0435\u0442\u043E\u043A. -->\n        <div class=\"text-body-m\">\n            <tui-icon icon=\"@tui.sc.grid-height-arrow\" />\n            \u0412\u044B\u0441\u043E\u0442\u0430 \u0441\u0435\u0442\u043E\u043A \u043E\u0442 {{ config().minHeight }} \u0434\u043E {{ config().maxHeights[netTypeIndexSelected()] }} \u043C\u043C\n        </div>\n        <div class=\"text-body-m\">\n            <tui-icon icon=\"@tui.sc.grid-width-arrow\" />\n            \u0428\u0438\u0440\u0438\u043D\u0430 \u0441\u0435\u0442\u043E\u043A \u043E\u0442 {{ config().minWidth }} \u0434\u043E {{ config().maxWidths[netTypeIndexSelected()] }} \u043C\u043C\n        </div>\n\n        <!-- \u0422\u0435\u0433\u0438 \u0445\u0430\u0440\u0430\u043A\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043A. -->\n        <div class=\"flex flex-wrap gap-2\">\n            @for (tag of config().tags[netTypeIndexSelected()]; track tag) {\n                <button\n                    tuiChip\n                    appearance=\"neutral\"\n                >\n                    {{ tag }}\n                </button>\n            }\n        </div>\n\n        <!-- \u0412\u044B\u0431\u043E\u0440 \u0446\u0432\u0435\u0442\u0430 \u043F\u0440\u043E\u0444\u0438\u043B\u044F. -->\n        <div class=\"flex gap-4\">\n            @for (image of config().color; track image; let itemIndex = $index) {\n                <picture\n                    class=\"size-11 rounded-xl\"\n                    (tuiHoveredChange)=\"colorIndex.set(itemIndex)\"\n                >\n                    @let color = config().color[colorIndex()];\n                    <source\n                        type=\"image/webp\"\n                        [srcset]=\"config().colorsIcons[image].webp\"\n                    />\n                    <img\n                        [class.active]=\"colorIndex() === itemIndex\"\n                        [src]=\"config().colorsIcons[image].defaultFormat\"\n                        [alt]=\"config().colorsIcons[image].alt ?? '\u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0430\u0442\u0435\u043B\u044F \u0446\u0432\u0435\u0442\u0430 ' + descriptions['color'][color]\"\n                        class=\"size-11 rounded-xl\"\n                    />\n                </picture>\n            }\n        </div>\n\n        <!-- \u041A\u043D\u043E\u043F\u043A\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439. -->\n        <div class=\"flex gap-2\">\n            <a\n                tuiButton\n                [attr.href]=\"configuratorPageUrl()\"\n                (click)=\"$event.preventDefault(); openConfiguratorClick.emit()\"\n                iconStart=\"@tui.sliders-horizontal\"\n            >\n                \u0421\u0434\u0435\u043B\u0430\u0442\u044C \u0440\u0430\u0441\u0447\u0435\u0442\n            </a>\n\n            <button\n                tuiButton\n                (click)=\"openConsultationClick.emit()\"\n                iconStart=\"@tui.messages-square\"\n            >\n                \u041A\u043E\u043D\u0441\u0443\u043B\u044C\u0442\u0430\u0446\u0438\u044F\n            </button>\n        </div>\n    </div>\n\n    <!-- \u041F\u0440\u0430\u0432\u0430\u044F \u043A\u043E\u043B\u043E\u043D\u043A\u0430 \u0441 \u043A\u0430\u0440\u0443\u0441\u0435\u043B\u044C\u044E \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0439. -->\n    <div class=\"relative -order-1 h-[19em] flex-1 overflow-hidden rounded-xl shadow-tui-shadow md:h-96 lg:order-2 lg:h-[28rem]\">\n        <button\n            tuiIconButton\n            iconStart=\"@tui.chevron-left\"\n            (click)=\"carousel.prev()\"\n            appearance=\"icon\"\n            class=\"!absolute left-0 top-1/2 z-10 ml-2 -translate-y-1/2\"\n        ></button>\n\n        @let imagePreviews = config().imagePreviewsByColor[colorIndexSelected()];\n\n        <tui-carousel\n            #carousel\n            [duration]=\"autoSlideIntervale()\"\n            [max]=\"imagePreviews.length - 1\"\n            class=\"h-[19em] w-full md:h-96 lg:h-[28rem]\"\n        >\n            <ng-container *tuiItem=\"let slide\">\n                @let item = slide < imagePreviews.length ? imagePreviews[slide] : undefined;\n                @if (item) {\n                    <picture>\n                        <source\n                            type=\"image/webp\"\n                            [srcset]=\"item.webp\"\n                        />\n                        <img\n                            [alt]=\"item.alt ?? '\u041C\u043E\u0441\u043A\u0438\u0442\u043D\u0430\u044F \u0441\u0435\u0442\u043A\u0430 \u0432 \u0446\u0432\u0435\u0442\u0435 ' + descriptions['color'][colorIndexSelected()] + slide\"\n                            [src]=\"item.defaultFormat\"\n                            class=\"h-[19em] w-full object-cover object-center md:h-96 lg:h-[28rem]\"\n                        />\n                    </picture>\n                }\n            </ng-container>\n        </tui-carousel>\n        <button\n            tuiIconButton\n            iconStart=\"@tui.chevron-right\"\n            (click)=\"carousel.next()\"\n            appearance=\"icon\"\n            class=\"!absolute right-0 top-1/2 z-10 mr-2 -translate-y-1/2\"\n        ></button>\n    </div>\n</div>\n", styles: [":host{--tui-carousel-padding: 0}img.active{--tw-ring-color: var(--tui-background-accent-1);--tw-ring-offset-width: 2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))}button[tuicardlarge]{border:solid 2px white}button[tuicardlarge].active{border-color:var(--tui-background-accent-1)}\n"] }]
+            args: [{ selector: 'sc-preview-samples-mosquito', imports: [TuiCarousel, TuiButton, TuiIcon, TuiChip, TuiBadge, TuiAppearance, TuiHovered, TuiCardLarge, TuiHeader, TuiSurface], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let descriptions = config().descriptions;\n@let colors = config().color;\n@let netTypes = config().netType;\n\n<!-- \u041E\u0441\u043D\u043E\u0432\u043D\u043E\u0439 \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440 \u0441 \u0441\u0435\u0442\u043A\u043E\u0439. -->\n<div class=\"grid grid-cols-1 gap-4 lg:grid-cols-2\">\n    <!-- \u041B\u0435\u0432\u0430\u044F \u043A\u043E\u043B\u043E\u043D\u043A\u0430 \u0441 \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u0435\u0439. -->\n    <div class=\"flex flex-col gap-4\">\n        <!-- \u041A\u043D\u043E\u043F\u043A\u0438 \u0432\u044B\u0431\u043E\u0440\u0430 \u0442\u0438\u043F\u0430 \u0441\u0435\u0442\u043A\u0438. -->\n        <div class=\"flex flex-wrap gap-4\">\n            @for (item of netTypes; track item; let itemIndex = $index) {\n                <button\n                    tuiCardLarge\n                    tuiHeader\n                    tuiSurface=\"floating\"\n                    type=\"button\"\n                    (click)=\"netTypeIndex.set(itemIndex)\"\n                    [class.active]=\"netTypeIndex() === itemIndex\"\n                    class=\"h-12 !items-center gap-2 !rounded-xl !px-4 !py-0\"\n                >\n                    <img\n                        [src]=\"config().icons[item]\"\n                        [alt]=\"'\u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0430\u0442\u0435\u043B\u044F \u0442\u0438\u043F\u0430 \u0441\u0435\u0442\u043A\u0438 ' + descriptions['netType'][item]\"\n                        class=\"size-8\"\n                    />\n                    <div>{{ descriptions['netType'][item] }}</div>\n                </button>\n            }\n        </div>\n\n        <!-- \u041E\u043F\u0438\u0441\u0430\u043D\u0438\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0442\u0438\u043F\u0430 \u0441\u0435\u0442\u043A\u0438. -->\n        <div class=\"text-body-l-bold\">\u0421\u0435\u0442\u043A\u0430 {{ descriptions['netType'][netTypeIndexSelected()] }}</div>\n        {{ config().subtitles[netTypeIndexSelected()] }}\n\n        <!-- \u0418\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u043E\u043D\u043D\u044B\u0435 \u0431\u0435\u0439\u0434\u0436\u0438. -->\n        <div class=\"flex flex-wrap items-center gap-1 text-body-m\">\n            <span\n                tuiBadge\n                appearance=\"custom\"\n                class=\"rounded-full border-2 border-solid border-tui-text-primary bg-white !p-[0.4rem] font-bold text-tui-text-primary\"\n            >\n                {{ colors.length }}\n            </span>\n            - \u043A\u043E\u043B\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u0446\u0432\u0435\u0442\u043E\u0432 \u043F\u0440\u043E\u0444\u0438\u043B\u044F\n        </div>\n        <div class=\"flex flex-wrap items-center gap-1 text-body-m\">\n            <span\n                tuiBadge\n                appearance=\"custom\"\n                class=\"rounded-full border-2 border-solid border-tui-text-primary bg-white !p-[0.4rem] font-bold text-tui-text-primary\"\n            >\n                {{ netTypes.length }}\n            </span>\n            - \u043A\u043E\u043B\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u0442\u0438\u043F\u043E\u0432 \u0441\u0435\u0442\u043E\u043A\n        </div>\n\n        <!-- \u0420\u0430\u0437\u043C\u0435\u0440\u044B \u0441\u0435\u0442\u043E\u043A. -->\n        <div class=\"text-body-m\">\n            <tui-icon icon=\"@tui.sc.grid-height-arrow\" />\n            \u0412\u044B\u0441\u043E\u0442\u0430 \u0441\u0435\u0442\u043E\u043A \u043E\u0442 {{ config().minHeight }} \u0434\u043E {{ config().maxHeights[netTypeIndexSelected()] }} \u043C\u043C\n        </div>\n        <div class=\"text-body-m\">\n            <tui-icon icon=\"@tui.sc.grid-width-arrow\" />\n            \u0428\u0438\u0440\u0438\u043D\u0430 \u0441\u0435\u0442\u043E\u043A \u043E\u0442 {{ config().minWidth }} \u0434\u043E {{ config().maxWidths[netTypeIndexSelected()] }} \u043C\u043C\n        </div>\n\n        <!-- \u0422\u0435\u0433\u0438 \u0445\u0430\u0440\u0430\u043A\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043A. -->\n        <div class=\"flex flex-wrap gap-2\">\n            @for (tag of config().tags[netTypeIndexSelected()]; track tag) {\n                <button\n                    tuiChip\n                    appearance=\"neutral\"\n                >\n                    {{ tag }}\n                </button>\n            }\n        </div>\n\n        <!-- \u0412\u044B\u0431\u043E\u0440 \u0446\u0432\u0435\u0442\u0430 \u043F\u0440\u043E\u0444\u0438\u043B\u044F. -->\n        <div class=\"flex gap-4\">\n            @for (image of config().color; track image; let itemIndex = $index) {\n                <picture\n                    class=\"size-11 rounded-xl\"\n                    (tuiHoveredChange)=\"colorIndex.set(itemIndex)\"\n                >\n                    @let color = config().color[colorIndex()];\n                    <source\n                        type=\"image/webp\"\n                        [srcset]=\"config().colorsIcons[image].webp\"\n                    />\n                    <img\n                        [class.active]=\"colorIndex() === itemIndex\"\n                        [src]=\"config().colorsIcons[image].defaultFormat\"\n                        [alt]=\"config().colorsIcons[image].alt ?? '\u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0430\u0442\u0435\u043B\u044F \u0446\u0432\u0435\u0442\u0430 ' + descriptions['color'][color]\"\n                        class=\"size-11 rounded-xl\"\n                    />\n                </picture>\n            }\n        </div>\n\n        <!-- \u041A\u043D\u043E\u043F\u043A\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439. -->\n        <div class=\"flex gap-2\">\n            <a\n                tuiButton\n                [attr.href]=\"configuratorPageUrl()\"\n                (click)=\"$event.preventDefault(); openConfiguratorClick.emit()\"\n                iconStart=\"@tui.sliders-horizontal\"\n            >\n                \u0421\u0434\u0435\u043B\u0430\u0442\u044C \u0440\u0430\u0441\u0447\u0435\u0442\n            </a>\n\n            <button\n                tuiButton\n                (click)=\"openConsultationClick.emit()\"\n                iconStart=\"@tui.messages-square\"\n            >\n                \u041A\u043E\u043D\u0441\u0443\u043B\u044C\u0442\u0430\u0446\u0438\u044F\n            </button>\n        </div>\n    </div>\n\n    <!-- \u041F\u0440\u0430\u0432\u0430\u044F \u043A\u043E\u043B\u043E\u043D\u043A\u0430 \u0441 \u043A\u0430\u0440\u0443\u0441\u0435\u043B\u044C\u044E \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0439. -->\n    <div class=\"relative -order-1 h-[19em] flex-1 overflow-hidden rounded-xl shadow-tui-shadow md:h-96 lg:order-2 lg:h-[28rem]\">\n        <button\n            tuiIconButton\n            (click)=\"carousel.prev()\"\n            appearance=\"icon\"\n            class=\"!absolute left-0 top-1/2 z-10 ml-2 -translate-y-1/2\"\n        >\n            <tui-icon icon=\"@tui.chevron-left\" />\n        </button>\n\n        @let imagePreviews = config().imagePreviewsByColor[colorIndexSelected()];\n\n        <tui-carousel\n            #carousel\n            [duration]=\"autoSlideIntervale()\"\n            [max]=\"imagePreviews.length - 1\"\n            class=\"h-[19em] w-full md:h-96 lg:h-[28rem]\"\n        >\n            <ng-container *tuiItem=\"let slide\">\n                @let item = slide < imagePreviews.length ? imagePreviews[slide] : undefined;\n                @if (item) {\n                    <picture>\n                        <source\n                            type=\"image/webp\"\n                            [srcset]=\"item.webp\"\n                        />\n                        <img\n                            [alt]=\"item.alt ?? '\u041C\u043E\u0441\u043A\u0438\u0442\u043D\u0430\u044F \u0441\u0435\u0442\u043A\u0430 \u0432 \u0446\u0432\u0435\u0442\u0435 ' + descriptions['color'][colorIndexSelected()] + slide\"\n                            [src]=\"item.defaultFormat\"\n                            class=\"h-[19em] w-full object-cover object-center md:h-96 lg:h-[28rem]\"\n                        />\n                    </picture>\n                }\n            </ng-container>\n        </tui-carousel>\n        <button\n            tuiIconButton\n            (click)=\"carousel.next()\"\n            appearance=\"icon\"\n            class=\"!absolute right-0 top-1/2 z-10 mr-2 -translate-y-1/2\"\n        >\n            <tui-icon icon=\"@tui.chevron-right\" />\n        </button>\n    </div>\n</div>\n", styles: [":host{--tui-carousel-padding: 0}img.active{--tw-ring-color: var(--tui-background-accent-1);--tw-ring-offset-width: 2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))}button[tuicardlarge]{border:solid 2px white}button[tuicardlarge].active{border-color:var(--tui-background-accent-1)}\n"] }]
         }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], openConfiguratorClick: [{ type: i0.Output, args: ["openConfiguratorClick"] }], configuratorPageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "configuratorPageUrl", required: false }] }], openConsultationClick: [{ type: i0.Output, args: ["openConsultationClick"] }], autoSlideIntervale: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSlideIntervale", required: false }] }], isShowCarouselSwitches: [{ type: i0.Input, args: [{ isSignal: true, alias: "isShowCarouselSwitches", required: false }] }] } });
 
 /**
@@ -9595,11 +9617,11 @@ class ScShareButtonComponent {
         this.clickShareEvent = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ScShareButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: ScShareButtonComponent, isStandalone: true, selector: "sc-share-button", inputs: { appearance: "appearance", size: "size" }, outputs: { clickShareEvent: "clickShareEvent" }, ngImport: i0, template: "<button\n    tuiIconButton\n    iconStart=\"@tui.share-2\"\n    [appearance]=\"appearance\"\n    [size]=\"size\"\n    (click)=\"$event.stopPropagation(); clickShareEvent.emit()\"\n></button>\n", dependencies: [{ kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: ScShareButtonComponent, isStandalone: true, selector: "sc-share-button", inputs: { appearance: "appearance", size: "size" }, outputs: { clickShareEvent: "clickShareEvent" }, ngImport: i0, template: "<button\n    tuiIconButton\n    [appearance]=\"appearance\"\n    [size]=\"size\"\n    (click)=\"$event.stopPropagation(); clickShareEvent.emit()\"\n>\n    <tui-icon icon=\"@tui.share-2\" />\n</button>\n", dependencies: [{ kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ScShareButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-share-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TuiTransitioned, TuiAppearance$1, TuiWithAppearance$1, TuiIcons$1, TuiWithIcons$1, TuiButton], template: "<button\n    tuiIconButton\n    iconStart=\"@tui.share-2\"\n    [appearance]=\"appearance\"\n    [size]=\"size\"\n    (click)=\"$event.stopPropagation(); clickShareEvent.emit()\"\n></button>\n" }]
+            args: [{ selector: 'sc-share-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TuiButton, TuiIcon], template: "<button\n    tuiIconButton\n    [appearance]=\"appearance\"\n    [size]=\"size\"\n    (click)=\"$event.stopPropagation(); clickShareEvent.emit()\"\n>\n    <tui-icon icon=\"@tui.share-2\" />\n</button>\n" }]
         }], propDecorators: { appearance: [{
                 type: Input
             }], size: [{
@@ -9672,11 +9694,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 class ScUpdateUserInfoDialogComponent {
     /**
      * Инициализирует экземпляр класса {@link ScUpdateUserInfoDialogComponent}.
-     *
-     * @param user$ Поток данных о текущем пользователе.
-     * @param userService Сервис данных о пользователе.
-     * @param userMetrikaService Сервис для сбора метрик о действиях пользователей.
-     * @param context Контекст диалогового окна, в котором открыт компонент.
      */
     constructor() {
         this.user$ = inject(SC_USER_INFO);
@@ -9792,7 +9809,7 @@ class ScUserManagersComponent {
         this.qrClickEvent = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ScUserManagersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ScUserManagersComponent, isStandalone: true, selector: "sc-user-managers", outputs: { qrClickEvent: "qrClickEvent" }, ngImport: i0, template: "<p class=\"mb-2 font-extrabold\">\u0412\u0430\u0448\u0438 \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0435 \u043C\u0435\u043D\u0435\u0434\u0436\u0435\u0440\u044B:</p>\n@for (manager of managers$ | async; track manager; let last = $last) {\n    <div class=\"flex justify-between\">\n        <div class=\"flex flex-col gap-1 !font-medium text-tui-text-02\">\n            {{ manager.name }}\n            <a\n                tuiLink\n                [style.text-decoration-line]=\"'underline'\"\n                scEmailLink\n                linkLocation=\"user-managers\"\n                href=\"mailto:{{ manager.contacts.email }}\"\n                iconStart=\"@tui.mail\"\n            >\n                {{ manager.contacts.email }}\n            </a>\n            <a\n                tuiLink\n                [scTelLink]=\"manager.contacts.phone\"\n                [style.text-decoration-line]=\"'underline'\"\n                linkLocation=\"user-managers\"\n                href=\"tel:{{ manager.contacts.phone | scPhoneFormat }}\"\n                iconStart=\"@tui.phone\"\n            >\n                {{ manager.contacts.phone | scPhoneFormat }}\n            </a>\n        </div>\n        <button\n            tuiIconButton\n            size=\"m\"\n            appearance=\"secondary\"\n            iconStart=\"@tui.scan-qr-code\"\n            (click)=\"qrClickEvent.emit(manager)\"\n        ></button>\n    </div>\n    @if (!last) {\n        <hr class=\"my-2 h-px border-0 bg-tui-base-04\" />\n    }\n}\n", styles: ["a[tuiLink][data-mode=onLight]._pseudo{color:var(--tui-text-secondary)}a[tuiLink][data-mode=onLight]._pseudo:hover{color:var(--tui-text-tertiary)}\n"], dependencies: [{ kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }, { kind: "directive", type: ScEmailLinkDirective, selector: "a[scEmailLink]", inputs: ["linkLocation"] }, { kind: "directive", type: ScTerminalLinkDirective, selector: "a[href]" }, { kind: "directive", type: ScTelLinkDirective, selector: "a[scTelLink]", inputs: ["scTelLink", "linkLocation"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ScPhoneFormatPipe, name: "scPhoneFormat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ScUserManagersComponent, isStandalone: true, selector: "sc-user-managers", outputs: { qrClickEvent: "qrClickEvent" }, ngImport: i0, template: "<p class=\"mb-2 font-extrabold\">\u0412\u0430\u0448\u0438 \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0435 \u043C\u0435\u043D\u0435\u0434\u0436\u0435\u0440\u044B:</p>\n@for (manager of managers$ | async; track manager; let last = $last) {\n    <div class=\"flex justify-between\">\n        <div class=\"flex flex-col gap-1 !font-medium text-tui-text-02\">\n            {{ manager.name }}\n            <a\n                tuiLink\n                [style.text-decoration-line]=\"'underline'\"\n                scEmailLink\n                linkLocation=\"user-managers\"\n                href=\"mailto:{{ manager.contacts.email }}\"\n                iconStart=\"@tui.mail\"\n            >\n                {{ manager.contacts.email }}\n            </a>\n            <a\n                tuiLink\n                [scTelLink]=\"manager.contacts.phone\"\n                [style.text-decoration-line]=\"'underline'\"\n                linkLocation=\"user-managers\"\n                href=\"tel:{{ manager.contacts.phone | scPhoneFormat }}\"\n                iconStart=\"@tui.phone\"\n            >\n                {{ manager.contacts.phone | scPhoneFormat }}\n            </a>\n        </div>\n        <button\n            tuiIconButton\n            size=\"m\"\n            appearance=\"secondary\"\n            (click)=\"qrClickEvent.emit(manager)\"\n        >\n            <tui-icon icon=\"@tui.scan-qr-code\" />\n        </button>\n    </div>\n    @if (!last) {\n        <hr class=\"my-2 h-px border-0 bg-tui-base-04\" />\n    }\n}\n", styles: ["a[tuiLink][data-mode=onLight]._pseudo{color:var(--tui-text-secondary)}a[tuiLink][data-mode=onLight]._pseudo:hover{color:var(--tui-text-tertiary)}\n"], dependencies: [{ kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }, { kind: "directive", type: ScEmailLinkDirective, selector: "a[scEmailLink]", inputs: ["linkLocation"] }, { kind: "directive", type: ScTerminalLinkDirective, selector: "a[href]" }, { kind: "directive", type: ScTelLinkDirective, selector: "a[scTelLink]", inputs: ["scTelLink", "linkLocation"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ScPhoneFormatPipe, name: "scPhoneFormat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ScUserManagersComponent, decorators: [{
             type: Component,
@@ -9807,9 +9824,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         ScTerminalLinkDirective,
                         ScTelLinkDirective,
                         TuiButton,
+                        TuiIcon,
                         AsyncPipe,
                         ScPhoneFormatPipe,
-                    ], template: "<p class=\"mb-2 font-extrabold\">\u0412\u0430\u0448\u0438 \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0435 \u043C\u0435\u043D\u0435\u0434\u0436\u0435\u0440\u044B:</p>\n@for (manager of managers$ | async; track manager; let last = $last) {\n    <div class=\"flex justify-between\">\n        <div class=\"flex flex-col gap-1 !font-medium text-tui-text-02\">\n            {{ manager.name }}\n            <a\n                tuiLink\n                [style.text-decoration-line]=\"'underline'\"\n                scEmailLink\n                linkLocation=\"user-managers\"\n                href=\"mailto:{{ manager.contacts.email }}\"\n                iconStart=\"@tui.mail\"\n            >\n                {{ manager.contacts.email }}\n            </a>\n            <a\n                tuiLink\n                [scTelLink]=\"manager.contacts.phone\"\n                [style.text-decoration-line]=\"'underline'\"\n                linkLocation=\"user-managers\"\n                href=\"tel:{{ manager.contacts.phone | scPhoneFormat }}\"\n                iconStart=\"@tui.phone\"\n            >\n                {{ manager.contacts.phone | scPhoneFormat }}\n            </a>\n        </div>\n        <button\n            tuiIconButton\n            size=\"m\"\n            appearance=\"secondary\"\n            iconStart=\"@tui.scan-qr-code\"\n            (click)=\"qrClickEvent.emit(manager)\"\n        ></button>\n    </div>\n    @if (!last) {\n        <hr class=\"my-2 h-px border-0 bg-tui-base-04\" />\n    }\n}\n", styles: ["a[tuiLink][data-mode=onLight]._pseudo{color:var(--tui-text-secondary)}a[tuiLink][data-mode=onLight]._pseudo:hover{color:var(--tui-text-tertiary)}\n"] }]
+                    ], template: "<p class=\"mb-2 font-extrabold\">\u0412\u0430\u0448\u0438 \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0435 \u043C\u0435\u043D\u0435\u0434\u0436\u0435\u0440\u044B:</p>\n@for (manager of managers$ | async; track manager; let last = $last) {\n    <div class=\"flex justify-between\">\n        <div class=\"flex flex-col gap-1 !font-medium text-tui-text-02\">\n            {{ manager.name }}\n            <a\n                tuiLink\n                [style.text-decoration-line]=\"'underline'\"\n                scEmailLink\n                linkLocation=\"user-managers\"\n                href=\"mailto:{{ manager.contacts.email }}\"\n                iconStart=\"@tui.mail\"\n            >\n                {{ manager.contacts.email }}\n            </a>\n            <a\n                tuiLink\n                [scTelLink]=\"manager.contacts.phone\"\n                [style.text-decoration-line]=\"'underline'\"\n                linkLocation=\"user-managers\"\n                href=\"tel:{{ manager.contacts.phone | scPhoneFormat }}\"\n                iconStart=\"@tui.phone\"\n            >\n                {{ manager.contacts.phone | scPhoneFormat }}\n            </a>\n        </div>\n        <button\n            tuiIconButton\n            size=\"m\"\n            appearance=\"secondary\"\n            (click)=\"qrClickEvent.emit(manager)\"\n        >\n            <tui-icon icon=\"@tui.scan-qr-code\" />\n        </button>\n    </div>\n    @if (!last) {\n        <hr class=\"my-2 h-px border-0 bg-tui-base-04\" />\n    }\n}\n", styles: ["a[tuiLink][data-mode=onLight]._pseudo{color:var(--tui-text-secondary)}a[tuiLink][data-mode=onLight]._pseudo:hover{color:var(--tui-text-tertiary)}\n"] }]
         }], propDecorators: { qrClickEvent: [{
                 type: Output
             }] } });
@@ -9821,12 +9839,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 class ScUserPhoneApproveDialogComponent {
     /**
      * Инициализирует экземпляр класса {@link ScUserPhoneApproveDialogComponent}.
-     *
-     * @param verificationService Сервис верификации.
-     * @param userMetrikaService Сервис для сбора метрик о действиях пользователей.
-     * @param user$ Поток данных о текущем пользователе.
-     * @param userService Сервис данных о пользователе.
-     * @param context Контекст диалогового окна, в котором открыт компонент.
      */
     constructor() {
         this.verificationService = inject(ScVerificationService);
@@ -10010,7 +10022,7 @@ class ScProfileAccordionsContentComponent {
         this.deleteUserContactClick = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ScProfileAccordionsContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ScProfileAccordionsContentComponent, isStandalone: true, selector: "sc-profile-accordions-content", outputs: { editProfileClick: "editProfileClick", approvePhoneClick: "approvePhoneClick", addContragentClick: "addContragentClick", deleteContragentClick: "deleteContragentClick", addContragentBankAccountClick: "addContragentBankAccountClick", deleteContragentBankAccountClick: "deleteContragentBankAccountClick", addContragentContactClick: "addContragentContactClick", deleteContragentContactClick: "deleteContragentContactClick", addDeliveryAddressClick: "addDeliveryAddressClick", deleteDeliveryAddressClick: "deleteDeliveryAddressClick", addDeliveryAddressContactClick: "addDeliveryAddressContactClick", deleteDeliveryAddressContactClick: "deleteDeliveryAddressContactClick", addUserContactClick: "addUserContactClick", deleteUserContactClick: "deleteUserContactClick" }, ngImport: i0, template: "@let user = user$ | async;\n<div class=\"flex flex-col gap-4\">\n    <sc-accordion\n        [showArrow]=\"false\"\n        [showAddButton]=\"false\"\n        [open]=\"true\"\n    >\n        \u041E\u0431\u0449\u0438\u0435 \u0434\u0430\u043D\u043D\u044B\u0435\n        <ng-template scAccordionContent>\n            <tui-loader\n                [overlay]=\"true\"\n                [loading]=\"user === null\"\n            >\n                <div class=\"flex gap-2 pl-4\">\n                    @if (user) {\n                        <div class=\"flex grow flex-col gap-2\">\n                            <span class=\"font-medium\">{{ user.name }}</span>\n                            @if (user.city && (userCity$ | async); as city) {\n                                <div class=\"flex items-center gap-1\">\n                                    <tui-icon icon=\"@tui.map-pin\"></tui-icon>\n                                    <div class=\"flex flex-wrap\">\n                                        <span>\u0433. {{ city.name }}, </span>\n                                        @if (city.region) {\n                                            <span>{{ city.region.name }}</span>\n                                        }\n                                    </div>\n                                </div>\n                            }\n                            <div class=\"flex flex-wrap gap-2\">\n                                <a\n                                    tuiLink\n                                    [scTelLink]=\"user.contacts.phone.value\"\n                                    iconStart=\"@tui.phone\"\n                                    [style.text-decoration-line]=\"'underline'\"\n                                    linkLocation=\"profile\"\n                                    href=\"tel:{{ user.contacts.phone.value | scPhoneFormat }}\"\n                                >\n                                    {{ user.contacts.phone.value | scPhoneFormat }}\n                                </a>\n                                @if (!user.contacts.phone.isApproved) {\n                                    <span class=\"text-tui-text-03\">\n                                        (\u0422\u0435\u043B\u0435\u0444\u043E\u043D \u043D\u0435 \u043F\u043E\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043D.\n                                        <button\n                                            tuiLink\n                                            [style.text-decoration-line]=\"'underline'\"\n                                            (click)=\"approvePhoneClick.emit()\"\n                                        >\n                                            \u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C</button\n                                        >)\n                                    </span>\n                                }\n                            </div>\n                            @let isSendApproveEmail = !!(isSendApproveEmail$ | async);\n                            <div class=\"flex flex-wrap gap-x-2\">\n                                <a\n                                    tuiLink\n                                    iconStart=\"@tui.mail\"\n                                    [style.text-decoration-line]=\"'underline'\"\n                                    scEmailLink\n                                    linkLocation=\"profile\"\n                                    href=\"mailto:{{ user.contacts.email.value }}\"\n                                >\n                                    {{ user.contacts.email.value }}\n                                </a>\n                                @if (!isSendApproveEmail && !user.contacts.email.isApproved) {\n                                    <span class=\"inline-flex flex-wrap gap-1 text-tui-text-03\">\n                                        E-mail \u043D\u0435 \u043F\u043E\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043D.\n                                        <tui-loader\n                                            [loading]=\"!!(approveEmailLoading$ | async)\"\n                                            [overlay]=\"true\"\n                                        >\n                                            <button\n                                                tuiLink\n                                                [style.text-decoration-line]=\"'underline'\"\n                                                (click)=\"onSendApproveEmail.next(user.contacts.email.value)\"\n                                            >\n                                                \u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C\n                                            </button>\n                                        </tui-loader>\n                                    </span>\n                                }\n                                @if (isSendApproveEmail) {\n                                    <span\n                                        class=\"text-tui-success-fill\"\n                                        @tuiFadeIn\n                                    >\n                                        \u041F\u0438\u0441\u044C\u043C\u043E \u0434\u043B\u044F \u043F\u043E\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043D\u0438\u044F \u0443\u0441\u043F\u0435\u0448\u043D\u043E \u043E\u0442\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u043E. \u041F\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043F\u043E \u0441\u0441\u044B\u043B\u043A\u0435 \u0432 \u043F\u0438\u0441\u044C\u043C\u0435 \u0438 \u043E\u0431\u043D\u043E\u0432\u0438\u0442\u0435 \u044D\u0442\u0443 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443.\n                                    </span>\n                                }\n                            </div>\n                            <tui-loader\n                                [loading]=\"!!(getNewsLoading$ | async)\"\n                                [overlay]=\"true\"\n                            >\n                                <label tuiLabel>\n                                    <input\n                                        tuiCheckbox\n                                        type=\"checkbox\"\n                                        size=\"s\"\n                                        class=\"w-full\"\n                                        [formControl]=\"getNewsControl\"\n                                        [ngModel]=\"user.getNews\"\n                                    />\n                                    \u042F \u0445\u043E\u0447\u0443 \u043F\u043E\u043B\u0443\u0447\u0430\u0442\u044C \u0440\u0430\u0441\u0441\u044B\u043B\u043A\u0443 \u0421\u043D\u0430\u0431\u0446\u0435\u043D\u0442\u0440 \u043E \u0441\u043A\u0438\u0434\u043A\u0430\u0445 \u0438 \u043D\u043E\u0432\u043E\u0441\u0442\u044F\u0445 \u043F\u043E \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u0435.\n                                </label>\n                            </tui-loader>\n                        </div>\n                    }\n\n                    <button\n                        tuiIconButton\n                        size=\"m\"\n                        type=\"button\"\n                        iconStart=\"@tui.pencil\"\n                        appearance=\"flat\"\n                        (click)=\"editProfileClick.emit()\"\n                    ></button>\n                </div>\n            </tui-loader>\n        </ng-template>\n    </sc-accordion>\n    <sc-contragents-accordion\n        (addContragentClick)=\"addContragentClick.emit()\"\n        (deleteContragentClick)=\"deleteContragentClick.emit($event)\"\n        (addContragentBankAccountClick)=\"addContragentBankAccountClick.emit($event)\"\n        (deleteContragentBankAccountClick)=\"deleteContragentBankAccountClick.emit($event)\"\n        (addContragentContactClick)=\"addContragentContactClick.emit($event)\"\n        (deleteContragentContactClick)=\"deleteContragentContactClick.emit($event)\"\n    ></sc-contragents-accordion>\n    <sc-delivery-address-accordion\n        (addDeliveryAddressClick)=\"addDeliveryAddressClick.emit()\"\n        (deleteDeliveryAddressClick)=\"deleteDeliveryAddressClick.emit($event)\"\n        (addDeliveryAddressContactClick)=\"addDeliveryAddressContactClick.emit($event)\"\n        (deleteDeliveryAddressContactClick)=\"deleteDeliveryAddressContactClick.emit($event)\"\n    ></sc-delivery-address-accordion>\n    @if (user) {\n        <sc-contacts-accordion\n            [contacts$]=\"userContacts$\"\n            (addContactClick)=\"addUserContactClick.emit(user.id)\"\n            (deleteButtonClick)=\"deleteUserContactClick.emit($event)\"\n        ></sc-contacts-accordion>\n    }\n    <sc-accordion\n        #passwordAccordion\n        [showArrow]=\"false\"\n        [showAddButton]=\"false\"\n    >\n        \u0418\u0437\u043C\u0435\u043D\u0438\u0442\u044C \u043F\u0430\u0440\u043E\u043B\u044C\n        <ng-template scAccordionContent>\n            <sc-reset-user-password (successResetPassword)=\"passwordAccordion.close()\"></sc-reset-user-password>\n        </ng-template>\n    </sc-accordion>\n</div>\n", dependencies: [{ kind: "component", type: ScAccordionComponent, selector: "sc-accordion", inputs: ["showAddButton", "showDeleteButton", "showArrow", "open", "size", "disabledButtons"], outputs: ["addButtonClick", "deleteButtonClick"] }, { kind: "directive", type: ScAccordionContentDirective, selector: "ng-template[scAccordionContent]" }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "loading"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }, { kind: "directive", type: ScTelLinkDirective, selector: "a[scTelLink]", inputs: ["scTelLink", "linkLocation"] }, { kind: "directive", type: ScTerminalLinkDirective, selector: "a[href]" }, { kind: "directive", type: ScEmailLinkDirective, selector: "a[scEmailLink]", inputs: ["linkLocation"] }, { kind: "directive", type: TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: TuiCheckbox, selector: "input[type=\"checkbox\"][tuiCheckbox]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: ScContragentsAccordionComponent, selector: "sc-contragents-accordion", outputs: ["addContragentClick", "deleteContragentClick", "addContragentBankAccountClick", "deleteContragentBankAccountClick", "addContragentContactClick", "deleteContragentContactClick"] }, { kind: "component", type: ScDeliveryAddressAccordionComponent, selector: "sc-delivery-address-accordion", outputs: ["addDeliveryAddressClick", "deleteDeliveryAddressClick", "addDeliveryAddressContactClick", "deleteDeliveryAddressContactClick"] }, { kind: "component", type: ScContactsAccordionComponent, selector: "sc-contacts-accordion", inputs: ["contacts$"], outputs: ["addContactClick", "deleteButtonClick"] }, { kind: "component", type: ScResetUserPasswordComponent, selector: "sc-reset-user-password", outputs: ["successResetPassword"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ScPhoneFormatPipe, name: "scPhoneFormat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ScProfileAccordionsContentComponent, isStandalone: true, selector: "sc-profile-accordions-content", outputs: { editProfileClick: "editProfileClick", approvePhoneClick: "approvePhoneClick", addContragentClick: "addContragentClick", deleteContragentClick: "deleteContragentClick", addContragentBankAccountClick: "addContragentBankAccountClick", deleteContragentBankAccountClick: "deleteContragentBankAccountClick", addContragentContactClick: "addContragentContactClick", deleteContragentContactClick: "deleteContragentContactClick", addDeliveryAddressClick: "addDeliveryAddressClick", deleteDeliveryAddressClick: "deleteDeliveryAddressClick", addDeliveryAddressContactClick: "addDeliveryAddressContactClick", deleteDeliveryAddressContactClick: "deleteDeliveryAddressContactClick", addUserContactClick: "addUserContactClick", deleteUserContactClick: "deleteUserContactClick" }, ngImport: i0, template: "@let user = user$ | async;\n<div class=\"flex flex-col gap-4\">\n    <sc-accordion\n        [showArrow]=\"false\"\n        [showAddButton]=\"false\"\n        [open]=\"true\"\n    >\n        \u041E\u0431\u0449\u0438\u0435 \u0434\u0430\u043D\u043D\u044B\u0435\n        <ng-template scAccordionContent>\n            <tui-loader\n                [overlay]=\"true\"\n                [loading]=\"user === null\"\n            >\n                <div class=\"flex gap-2 pl-4\">\n                    @if (user) {\n                        <div class=\"flex grow flex-col gap-2\">\n                            <span class=\"font-medium\">{{ user.name }}</span>\n                            @if (user.city && (userCity$ | async); as city) {\n                                <div class=\"flex items-center gap-1\">\n                                    <tui-icon icon=\"@tui.map-pin\"></tui-icon>\n                                    <div class=\"flex flex-wrap\">\n                                        <span>\u0433. {{ city.name }}, </span>\n                                        @if (city.region) {\n                                            <span>{{ city.region.name }}</span>\n                                        }\n                                    </div>\n                                </div>\n                            }\n                            <div class=\"flex flex-wrap gap-2\">\n                                <a\n                                    tuiLink\n                                    [scTelLink]=\"user.contacts.phone.value\"\n                                    iconStart=\"@tui.phone\"\n                                    [style.text-decoration-line]=\"'underline'\"\n                                    linkLocation=\"profile\"\n                                    href=\"tel:{{ user.contacts.phone.value | scPhoneFormat }}\"\n                                >\n                                    {{ user.contacts.phone.value | scPhoneFormat }}\n                                </a>\n                                @if (!user.contacts.phone.isApproved) {\n                                    <span class=\"text-tui-text-03\">\n                                        (\u0422\u0435\u043B\u0435\u0444\u043E\u043D \u043D\u0435 \u043F\u043E\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043D.\n                                        <button\n                                            tuiLink\n                                            [style.text-decoration-line]=\"'underline'\"\n                                            (click)=\"approvePhoneClick.emit()\"\n                                        >\n                                            \u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C</button\n                                        >)\n                                    </span>\n                                }\n                            </div>\n                            @let isSendApproveEmail = !!(isSendApproveEmail$ | async);\n                            <div class=\"flex flex-wrap gap-x-2\">\n                                <a\n                                    tuiLink\n                                    iconStart=\"@tui.mail\"\n                                    [style.text-decoration-line]=\"'underline'\"\n                                    scEmailLink\n                                    linkLocation=\"profile\"\n                                    href=\"mailto:{{ user.contacts.email.value }}\"\n                                >\n                                    {{ user.contacts.email.value }}\n                                </a>\n                                @if (!isSendApproveEmail && !user.contacts.email.isApproved) {\n                                    <span class=\"inline-flex flex-wrap gap-1 text-tui-text-03\">\n                                        E-mail \u043D\u0435 \u043F\u043E\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043D.\n                                        <tui-loader\n                                            [loading]=\"!!(approveEmailLoading$ | async)\"\n                                            [overlay]=\"true\"\n                                        >\n                                            <button\n                                                tuiLink\n                                                [style.text-decoration-line]=\"'underline'\"\n                                                (click)=\"onSendApproveEmail.next(user.contacts.email.value)\"\n                                            >\n                                                \u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C\n                                            </button>\n                                        </tui-loader>\n                                    </span>\n                                }\n                                @if (isSendApproveEmail) {\n                                    <span\n                                        class=\"text-tui-success-fill\"\n                                        @tuiFadeIn\n                                    >\n                                        \u041F\u0438\u0441\u044C\u043C\u043E \u0434\u043B\u044F \u043F\u043E\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043D\u0438\u044F \u0443\u0441\u043F\u0435\u0448\u043D\u043E \u043E\u0442\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u043E. \u041F\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043F\u043E \u0441\u0441\u044B\u043B\u043A\u0435 \u0432 \u043F\u0438\u0441\u044C\u043C\u0435 \u0438 \u043E\u0431\u043D\u043E\u0432\u0438\u0442\u0435 \u044D\u0442\u0443 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443.\n                                    </span>\n                                }\n                            </div>\n                            <tui-loader\n                                [loading]=\"!!(getNewsLoading$ | async)\"\n                                [overlay]=\"true\"\n                            >\n                                <label tuiLabel>\n                                    <input\n                                        tuiCheckbox\n                                        type=\"checkbox\"\n                                        size=\"s\"\n                                        class=\"w-full\"\n                                        [formControl]=\"getNewsControl\"\n                                        [ngModel]=\"user.getNews\"\n                                    />\n                                    \u042F \u0445\u043E\u0447\u0443 \u043F\u043E\u043B\u0443\u0447\u0430\u0442\u044C \u0440\u0430\u0441\u0441\u044B\u043B\u043A\u0443 \u0421\u043D\u0430\u0431\u0446\u0435\u043D\u0442\u0440 \u043E \u0441\u043A\u0438\u0434\u043A\u0430\u0445 \u0438 \u043D\u043E\u0432\u043E\u0441\u0442\u044F\u0445 \u043F\u043E \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u0435.\n                                </label>\n                            </tui-loader>\n                        </div>\n                    }\n\n                    <button\n                        tuiIconButton\n                        size=\"m\"\n                        type=\"button\"\n                        appearance=\"flat\"\n                        (click)=\"editProfileClick.emit()\"\n                    >\n                        <tui-icon icon=\"@tui.pencil\" />\n                    </button>\n                </div>\n            </tui-loader>\n        </ng-template>\n    </sc-accordion>\n    <sc-contragents-accordion\n        (addContragentClick)=\"addContragentClick.emit()\"\n        (deleteContragentClick)=\"deleteContragentClick.emit($event)\"\n        (addContragentBankAccountClick)=\"addContragentBankAccountClick.emit($event)\"\n        (deleteContragentBankAccountClick)=\"deleteContragentBankAccountClick.emit($event)\"\n        (addContragentContactClick)=\"addContragentContactClick.emit($event)\"\n        (deleteContragentContactClick)=\"deleteContragentContactClick.emit($event)\"\n    ></sc-contragents-accordion>\n    <sc-delivery-address-accordion\n        (addDeliveryAddressClick)=\"addDeliveryAddressClick.emit()\"\n        (deleteDeliveryAddressClick)=\"deleteDeliveryAddressClick.emit($event)\"\n        (addDeliveryAddressContactClick)=\"addDeliveryAddressContactClick.emit($event)\"\n        (deleteDeliveryAddressContactClick)=\"deleteDeliveryAddressContactClick.emit($event)\"\n    ></sc-delivery-address-accordion>\n    @if (user) {\n        <sc-contacts-accordion\n            [contacts$]=\"userContacts$\"\n            (addContactClick)=\"addUserContactClick.emit(user.id)\"\n            (deleteButtonClick)=\"deleteUserContactClick.emit($event)\"\n        ></sc-contacts-accordion>\n    }\n    <sc-accordion\n        #passwordAccordion\n        [showArrow]=\"false\"\n        [showAddButton]=\"false\"\n    >\n        \u0418\u0437\u043C\u0435\u043D\u0438\u0442\u044C \u043F\u0430\u0440\u043E\u043B\u044C\n        <ng-template scAccordionContent>\n            <sc-reset-user-password (successResetPassword)=\"passwordAccordion.close()\"></sc-reset-user-password>\n        </ng-template>\n    </sc-accordion>\n</div>\n", dependencies: [{ kind: "component", type: ScAccordionComponent, selector: "sc-accordion", inputs: ["showAddButton", "showDeleteButton", "showArrow", "open", "size", "disabledButtons"], outputs: ["addButtonClick", "deleteButtonClick"] }, { kind: "directive", type: ScAccordionContentDirective, selector: "ng-template[scAccordionContent]" }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "loading"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }, { kind: "directive", type: ScTelLinkDirective, selector: "a[scTelLink]", inputs: ["scTelLink", "linkLocation"] }, { kind: "directive", type: ScTerminalLinkDirective, selector: "a[href]" }, { kind: "directive", type: ScEmailLinkDirective, selector: "a[scEmailLink]", inputs: ["linkLocation"] }, { kind: "directive", type: TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: TuiCheckbox, selector: "input[type=\"checkbox\"][tuiCheckbox]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: ScContragentsAccordionComponent, selector: "sc-contragents-accordion", outputs: ["addContragentClick", "deleteContragentClick", "addContragentBankAccountClick", "deleteContragentBankAccountClick", "addContragentContactClick", "deleteContragentContactClick"] }, { kind: "component", type: ScDeliveryAddressAccordionComponent, selector: "sc-delivery-address-accordion", outputs: ["addDeliveryAddressClick", "deleteDeliveryAddressClick", "addDeliveryAddressContactClick", "deleteDeliveryAddressContactClick"] }, { kind: "component", type: ScContactsAccordionComponent, selector: "sc-contacts-accordion", inputs: ["contacts$"], outputs: ["addContactClick", "deleteButtonClick"] }, { kind: "component", type: ScResetUserPasswordComponent, selector: "sc-reset-user-password", outputs: ["successResetPassword"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ScPhoneFormatPipe, name: "scPhoneFormat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ScProfileAccordionsContentComponent, decorators: [{
             type: Component,
@@ -10040,7 +10052,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         ScResetUserPasswordComponent,
                         AsyncPipe,
                         ScPhoneFormatPipe,
-                    ], template: "@let user = user$ | async;\n<div class=\"flex flex-col gap-4\">\n    <sc-accordion\n        [showArrow]=\"false\"\n        [showAddButton]=\"false\"\n        [open]=\"true\"\n    >\n        \u041E\u0431\u0449\u0438\u0435 \u0434\u0430\u043D\u043D\u044B\u0435\n        <ng-template scAccordionContent>\n            <tui-loader\n                [overlay]=\"true\"\n                [loading]=\"user === null\"\n            >\n                <div class=\"flex gap-2 pl-4\">\n                    @if (user) {\n                        <div class=\"flex grow flex-col gap-2\">\n                            <span class=\"font-medium\">{{ user.name }}</span>\n                            @if (user.city && (userCity$ | async); as city) {\n                                <div class=\"flex items-center gap-1\">\n                                    <tui-icon icon=\"@tui.map-pin\"></tui-icon>\n                                    <div class=\"flex flex-wrap\">\n                                        <span>\u0433. {{ city.name }}, </span>\n                                        @if (city.region) {\n                                            <span>{{ city.region.name }}</span>\n                                        }\n                                    </div>\n                                </div>\n                            }\n                            <div class=\"flex flex-wrap gap-2\">\n                                <a\n                                    tuiLink\n                                    [scTelLink]=\"user.contacts.phone.value\"\n                                    iconStart=\"@tui.phone\"\n                                    [style.text-decoration-line]=\"'underline'\"\n                                    linkLocation=\"profile\"\n                                    href=\"tel:{{ user.contacts.phone.value | scPhoneFormat }}\"\n                                >\n                                    {{ user.contacts.phone.value | scPhoneFormat }}\n                                </a>\n                                @if (!user.contacts.phone.isApproved) {\n                                    <span class=\"text-tui-text-03\">\n                                        (\u0422\u0435\u043B\u0435\u0444\u043E\u043D \u043D\u0435 \u043F\u043E\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043D.\n                                        <button\n                                            tuiLink\n                                            [style.text-decoration-line]=\"'underline'\"\n                                            (click)=\"approvePhoneClick.emit()\"\n                                        >\n                                            \u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C</button\n                                        >)\n                                    </span>\n                                }\n                            </div>\n                            @let isSendApproveEmail = !!(isSendApproveEmail$ | async);\n                            <div class=\"flex flex-wrap gap-x-2\">\n                                <a\n                                    tuiLink\n                                    iconStart=\"@tui.mail\"\n                                    [style.text-decoration-line]=\"'underline'\"\n                                    scEmailLink\n                                    linkLocation=\"profile\"\n                                    href=\"mailto:{{ user.contacts.email.value }}\"\n                                >\n                                    {{ user.contacts.email.value }}\n                                </a>\n                                @if (!isSendApproveEmail && !user.contacts.email.isApproved) {\n                                    <span class=\"inline-flex flex-wrap gap-1 text-tui-text-03\">\n                                        E-mail \u043D\u0435 \u043F\u043E\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043D.\n                                        <tui-loader\n                                            [loading]=\"!!(approveEmailLoading$ | async)\"\n                                            [overlay]=\"true\"\n                                        >\n                                            <button\n                                                tuiLink\n                                                [style.text-decoration-line]=\"'underline'\"\n                                                (click)=\"onSendApproveEmail.next(user.contacts.email.value)\"\n                                            >\n                                                \u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C\n                                            </button>\n                                        </tui-loader>\n                                    </span>\n                                }\n                                @if (isSendApproveEmail) {\n                                    <span\n                                        class=\"text-tui-success-fill\"\n                                        @tuiFadeIn\n                                    >\n                                        \u041F\u0438\u0441\u044C\u043C\u043E \u0434\u043B\u044F \u043F\u043E\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043D\u0438\u044F \u0443\u0441\u043F\u0435\u0448\u043D\u043E \u043E\u0442\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u043E. \u041F\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043F\u043E \u0441\u0441\u044B\u043B\u043A\u0435 \u0432 \u043F\u0438\u0441\u044C\u043C\u0435 \u0438 \u043E\u0431\u043D\u043E\u0432\u0438\u0442\u0435 \u044D\u0442\u0443 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443.\n                                    </span>\n                                }\n                            </div>\n                            <tui-loader\n                                [loading]=\"!!(getNewsLoading$ | async)\"\n                                [overlay]=\"true\"\n                            >\n                                <label tuiLabel>\n                                    <input\n                                        tuiCheckbox\n                                        type=\"checkbox\"\n                                        size=\"s\"\n                                        class=\"w-full\"\n                                        [formControl]=\"getNewsControl\"\n                                        [ngModel]=\"user.getNews\"\n                                    />\n                                    \u042F \u0445\u043E\u0447\u0443 \u043F\u043E\u043B\u0443\u0447\u0430\u0442\u044C \u0440\u0430\u0441\u0441\u044B\u043B\u043A\u0443 \u0421\u043D\u0430\u0431\u0446\u0435\u043D\u0442\u0440 \u043E \u0441\u043A\u0438\u0434\u043A\u0430\u0445 \u0438 \u043D\u043E\u0432\u043E\u0441\u0442\u044F\u0445 \u043F\u043E \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u0435.\n                                </label>\n                            </tui-loader>\n                        </div>\n                    }\n\n                    <button\n                        tuiIconButton\n                        size=\"m\"\n                        type=\"button\"\n                        iconStart=\"@tui.pencil\"\n                        appearance=\"flat\"\n                        (click)=\"editProfileClick.emit()\"\n                    ></button>\n                </div>\n            </tui-loader>\n        </ng-template>\n    </sc-accordion>\n    <sc-contragents-accordion\n        (addContragentClick)=\"addContragentClick.emit()\"\n        (deleteContragentClick)=\"deleteContragentClick.emit($event)\"\n        (addContragentBankAccountClick)=\"addContragentBankAccountClick.emit($event)\"\n        (deleteContragentBankAccountClick)=\"deleteContragentBankAccountClick.emit($event)\"\n        (addContragentContactClick)=\"addContragentContactClick.emit($event)\"\n        (deleteContragentContactClick)=\"deleteContragentContactClick.emit($event)\"\n    ></sc-contragents-accordion>\n    <sc-delivery-address-accordion\n        (addDeliveryAddressClick)=\"addDeliveryAddressClick.emit()\"\n        (deleteDeliveryAddressClick)=\"deleteDeliveryAddressClick.emit($event)\"\n        (addDeliveryAddressContactClick)=\"addDeliveryAddressContactClick.emit($event)\"\n        (deleteDeliveryAddressContactClick)=\"deleteDeliveryAddressContactClick.emit($event)\"\n    ></sc-delivery-address-accordion>\n    @if (user) {\n        <sc-contacts-accordion\n            [contacts$]=\"userContacts$\"\n            (addContactClick)=\"addUserContactClick.emit(user.id)\"\n            (deleteButtonClick)=\"deleteUserContactClick.emit($event)\"\n        ></sc-contacts-accordion>\n    }\n    <sc-accordion\n        #passwordAccordion\n        [showArrow]=\"false\"\n        [showAddButton]=\"false\"\n    >\n        \u0418\u0437\u043C\u0435\u043D\u0438\u0442\u044C \u043F\u0430\u0440\u043E\u043B\u044C\n        <ng-template scAccordionContent>\n            <sc-reset-user-password (successResetPassword)=\"passwordAccordion.close()\"></sc-reset-user-password>\n        </ng-template>\n    </sc-accordion>\n</div>\n" }]
+                    ], template: "@let user = user$ | async;\n<div class=\"flex flex-col gap-4\">\n    <sc-accordion\n        [showArrow]=\"false\"\n        [showAddButton]=\"false\"\n        [open]=\"true\"\n    >\n        \u041E\u0431\u0449\u0438\u0435 \u0434\u0430\u043D\u043D\u044B\u0435\n        <ng-template scAccordionContent>\n            <tui-loader\n                [overlay]=\"true\"\n                [loading]=\"user === null\"\n            >\n                <div class=\"flex gap-2 pl-4\">\n                    @if (user) {\n                        <div class=\"flex grow flex-col gap-2\">\n                            <span class=\"font-medium\">{{ user.name }}</span>\n                            @if (user.city && (userCity$ | async); as city) {\n                                <div class=\"flex items-center gap-1\">\n                                    <tui-icon icon=\"@tui.map-pin\"></tui-icon>\n                                    <div class=\"flex flex-wrap\">\n                                        <span>\u0433. {{ city.name }}, </span>\n                                        @if (city.region) {\n                                            <span>{{ city.region.name }}</span>\n                                        }\n                                    </div>\n                                </div>\n                            }\n                            <div class=\"flex flex-wrap gap-2\">\n                                <a\n                                    tuiLink\n                                    [scTelLink]=\"user.contacts.phone.value\"\n                                    iconStart=\"@tui.phone\"\n                                    [style.text-decoration-line]=\"'underline'\"\n                                    linkLocation=\"profile\"\n                                    href=\"tel:{{ user.contacts.phone.value | scPhoneFormat }}\"\n                                >\n                                    {{ user.contacts.phone.value | scPhoneFormat }}\n                                </a>\n                                @if (!user.contacts.phone.isApproved) {\n                                    <span class=\"text-tui-text-03\">\n                                        (\u0422\u0435\u043B\u0435\u0444\u043E\u043D \u043D\u0435 \u043F\u043E\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043D.\n                                        <button\n                                            tuiLink\n                                            [style.text-decoration-line]=\"'underline'\"\n                                            (click)=\"approvePhoneClick.emit()\"\n                                        >\n                                            \u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C</button\n                                        >)\n                                    </span>\n                                }\n                            </div>\n                            @let isSendApproveEmail = !!(isSendApproveEmail$ | async);\n                            <div class=\"flex flex-wrap gap-x-2\">\n                                <a\n                                    tuiLink\n                                    iconStart=\"@tui.mail\"\n                                    [style.text-decoration-line]=\"'underline'\"\n                                    scEmailLink\n                                    linkLocation=\"profile\"\n                                    href=\"mailto:{{ user.contacts.email.value }}\"\n                                >\n                                    {{ user.contacts.email.value }}\n                                </a>\n                                @if (!isSendApproveEmail && !user.contacts.email.isApproved) {\n                                    <span class=\"inline-flex flex-wrap gap-1 text-tui-text-03\">\n                                        E-mail \u043D\u0435 \u043F\u043E\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043D.\n                                        <tui-loader\n                                            [loading]=\"!!(approveEmailLoading$ | async)\"\n                                            [overlay]=\"true\"\n                                        >\n                                            <button\n                                                tuiLink\n                                                [style.text-decoration-line]=\"'underline'\"\n                                                (click)=\"onSendApproveEmail.next(user.contacts.email.value)\"\n                                            >\n                                                \u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C\n                                            </button>\n                                        </tui-loader>\n                                    </span>\n                                }\n                                @if (isSendApproveEmail) {\n                                    <span\n                                        class=\"text-tui-success-fill\"\n                                        @tuiFadeIn\n                                    >\n                                        \u041F\u0438\u0441\u044C\u043C\u043E \u0434\u043B\u044F \u043F\u043E\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043D\u0438\u044F \u0443\u0441\u043F\u0435\u0448\u043D\u043E \u043E\u0442\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u043E. \u041F\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043F\u043E \u0441\u0441\u044B\u043B\u043A\u0435 \u0432 \u043F\u0438\u0441\u044C\u043C\u0435 \u0438 \u043E\u0431\u043D\u043E\u0432\u0438\u0442\u0435 \u044D\u0442\u0443 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443.\n                                    </span>\n                                }\n                            </div>\n                            <tui-loader\n                                [loading]=\"!!(getNewsLoading$ | async)\"\n                                [overlay]=\"true\"\n                            >\n                                <label tuiLabel>\n                                    <input\n                                        tuiCheckbox\n                                        type=\"checkbox\"\n                                        size=\"s\"\n                                        class=\"w-full\"\n                                        [formControl]=\"getNewsControl\"\n                                        [ngModel]=\"user.getNews\"\n                                    />\n                                    \u042F \u0445\u043E\u0447\u0443 \u043F\u043E\u043B\u0443\u0447\u0430\u0442\u044C \u0440\u0430\u0441\u0441\u044B\u043B\u043A\u0443 \u0421\u043D\u0430\u0431\u0446\u0435\u043D\u0442\u0440 \u043E \u0441\u043A\u0438\u0434\u043A\u0430\u0445 \u0438 \u043D\u043E\u0432\u043E\u0441\u0442\u044F\u0445 \u043F\u043E \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u0435.\n                                </label>\n                            </tui-loader>\n                        </div>\n                    }\n\n                    <button\n                        tuiIconButton\n                        size=\"m\"\n                        type=\"button\"\n                        appearance=\"flat\"\n                        (click)=\"editProfileClick.emit()\"\n                    >\n                        <tui-icon icon=\"@tui.pencil\" />\n                    </button>\n                </div>\n            </tui-loader>\n        </ng-template>\n    </sc-accordion>\n    <sc-contragents-accordion\n        (addContragentClick)=\"addContragentClick.emit()\"\n        (deleteContragentClick)=\"deleteContragentClick.emit($event)\"\n        (addContragentBankAccountClick)=\"addContragentBankAccountClick.emit($event)\"\n        (deleteContragentBankAccountClick)=\"deleteContragentBankAccountClick.emit($event)\"\n        (addContragentContactClick)=\"addContragentContactClick.emit($event)\"\n        (deleteContragentContactClick)=\"deleteContragentContactClick.emit($event)\"\n    ></sc-contragents-accordion>\n    <sc-delivery-address-accordion\n        (addDeliveryAddressClick)=\"addDeliveryAddressClick.emit()\"\n        (deleteDeliveryAddressClick)=\"deleteDeliveryAddressClick.emit($event)\"\n        (addDeliveryAddressContactClick)=\"addDeliveryAddressContactClick.emit($event)\"\n        (deleteDeliveryAddressContactClick)=\"deleteDeliveryAddressContactClick.emit($event)\"\n    ></sc-delivery-address-accordion>\n    @if (user) {\n        <sc-contacts-accordion\n            [contacts$]=\"userContacts$\"\n            (addContactClick)=\"addUserContactClick.emit(user.id)\"\n            (deleteButtonClick)=\"deleteUserContactClick.emit($event)\"\n        ></sc-contacts-accordion>\n    }\n    <sc-accordion\n        #passwordAccordion\n        [showArrow]=\"false\"\n        [showAddButton]=\"false\"\n    >\n        \u0418\u0437\u043C\u0435\u043D\u0438\u0442\u044C \u043F\u0430\u0440\u043E\u043B\u044C\n        <ng-template scAccordionContent>\n            <sc-reset-user-password (successResetPassword)=\"passwordAccordion.close()\"></sc-reset-user-password>\n        </ng-template>\n    </sc-accordion>\n</div>\n" }]
         }], propDecorators: { editProfileClick: [{
                 type: Output
             }], approvePhoneClick: [{