@snabcentr/client-ui 4.5.5 → 4.6.1

package/fesm2022/snabcentr-client-ui.mjs

@@ -3,13 +3,13 @@ import { InjectionToken, inject, Injectable, NgZone, signal, EventEmitter, Chang
 import * as i1 from '@snabcentr/client-core';
 import { ScContactsService, ScUserService, ScLocationsService, ScAuthService, SEARCH_TERM, ScUnitsHelper, ScImageHelper, SC_PATH_IMAGE_NOT_FOUND, ScImage, ScPhoneService, ScUserMetrikaService, ScUserMetrikaGoalsEnum, IS_RUNNING_ON_TERMINAL, ScVCardService, ScVerificationService, ScISuggestionType, SC_MIN_LENGTH_SEARCH_TERM, ScConvertersService, ScOpfList, ScReferencesService, ScContragentService, ScBannerService, ScMediaImageTransformerPipe, ScCartService, ScUploadedFile, SC_ORDER_LOADER, ScMimeTypes, ScCatalogService, SC_URLS, IS_SERVER, ScWarehouseService, SEARCH_TERM_PROVIDERS, ScPaginationService, SC_NEXT_PAGE_PAGINATION_CLICK, SC_PRODUCT_PAGINATION_OPTIONS, ScCatalogFilterService, ScIdOrSlugPipe, SC_CATEGORY_INFO, ScConfiguratorService, RESPONSE, ScIconTypesEnum, ScDocumentInfoTypesEnum, ScOrderDraftsService, ScRouteKeys, ScSeoService, scOrderIsLoaded, ScFrequentlyAskedQuestionsService, SC_COMPANY_INFO, ScFeedbackService } from '@snabcentr/client-core';
 import * as i5$1 from 'rxjs';
-import { EMPTY, BehaviorSubject, switchMap, of, shareReplay, map, Subject, filter, tap, catchError, finalize, startWith, share, timer, scan, takeWhile, endWith, distinctUntilChanged, debounceTime, throwError, combineLatest, Observable, pairwise, merge, noop, first, skip } from 'rxjs';
+import { EMPTY, BehaviorSubject, switchMap, of, shareReplay, map, Subject, filter, tap, catchError, finalize, startWith, share, timer, scan, takeWhile, endWith, distinctUntilChanged, debounceTime, throwError, combineLatest, Observable, pairwise, merge, skip, from, concatMap, noop, first } from 'rxjs';
 import { WA_WINDOW } from '@ng-web-apis/common';
 import { takeUntilDestroyed, toSignal, outputFromObservable, toObservable } from '@angular/core/rxjs-interop';
 import * as i4$1 from '@taiga-ui/cdk';
 import { TuiDay, TuiTime, TuiValueTransformer, TUI_IS_MOBILE, tuiControlValue, tuiIsPresent, tuiMarkControlAsTouchedAndValidate, tuiIsFalsy, TuiAutoFocus, TuiRepeatTimes, TuiHovered, TuiDayRange, TuiMonth, tuiPure, tuiProvide, TUI_WINDOW_SIZE, TuiValidationError, TUI_TRUE_HANDLER } from '@taiga-ui/cdk';
 import * as i2$1 from '@taiga-ui/kit';
-import { TUI_DATE_VALUE_TRANSFORMER, TuiPreview, TuiAvatar, TuiAccordionItem, TuiElasticContainer, TuiAccordion, TuiFieldErrorPipe, TuiFilterByInputPipe, TuiStringifyContentPipe, TuiDataListWrapper, TuiButtonLoading, TuiSortCountriesPipe, TuiStepper, TuiCarousel, TuiPush, TuiCheckbox, TuiFiles, TuiChip, TuiInputNumber, TuiBadge, TuiTooltip, TuiHighlight, TuiLineClamp, TuiInputRange, tuiInputNumberOptionsProvider, TuiDataListWrapperComponent, TuiChevron, TuiSelect, TuiInputSlider, TuiTreeService, TuiTreeItemContent, TUI_TREE_START, TUI_TREE_CONTENT, TUI_TREE_LOADING, TUI_TREE_LOADER, TuiTree, TuiPreviewDialogService, TUI_CONFIRM, tuiItemsHandlersProvider as tuiItemsHandlersProvider$1, TuiPagination, TuiAccordionDirective, TuiAccordionItemContent, tuiFilesAccepted } from '@taiga-ui/kit';
+import { TUI_DATE_VALUE_TRANSFORMER, TuiPreview, TuiAvatar, TuiAccordionItem, TuiElasticContainer, TuiAccordion, TuiFieldErrorPipe, TuiFilterByInputPipe, TuiStringifyContentPipe, TuiDataListWrapper, TuiButtonLoading, TuiSortCountriesPipe, TuiStepper, TuiCarousel, TuiPush, TuiCheckbox, TuiFiles, TuiChip, TuiInputNumber, TuiBadge, TuiTooltip, TuiHighlight, TuiLineClamp, TuiRadio, TuiInputRange, tuiInputNumberOptionsProvider, TuiDataListWrapperComponent, TuiChevron, TuiSelect, TuiInputSlider, TuiTreeService, TuiTreeItemContent, TUI_TREE_START, TUI_TREE_CONTENT, TUI_TREE_LOADING, TUI_TREE_LOADER, TuiTree, TuiPreviewDialogService, TUI_CONFIRM, tuiItemsHandlersProvider as tuiItemsHandlersProvider$1, TuiPagination, TuiAccordionDirective, TuiAccordionItemContent, tuiFilesAccepted } from '@taiga-ui/kit';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import * as i1$1 from '@angular/forms';
 import { FormControl, FormGroupDirective, NgControl, FormGroup, Validators, FormArray, FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -25,7 +25,7 @@ import * as i5 from '@taiga-ui/core/components/label';
 import * as i8 from '@maskito/angular';
 import { MaskitoDirective } from '@maskito/angular';
 import * as i2$2 from '@angular/common';
-import { DOCUMENT, CommonModule, NgIf, AsyncPipe, NgFor, NgClass } from '@angular/common';
+import { DOCUMENT, CommonModule, NgIf, AsyncPipe, DecimalPipe, NgFor, NgClass } from '@angular/common';
 import * as i2$3 from '@taiga-ui/polymorpheus';
 import { POLYMORPHEUS_CONTEXT, PolymorpheusComponent, PolymorpheusTemplate, PolymorpheusOutlet, injectContext } from '@taiga-ui/polymorpheus';
 import * as i2 from 'angularx-qrcode';
@@ -838,36 +838,63 @@ const ScLinks = [ScTelLinkDirective, ScEmailLinkDirective, ScPhoneFormatPipe];
 /* eslint-disable lodash/prefer-lodash-method */
 /**
  * Директива для перехода по нажатию клавиши enter на следующее поле ввода формы.
+ * Поддерживает как legacy Taiga UI v3 контролы (AbstractTuiControl), так и новые v4
+ * (tui-textfield + нативные input) — через DOM-fallback.
  */
 class ScNextInputFocusDirective {
+    constructor() {
+        /**
+         * Элемент формы.
+         */
+        this.el = inject(ElementRef);
+    }
     /**
-     * Слушатель нажатия на клавишу enter. Предотвращает событие submit, выполняет смену фокуса на следующее поле ввода TuiFocusableElementAccessor.
+     * По Enter — переход на следующее редактируемое поле формы.
+     * Сначала пробует legacy Taiga UI v3 контролы, затем DOM fallback для v4.
      *
-     * @param event Объект события нажатия на клавишу.
+     * @param event Событие нажатия клавиши.
      */
     onFormKeyDownEnter(event) {
         if (event.code !== 'Enter' && event.key !== 'Enter') {
             return;
         }
         event.preventDefault();
-        const elements = this.focusableElements.toArray();
-        const focusedIndex = elements.findIndex((control) => control.focused);
-        if (focusedIndex !== -1) {
-            const nextElement = elements[focusedIndex + 1]?.nativeFocusableElement;
-            if (nextElement) {
-                nextElement.focus();
+        // Taiga UI v3: переход через AbstractTuiControl (legacy-обёртки tui-input, tui-input-number и др.).
+        const legacy = this.legacyControls.toArray();
+        const legacyIndex = legacy.findIndex((control) => control.focused);
+        if (legacyIndex !== -1) {
+            const next = legacy[legacyIndex + 1]?.nativeFocusableElement;
+            if (next) {
+                next.focus();
+                return;
             }
         }
+        // Taiga UI v4: переход через DOM — ищем нативные input внутри формы (tui-textfield + директивы).
+        const { target } = event;
+        if (!(target instanceof HTMLInputElement) || target.type === 'range') {
+            return;
+        }
+        // eslint-disable-next-line unicorn/prefer-spread
+        const inputs = Array.from(this.el.nativeElement.querySelectorAll('input')).filter((element) => element.type !== 'range' && !element.readOnly && !element.disabled);
+        const currentIndex = inputs.indexOf(target);
+        if (currentIndex === -1) {
+            return;
+        }
+        const nextInput = inputs.at(currentIndex + 1);
+        if (nextInput) {
+            nextInput.focus();
+            nextInput.select();
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScNextInputFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ScNextInputFocusDirective, selector: "form[ScNextInputFocus]", host: { listeners: { "keydown": "onFormKeyDownEnter($event)" } }, queries: [{ propertyName: "focusableElements", predicate: AbstractTuiControl, descendants: true }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ScNextInputFocusDirective, selector: "form[ScNextInputFocus]", host: { listeners: { "keydown": "onFormKeyDownEnter($event)" } }, queries: [{ propertyName: "legacyControls", predicate: AbstractTuiControl, descendants: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScNextInputFocusDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'form[ScNextInputFocus]',
                 }]
-        }], propDecorators: { focusableElements: [{
+        }], propDecorators: { legacyControls: [{
                 type: ContentChildren,
                 args: [AbstractTuiControl, { descendants: true }]
             }], onFormKeyDownEnter: [{
@@ -5632,15 +5659,14 @@ class ScCatalogFiltersComponent {
         /**
          * {@link Observable} фильтров категории.
          */
-        this.filters = toSignal(inject(SC_CATEGORY_INFO).pipe(filter(tuiIsPresent), switchMap((category) => this.catalogFilterService.getFilters$(this.idOrSlugPipe.transform(category), this.isRecursively)), map((filters) => filters.filter((item) => item.type !== 'range' || item.min !== item.max)), tap((filters) => {
-            // Обновляем состав контролов формы на основе полученных фильтров.
+        this.filters = toSignal(inject(SC_CATEGORY_INFO).pipe(catchError(() => EMPTY), filter(tuiIsPresent), switchMap((category) => this.catalogFilterService.getFilters$(this.idOrSlugPipe.transform(category), this.isRecursively)), map((filters) => filters.filter((item) => item.type !== 'range' || item.min !== item.max)), tap((filters) => {
             this.updateFormControls(filters);
         }), share()));
         /**
          * FormGroup для фильтров.
          */
         this.form = new FormGroup({});
-        this.form.valueChanges.pipe(debounceTime(0), takeUntilDestroyed()).subscribe((filters) => {
+        this.form.valueChanges.pipe(takeUntilDestroyed()).subscribe((filters) => {
             this.catalogProductsFilters$.next(this.buildPropertyFilters(filters));
         });
     }
@@ -5699,11 +5725,17 @@ class ScCatalogFiltersComponent {
         return result;
     }
     /**
-     * Создает FormGroup для checkbox.
+     * Создает контрол формы для фильтра типа checkbox.
+     *
+     * Если `isMultiple === false` — возвращает {@link FormControl} строкового идентификатора (логика radio),
+     * иначе — {@link FormGroup} независимых булевых контролов по идентификаторам значений.
      *
      * @param checkboxFilter Фильтр типа checkbox.
      */
     createCheckboxFormControl(checkboxFilter) {
+        if (!checkboxFilter.isMultiple) {
+            return new FormControl(null);
+        }
         const controls = {};
         checkboxFilter.values.forEach((value) => {
             controls[value.id] = new FormControl(false, { nonNullable: true });
@@ -5735,7 +5767,15 @@ class ScCatalogFiltersComponent {
      * @param controlValue Значение контрола формы.
      */
     processCheckboxFilter(result, filterId, controlValue) {
-        // Для checkbox: FormGroup с FormControl<boolean> -> string[] (массив ID выбранных значений)
+        // Для isMultiple === false: FormControl<string | null> -> string[] из одного выбранного ID.
+        if (typeof controlValue === 'string') {
+            if (controlValue) {
+                // eslint-disable-next-line security/detect-object-injection, no-param-reassign
+                result[filterId] = [controlValue];
+            }
+            return;
+        }
+        // Для checkbox: FormGroup с FormControl<boolean> -> string[] (массив ID выбранных значений).
         const selectedIds = Object.entries(controlValue)
             .filter(([, isSelected]) => isSelected)
             .map(([id]) => id);
@@ -5776,11 +5816,11 @@ class ScCatalogFiltersComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScCatalogFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ScCatalogFiltersComponent, isStandalone: true, selector: "sc-catalog-filters", inputs: { isOpenAccordion: { classPropertyName: "isOpenAccordion", publicName: "isOpenAccordion", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (filters()?.length) {\n    <div class=\"bg-tui-base-01 shadow-sc mb-4 flex flex-col items-center gap-3 rounded-xl\">\n        <tui-accordion class=\"accordion\">\n            <button\n                [tuiAccordion]=\"isOpenAccordion()\"\n                appearance=\"primary\"\n            >\n                \u0424\u0438\u043B\u044C\u0442\u0440\u044B\n            </button>\n            <tui-expand>\n                <form\n                    [formGroup]=\"form\"\n                    class=\"flex flex-col gap-4 pb-1\"\n                >\n                    @for (filter of filters(); track filter.id) {\n                        <div class=\"flex flex-col gap-2\">\n                            <label class=\"text-body-s font-medium\">{{ filter.label }}</label>\n\n                            @if (filter.type === 'checkbox') {\n                                <div\n                                    [formGroupName]=\"filter.id\"\n                                    class=\"flex flex-col gap-2\"\n                                >\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                            }\n\n                            @if (filter.type === 'range') {\n                                <tui-input-range\n                                    [formControlName]=\"filter.id\"\n                                    [min]=\"+filter.min\"\n                                    [max]=\"+filter.max\"\n                                />\n                            }\n\n                            @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\">\u0414\u0430</span>\n                                </label>\n                            }\n                        </div>\n                    }\n                </form>\n            </tui-expand>\n        </tui-accordion>\n    </div>\n}\n", styles: [".accordion [tuiAccordion]{border:none;mask:none}.accordion tui-expand{box-shadow:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: TuiCheckbox, selector: "input[type=\"checkbox\"][tuiCheckbox]", inputs: ["size"] }, { kind: "component", type: i2$1.TuiInputRangeComponent, selector: "tui-input-range", inputs: ["min", "max", "step", "segments", "keySteps", "prefix", "postfix", "quantum", "content"] }, { kind: "component", type: i1$3.TuiAccordionComponent, selector: "tui-accordion", inputs: ["closeOthers", "size"] }, { kind: "directive", type: i1$3.TuiAccordionDirective, selector: "button[tuiAccordion]", inputs: ["tuiAccordion"], outputs: ["tuiAccordionChange"] }, { kind: "component", type: i2$5.TuiExpand, selector: "tui-expand", inputs: ["expanded"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ScCatalogFiltersComponent, isStandalone: true, selector: "sc-catalog-filters", inputs: { isOpenAccordion: { classPropertyName: "isOpenAccordion", publicName: "isOpenAccordion", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (filters()?.length) {\n    <div class=\"bg-tui-base-01 shadow-sc flex flex-col items-center gap-3 rounded-xl\">\n        <tui-accordion class=\"accordion\">\n            <button\n                [tuiAccordion]=\"isOpenAccordion()\"\n                appearance=\"primary\"\n            >\n                \u0424\u0438\u043B\u044C\u0442\u0440\u044B\n            </button>\n            <tui-expand>\n                <form\n                    [formGroup]=\"form\"\n                    class=\"flex flex-col gap-4 pb-1\"\n                >\n                    @for (filter of filters(); track filter.id) {\n                        <div class=\"flex flex-col gap-2\">\n                            <label class=\"text-body-s font-medium\">{{ filter.label }}</label>\n\n                            @if (filter.type === 'checkbox') {\n                                @if (filter.isMultiple === false) {\n                                    <div class=\"flex flex-col gap-2\">\n                                        @for (value of filter.values; track value.id) {\n                                            @let formControl = form.get(filter.id);\n                                            <label class=\"flex items-center gap-2\">\n                                                <input\n                                                    [formControlName]=\"filter.id\"\n                                                    [value]=\"value.id\"\n                                                    tuiRadio\n                                                    (click)=\"formControl?.setValue(formControl?.value === value.id ? null : value.id)\"\n                                                    type=\"radio\"\n                                                />\n                                                <span class=\"text-body-s\">{{ value.label }}</span>\n                                            </label>\n                                        }\n                                    </div>\n                                } @else {\n                                    <div\n                                        [formGroupName]=\"filter.id\"\n                                        class=\"flex flex-col gap-2\"\n                                    >\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                                }\n                            }\n\n                            @if (filter.type === 'range') {\n                                <tui-input-range\n                                    [formControlName]=\"filter.id\"\n                                    [min]=\"+filter.min\"\n                                    [max]=\"+filter.max\"\n                                />\n                            }\n\n                            @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\">\u0414\u0430</span>\n                                </label>\n                            }\n                        </div>\n                    }\n                </form>\n            </tui-expand>\n        </tui-accordion>\n    </div>\n}\n", styles: [".accordion [tuiAccordion]{border:none;mask:none}.accordion tui-expand{box-shadow:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: TuiCheckbox, selector: "input[type=\"checkbox\"][tuiCheckbox]", inputs: ["size"] }, { kind: "component", type: i2$1.TuiRadioComponent, selector: "input[type=\"radio\"][tuiRadio]", inputs: ["size"] }, { kind: "component", type: i2$1.TuiInputRangeComponent, selector: "tui-input-range", inputs: ["min", "max", "step", "segments", "keySteps", "prefix", "postfix", "quantum", "content"] }, { kind: "component", type: i1$3.TuiAccordionComponent, selector: "tui-accordion", inputs: ["closeOthers", "size"] }, { kind: "directive", type: i1$3.TuiAccordionDirective, selector: "button[tuiAccordion]", inputs: ["tuiAccordion"], outputs: ["tuiAccordionChange"] }, { kind: "component", type: i2$5.TuiExpand, selector: "tui-expand", inputs: ["expanded"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScCatalogFiltersComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'sc-catalog-filters', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, TuiTextfield, TuiCheckbox, TuiInputRange, TuiAccordion$1, ReactiveFormsModule], template: "@if (filters()?.length) {\n    <div class=\"bg-tui-base-01 shadow-sc mb-4 flex flex-col items-center gap-3 rounded-xl\">\n        <tui-accordion class=\"accordion\">\n            <button\n                [tuiAccordion]=\"isOpenAccordion()\"\n                appearance=\"primary\"\n            >\n                \u0424\u0438\u043B\u044C\u0442\u0440\u044B\n            </button>\n            <tui-expand>\n                <form\n                    [formGroup]=\"form\"\n                    class=\"flex flex-col gap-4 pb-1\"\n                >\n                    @for (filter of filters(); track filter.id) {\n                        <div class=\"flex flex-col gap-2\">\n                            <label class=\"text-body-s font-medium\">{{ filter.label }}</label>\n\n                            @if (filter.type === 'checkbox') {\n                                <div\n                                    [formGroupName]=\"filter.id\"\n                                    class=\"flex flex-col gap-2\"\n                                >\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                            }\n\n                            @if (filter.type === 'range') {\n                                <tui-input-range\n                                    [formControlName]=\"filter.id\"\n                                    [min]=\"+filter.min\"\n                                    [max]=\"+filter.max\"\n                                />\n                            }\n\n                            @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\">\u0414\u0430</span>\n                                </label>\n                            }\n                        </div>\n                    }\n                </form>\n            </tui-expand>\n        </tui-accordion>\n    </div>\n}\n", styles: [".accordion [tuiAccordion]{border:none;mask:none}.accordion tui-expand{box-shadow:none}\n"] }]
+            args: [{ standalone: true, selector: 'sc-catalog-filters', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, TuiTextfield, TuiCheckbox, TuiRadio, TuiInputRange, TuiAccordion$1, ReactiveFormsModule], template: "@if (filters()?.length) {\n    <div class=\"bg-tui-base-01 shadow-sc flex flex-col items-center gap-3 rounded-xl\">\n        <tui-accordion class=\"accordion\">\n            <button\n                [tuiAccordion]=\"isOpenAccordion()\"\n                appearance=\"primary\"\n            >\n                \u0424\u0438\u043B\u044C\u0442\u0440\u044B\n            </button>\n            <tui-expand>\n                <form\n                    [formGroup]=\"form\"\n                    class=\"flex flex-col gap-4 pb-1\"\n                >\n                    @for (filter of filters(); track filter.id) {\n                        <div class=\"flex flex-col gap-2\">\n                            <label class=\"text-body-s font-medium\">{{ filter.label }}</label>\n\n                            @if (filter.type === 'checkbox') {\n                                @if (filter.isMultiple === false) {\n                                    <div class=\"flex flex-col gap-2\">\n                                        @for (value of filter.values; track value.id) {\n                                            @let formControl = form.get(filter.id);\n                                            <label class=\"flex items-center gap-2\">\n                                                <input\n                                                    [formControlName]=\"filter.id\"\n                                                    [value]=\"value.id\"\n                                                    tuiRadio\n                                                    (click)=\"formControl?.setValue(formControl?.value === value.id ? null : value.id)\"\n                                                    type=\"radio\"\n                                                />\n                                                <span class=\"text-body-s\">{{ value.label }}</span>\n                                            </label>\n                                        }\n                                    </div>\n                                } @else {\n                                    <div\n                                        [formGroupName]=\"filter.id\"\n                                        class=\"flex flex-col gap-2\"\n                                    >\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                                }\n                            }\n\n                            @if (filter.type === 'range') {\n                                <tui-input-range\n                                    [formControlName]=\"filter.id\"\n                                    [min]=\"+filter.min\"\n                                    [max]=\"+filter.max\"\n                                />\n                            }\n\n                            @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\">\u0414\u0430</span>\n                                </label>\n                            }\n                        </div>\n                    }\n                </form>\n            </tui-expand>\n        </tui-accordion>\n    </div>\n}\n", styles: [".accordion [tuiAccordion]{border:none;mask:none}.accordion tui-expand{box-shadow:none}\n"] }]
         }], ctorParameters: () => [] });
 
 /* eslint-disable @typescript-eslint/unbound-method */
@@ -5857,14 +5897,22 @@ class ScSandwichComponent {
          * Выбранный продукт (материал для раскроя).
          */
         this.product = new FormControl(null, { validators: Validators.required });
+        /**
+         * Сигнал текущего выбранного продукта — используется в шаблоне для диапазонов и кнопок.
+         */
+        this.productSignal = toSignal(tuiControlValue(this.product), { initialValue: null });
         /**
          * Субъект для ручного запуска расчёта.
          */
         this.calculateTrigger$ = new Subject();
+        /**
+         * Источник начального результата расчёта для режима редактирования.
+         */
+        this.seedCalculateResult$ = new BehaviorSubject(undefined);
         /**
          * {@link Observable} расчета оптимизации раскладки.
          */
-        this.calculate$ = merge(merge(tuiControlValue(this.product), tuiControlValue(this.items)).pipe(
+        this.calculate$ = merge(this.seedCalculateResult$, merge(tuiControlValue(this.product).pipe(skip(1)), tuiControlValue(this.items).pipe(skip(1))).pipe(
         // eslint-disable-next-line unicorn/no-useless-undefined
         map(() => undefined)), this.calculateTrigger$.pipe(switchMap(() => {
             const productId = this.product.value?.id ?? null;
@@ -5893,6 +5941,14 @@ class ScSandwichComponent {
          * Валидатор для длины изделия.
          */
         this.validatorLength$ = tuiControlValue(this.product).pipe(map((product) => Validators.min(product?.properties?.length ?? 0)));
+        /**
+         * Текст ограничения по ширине («от … до …»), пока выбран товар.
+         */
+        this.widthRangeText = computed(() => this.formatRange(this.settings()?.minWidth ?? null, this.productSignal()?.properties?.width ?? null, 'мм'));
+        /**
+         * Текст ограничения по длине («от … до …»), пока выбран товар.
+         */
+        this.lengthRangeText = computed(() => this.formatRange(this.settings()?.minLength ?? null, this.productSignal()?.properties?.length ?? null, 'мм'));
         /**
          * Признак того, что выполняется запрос на отправку данных выполняется.
          */
@@ -6026,6 +6082,28 @@ class ScSandwichComponent {
         }))
             .subscribe();
     }
+    /**
+     * Форматирование диапазона «от … до …» с учётом отсутствующих границ.
+     *
+     * @param min Нижняя граница.
+     * @param max Верхняя граница.
+     * @param unit Единица измерения.
+     */
+    // eslint-disable-next-line class-methods-use-this
+    formatRange(min, max, unit) {
+        const hasMin = min != null && min > 0;
+        const hasMax = max != null && max > 0;
+        if (!hasMin && !hasMax) {
+            return null;
+        }
+        if (hasMin && hasMax) {
+            return `от ${min} ${unit} до ${max} ${unit}`;
+        }
+        if (hasMin) {
+            return `от ${min} ${unit}`;
+        }
+        return `до ${max} ${unit}`;
+    }
     /**
      * Устанавливает начальные значения для полей формы.
      */
@@ -6045,6 +6123,19 @@ class ScSandwichComponent {
         if (!configuratorParameters?.items.length) {
             this.addItem();
         }
+        // Сбрасываем seed и при наличии сохранённого calculationId восстанавливаем результат расчёта —
+        // чтобы в режиме редактирования сразу была видна кнопка «Изменить», а не «Рассчитать».
+        // eslint-disable-next-line unicorn/no-useless-undefined
+        this.seedCalculateResult$.next(undefined);
+        const existingCalculationId = configuratorParameters?.calculationId;
+        const existingQuantity = this.orderItem()?.quantity;
+        if (existingCalculationId && existingQuantity != null && existingQuantity > 0) {
+            this.seedCalculateResult$.next({
+                id: existingCalculationId,
+                quantity: existingQuantity,
+                sheets: [],
+            });
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScSandwichComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ScSandwichComponent, isStandalone: true, selector: "sc-sandwich", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null }, categoryId: { classPropertyName: "categoryId", publicName: "categoryId", isSignal: true, isRequired: true, transformFunction: null }, editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, orderItem: { classPropertyName: "orderItem", publicName: "orderItem", isSignal: true, isRequired: true, transformFunction: null }, orderId: { classPropertyName: "orderId", publicName: "orderId", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { toggleShowEvent: "toggleShowEvent" }, providers: [
@@ -6056,7 +6147,7 @@ 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 class=\"\">\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                    *tuiTextfieldDropdown\n                    new\n                    [items]=\"products\"\n                />\n            </tui-textfield>\n            @if (productValue) {\n                <div class=\"ml-2 text-tui-text-secondary\">\n                    \u0421\u0442\u043E\u0438\u043C\u043E\u0441\u0442\u044C:\n                    <span class=\"font-bold\">{{ productValue.costRub?.toLocaleString() }} {{ productValue.currency.symbol }}/\u0448\u0442.</span>\n                </div>\n            }\n            <tui-error\n                [formControl]=\"product\"\n                [error]=\"[] | tuiFieldError | async\"\n            />\n        </label>\n\n        @if (product.value && validatorWidth && validatorLength) {\n            <p class=\"w-full font-bold\">\u0420\u0430\u0437\u043C\u0435\u0440\u044B \u0438\u0437\u0434\u0435\u043B\u0438\u0439</p>\n            <p class=\"w-full\">\n                \u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{ settings()?.minWidth }} \u043C\u043C.\n                <br />\n                \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{ product.value.properties?.width }} \u043C\u043C.\n                <br />\n                \u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0434\u043B\u0438\u043D\u0430: {{ settings()?.minLength }} \u043C\u043C.\n                <br />\n                \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0434\u043B\u0438\u043D\u0430: {{ product.value.properties?.length }} \u043C\u043C.\n                <br />\n            </p>\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-3 gap-2\">\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                                        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\n                                    formControlName=\"width\"\n                                    [error]=\"[] | tuiFieldError | async\"\n                                />\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                                        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\n                                    formControlName=\"length\"\n                                    [error]=\"[] | tuiFieldError | async\"\n                                />\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                                        placeholder=\"\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E\"\n                                        autocomplete=\"off\"\n                                    />\n                                </tui-textfield>\n                                <tui-error\n                                    formControlName=\"count\"\n                                    [error]=\"[] | tuiFieldError | async\"\n                                />\n                            </label>\n                        </div>\n                        <button\n                            tuiIconButton\n                            (click)=\"removeItem($index)\"\n                            [disabled]=\"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            <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        } @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        <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                    tuiTextfield\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\n                formControlName=\"marker\"\n                [error]=\"[] | tuiFieldError | async\"\n            />\n        </label>\n\n        @if (product.value) {\n            <tui-loader [showLoader]=\"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 [error]=\"[] | tuiFieldError | async\" />\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: calc($thumb / 2);display:flex;font:var(--tui-font-text-s);margin-inline-start:var(--t-offset);margin-inline-end:var(--t-offset);color:var(--tui-text-secondary)}.slider-ticks-labels>*{position:relative;flex:2;text-align:center}.slider-ticks-labels>*:first-child{left:calc(-1 * var(--t-offset));inset-inline-start:calc(-1 * var(--t-offset));flex:1;text-align:start}.slider-ticks-labels>*:last-child{right:calc(-1 * var(--t-offset));flex:1;text-align:end}@supports (inset-inline-end: 0){.slider-ticks-labels>*:last-child{right:unset;inset-inline-end:calc(-1 * var(--t-offset))}}tui-input-slider+.slider-ticks-labels{margin-inline-start:calc(var(--tui-radius-m) / 2 + var(--t-offset))}tui-textfield+.slider-ticks-labels{--t-offset: calc(var(--tui-radius-m) / 2 + $thumb / 2)}tui-textfield[data-size=l]+.slider-ticks-labels{--t-offset: calc(var(--tui-radius-l) / 2 + $thumb / 2)}tui-input-range:not([new])+.slider-ticks-labels,tui-range+.slider-ticks-labels{--t-offset: $thumb}tui-input-range[new]+.slider-ticks-labels{--t-offset: calc(map-get($track-inset, $input-size) + $thumb)}\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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: ScNextInputFocusModule }, { 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]), tui-data-list-wrapper:not([labels])[new]", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "component", type: TuiError, selector: "tui-error", inputs: ["error"] }, { kind: "component", type: i1$2.TuiTextfieldComponent, selector: "tui-textfield:not([multi])" }, { kind: "directive", type: i1$2.TuiTextfieldDirective, selector: "input[tuiTextfield]:not([tuiInputCard]):not([tuiInputExpire]):not([tuiInputCVC])" }, { kind: "directive", type: i1$2.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i1$2.TuiTextfieldDropdownDirective, selector: "ng-template[tuiTextfieldDropdown]" }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "directive", type: i2$1.TuiSelectDirective, selector: "input[tuiSelect]" }, { kind: "directive", type: i2$1.TuiInputNumberDirective, selector: "input[tuiInputNumber]", inputs: ["min", "max", "prefix", "postfix"] }, { kind: "directive", type: TuiNumberFormat, selector: "[tuiNumberFormat]", inputs: ["tuiNumberFormat"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TuiFieldErrorPipe, name: "tuiFieldError" }, { kind: "component", type: i5$2.TuiSliderComponent, selector: "input[type=range][tuiSlider]", inputs: ["size", "segments"] }, { kind: "directive", type: i2$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[tuiInputNumber], input[tuiTextfield], input[tuiInputSlider]" }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { kind: "component", type: TuiButtonLoading, selector: "[tuiButton][loading],[tuiIconButton][loading]", inputs: ["size", "loading"] }], 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                    *tuiTextfieldDropdown\n                    new\n                    [items]=\"products\"\n                />\n            </tui-textfield>\n            <tui-error\n                [formControl]=\"product\"\n                [error]=\"[] | tuiFieldError | async\"\n            />\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\n                                formControlName=\"width\"\n                                [error]=\"[] | tuiFieldError | async\"\n                            />\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\n                                formControlName=\"length\"\n                                [error]=\"[] | tuiFieldError | async\"\n                            />\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\n                                formControlName=\"count\"\n                                [error]=\"[] | tuiFieldError | async\"\n                            />\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                    tuiTextfield\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\n                formControlName=\"marker\"\n                [error]=\"[] | tuiFieldError | async\"\n            />\n        </label>\n\n        @if (product.value) {\n            <tui-loader [showLoader]=\"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 [error]=\"[] | tuiFieldError | async\" />\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: calc($thumb / 2);display:flex;font:var(--tui-font-text-s);margin-inline-start:var(--t-offset);margin-inline-end:var(--t-offset);color:var(--tui-text-secondary)}.slider-ticks-labels>*{position:relative;flex:2;text-align:center}.slider-ticks-labels>*:first-child{left:calc(-1 * var(--t-offset));inset-inline-start:calc(-1 * var(--t-offset));flex:1;text-align:start}.slider-ticks-labels>*:last-child{right:calc(-1 * var(--t-offset));flex:1;text-align:end}@supports (inset-inline-end: 0){.slider-ticks-labels>*:last-child{right:unset;inset-inline-end:calc(-1 * var(--t-offset))}}tui-input-slider+.slider-ticks-labels{margin-inline-start:calc(var(--tui-radius-m) / 2 + var(--t-offset))}tui-textfield+.slider-ticks-labels{--t-offset: calc(var(--tui-radius-m) / 2 + $thumb / 2)}tui-textfield[data-size=l]+.slider-ticks-labels{--t-offset: calc(var(--tui-radius-l) / 2 + $thumb / 2)}tui-input-range:not([new])+.slider-ticks-labels,tui-range+.slider-ticks-labels{--t-offset: $thumb}tui-input-range[new]+.slider-ticks-labels{--t-offset: calc(map-get($track-inset, $input-size) + $thumb)}\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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: ScNextInputFocusModule }, { 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]), tui-data-list-wrapper:not([labels])[new]", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "component", type: TuiError, selector: "tui-error", inputs: ["error"] }, { kind: "component", type: i1$2.TuiTextfieldComponent, selector: "tui-textfield:not([multi])" }, { kind: "directive", type: i1$2.TuiTextfieldDirective, selector: "input[tuiTextfield]:not([tuiInputCard]):not([tuiInputExpire]):not([tuiInputCVC])" }, { kind: "directive", type: i1$2.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i1$2.TuiTextfieldDropdownDirective, selector: "ng-template[tuiTextfieldDropdown]" }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "directive", type: i2$1.TuiSelectDirective, selector: "input[tuiSelect]" }, { kind: "directive", type: i2$1.TuiInputNumberDirective, selector: "input[tuiInputNumber]", inputs: ["min", "max", "prefix", "postfix"] }, { kind: "directive", type: TuiNumberFormat, selector: "[tuiNumberFormat]", inputs: ["tuiNumberFormat"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TuiFieldErrorPipe, name: "tuiFieldError" }, { kind: "component", type: i5$2.TuiSliderComponent, selector: "input[type=range][tuiSlider]", inputs: ["size", "segments"] }, { kind: "directive", type: i2$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[tuiInputNumber], input[tuiTextfield], input[tuiInputSlider]" }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { kind: "component", type: TuiButtonLoading, selector: "[tuiButton][loading],[tuiIconButton][loading]", inputs: ["size", "loading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScSandwichComponent, decorators: [{
             type: Component,
@@ -6088,7 +6179,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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 class=\"\">\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                    *tuiTextfieldDropdown\n                    new\n                    [items]=\"products\"\n                />\n            </tui-textfield>\n            @if (productValue) {\n                <div class=\"ml-2 text-tui-text-secondary\">\n                    \u0421\u0442\u043E\u0438\u043C\u043E\u0441\u0442\u044C:\n                    <span class=\"font-bold\">{{ productValue.costRub?.toLocaleString() }} {{ productValue.currency.symbol }}/\u0448\u0442.</span>\n                </div>\n            }\n            <tui-error\n                [formControl]=\"product\"\n                [error]=\"[] | tuiFieldError | async\"\n            />\n        </label>\n\n        @if (product.value && validatorWidth && validatorLength) {\n            <p class=\"w-full font-bold\">\u0420\u0430\u0437\u043C\u0435\u0440\u044B \u0438\u0437\u0434\u0435\u043B\u0438\u0439</p>\n            <p class=\"w-full\">\n                \u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{ settings()?.minWidth }} \u043C\u043C.\n                <br />\n                \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0448\u0438\u0440\u0438\u043D\u0430: {{ product.value.properties?.width }} \u043C\u043C.\n                <br />\n                \u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0434\u043B\u0438\u043D\u0430: {{ settings()?.minLength }} \u043C\u043C.\n                <br />\n                \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0434\u043B\u0438\u043D\u0430: {{ product.value.properties?.length }} \u043C\u043C.\n                <br />\n            </p>\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-3 gap-2\">\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                                        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\n                                    formControlName=\"width\"\n                                    [error]=\"[] | tuiFieldError | async\"\n                                />\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                                        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\n                                    formControlName=\"length\"\n                                    [error]=\"[] | tuiFieldError | async\"\n                                />\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                                        placeholder=\"\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E\"\n                                        autocomplete=\"off\"\n                                    />\n                                </tui-textfield>\n                                <tui-error\n                                    formControlName=\"count\"\n                                    [error]=\"[] | tuiFieldError | async\"\n                                />\n                            </label>\n                        </div>\n                        <button\n                            tuiIconButton\n                            (click)=\"removeItem($index)\"\n                            [disabled]=\"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            <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        } @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        <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                    tuiTextfield\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\n                formControlName=\"marker\"\n                [error]=\"[] | tuiFieldError | async\"\n            />\n        </label>\n\n        @if (product.value) {\n            <tui-loader [showLoader]=\"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 [error]=\"[] | tuiFieldError | async\" />\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: calc($thumb / 2);display:flex;font:var(--tui-font-text-s);margin-inline-start:var(--t-offset);margin-inline-end:var(--t-offset);color:var(--tui-text-secondary)}.slider-ticks-labels>*{position:relative;flex:2;text-align:center}.slider-ticks-labels>*:first-child{left:calc(-1 * var(--t-offset));inset-inline-start:calc(-1 * var(--t-offset));flex:1;text-align:start}.slider-ticks-labels>*:last-child{right:calc(-1 * var(--t-offset));flex:1;text-align:end}@supports (inset-inline-end: 0){.slider-ticks-labels>*:last-child{right:unset;inset-inline-end:calc(-1 * var(--t-offset))}}tui-input-slider+.slider-ticks-labels{margin-inline-start:calc(var(--tui-radius-m) / 2 + var(--t-offset))}tui-textfield+.slider-ticks-labels{--t-offset: calc(var(--tui-radius-m) / 2 + $thumb / 2)}tui-textfield[data-size=l]+.slider-ticks-labels{--t-offset: calc(var(--tui-radius-l) / 2 + $thumb / 2)}tui-input-range:not([new])+.slider-ticks-labels,tui-range+.slider-ticks-labels{--t-offset: $thumb}tui-input-range[new]+.slider-ticks-labels{--t-offset: calc(map-get($track-inset, $input-size) + $thumb)}\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                    *tuiTextfieldDropdown\n                    new\n                    [items]=\"products\"\n                />\n            </tui-textfield>\n            <tui-error\n                [formControl]=\"product\"\n                [error]=\"[] | tuiFieldError | async\"\n            />\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\n                                formControlName=\"width\"\n                                [error]=\"[] | tuiFieldError | async\"\n                            />\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\n                                formControlName=\"length\"\n                                [error]=\"[] | tuiFieldError | async\"\n                            />\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\n                                formControlName=\"count\"\n                                [error]=\"[] | tuiFieldError | async\"\n                            />\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                    tuiTextfield\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\n                formControlName=\"marker\"\n                [error]=\"[] | tuiFieldError | async\"\n            />\n        </label>\n\n        @if (product.value) {\n            <tui-loader [showLoader]=\"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 [error]=\"[] | tuiFieldError | async\" />\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: calc($thumb / 2);display:flex;font:var(--tui-font-text-s);margin-inline-start:var(--t-offset);margin-inline-end:var(--t-offset);color:var(--tui-text-secondary)}.slider-ticks-labels>*{position:relative;flex:2;text-align:center}.slider-ticks-labels>*:first-child{left:calc(-1 * var(--t-offset));inset-inline-start:calc(-1 * var(--t-offset));flex:1;text-align:start}.slider-ticks-labels>*:last-child{right:calc(-1 * var(--t-offset));flex:1;text-align:end}@supports (inset-inline-end: 0){.slider-ticks-labels>*:last-child{right:unset;inset-inline-end:calc(-1 * var(--t-offset))}}tui-input-slider+.slider-ticks-labels{margin-inline-start:calc(var(--tui-radius-m) / 2 + var(--t-offset))}tui-textfield+.slider-ticks-labels{--t-offset: calc(var(--tui-radius-m) / 2 + $thumb / 2)}tui-textfield[data-size=l]+.slider-ticks-labels{--t-offset: calc(var(--tui-radius-l) / 2 + $thumb / 2)}tui-input-range:not([new])+.slider-ticks-labels,tui-range+.slider-ticks-labels{--t-offset: $thumb}tui-input-range[new]+.slider-ticks-labels{--t-offset: calc(map-get($track-inset, $input-size) + $thumb)}\n"] }]
         }], propDecorators: { orderId: [{
                 type: Input
             }] } });
@@ -6105,6 +6196,563 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             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" }]
         }] });
 
+/**
+ * Начальное состояние позиции — используется при инициализации и сбросе формы.
+ */
+const IDLE_ITEM_STATE = 'idle';
+
+/* eslint-disable security/detect-object-injection,@typescript-eslint/unbound-method */
+/**
+ * Конфигуратор распила сэндвич-панелей по площади.
+ */
+class ScSandwichM2Component {
+    constructor() {
+        /**
+         * Настройки для конфигуратора распила сэндвич-панелей по площади.
+         */
+        this.settings = input();
+        /**
+         * Идентификатор категории.
+         */
+        this.categoryId = input.required();
+        /**
+         * Название конфигуратора.
+         */
+        this.editor = input.required();
+        /**
+         * Позиция товара/услуги в корзине.
+         */
+        this.orderItem = input.required();
+        /**
+         * Событие переключения отображения товаров.
+         */
+        this.toggleShowEvent = output();
+        /**
+         * Форма добавления/редактирования продукта в корзине.
+         */
+        this.form = new FormGroup({
+            productCategoryId: new FormControl(null, { validators: Validators.required }),
+            configurator: new FormControl(null, { validators: Validators.required }),
+            items: new FormArray([]),
+        });
+        /**
+         * Сервис получения и редактирования списка товаров заказа (корзина / заказ / черновик = заказ).
+         */
+        this.orderService = inject(SC_ORDER_LOADER);
+        /**
+         * Сервис конвертации данных.
+         */
+        this.convertersService = inject(ScConvertersService);
+        /**
+         * Контекст диалогового окна, в котором открыт компонент.
+         */
+        this.context = inject(POLYMORPHEUS_CONTEXT, { optional: true });
+        /**
+         * Сервис для работы с каталогом.
+         */
+        this.catalogService = inject(ScCatalogService);
+        /**
+         * {@link Observable} списка товаров категории.
+         */
+        this.products$ = toObservable(this.categoryId).pipe(switchMap((categoryId) => {
+            if (!categoryId) {
+                return of([]);
+            }
+            return this.catalogService.getProductsCategoryCached$({ categoryId: Number(categoryId) }).pipe(map((products) => products ?? []));
+        }));
+        /**
+         * Выбранный продукт.
+         */
+        this.product = new FormControl(null, { validators: Validators.required });
+        /**
+         * Сигнал текущего выбранного продукта — обновляется при `valueChanges` контрола `product`.
+         */
+        this.productSignal = toSignal(tuiControlValue(this.product), { initialValue: null });
+        /**
+         * Сигнал содержимого FormArray позиций — пересчитывается при любом изменении значений.
+         */
+        this.itemsValue = toSignal(tuiControlValue(this.items).pipe(map(() => this.items.controls.map((c) => c.getRawValue()))), {
+            initialValue: [],
+        });
+        /**
+         * Признак того, что выполняется запрос на отправку данных.
+         */
+        this.isSubmitLoading = computed(() => this.itemStates().includes('loading'));
+        /**
+         * Состояние отправки каждой позиции — параллельный массив к контролу `items` формы.
+         */
+        this.itemStates = signal([]);
+        /**
+         * Признак режима редактирования существующей позиции — `orderItem` задан.
+         */
+        this.isEditingExistingItem = computed(() => this.orderItem() != null);
+        /**
+         * Признак того, что отправлять больше нечего — все позиции либо успешно
+         * отправлены, либо находятся в процессе отправки.
+         */
+        this.hasNoPendingItems = computed(() => {
+            const states = this.itemStates();
+            if (this.items.length === 0) {
+                return true;
+            }
+            return this.items.controls.every((_, index) => {
+                const state = states[index] ?? IDLE_ITEM_STATE;
+                return state === 'success' || state === 'loading';
+            });
+        });
+        /**
+         * Суммарная площадь всех позиций (м²), рассчитанная локально.
+         */
+        this.totalAreaM2 = computed(() => {
+            let total = 0;
+            this.itemsValue().forEach((value) => {
+                total += this.rowTotalPartsAreaM2(value);
+            });
+            return total;
+        });
+        /**
+         * Итоговая стоимость по всем позициям (локальный расчёт).
+         */
+        this.totalCost = computed(() => {
+            const cost = this.productSignal()?.costRub ?? 0;
+            const area = this.totalAreaM2();
+            return Math.round(area * cost * 100) / 100;
+        });
+        /**
+         * Текст ограничения по ширине («от … до …»), пока есть выбранный товар.
+         */
+        this.widthRangeText = computed(() => this.formatRange(this.settings()?.minWidth ?? null, this.productSignal()?.properties?.width ?? null, 'мм'));
+        /**
+         * Текст ограничения по длине («от … до …»), пока есть выбранный товар.
+         */
+        this.lengthRangeText = computed(() => this.formatRange(this.settings()?.minLength ?? null, this.productSignal()?.properties?.length ?? null, 'мм'));
+        /**
+         * Ссылка для автоматического управления уничтожением зависимостей.
+         */
+        this.destroyRef = inject(DestroyRef);
+    }
+    /**
+     * Валидаторы ширины/длины: пока товар не выбран — не накладываем min/max каталога (поля read-only без товара).
+     *
+     * @param min Нижняя граница размера из настроек конфигуратора.
+     * @param maxUpper Верхняя граница из свойств выбранного товара.
+     */
+    dimensionValidators(min, maxUpper) {
+        const chosenProduct = this.product.value;
+        if (!chosenProduct) {
+            return [];
+        }
+        return [Validators.required, Validators.min(min), ...(maxUpper != null && maxUpper > 0 ? [Validators.max(maxUpper)] : []), stepValidator(1)];
+    }
+    /**
+     * Обновляет валидаторы размерных полей после смены товара или настроек.
+     */
+    updateItemsValidators() {
+        const settings = this.settings();
+        const minWidth = settings?.minWidth ?? 0.01;
+        const minLength = settings?.minLength ?? 0.01;
+        const chosenProduct = this.product.value;
+        this.items.controls.forEach((group) => {
+            group.get('width')?.setValidators(this.dimensionValidators(minWidth, chosenProduct?.properties?.width));
+            group.get('length')?.setValidators(this.dimensionValidators(minLength, chosenProduct?.properties?.length));
+            group.get('width')?.updateValueAndValidity({ emitEvent: false });
+            group.get('length')?.updateValueAndValidity({ emitEvent: false });
+        });
+    }
+    /**
+     * Форматирование диапазона «от … до …» с учётом отсутствующих границ.
+     *
+     * @param min Нижняя граница диапазона.
+     * @param max Верхняя граница диапазона.
+     * @param unit Единица измерения для подписи.
+     */
+    // eslint-disable-next-line class-methods-use-this
+    formatRange(min, max, unit) {
+        const hasMin = min != null && min > 0;
+        const hasMax = max != null && max > 0;
+        if (!hasMin && !hasMax) {
+            return null;
+        }
+        if (hasMin && hasMax) {
+            return `от ${min} ${unit} до ${max} ${unit}`;
+        }
+        if (hasMin) {
+            return `от ${min} ${unit}`;
+        }
+        return `до ${max} ${unit}`;
+    }
+    /**
+     * Массив изделий.
+     */
+    get items() {
+        return this.form.controls.items;
+    }
+    /**
+     * {@inheritDoc}
+     */
+    ngOnInit() {
+        this.setDefaultFormValue();
+        this.products$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((products) => {
+            if (this.product.value != null || products.length === 0) {
+                return;
+            }
+            /* При загрузке списка автоматически выбираем первый материал. */
+            this.product.setValue(products[0], { emitEvent: true });
+        });
+        this.product.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((chosenProduct) => {
+            this.updateItemsValidators();
+            if (chosenProduct) {
+                this.items.controls.forEach((item) => {
+                    const value = item.getRawValue();
+                    const maxW = chosenProduct.properties?.width;
+                    const maxL = chosenProduct.properties?.length;
+                    item.patchValue({
+                        width: maxW ? Math.min(value.width, maxW) : value.width,
+                        length: maxL ? Math.min(value.length, maxL) : value.length,
+                    });
+                });
+                /*
+                 * Смена продукта — сбрасываем состояние позиций: границы каталога изменились,
+                 * успешная отправка больше не отражает текущее состояние.
+                 */
+                this.resetAllItemStates();
+            }
+        });
+    }
+    /**
+     * Создает группу для изделия.
+     *
+     * @param item Параметры изделия.
+     * @param item.width Ширина изделия.
+     * @param item.length Длина изделия.
+     * @param item.count Количество изделий.
+     * @param item.marker Маркер позиции.
+     */
+    createItemGroup(item) {
+        const group = new FormGroup({
+            width: new FormControl(item?.width ?? 0, { nonNullable: true }),
+            length: new FormControl(item?.length ?? 0, { nonNullable: true }),
+            count: new FormControl(item?.count ?? 1, {
+                validators: [Validators.required, Validators.min(1), stepValidator(1)],
+                nonNullable: true,
+            }),
+            marker: new FormControl(item?.marker ?? null),
+        });
+        // Любое изменение значений позиции сбрасывает её состояние отправки —
+        // ранее успешный submit становится неактуальным при правке полей,
+        // ошибку валидации сервера тоже сбрасываем.
+        group.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            const index = this.items.controls.indexOf(group);
+            if (index !== -1) {
+                this.resetItemState(index);
+                ['width', 'length', 'count', 'marker'].forEach((field) => {
+                    const control = group.get(field);
+                    if (control?.hasError('serverResponse')) {
+                        const errors = { ...control.errors };
+                        delete errors['serverResponse'];
+                        control.setErrors(Object.keys(errors).length > 0 ? errors : null);
+                    }
+                });
+            }
+        });
+        return group;
+    }
+    /**
+     * Сбрасывает состояние одной позиции на `idle`, если оно было `success`/`error`.
+     *
+     * @param index Индекс позиции.
+     */
+    resetItemState(index) {
+        const states = this.itemStates();
+        const current = states[index];
+        if (current === 'success' || current === 'error') {
+            const updated = [...states];
+            updated[index] = 'idle';
+            this.itemStates.set(updated);
+        }
+    }
+    /**
+     * Сбрасывает состояния всех позиций на `idle`.
+     */
+    resetAllItemStates() {
+        this.itemStates.set(this.items.controls.map(() => IDLE_ITEM_STATE));
+    }
+    /**
+     * Возвращает состояние позиции по индексу (по умолчанию `idle`).
+     *
+     * @param index Индекс позиции.
+     */
+    getItemState(index) {
+        return this.itemStates()[index] ?? IDLE_ITEM_STATE;
+    }
+    /**
+     * Признак того, что позиция отправляется (поля должны быть заблокированы).
+     *
+     * @param index Индекс позиции.
+     */
+    isItemLoading(index) {
+        return this.getItemState(index) === 'loading';
+    }
+    /**
+     * Признак того, что позиция успешно отправлена и её поля нужно заблокировать.
+     *
+     * @param index Индекс позиции.
+     */
+    isItemLocked(index) {
+        return this.getItemState(index) === 'success';
+    }
+    /**
+     * Добавляет новое изделие в форму.
+     */
+    addItem() {
+        this.items.push(this.createItemGroup());
+        this.itemStates.update((states) => [...states, 'idle']);
+        this.updateItemsValidators();
+    }
+    /**
+     * Удаляет изделие из формы.
+     *
+     * @param index Индекс изделия.
+     */
+    removeItem(index) {
+        this.items.removeAt(index);
+        this.itemStates.update((states) => {
+            const updated = [...states];
+            updated.splice(index, 1);
+            return updated;
+        });
+        this.updateItemsValidators();
+    }
+    /**
+     * Площадь одной единицы изделия без учёта количества, м².
+     *
+     * @param value Значения размеров изделия.
+     * @param value.width Ширина изделия.
+     * @param value.length Длина изделия.
+     */
+    // eslint-disable-next-line class-methods-use-this
+    pieceAreaM2(value) {
+        const { width, length } = value;
+        if (!width || !length) {
+            return 0;
+        }
+        return (width * length) / 1_000_000;
+    }
+    /**
+     * Суммарная площадь по строке позиции: площадь единицы × количество, м².
+     *
+     * @param value Значения позиции.
+     * @param value.width Ширина изделия.
+     * @param value.length Длина изделия.
+     * @param value.count Количество изделий.
+     */
+    rowTotalPartsAreaM2(value) {
+        const qty = value.count;
+        if (!qty || !value.width || value.length === 0) {
+            return 0;
+        }
+        return this.pieceAreaM2(value) * qty;
+    }
+    /**
+     * Возвращает приблизительную стоимость строки (локальный расчёт — на всю строку позиции).
+     *
+     * @param value Значения изделия.
+     * @param value.width Ширина изделия.
+     * @param value.length Длина изделия.
+     * @param value.count Количество изделий.
+     */
+    rowCost(value) {
+        const area = this.rowTotalPartsAreaM2(value);
+        const cost = this.product.value?.costRub ?? 0;
+        return Math.round(area * cost * 100) / 100;
+    }
+    /**
+     * Обновляет состояние позиции на указанное значение.
+     *
+     * @param index Индекс позиции.
+     * @param state Новое состояние.
+     */
+    setItemState(index, state) {
+        this.itemStates.update((states) => {
+            const updated = [...states];
+            updated[index] = state;
+            return updated;
+        });
+    }
+    /**
+     * Применяет ошибки серверной валидации к контролам формы.
+     * Сервер возвращает ключи вида `items.0.<field>` — переводим в фактический индекс позиции.
+     *
+     * @param error Ответ сервера.
+     * @param index Индекс позиции в форме.
+     */
+    applyServerValidationErrors(error, index) {
+        if (!(error instanceof HttpErrorResponse)) {
+            return;
+        }
+        const { errors, message } = error.error;
+        if (errors) {
+            Object.keys(errors).forEach((key) => {
+                this.form.get(['items', index, key])?.setErrors({ serverResponse: errors[key] });
+            });
+        }
+        else if (message) {
+            this.form.setErrors({ serverResponse: [message] });
+        }
+    }
+    /**
+     * Обработчик добавления/редактирования продукта в корзине.
+     */
+    onSubmit() {
+        if (this.form.invalid || !this.product.value) {
+            return;
+        }
+        const productId = this.product.value.id;
+        const productCategoryId = Number(this.categoryId());
+        const configurator = this.editor();
+        const orderData = this.orderItem();
+        const indexesToSubmit = this.items.controls
+            .map((_, index) => index)
+            .filter((index) => {
+            const state = this.getItemState(index);
+            return state !== 'success' && state !== 'loading';
+        });
+        if (indexesToSubmit.length === 0) {
+            return;
+        }
+        // Позиции отправляются последовательно: каждая следующая — только после ответа предыдущей.
+        // При ошибке цепочка прерывается; диалог не закрывается.
+        from(indexesToSubmit)
+            .pipe(concatMap((index, position) => {
+            // Editing-режим: первая позиция (index 0) обновляется, остальные добавляются.
+            const isEdit = orderData != null && index === 0 && position === 0;
+            this.setItemState(index, 'loading');
+            return this.buildItemRequest$(index, productId, productCategoryId, configurator, isEdit, orderData).pipe(tap(() => {
+                this.setItemState(index, 'success');
+            }), catchError((error) => {
+                this.applyServerValidationErrors(error, index);
+                this.setItemState(index, 'error');
+                return throwError(() => error);
+            }));
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            complete: () => {
+                if (this.context) {
+                    this.context.$implicit.complete();
+                }
+                else {
+                    this.setDefaultFormValue();
+                }
+            },
+        });
+    }
+    /**
+     * Формирует HTTP-запрос для одной позиции формы.
+     *
+     * @param index Индекс позиции в форме.
+     * @param productId Идентификатор выбранного продукта.
+     * @param productCategoryId Идентификатор категории.
+     * @param configurator Название конфигуратора.
+     * @param isEdit Режим обновления существующей позиции.
+     * @param orderData Текущая позиция заказа (только в режиме редактирования).
+     */
+    buildItemRequest$(index, productId, productCategoryId, configurator, isEdit, orderData) {
+        const itemValue = this.items.at(index).getRawValue();
+        const payload = this.convertersService.removeNull({
+            productCategoryId,
+            configurator,
+            productId,
+            width: itemValue.width,
+            length: itemValue.length,
+            quantity: itemValue.count,
+            marker: itemValue.marker,
+        });
+        return isEdit && orderData != null
+            ? this.orderService.updateProduct$(orderData.id, payload, this.orderId)
+            : this.orderService.addProduct$(payload, this.orderId);
+    }
+    /**
+     * Устанавливает начальные значения для полей формы.
+     */
+    setDefaultFormValue() {
+        this.form.reset({
+            productCategoryId: Number(this.categoryId()),
+            configurator: this.editor(),
+        });
+        this.items.clear();
+        const orderItem = this.orderItem();
+        this.items.push(this.createItemGroup({
+            width: (orderItem?.width ?? 0) * 1000,
+            length: (orderItem?.length ?? 0) * 1000,
+            count: orderItem?.quantity ?? 1,
+            marker: orderItem?.marker ?? null,
+        }));
+        this.itemStates.set(this.items.controls.map(() => IDLE_ITEM_STATE));
+        this.updateItemsValidators();
+        this.form.markAsUntouched();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScSandwichM2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ScSandwichM2Component, isStandalone: true, selector: "sc-sandwich-m2", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null }, categoryId: { classPropertyName: "categoryId", publicName: "categoryId", isSignal: true, isRequired: true, transformFunction: null }, editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, orderItem: { classPropertyName: "orderItem", publicName: "orderItem", isSignal: true, isRequired: true, transformFunction: null }, orderId: { classPropertyName: "orderId", publicName: "orderId", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { toggleShowEvent: "toggleShowEvent" }, providers: [
+            tuiNumberFormatProvider({ precision: 0 }),
+            tuiInputNumberOptionsProvider({
+                min: 0,
+            }),
+            tuiItemsHandlersProvider({
+                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 class=\"\">\n    @let products = products$ | async;\n    @let productValue = product.value;\n\n    <form\n        [formGroup]=\"form\"\n        (ngSubmit)=\"onSubmit()\"\n        ScNextInputFocus\n        class=\"flex flex-col gap-2\"\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                    *tuiTextfieldDropdown\n                    new\n                    [items]=\"products\"\n                />\n            </tui-textfield>\n            <tui-error\n                [formControl]=\"product\"\n                [error]=\"[] | tuiFieldError | async\"\n            />\n        </label>\n\n        @if (productValue && productValue.costRub !== undefined) {\n            <div class=\"-mt-1 text-sm text-tui-text-secondary\">\n                <span class=\"font-bold\">{{ productValue.code }}</span>\n                \u2014\n                {{ productValue.costRub.toLocaleString() }} {{ productValue.currency.symbol }}/\u043C\u00B2\n            </div>\n        }\n\n        @if (productValue) {\n            <div class=\"mt-4 mb-3 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                    @let wt = widthRangeText();\n                    @let lt = lengthRangeText();\n                    @if (wt) {\n                        <div>\u0428\u0438\u0440\u0438\u043D\u0430 {{ wt }}.</div>\n                    }\n                    @if (lt) {\n                        <div>\u0414\u043B\u0438\u043D\u0430 {{ lt }}.</div>\n                    }\n                </div>\n            </div>\n        }\n\n        <div class=\"flex flex-col gap-3\">\n            <div\n                formArrayName=\"items\"\n                class=\"flex flex-col gap-3\"\n            >\n                @for (item of items.controls; track item) {\n                    @if ($index > 0) {\n                        <hr class=\"border-sc-grey h-px\" />\n                    }\n                    @let itemIndex = $index;\n                    <div\n                        class=\"relative flex flex-col gap-1\"\n                        [formGroupName]=\"itemIndex\"\n                    >\n                        @if (isItemLocked(itemIndex)) {\n                            <div class=\"pointer-events-none absolute right-3 bottom-0 z-10 flex size-8 items-center justify-center\">\n                                <tui-icon\n                                    icon=\"@tui.check\"\n                                    class=\"text-tui-status-positive\"\n                                />\n                            </div>\n                        }\n                        <tui-loader [showLoader]=\"isItemLoading(itemIndex)\">\n                            <div\n                                [class.opacity-70]=\"isItemLocked(itemIndex)\"\n                                class=\"flex min-w-0 items-start gap-2\"\n                            >\n                                <div class=\"flex min-w-0 flex-1 flex-col gap-3\">\n                                    <div class=\"flex flex-col gap-3 lg:!flex-row lg:!items-start lg:!gap-6\">\n                                        <!-- \u0413\u0440\u0443\u043F\u043F\u0430 1: \u0448\u0438\u0440\u0438\u043D\u0430 + \u0434\u043B\u0438\u043D\u0430 -->\n                                        <div class=\"grid grid-cols-1 gap-2 sm:grid-cols-2 lg:!flex-[2]\">\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 || isItemLocked(itemIndex) || isItemLoading(itemIndex)\"\n                                                        [tuiAutoFocus]=\"!$first\"\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                                                <tui-error\n                                                    formControlName=\"width\"\n                                                    [error]=\"[] | tuiFieldError | async\"\n                                                />\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 || isItemLocked(itemIndex) || isItemLoading(itemIndex)\"\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                                                <tui-error\n                                                    formControlName=\"length\"\n                                                    [error]=\"[] | tuiFieldError | async\"\n                                                />\n                                            </label>\n                                        </div>\n\n                                        <!-- \u0413\u0440\u0443\u043F\u043F\u0430 2: \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E + \u043C\u0430\u0440\u043A\u0438\u0440\u043E\u0432\u043A\u0430 (\u043D\u0430 lg 1fr | 2fr) -->\n                                        <div class=\"grid grid-cols-1 gap-2 sm:grid-cols-2 lg:!grid-cols-[1fr_2fr] lg:!flex-[3]\">\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 || isItemLocked(itemIndex) || isItemLoading(itemIndex)\"\n                                                        placeholder=\"\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E\"\n                                                        autocomplete=\"off\"\n                                                    />\n                                                </tui-textfield>\n                                                <tui-error\n                                                    formControlName=\"count\"\n                                                    [error]=\"[] | tuiFieldError | async\"\n                                                />\n                                            </label>\n\n                                            <label tuiLabel>\n                                                \u041C\u0430\u0440\u043A\u0438\u0440\u043E\u0432\u043A\u0430\n                                                <tui-textfield>\n                                                    <input\n                                                        tuiTextfield\n                                                        formControlName=\"marker\"\n                                                        [readOnly]=\"!product.value || isItemLocked(itemIndex) || isItemLoading(itemIndex)\"\n                                                        placeholder=\"\u041C\u0430\u0440\u043A\u0438\u0440\u043E\u0432\u043A\u0430\"\n                                                        autocomplete=\"off\"\n                                                    />\n                                                </tui-textfield>\n                                                <tui-error\n                                                    formControlName=\"marker\"\n                                                    [error]=\"[] | tuiFieldError | async\"\n                                                />\n                                            </label>\n                                        </div>\n                                    </div>\n\n                                    @let rowVal = item.getRawValue();\n\n                                    @if (rowVal.width > 0 && rowVal.length > 0) {\n                                        <div class=\"mt-1 flex flex-col gap-y-1 text-sm lg:!flex-row lg:!gap-6\">\n                                            @if (pieceAreaM2(rowVal) > 0) {\n                                                <div class=\"lg:!flex-[2]\">\n                                                    \u041F\u043B\u043E\u0449\u0430\u0434\u044C (S) =\n                                                    <span class=\"font-bold\">{{ pieceAreaM2(rowVal) | number: '1.0-4' }} \u043C\u00B2</span>\n                                                </div>\n                                            }\n                                            @if (productValue && rowCost(rowVal) > 0) {\n                                                <div class=\"lg:!flex-[3]\">\n                                                    \u0418\u0442\u043E\u0433\u043E:\n                                                    <span class=\"font-bold\">{{ rowCost(rowVal).toLocaleString() }} {{ productValue.currency.symbol }}</span>\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                </div>\n\n                                @if (!isEditingExistingItem()) {\n                                    <button\n                                        tuiIconButton\n                                        title=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0438\u0437\u0434\u0435\u043B\u0438\u0435\"\n                                        (click)=\"removeItem(itemIndex)\"\n                                        [disabled]=\"items.length <= 1 || !product.value || isItemLoading(itemIndex)\"\n                                        size=\"m\"\n                                        type=\"button\"\n                                        iconStart=\"@tui.trash-2\"\n                                        appearance=\"secondary\"\n                                        class=\"mt-6 shrink-0 lg:!ml-4\"\n                                        [style.flex]=\"'0 0 auto'\"\n                                    ></button>\n                                }\n                            </div>\n                        </tui-loader>\n                    </div>\n                }\n            </div>\n\n            @if (productValue) {\n                <hr class=\"border-sc-grey h-px\" />\n                <div class=\"min-w-0 gap-1 pt-2 text-right\">\n                    @if (totalAreaM2() > 0) {\n                        <div>\n                            \u041E\u0431\u0449\u0430\u044F \u043F\u043B\u043E\u0449\u0430\u0434\u044C:\n                            <span class=\"font-bold\">{{ totalAreaM2() | number: '1.0-4' }} \u043C\u00B2</span>\n                        </div>\n                    }\n                    @if (productValue.costRub && totalCost() > 0) {\n                        <div>\n                            \u0418\u0442\u043E\u0433\u043E:\n                            <span class=\"whitespace-nowrap text-xl font-bold\"> {{ totalCost().toLocaleString() }} {{ productValue.currency.symbol }} </span>\n                        </div>\n                    }\n                </div>\n            }\n        </div>\n\n        <tui-error [error]=\"[] | tuiFieldError | async\" />\n\n        <div class=\"flex flex-wrap items-center gap-3\">\n            @if (productValue && !isEditingExistingItem()) {\n                <button\n                    tuiButton\n                    appearance=\"secondary\"\n                    [disabled]=\"!product.value || items.invalid\"\n                    (click)=\"addItem()\"\n                    type=\"button\"\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            <button\n                type=\"submit\"\n                [disabled]=\"form.invalid || isSubmitLoading() || hasNoPendingItems()\"\n                [loading]=\"isSubmitLoading()\"\n                tuiButton\n                class=\"ml-auto\"\n                iconStart=\"@tui.check\"\n            >\n                {{ !orderItem() ? '\u0412 \u043A\u043E\u0440\u0437\u0438\u043D\u0443' : '\u0418\u0437\u043C\u0435\u043D\u0438\u0442\u044C' }}\n            </button>\n        </div>\n    </form>\n</div>\n", styles: [":host{display:block;width:100%;max-width:36rem}.row-summary{color:var(--tui-text-secondary);font-size:.75rem}\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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: ScNextInputFocusModule }, { 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]), tui-data-list-wrapper:not([labels])[new]", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "component", type: TuiError, selector: "tui-error", inputs: ["error"] }, { kind: "component", type: i1$2.TuiTextfieldComponent, selector: "tui-textfield:not([multi])" }, { kind: "directive", type: i1$2.TuiTextfieldDirective, selector: "input[tuiTextfield]:not([tuiInputCard]):not([tuiInputExpire]):not([tuiInputCVC])" }, { kind: "directive", type: i1$2.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i1$2.TuiTextfieldDropdownDirective, selector: "ng-template[tuiTextfieldDropdown]" }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "directive", type: i2$1.TuiSelectDirective, selector: "input[tuiSelect]" }, { kind: "directive", type: i2$1.TuiInputNumberDirective, selector: "input[tuiInputNumber]", inputs: ["min", "max", "prefix", "postfix"] }, { kind: "directive", type: TuiNumberFormat, selector: "[tuiNumberFormat]", inputs: ["tuiNumberFormat"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: TuiFieldErrorPipe, name: "tuiFieldError" }, { kind: "component", type: i5$2.TuiSliderComponent, selector: "input[type=range][tuiSlider]", inputs: ["size", "segments"] }, { kind: "directive", type: i2$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[tuiInputNumber], input[tuiTextfield], input[tuiInputSlider]" }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { kind: "component", type: TuiButtonLoading, selector: "[tuiButton][loading],[tuiIconButton][loading]", inputs: ["size", "loading"] }, { kind: "component", type: TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScSandwichM2Component, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'sc-sandwich-m2', imports: [
+                        TuiButton,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        ScNextInputFocusModule,
+                        TuiLabel,
+                        TuiDataListWrapperComponent,
+                        TuiError,
+                        TuiTextfield,
+                        TuiChevron,
+                        TuiSelect,
+                        TuiInputNumber,
+                        TuiNumberFormat,
+                        AsyncPipe,
+                        DecimalPipe,
+                        TuiFieldErrorPipe,
+                        TuiInputSlider,
+                        ScSelectOnFocusinDirective,
+                        TuiLoader,
+                        TuiButtonLoading,
+                        TuiIcon,
+                        TuiAutoFocus,
+                    ], providers: [
+                        tuiNumberFormatProvider({ precision: 0 }),
+                        tuiInputNumberOptionsProvider({
+                            min: 0,
+                        }),
+                        tuiItemsHandlersProvider({
+                            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 class=\"\">\n    @let products = products$ | async;\n    @let productValue = product.value;\n\n    <form\n        [formGroup]=\"form\"\n        (ngSubmit)=\"onSubmit()\"\n        ScNextInputFocus\n        class=\"flex flex-col gap-2\"\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                    *tuiTextfieldDropdown\n                    new\n                    [items]=\"products\"\n                />\n            </tui-textfield>\n            <tui-error\n                [formControl]=\"product\"\n                [error]=\"[] | tuiFieldError | async\"\n            />\n        </label>\n\n        @if (productValue && productValue.costRub !== undefined) {\n            <div class=\"-mt-1 text-sm text-tui-text-secondary\">\n                <span class=\"font-bold\">{{ productValue.code }}</span>\n                \u2014\n                {{ productValue.costRub.toLocaleString() }} {{ productValue.currency.symbol }}/\u043C\u00B2\n            </div>\n        }\n\n        @if (productValue) {\n            <div class=\"mt-4 mb-3 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                    @let wt = widthRangeText();\n                    @let lt = lengthRangeText();\n                    @if (wt) {\n                        <div>\u0428\u0438\u0440\u0438\u043D\u0430 {{ wt }}.</div>\n                    }\n                    @if (lt) {\n                        <div>\u0414\u043B\u0438\u043D\u0430 {{ lt }}.</div>\n                    }\n                </div>\n            </div>\n        }\n\n        <div class=\"flex flex-col gap-3\">\n            <div\n                formArrayName=\"items\"\n                class=\"flex flex-col gap-3\"\n            >\n                @for (item of items.controls; track item) {\n                    @if ($index > 0) {\n                        <hr class=\"border-sc-grey h-px\" />\n                    }\n                    @let itemIndex = $index;\n                    <div\n                        class=\"relative flex flex-col gap-1\"\n                        [formGroupName]=\"itemIndex\"\n                    >\n                        @if (isItemLocked(itemIndex)) {\n                            <div class=\"pointer-events-none absolute right-3 bottom-0 z-10 flex size-8 items-center justify-center\">\n                                <tui-icon\n                                    icon=\"@tui.check\"\n                                    class=\"text-tui-status-positive\"\n                                />\n                            </div>\n                        }\n                        <tui-loader [showLoader]=\"isItemLoading(itemIndex)\">\n                            <div\n                                [class.opacity-70]=\"isItemLocked(itemIndex)\"\n                                class=\"flex min-w-0 items-start gap-2\"\n                            >\n                                <div class=\"flex min-w-0 flex-1 flex-col gap-3\">\n                                    <div class=\"flex flex-col gap-3 lg:!flex-row lg:!items-start lg:!gap-6\">\n                                        <!-- \u0413\u0440\u0443\u043F\u043F\u0430 1: \u0448\u0438\u0440\u0438\u043D\u0430 + \u0434\u043B\u0438\u043D\u0430 -->\n                                        <div class=\"grid grid-cols-1 gap-2 sm:grid-cols-2 lg:!flex-[2]\">\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 || isItemLocked(itemIndex) || isItemLoading(itemIndex)\"\n                                                        [tuiAutoFocus]=\"!$first\"\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                                                <tui-error\n                                                    formControlName=\"width\"\n                                                    [error]=\"[] | tuiFieldError | async\"\n                                                />\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 || isItemLocked(itemIndex) || isItemLoading(itemIndex)\"\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                                                <tui-error\n                                                    formControlName=\"length\"\n                                                    [error]=\"[] | tuiFieldError | async\"\n                                                />\n                                            </label>\n                                        </div>\n\n                                        <!-- \u0413\u0440\u0443\u043F\u043F\u0430 2: \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E + \u043C\u0430\u0440\u043A\u0438\u0440\u043E\u0432\u043A\u0430 (\u043D\u0430 lg 1fr | 2fr) -->\n                                        <div class=\"grid grid-cols-1 gap-2 sm:grid-cols-2 lg:!grid-cols-[1fr_2fr] lg:!flex-[3]\">\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 || isItemLocked(itemIndex) || isItemLoading(itemIndex)\"\n                                                        placeholder=\"\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E\"\n                                                        autocomplete=\"off\"\n                                                    />\n                                                </tui-textfield>\n                                                <tui-error\n                                                    formControlName=\"count\"\n                                                    [error]=\"[] | tuiFieldError | async\"\n                                                />\n                                            </label>\n\n                                            <label tuiLabel>\n                                                \u041C\u0430\u0440\u043A\u0438\u0440\u043E\u0432\u043A\u0430\n                                                <tui-textfield>\n                                                    <input\n                                                        tuiTextfield\n                                                        formControlName=\"marker\"\n                                                        [readOnly]=\"!product.value || isItemLocked(itemIndex) || isItemLoading(itemIndex)\"\n                                                        placeholder=\"\u041C\u0430\u0440\u043A\u0438\u0440\u043E\u0432\u043A\u0430\"\n                                                        autocomplete=\"off\"\n                                                    />\n                                                </tui-textfield>\n                                                <tui-error\n                                                    formControlName=\"marker\"\n                                                    [error]=\"[] | tuiFieldError | async\"\n                                                />\n                                            </label>\n                                        </div>\n                                    </div>\n\n                                    @let rowVal = item.getRawValue();\n\n                                    @if (rowVal.width > 0 && rowVal.length > 0) {\n                                        <div class=\"mt-1 flex flex-col gap-y-1 text-sm lg:!flex-row lg:!gap-6\">\n                                            @if (pieceAreaM2(rowVal) > 0) {\n                                                <div class=\"lg:!flex-[2]\">\n                                                    \u041F\u043B\u043E\u0449\u0430\u0434\u044C (S) =\n                                                    <span class=\"font-bold\">{{ pieceAreaM2(rowVal) | number: '1.0-4' }} \u043C\u00B2</span>\n                                                </div>\n                                            }\n                                            @if (productValue && rowCost(rowVal) > 0) {\n                                                <div class=\"lg:!flex-[3]\">\n                                                    \u0418\u0442\u043E\u0433\u043E:\n                                                    <span class=\"font-bold\">{{ rowCost(rowVal).toLocaleString() }} {{ productValue.currency.symbol }}</span>\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                </div>\n\n                                @if (!isEditingExistingItem()) {\n                                    <button\n                                        tuiIconButton\n                                        title=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0438\u0437\u0434\u0435\u043B\u0438\u0435\"\n                                        (click)=\"removeItem(itemIndex)\"\n                                        [disabled]=\"items.length <= 1 || !product.value || isItemLoading(itemIndex)\"\n                                        size=\"m\"\n                                        type=\"button\"\n                                        iconStart=\"@tui.trash-2\"\n                                        appearance=\"secondary\"\n                                        class=\"mt-6 shrink-0 lg:!ml-4\"\n                                        [style.flex]=\"'0 0 auto'\"\n                                    ></button>\n                                }\n                            </div>\n                        </tui-loader>\n                    </div>\n                }\n            </div>\n\n            @if (productValue) {\n                <hr class=\"border-sc-grey h-px\" />\n                <div class=\"min-w-0 gap-1 pt-2 text-right\">\n                    @if (totalAreaM2() > 0) {\n                        <div>\n                            \u041E\u0431\u0449\u0430\u044F \u043F\u043B\u043E\u0449\u0430\u0434\u044C:\n                            <span class=\"font-bold\">{{ totalAreaM2() | number: '1.0-4' }} \u043C\u00B2</span>\n                        </div>\n                    }\n                    @if (productValue.costRub && totalCost() > 0) {\n                        <div>\n                            \u0418\u0442\u043E\u0433\u043E:\n                            <span class=\"whitespace-nowrap text-xl font-bold\"> {{ totalCost().toLocaleString() }} {{ productValue.currency.symbol }} </span>\n                        </div>\n                    }\n                </div>\n            }\n        </div>\n\n        <tui-error [error]=\"[] | tuiFieldError | async\" />\n\n        <div class=\"flex flex-wrap items-center gap-3\">\n            @if (productValue && !isEditingExistingItem()) {\n                <button\n                    tuiButton\n                    appearance=\"secondary\"\n                    [disabled]=\"!product.value || items.invalid\"\n                    (click)=\"addItem()\"\n                    type=\"button\"\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            <button\n                type=\"submit\"\n                [disabled]=\"form.invalid || isSubmitLoading() || hasNoPendingItems()\"\n                [loading]=\"isSubmitLoading()\"\n                tuiButton\n                class=\"ml-auto\"\n                iconStart=\"@tui.check\"\n            >\n                {{ !orderItem() ? '\u0412 \u043A\u043E\u0440\u0437\u0438\u043D\u0443' : '\u0418\u0437\u043C\u0435\u043D\u0438\u0442\u044C' }}\n            </button>\n        </div>\n    </form>\n</div>\n", styles: [":host{display:block;width:100%;max-width:36rem}.row-summary{color:var(--tui-text-secondary);font-size:.75rem}\n"] }]
+        }], propDecorators: { orderId: [{
+                type: Input
+            }] } });
+
+/**
+ * Skeleton конфигуратора распила сэндвич-панелей по площади.
+ */
+class ScSandwichM2SkeletonComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScSandwichM2SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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" }]
+        }] });
+
 /**
  * Компонент карточки менеджера Push-уведомлений.
  */
@@ -9281,5 +9929,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractScPriceCard, AuthMethod, CURRENT_COUNTRY_ID, CostWithDiscountComponent, FilesAndDocumentsComponent, FilesAndDocumentsModule, FinishDateTimeTransformerDirective, IS_DEFAULT_COUNTRY, MAX_FILES_IN_FORM_INPUT, SC_ALLOW_SELECT_TERMINATED, SC_BANNER_DURATION, SC_CATALOG_PRODUCTS_FILTERS, SC_CATALOG_SHOW_PRODUCTS_RECURSIVELY, SC_DATE_FORMATTER, SC_DEBOUNCE_TIME_DEFAULT, SC_DIALOG_SERVICE_TOKEN, SC_ERROR_CHANGE_HANDLER, SC_HELP_NOTIFICATION_CLOSE, SC_HELP_NOTIFICATION_LIMIT, SC_HIDDEN_PRINT_ELEMENTS, SC_MANAGER_QR_HANDLER, SC_NOTIFY_WHEN_IN_STOCK_REQUIRED_FIELDS, SC_ORDER_OPTIONS, SC_PAGE_SIZE_OPTIONS$1 as SC_PAGE_SIZE_OPTIONS, SC_SHOW_HELP_NOTIFICATION_IN_PHONE_INPUT, SC_USER_CITY_INFO, SC_USER_INFO, SC_USER_PROVIDERS, SC_VERIFICATION_CODE_TIMEOUT, ScAccordionComponent, ScAccordionContentDirective, ScAccordionModule, ScAddContactDialogComponent, ScAddContragentBankAccountsDialogComponent, ScAddContragentDialogComponent, ScAddDeliveryAddressDialogComponent, ScAddOrEditingCartItemDialogComponent, ScAddOrEditingCartItemFormComponent, ScAddressesSelectionFieldComponent, ScAuthModule, ScBannerComponent, ScBannerModule, ScBrandsListComponent, ScBrandsListModule, ScCartAddProductsFromCsvDialogComponent, ScCatalogFiltersComponent, ScCatalogModule, ScCategoryCardComponent, ScContactsAccordionComponent, ScContactsModule, ScContragentsAccordionComponent, ScContragentsAccordionItemComponent, ScContragentsModule, ScDeliveryAddressAccordionComponent, ScDeliveryAddressAccordionItemComponent, ScDeliveryAddressModule, ScDownloadPriceListComponent, ScDraftComponent, ScEmailLinkDirective, ScErrorBlockStatusComponent, ScErrorHandlerComponent, ScFavoriteButtonComponent, ScFeedbackFormComponent, ScFocusFirstInvalidFieldDirective, ScFormFieldsModule, ScFormatDatePipe, ScFrequentlyAskedQuestionsComponent, ScFrequentlyAskedQuestionsGroupSelectorComponent, ScFrequentlyAskedQuestionsWithGroupsComponent, ScGratitudeComponent, ScHelpNotificationService, ScHoverImageCarouselComponent, ScInputQuantityComponent, ScLinks, ScManagerCardComponent, ScManagerCardPushComponent, ScNewContactFormComponent, ScNewContragentBankAccountsFormComponent, ScNewContragentFormComponent, ScNewsCardComponent, ScNewsCardSkeletonComponent, ScNewsModule, ScNextInputFocusDirective, ScNextInputFocusModule, ScNoindexDirective, ScNoindexWrapperComponent, ScNotifyWhenInStockDialogComponent, ScOrderAccessorDirective, ScOrderItemComponent, ScOrderItemsByDirection, ScOrderItemsListByDirectionsComponent, ScOrderItemsListByStockComponent, ScOrderItemsListComponent, ScOrderModule, ScPaymentStatusComponent, ScPersonalDataProcessingPolicyComponent, ScPhoneFormatPipe, ScPreviewSampleComponent, ScPreviewSampleModule, ScPreviewSamplesMosquitoComponent, ScPriceCardComponent, ScPriceCardInlineComponent, ScPriceHistoryComponent, ScPriceListPaginationComponent, ScPriceWarehouseStockComponent, ScPrintDirective, ScPrintService, ScPrivacyPolicyComponent, ScProductInAllWarehousesPipe, ScProfileAccordionsContentComponent, ScProfileModule, ScPublicOfferComponent, ScQRCodeDialogComponent, ScQRCodeModule, ScResetUserPasswordComponent, ScResourcePreviewComponent, ScSandwichComponent, ScSandwichSkeletonComponent, ScSelectOnFocusinDirective, ScSeoTagsComponent, ScShareButtonComponent, ScShareButtonModule, ScSignInFormByEmailComponent, ScSignInFormByPhoneComponent, ScSignInFormComponent, ScSignUpFormComponent, ScSimpleSignUpFormComponent, ScSuggestionFieldComponent, ScTelLinkDirective, ScTerminalLinkDirective, ScUpdateUserInfoDialogComponent, ScUserManagersComponent, ScUserModule, ScUserPhoneApproveDialogComponent, ScVerificationModule, ScVerificationPhoneCheckFormComponent, TreeDirective, TreeIconService, TreeLoaderService, TreeTopDirective, phoneValidator, scAtLeastOneRequiredValidator, scBicValidator, scClientUiIconsName, scCorrespondentAccountValidator, scGetCurrentRoute, scPasswordConfirmMatchingValidator, stepValidator, tuiDateValueTransformerDefaultProvider };
+export { AbstractScPriceCard, AuthMethod, CURRENT_COUNTRY_ID, CostWithDiscountComponent, FilesAndDocumentsComponent, FilesAndDocumentsModule, FinishDateTimeTransformerDirective, IDLE_ITEM_STATE, IS_DEFAULT_COUNTRY, MAX_FILES_IN_FORM_INPUT, SC_ALLOW_SELECT_TERMINATED, SC_BANNER_DURATION, SC_CATALOG_PRODUCTS_FILTERS, SC_CATALOG_SHOW_PRODUCTS_RECURSIVELY, SC_DATE_FORMATTER, SC_DEBOUNCE_TIME_DEFAULT, SC_DIALOG_SERVICE_TOKEN, SC_ERROR_CHANGE_HANDLER, SC_HELP_NOTIFICATION_CLOSE, SC_HELP_NOTIFICATION_LIMIT, SC_HIDDEN_PRINT_ELEMENTS, SC_MANAGER_QR_HANDLER, SC_NOTIFY_WHEN_IN_STOCK_REQUIRED_FIELDS, SC_ORDER_OPTIONS, SC_PAGE_SIZE_OPTIONS$1 as SC_PAGE_SIZE_OPTIONS, SC_SHOW_HELP_NOTIFICATION_IN_PHONE_INPUT, SC_USER_CITY_INFO, SC_USER_INFO, SC_USER_PROVIDERS, SC_VERIFICATION_CODE_TIMEOUT, ScAccordionComponent, ScAccordionContentDirective, ScAccordionModule, ScAddContactDialogComponent, ScAddContragentBankAccountsDialogComponent, ScAddContragentDialogComponent, ScAddDeliveryAddressDialogComponent, ScAddOrEditingCartItemDialogComponent, ScAddOrEditingCartItemFormComponent, ScAddressesSelectionFieldComponent, ScAuthModule, ScBannerComponent, ScBannerModule, ScBrandsListComponent, ScBrandsListModule, ScCartAddProductsFromCsvDialogComponent, ScCatalogFiltersComponent, ScCatalogModule, ScCategoryCardComponent, ScContactsAccordionComponent, ScContactsModule, ScContragentsAccordionComponent, ScContragentsAccordionItemComponent, ScContragentsModule, ScDeliveryAddressAccordionComponent, ScDeliveryAddressAccordionItemComponent, ScDeliveryAddressModule, ScDownloadPriceListComponent, ScDraftComponent, ScEmailLinkDirective, ScErrorBlockStatusComponent, ScErrorHandlerComponent, ScFavoriteButtonComponent, ScFeedbackFormComponent, ScFocusFirstInvalidFieldDirective, ScFormFieldsModule, ScFormatDatePipe, ScFrequentlyAskedQuestionsComponent, ScFrequentlyAskedQuestionsGroupSelectorComponent, ScFrequentlyAskedQuestionsWithGroupsComponent, ScGratitudeComponent, ScHelpNotificationService, ScHoverImageCarouselComponent, ScInputQuantityComponent, ScLinks, ScManagerCardComponent, ScManagerCardPushComponent, ScNewContactFormComponent, ScNewContragentBankAccountsFormComponent, ScNewContragentFormComponent, ScNewsCardComponent, ScNewsCardSkeletonComponent, ScNewsModule, ScNextInputFocusDirective, ScNextInputFocusModule, ScNoindexDirective, ScNoindexWrapperComponent, ScNotifyWhenInStockDialogComponent, ScOrderAccessorDirective, ScOrderItemComponent, ScOrderItemsByDirection, ScOrderItemsListByDirectionsComponent, ScOrderItemsListByStockComponent, ScOrderItemsListComponent, ScOrderModule, ScPaymentStatusComponent, ScPersonalDataProcessingPolicyComponent, ScPhoneFormatPipe, ScPreviewSampleComponent, ScPreviewSampleModule, ScPreviewSamplesMosquitoComponent, ScPriceCardComponent, ScPriceCardInlineComponent, ScPriceHistoryComponent, ScPriceListPaginationComponent, ScPriceWarehouseStockComponent, ScPrintDirective, ScPrintService, ScPrivacyPolicyComponent, ScProductInAllWarehousesPipe, ScProfileAccordionsContentComponent, ScProfileModule, ScPublicOfferComponent, ScQRCodeDialogComponent, ScQRCodeModule, ScResetUserPasswordComponent, ScResourcePreviewComponent, ScSandwichComponent, ScSandwichM2Component, ScSandwichM2SkeletonComponent, ScSandwichSkeletonComponent, ScSelectOnFocusinDirective, ScSeoTagsComponent, ScShareButtonComponent, ScShareButtonModule, ScSignInFormByEmailComponent, ScSignInFormByPhoneComponent, ScSignInFormComponent, ScSignUpFormComponent, ScSimpleSignUpFormComponent, ScSuggestionFieldComponent, ScTelLinkDirective, ScTerminalLinkDirective, ScUpdateUserInfoDialogComponent, ScUserManagersComponent, ScUserModule, ScUserPhoneApproveDialogComponent, ScVerificationModule, ScVerificationPhoneCheckFormComponent, TreeDirective, TreeIconService, TreeLoaderService, TreeTopDirective, phoneValidator, scAtLeastOneRequiredValidator, scBicValidator, scClientUiIconsName, scCorrespondentAccountValidator, scGetCurrentRoute, scPasswordConfirmMatchingValidator, stepValidator, tuiDateValueTransformerDefaultProvider };
 //# sourceMappingURL=snabcentr-client-ui.mjs.map