@snabcentr/client-ui 3.47.6 → 3.47.8

package/fesm2022/snabcentr-client-ui.mjs

@@ -5616,9 +5616,9 @@ class ScSandwichComponent {
          */
         this.product = new FormControl(null, { validators: Validators.required, nonNullable: false });
         /**
-         * Результат расчета оптимизации раскладки.
+         * {@link Observable} расчета оптимизации раскладки.
          */
-        this.calculateResult$ = combineLatest({
+        this.calculate$ = combineLatest({
             productId: tuiControlValue(this.product).pipe(map((product) => product?.id ?? null)),
             items: tuiControlValue(this.items),
         }).pipe(debounceTime(this.debounceTimeDefault), filter(() => this.product.valid && this.form.controls.items.valid), switchMap(({ productId, items }) => {
@@ -5627,8 +5627,18 @@ class ScSandwichComponent {
             }
             return this.configuratorService.calculate$(this.categoryId(), this.editor(), { productId, items }).pipe(tap((calculateResult) => {
                 this.form.get('quantity')?.setValue(calculateResult.quantity);
-            }), catchError(() => of(null)));
+            }), startWith(null), catchError(() => of(null)));
+        }), share(), tap((calculateResult) => {
+            console.log('calculateResult', calculateResult);
         }));
+        /**
+         * Результат расчета оптимизации раскладки.
+         */
+        this.calculateResult$ = this.calculate$.pipe(filter(tuiIsPresent));
+        /**
+         * Сигнал состояния загрузки расчета.
+         */
+        this.isCalculateLoading = toSignal(this.calculate$.pipe(map(tuiIsFalsy)), { initialValue: false });
         /**
          * Валидатор для ширины изделия.
          */
@@ -5723,7 +5733,7 @@ class ScSandwichComponent {
      * @param calculateResult Результат расчета оптимизации раскладки.
      */
     onSubmit(calculateResult) {
-        if (!calculateResult || this.form.invalid) {
+        if (!calculateResult || this.form.invalid || !this.isCalculateLoading()) {
             return;
         }
         const formValue = { ...this.form.value, productId: this.product.value?.id ?? null, calculationId: calculateResult.id };
@@ -5791,7 +5801,7 @@ class ScSandwichComponent {
                 stringify: signal((x) => x.name),
                 identityMatcher: signal((a, b) => a.id === b.id),
             }),
-        ], ngImport: i0, template: "@if (!cartItem() && 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 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 tuiChevron [tuiTextfieldCleaner]=\"false\">\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 (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 index; let index = $index) {\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=\"quantity\"\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=\"quantity\"\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        @if (calculateResult && product.value) {\n            <label tuiLabel>\n                \u0418\u0442\u043E\u0433\u043E\u0432\u043E\u0435 \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u043B\u0438\u0441\u0442\u043E\u0432 \u0434\u043B\u044F \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u0434\u0441\u0442\u0432\u0430, \u0448\u0442\n                <tui-textfield>\n                    <input\n                        tuiInputNumber\n                        formControlName=\"quantity\"\n                        [readOnly]=\"true\"\n                        [focused]=\"false\"\n                        placeholder=\"\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E\"\n                        autocomplete=\"quantity\"\n                    />\n                </tui-textfield>\n            </label>\n        }\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                    placeholder=\"\u041C\u0430\u0440\u043A\u0438\u0440\u043E\u0432\u043A\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 (calculateResult && product.value) {\n            <p class=\"mt-2\">\n                \u0418\u0442\u043E\u0433\u043E: <span class=\"text-xl font-bold\">{{ getTotalCost(calculateResult).toLocaleString() }} {{ product.value.currency.symbol }}</span>\n            </p>\n        }\n\n        <tui-error [error]=\"[] | tuiFieldError | async\" />\n        <button\n            [disabled]=\"form.invalid || !calculateResult || isSubmitLoading()\"\n            tuiButton\n            class=\"self-center\"\n            iconStart=\"@tui.check\"\n        >\n            {{ !cartItem() ? '\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    </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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "@if (!cartItem() && 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=\"quantity\"\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=\"quantity\"\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 (calculateResult && product.value) {\n            <tui-loader [showLoader]=\"isCalculateLoading()\" >\n                <div class=\"mt-2 flex flex-wrap items-end gap-2\">\n                    <div>\n                        \u0418\u0442\u043E\u0433\u043E: <span class=\"text-xl font-bold whitespace-nowrap\">{{ getTotalCost(calculateResult).toLocaleString() }} {{ product.value.currency.symbol }}</span>\n                    </div>\n                    @if (calculateResult?.quantity && productValue) {\n                        <div class=\"text-lg text-sc-dark-grey whitespace-nowrap\">\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            </tui-loader>\n        }\n\n        <tui-error [error]=\"[] | tuiFieldError | async\" />\n        <button\n            [disabled]=\"form.invalid || !calculateResult || isCalculateLoading() || isSubmitLoading()\"\n            tuiButton\n            class=\"self-center\"\n            iconStart=\"@tui.check\"\n        >\n            {{ !cartItem() ? '\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    </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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScSandwichComponent, decorators: [{
             type: Component,
@@ -5817,6 +5827,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         TuiInputSlider,
                         TuiDataList,
                         ScSelectOnFocusinDirective,
+                        TuiLoader,
                     ], providers: [
                         tuiNumberFormatProvider({ precision: 0 }),
                         tuiInputNumberOptionsProvider({
@@ -5826,7 +5837,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 (!cartItem() && 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 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 tuiChevron [tuiTextfieldCleaner]=\"false\">\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 (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 index; let index = $index) {\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=\"quantity\"\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=\"quantity\"\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        @if (calculateResult && product.value) {\n            <label tuiLabel>\n                \u0418\u0442\u043E\u0433\u043E\u0432\u043E\u0435 \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u043B\u0438\u0441\u0442\u043E\u0432 \u0434\u043B\u044F \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u0434\u0441\u0442\u0432\u0430, \u0448\u0442\n                <tui-textfield>\n                    <input\n                        tuiInputNumber\n                        formControlName=\"quantity\"\n                        [readOnly]=\"true\"\n                        [focused]=\"false\"\n                        placeholder=\"\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E\"\n                        autocomplete=\"quantity\"\n                    />\n                </tui-textfield>\n            </label>\n        }\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                    placeholder=\"\u041C\u0430\u0440\u043A\u0438\u0440\u043E\u0432\u043A\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 (calculateResult && product.value) {\n            <p class=\"mt-2\">\n                \u0418\u0442\u043E\u0433\u043E: <span class=\"text-xl font-bold\">{{ getTotalCost(calculateResult).toLocaleString() }} {{ product.value.currency.symbol }}</span>\n            </p>\n        }\n\n        <tui-error [error]=\"[] | tuiFieldError | async\" />\n        <button\n            [disabled]=\"form.invalid || !calculateResult || isSubmitLoading()\"\n            tuiButton\n            class=\"self-center\"\n            iconStart=\"@tui.check\"\n        >\n            {{ !cartItem() ? '\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    </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 (!cartItem() && 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=\"quantity\"\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=\"quantity\"\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 (calculateResult && product.value) {\n            <tui-loader [showLoader]=\"isCalculateLoading()\" >\n                <div class=\"mt-2 flex flex-wrap items-end gap-2\">\n                    <div>\n                        \u0418\u0442\u043E\u0433\u043E: <span class=\"text-xl font-bold whitespace-nowrap\">{{ getTotalCost(calculateResult).toLocaleString() }} {{ product.value.currency.symbol }}</span>\n                    </div>\n                    @if (calculateResult?.quantity && productValue) {\n                        <div class=\"text-lg text-sc-dark-grey whitespace-nowrap\">\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            </tui-loader>\n        }\n\n        <tui-error [error]=\"[] | tuiFieldError | async\" />\n        <button\n            [disabled]=\"form.invalid || !calculateResult || isCalculateLoading() || isSubmitLoading()\"\n            tuiButton\n            class=\"self-center\"\n            iconStart=\"@tui.check\"\n        >\n            {{ !cartItem() ? '\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    </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"] }]
         }] });
 
 /**