@snabcentr/client-ui 4.16.0 → 4.16.2

package/fesm2022/snabcentr-client-ui.mjs

@@ -9,7 +9,7 @@ import { takeUntilDestroyed, toSignal, outputFromObservable, toObservable } from
 import * as i4$1 from '@taiga-ui/cdk';
 import { TuiDay, TuiTime, TuiValueTransformer, TUI_IS_MOBILE, tuiControlValue, tuiIsPresent, tuiMarkControlAsTouchedAndValidate, tuiIsFalsy, TuiAutoFocus, TuiRepeatTimes, TuiSwipeService, TUI_SWIPE_OPTIONS, TuiHovered, TuiDayRange, TuiMonth, tuiPure, tuiProvide, TuiValidationError, TUI_WINDOW_SIZE, tuiClamp, 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, TuiFade, TuiRange, tuiInputNumberOptionsProvider, TuiDataListWrapperComponent, TuiChevron, TuiSelect, TuiInputSlider, TuiTreeService, TuiTreeItemContent, TUI_TREE_START, TUI_TREE_CONTENT, TUI_TREE_LOADING, TUI_TREE_LOADER, TuiTree, TuiPreviewDialogService, tuiFilesAccepted, TuiInputFiles, TuiInputFilesDirective, TuiFilesComponent, TuiFile, TuiFileRejectedPipe, TUI_CONFIRM, tuiItemsHandlersProvider as tuiItemsHandlersProvider$1, TUI_PAGINATION_TEXTS, TuiAccordionDirective, TuiAccordionItemContent } 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, TuiFade, TuiRange, TuiBlock, tuiInputNumberOptionsProvider, TuiDataListWrapperComponent, TuiChevron, TuiSelect, TuiInputSlider, TuiTreeService, TuiTreeItemContent, TUI_TREE_START, TUI_TREE_CONTENT, TUI_TREE_LOADING, TUI_TREE_LOADER, TuiTree, TuiPreviewDialogService, tuiFilesAccepted, TuiInputFiles, TuiInputFilesDirective, TuiFilesComponent, TuiFile, TuiFileRejectedPipe, TUI_CONFIRM, tuiItemsHandlersProvider as tuiItemsHandlersProvider$1, TUI_PAGINATION_TEXTS, TuiAccordionDirective, TuiAccordionItemContent } 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';
@@ -5630,6 +5630,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }] });
 
+/**
+ * Токен настроек представлений значений фильтров каталога.
+ * Фильтр с типом представления, которого нет в настройках, выводится списком.
+ */
+const SC_CATALOG_FILTER_PREVIEWS = new InjectionToken('SC_CATALOG_FILTER_PREVIEWS', {
+    factory: () => ({}),
+});
+
 /**
  * Токен для инъекции {@link BehaviorSubject} для хранения фильтров продуктов.
  */
@@ -5726,6 +5734,10 @@ class ScCatalogFiltersComponent {
          * Признак необходимости отображать фильтры для вложенных категорий.
          */
         this.isRecursively = inject(SC_CATALOG_SHOW_PRODUCTS_RECURSIVELY);
+        /**
+         * Настройки представлений значений фильтров по типу представления.
+         */
+        this.previews = inject(SC_CATALOG_FILTER_PREVIEWS);
         /**
          * Показывать ли кнопку «Показать результаты».
          */
@@ -5745,9 +5757,7 @@ class ScCatalogFiltersComponent {
         /**
          * {@link Observable} фильтров категории.
          */
-        this.filters = toSignal(inject(SC_CATEGORY_INFO).pipe(catchError(() => EMPTY), filter(tuiIsPresent), switchMap((category) => this.catalogFilterService.getFilters$(this.idOrSlugPipe.transform(category), this.isRecursively)), filter(tuiIsPresent), map((filters) => filters
-            .filter((item) => this.isRenderableFilter(item))
-            .map((item) => (item.type === 'checkbox' ? { ...item, values: [...item.values].sort((a, b) => a.label.localeCompare(b.label)) } : item))), 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)), filter(tuiIsPresent), map((filters) => filters.filter((item) => this.isRenderableFilter(item)).map((item) => (item.type === 'checkbox' ? { ...item, values: this.sortCheckboxValues(item) } : item))), tap((filters) => {
             this.updateFormControls(filters);
         }), share()));
         inject(DestroyRef).onDestroy(() => {
@@ -5779,6 +5789,24 @@ class ScCatalogFiltersComponent {
                 return true;
         }
     }
+    /**
+     * Сортирует значения checkbox-фильтра по названию. Если для типа представления фильтра заданы иконки, сначала идут значения
+     * в порядке настроек иконок, остальные в конце.
+     *
+     * @param checkboxFilter Фильтр типа checkbox.
+     */
+    sortCheckboxValues(checkboxFilter) {
+        const valuesByLabel = [...checkboxFilter.values].sort((a, b) => a.label.localeCompare(b.label));
+        const iconsOrder = Object.keys((checkboxFilter.previewType && this.previews[checkboxFilter.previewType]?.icons) ?? {});
+        if (iconsOrder.length === 0) {
+            return valuesByLabel;
+        }
+        const getPosition = (id) => {
+            const position = iconsOrder.indexOf(id);
+            return position === -1 ? iconsOrder.length : position;
+        };
+        return valuesByLabel.sort((a, b) => getPosition(a.id) - getPosition(b.id));
+    }
     /**
      * Обновляет состав контролов формы на основе переданных фильтров.
      *
@@ -6112,7 +6140,7 @@ 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: { showResultsButton: { classPropertyName: "showResultsButton", publicName: "showResultsButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resetFilters: "resetFilters", showResults: "showResults" }, ngImport: i0, template: "@if (filters()?.length) {\n    <form\n        [formGroup]=\"form\"\n        class=\"flex flex-col pb-1\"\n    >\n        @for (filter of filters(); track filter.id; let isFirst = $first) {\n            @if (!isFirst) {\n                <hr class=\"my-3 w-full h-px\" />\n            }\n\n            <div class=\"flex flex-col gap-2\">\n                <!-- \u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \u0433\u0440\u0443\u043F\u043F\u044B. \u0414\u043B\u044F toggle \u043F\u043E\u0434\u043F\u0438\u0441\u0438 \u043D\u0435\u0442: \u043C\u0435\u0442\u043A\u0430 \u0438\u0434\u0451\u0442 \u043F\u0440\u044F\u043C\u043E \u0440\u044F\u0434\u043E\u043C \u0441 \u0441\u0430\u043C\u0438\u043C checkbox. -->\n                @if (filter.type !== 'toggle') {\n                    <label class=\"text-body-s-bold\">{{ filter.label }}</label>\n                }\n\n                <!-- Checkbox: FormGroup(value.id \u2192 boolean) \u0434\u043B\u044F \u043B\u044E\u0431\u043E\u0433\u043E \u0447\u0438\u0441\u043B\u0430 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0439.\n                     \u0420\u0430\u0437\u0432\u0438\u043B\u043A\u0430 \u043E\u0434\u043D\u043E/\u043C\u043D\u043E\u0433\u043E \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0439 \u0432\u044B\u043D\u0435\u0441\u0435\u043D\u0430 \u0432 TS (\u0441\u043C. processCheckboxFilter).\n                     ng-template \u0432\u043D\u0443\u0442\u0440\u0438 formGroupName: \u0438\u043D\u0430\u0447\u0435 reactive forms \u043D\u0435 \u043D\u0430\u0439\u0434\u0451\u0442 ControlContainer \u043F\u0440\u0438 \u043F\u0440\u043E\u0435\u043A\u0446\u0438\u0438 \u0432 \u0434\u043E\u0447\u0435\u0440\u043D\u0438\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442. -->\n                @if (filter.type === 'checkbox') {\n                    <div\n                        class=\"flex flex-col gap-2\"\n                        [formGroupName]=\"filter.id\"\n                    >\n                        <sc-catalog-filter-collapsible\n                            [itemsCount]=\"filter.values.length\"\n                            [showReset]=\"form.get(filter.id)?.dirty ?? false\"\n                            (resetGroup)=\"resetCheckboxGroup(filter.id)\"\n                        >\n                            <ng-template>\n                                <div class=\"flex flex-col gap-2\">\n                                    @for (value of filter.values; track value.id) {\n                                        <label class=\"flex items-center gap-2\">\n                                            <input\n                                                [formControlName]=\"value.id\"\n                                                tuiCheckbox\n                                                type=\"checkbox\"\n                                            />\n                                            <span class=\"text-body-s\">{{ value.label }}</span>\n                                        </label>\n                                    }\n                                </div>\n                            </ng-template>\n                        </sc-catalog-filter-collapsible>\n                    </div>\n\n                    <!-- Toggle: \u043E\u0434\u0438\u043D boolean \u043D\u0430 \u043A\u043E\u0440\u043D\u0435 \u0444\u043E\u0440\u043C\u044B, \u043F\u043E\u0434\u043F\u0438\u0441\u044C = filter.label -->\n                } @else if (filter.type === 'toggle') {\n                    <label class=\"flex items-center gap-2\">\n                        <input\n                            [formControlName]=\"filter.id\"\n                            tuiCheckbox\n                            type=\"checkbox\"\n                        />\n                        <span class=\"text-body-s-bold\">{{ filter.label }}</span>\n                    </label>\n\n                    <!-- Range: FormGroup(from, to, slider) \u0441 \u0434\u0432\u0443\u0441\u0442\u043E\u0440\u043E\u043D\u043D\u0435\u0439 \u0441\u0438\u043D\u0445\u0440\u043E\u043D\u0438\u0437\u0430\u0446\u0438\u0435\u0439 -->\n                } @else if (filter.type === 'range') {\n                    <div\n                        [formGroupName]=\"filter.id\"\n                        class=\"flex flex-col gap-3\"\n                    >\n                        <div class=\"flex gap-3 px-1\">\n                            <label\n                                tuiLabel\n                                class=\"min-w-0 flex-1\"\n                            >\n                                \u041E\u0442\n                                <tui-textfield [tuiTextfieldCleaner]=\"false\">\n                                    <input\n                                        scSelectOnFocusin\n                                        tuiInputNumber\n                                        formControlName=\"from\"\n                                        [min]=\"+filter.min\"\n                                        [max]=\"+filter.max\"\n                                        autocomplete=\"off\"\n                                    />\n                                    @if (form.get(filter.id)?.get('from')?.dirty) {\n                                        <button\n                                            tuiIconButton\n                                            type=\"button\"\n                                            size=\"xs\"\n                                            appearance=\"icon\"\n                                            iconStart=\"@tui.x\"\n                                            (click)=\"resetRangeFrom(filter.id, filter.min)\"\n                                        ></button>\n                                    }\n                                </tui-textfield>\n                            </label>\n                            <label\n                                tuiLabel\n                                class=\"min-w-0 flex-1\"\n                            >\n                                \u0414\u043E\n                                <tui-textfield [tuiTextfieldCleaner]=\"false\">\n                                    <input\n                                        scSelectOnFocusin\n                                        tuiInputNumber\n                                        formControlName=\"to\"\n                                        [min]=\"+filter.min\"\n                                        [max]=\"+filter.max\"\n                                        autocomplete=\"off\"\n                                    />\n                                    @if (form.get(filter.id)?.get('to')?.dirty) {\n                                        <button\n                                            tuiIconButton\n                                            type=\"button\"\n                                            size=\"xs\"\n                                            appearance=\"icon\"\n                                            iconStart=\"@tui.x\"\n                                            (click)=\"resetRangeTo(filter.id, filter.max)\"\n                                        ></button>\n                                    }\n                                </tui-textfield>\n                            </label>\n                        </div>\n\n                        <tui-range\n                            size=\"m\"\n                            formControlName=\"slider\"\n                            [min]=\"+filter.min\"\n                            [max]=\"+filter.max\"\n                            [style.--tui-thickness.rem]=\"0.25\"\n                        />\n                    </div>\n                }\n            </div>\n        }\n        <button\n            tuiButton\n            appearance=\"secondary\"\n            type=\"button\"\n            class=\"mt-2\"\n            (click)=\"onResetFiltersClick()\"\n        >\n            \u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C \u0444\u0438\u043B\u044C\u0442\u0440\u044B\n        </button>\n        @if (showResultsButton()) {\n            <button\n                tuiButton\n                appearance=\"primary\"\n                type=\"button\"\n                class=\"mt-2\"\n                (click)=\"onShowResultsClick()\"\n            >\n                \u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u044B\n            </button>\n        }\n    </form>\n}\n", styles: [".accordion [tuiAccordion]{border:none;mask:none}.accordion tui-expand{box-shadow:none}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[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: i5.TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: i1$2.TuiTextfieldComponent, selector: "tui-textfield:not([multi])" }, { kind: "directive", type: i1$2.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: ScSelectOnFocusinDirective, selector: "tui-input-number, tui-input, tui-input-phone, tui-input-date, tui-input-password, input[tuiInputNumber], input[tuiTextfield], input[tuiInputSlider]" }, { kind: "component", type: ScCatalogFilterCollapsibleComponent, selector: "sc-catalog-filter-collapsible", inputs: ["itemsCount", "showReset"], outputs: ["resetGroup"] }, { kind: "component", type: TuiCheckbox, selector: "input[type=\"checkbox\"][tuiCheckbox]", inputs: ["size"] }, { kind: "directive", type: i2$1.TuiInputNumberDirective, selector: "input[tuiInputNumber]", inputs: ["min", "max", "prefix", "postfix"] }, { kind: "component", type: TuiRange, selector: "tui-range", inputs: ["min", "max", "step", "size", "segments", "keySteps", "focusable", "margin", "limit"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ScCatalogFiltersComponent, isStandalone: true, selector: "sc-catalog-filters", inputs: { showResultsButton: { classPropertyName: "showResultsButton", publicName: "showResultsButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resetFilters: "resetFilters", showResults: "showResults" }, ngImport: i0, template: "@if (filters()?.length) {\n    <form\n        [formGroup]=\"form\"\n        class=\"flex flex-col pb-1\"\n    >\n        @for (filter of filters(); track filter.id; let isFirst = $first) {\n            @if (!isFirst) {\n                <hr class=\"my-3 w-full h-px\" />\n            }\n\n            <div class=\"flex flex-col gap-2\">\n                <!-- \u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \u0433\u0440\u0443\u043F\u043F\u044B. \u0414\u043B\u044F toggle \u043F\u043E\u0434\u043F\u0438\u0441\u0438 \u043D\u0435\u0442: \u043C\u0435\u0442\u043A\u0430 \u0438\u0434\u0451\u0442 \u043F\u0440\u044F\u043C\u043E \u0440\u044F\u0434\u043E\u043C \u0441 \u0441\u0430\u043C\u0438\u043C checkbox. -->\n                @if (filter.type !== 'toggle') {\n                    <label class=\"text-body-s-bold\">{{ filter.label }}</label>\n                }\n\n                <!-- Checkbox: FormGroup(value.id \u2192 boolean) \u0434\u043B\u044F \u043B\u044E\u0431\u043E\u0433\u043E \u0447\u0438\u0441\u043B\u0430 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0439.\n                     \u0420\u0430\u0437\u0432\u0438\u043B\u043A\u0430 \u043E\u0434\u043D\u043E/\u043C\u043D\u043E\u0433\u043E \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0439 \u0432\u044B\u043D\u0435\u0441\u0435\u043D\u0430 \u0432 TS (\u0441\u043C. processCheckboxFilter).\n                     ng-template \u0432\u043D\u0443\u0442\u0440\u0438 formGroupName: \u0438\u043D\u0430\u0447\u0435 reactive forms \u043D\u0435 \u043D\u0430\u0439\u0434\u0451\u0442 ControlContainer \u043F\u0440\u0438 \u043F\u0440\u043E\u0435\u043A\u0446\u0438\u0438 \u0432 \u0434\u043E\u0447\u0435\u0440\u043D\u0438\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442. -->\n                @if (filter.type === 'checkbox') {\n                    @let preview = filter.previewType ? previews[filter.previewType] : undefined;\n                    <div\n                        class=\"flex flex-col gap-2\"\n                        [formGroupName]=\"filter.id\"\n                    >\n                        <!-- \u041F\u043B\u0438\u0442\u043A\u0438 \u0441 \u0438\u043A\u043E\u043D\u043A\u0430\u043C\u0438: \u0442\u0438\u043F \u043F\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043B\u0435\u043D\u0438\u044F \u0444\u0438\u043B\u044C\u0442\u0440\u0430 \u0435\u0441\u0442\u044C \u0432 \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0430\u0445 SC_CATALOG_FILTER_PREVIEWS.\n                             \u041E\u0444\u043E\u0440\u043C\u043B\u0435\u043D\u0438\u0435 \u043F\u043B\u0438\u0442\u043A\u0438 \u0437\u0430\u0434\u0430\u0451\u0442 input[tuiBlock], \u0443 label \u043E\u0444\u043E\u0440\u043C\u043B\u0435\u043D\u0438\u0435 \u0441\u043D\u044F\u0442\u043E (appearance=\"\"). -->\n                        @if (preview) {\n                            <div class=\"grid grid-cols-2 gap-2\">\n                                @for (value of filter.values; track value.id) {\n                                    @let icon = preview.icons[value.id];\n                                    <label\n                                        class=\"flex-col items-center text-center\"\n                                        appearance=\"\"\n                                        tuiBlock=\"s\"\n                                    >\n                                        <input\n                                            class=\"bg-tui-background-neutral-1\"\n                                            [formControlName]=\"value.id\"\n                                            tuiBlock\n                                            type=\"checkbox\"\n                                        />\n                                        @if (icon) {\n                                            <tui-icon [icon]=\"icon\" />\n                                        }\n                                        <span class=\"text-body-s-bold\">{{ value.label }}</span>\n                                    </label>\n                                }\n                            </div>\n                            @if (form.get(filter.id)?.dirty) {\n                                <button\n                                    tuiLink\n                                    type=\"button\"\n                                    class=\"text-start !text-body-s\"\n                                    (click)=\"resetCheckboxGroup(filter.id)\"\n                                >\n                                    \u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C\n                                </button>\n                            }\n                        } @else {\n                            <sc-catalog-filter-collapsible\n                                [itemsCount]=\"filter.values.length\"\n                                [showReset]=\"form.get(filter.id)?.dirty ?? false\"\n                                (resetGroup)=\"resetCheckboxGroup(filter.id)\"\n                            >\n                                <ng-template>\n                                    <div class=\"flex flex-col gap-2\">\n                                        @for (value of filter.values; track value.id) {\n                                            <label class=\"flex items-center gap-2\">\n                                                <input\n                                                    [formControlName]=\"value.id\"\n                                                    tuiCheckbox\n                                                    type=\"checkbox\"\n                                                />\n                                                <span class=\"text-body-s\">{{ value.label }}</span>\n                                            </label>\n                                        }\n                                    </div>\n                                </ng-template>\n                            </sc-catalog-filter-collapsible>\n                        }\n                    </div>\n\n                    <!-- Toggle: \u043E\u0434\u0438\u043D boolean \u043D\u0430 \u043A\u043E\u0440\u043D\u0435 \u0444\u043E\u0440\u043C\u044B, \u043F\u043E\u0434\u043F\u0438\u0441\u044C = filter.label -->\n                } @else if (filter.type === 'toggle') {\n                    <label class=\"flex items-center gap-2\">\n                        <input\n                            [formControlName]=\"filter.id\"\n                            tuiCheckbox\n                            type=\"checkbox\"\n                        />\n                        <span class=\"text-body-s-bold\">{{ filter.label }}</span>\n                    </label>\n\n                    <!-- Range: FormGroup(from, to, slider) \u0441 \u0434\u0432\u0443\u0441\u0442\u043E\u0440\u043E\u043D\u043D\u0435\u0439 \u0441\u0438\u043D\u0445\u0440\u043E\u043D\u0438\u0437\u0430\u0446\u0438\u0435\u0439 -->\n                } @else if (filter.type === 'range') {\n                    <div\n                        [formGroupName]=\"filter.id\"\n                        class=\"flex flex-col gap-3\"\n                    >\n                        <div class=\"flex gap-3 px-1\">\n                            <label\n                                tuiLabel\n                                class=\"min-w-0 flex-1\"\n                            >\n                                \u041E\u0442\n                                <tui-textfield [tuiTextfieldCleaner]=\"false\">\n                                    <input\n                                        scSelectOnFocusin\n                                        tuiInputNumber\n                                        formControlName=\"from\"\n                                        [min]=\"+filter.min\"\n                                        [max]=\"+filter.max\"\n                                        autocomplete=\"off\"\n                                    />\n                                    @if (form.get(filter.id)?.get('from')?.dirty) {\n                                        <button\n                                            tuiIconButton\n                                            type=\"button\"\n                                            size=\"xs\"\n                                            appearance=\"icon\"\n                                            iconStart=\"@tui.x\"\n                                            (click)=\"resetRangeFrom(filter.id, filter.min)\"\n                                        ></button>\n                                    }\n                                </tui-textfield>\n                            </label>\n                            <label\n                                tuiLabel\n                                class=\"min-w-0 flex-1\"\n                            >\n                                \u0414\u043E\n                                <tui-textfield [tuiTextfieldCleaner]=\"false\">\n                                    <input\n                                        scSelectOnFocusin\n                                        tuiInputNumber\n                                        formControlName=\"to\"\n                                        [min]=\"+filter.min\"\n                                        [max]=\"+filter.max\"\n                                        autocomplete=\"off\"\n                                    />\n                                    @if (form.get(filter.id)?.get('to')?.dirty) {\n                                        <button\n                                            tuiIconButton\n                                            type=\"button\"\n                                            size=\"xs\"\n                                            appearance=\"icon\"\n                                            iconStart=\"@tui.x\"\n                                            (click)=\"resetRangeTo(filter.id, filter.max)\"\n                                        ></button>\n                                    }\n                                </tui-textfield>\n                            </label>\n                        </div>\n\n                        <tui-range\n                            size=\"m\"\n                            formControlName=\"slider\"\n                            [min]=\"+filter.min\"\n                            [max]=\"+filter.max\"\n                            [style.--tui-thickness.rem]=\"0.25\"\n                        />\n                    </div>\n                }\n            </div>\n        }\n        <button\n            tuiButton\n            appearance=\"secondary\"\n            type=\"button\"\n            class=\"mt-2\"\n            (click)=\"onResetFiltersClick()\"\n        >\n            \u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C \u0444\u0438\u043B\u044C\u0442\u0440\u044B\n        </button>\n        @if (showResultsButton()) {\n            <button\n                tuiButton\n                appearance=\"primary\"\n                type=\"button\"\n                class=\"mt-2\"\n                (click)=\"onShowResultsClick()\"\n            >\n                \u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u044B\n            </button>\n        }\n    </form>\n}\n", styles: [".accordion [tuiAccordion]{border:none;mask:none}.accordion tui-expand{box-shadow:none}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[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: i5.TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: i1$2.TuiTextfieldComponent, selector: "tui-textfield:not([multi])" }, { kind: "directive", type: i1$2.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: ScSelectOnFocusinDirective, selector: "tui-input-number, tui-input, tui-input-phone, tui-input-date, tui-input-password, input[tuiInputNumber], input[tuiTextfield], input[tuiInputSlider]" }, { kind: "component", type: ScCatalogFilterCollapsibleComponent, selector: "sc-catalog-filter-collapsible", inputs: ["itemsCount", "showReset"], outputs: ["resetGroup"] }, { kind: "component", type: TuiCheckbox, selector: "input[type=\"checkbox\"][tuiCheckbox]", inputs: ["size"] }, { kind: "directive", type: i2$1.TuiInputNumberDirective, selector: "input[tuiInputNumber]", inputs: ["min", "max", "prefix", "postfix"] }, { kind: "component", type: TuiRange, selector: "tui-range", inputs: ["min", "max", "step", "size", "segments", "keySteps", "focusable", "margin", "limit"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiBlock, selector: "label[tuiBlock],input[tuiBlock]", inputs: ["tuiBlock"] }, { kind: "component", type: TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScCatalogFiltersComponent, decorators: [{
             type: Component,
@@ -6127,7 +6155,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         TuiInputNumber,
                         TuiRange,
                         TuiButton,
-                    ], template: "@if (filters()?.length) {\n    <form\n        [formGroup]=\"form\"\n        class=\"flex flex-col pb-1\"\n    >\n        @for (filter of filters(); track filter.id; let isFirst = $first) {\n            @if (!isFirst) {\n                <hr class=\"my-3 w-full h-px\" />\n            }\n\n            <div class=\"flex flex-col gap-2\">\n                <!-- \u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \u0433\u0440\u0443\u043F\u043F\u044B. \u0414\u043B\u044F toggle \u043F\u043E\u0434\u043F\u0438\u0441\u0438 \u043D\u0435\u0442: \u043C\u0435\u0442\u043A\u0430 \u0438\u0434\u0451\u0442 \u043F\u0440\u044F\u043C\u043E \u0440\u044F\u0434\u043E\u043C \u0441 \u0441\u0430\u043C\u0438\u043C checkbox. -->\n                @if (filter.type !== 'toggle') {\n                    <label class=\"text-body-s-bold\">{{ filter.label }}</label>\n                }\n\n                <!-- Checkbox: FormGroup(value.id \u2192 boolean) \u0434\u043B\u044F \u043B\u044E\u0431\u043E\u0433\u043E \u0447\u0438\u0441\u043B\u0430 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0439.\n                     \u0420\u0430\u0437\u0432\u0438\u043B\u043A\u0430 \u043E\u0434\u043D\u043E/\u043C\u043D\u043E\u0433\u043E \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0439 \u0432\u044B\u043D\u0435\u0441\u0435\u043D\u0430 \u0432 TS (\u0441\u043C. processCheckboxFilter).\n                     ng-template \u0432\u043D\u0443\u0442\u0440\u0438 formGroupName: \u0438\u043D\u0430\u0447\u0435 reactive forms \u043D\u0435 \u043D\u0430\u0439\u0434\u0451\u0442 ControlContainer \u043F\u0440\u0438 \u043F\u0440\u043E\u0435\u043A\u0446\u0438\u0438 \u0432 \u0434\u043E\u0447\u0435\u0440\u043D\u0438\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442. -->\n                @if (filter.type === 'checkbox') {\n                    <div\n                        class=\"flex flex-col gap-2\"\n                        [formGroupName]=\"filter.id\"\n                    >\n                        <sc-catalog-filter-collapsible\n                            [itemsCount]=\"filter.values.length\"\n                            [showReset]=\"form.get(filter.id)?.dirty ?? false\"\n                            (resetGroup)=\"resetCheckboxGroup(filter.id)\"\n                        >\n                            <ng-template>\n                                <div class=\"flex flex-col gap-2\">\n                                    @for (value of filter.values; track value.id) {\n                                        <label class=\"flex items-center gap-2\">\n                                            <input\n                                                [formControlName]=\"value.id\"\n                                                tuiCheckbox\n                                                type=\"checkbox\"\n                                            />\n                                            <span class=\"text-body-s\">{{ value.label }}</span>\n                                        </label>\n                                    }\n                                </div>\n                            </ng-template>\n                        </sc-catalog-filter-collapsible>\n                    </div>\n\n                    <!-- Toggle: \u043E\u0434\u0438\u043D boolean \u043D\u0430 \u043A\u043E\u0440\u043D\u0435 \u0444\u043E\u0440\u043C\u044B, \u043F\u043E\u0434\u043F\u0438\u0441\u044C = filter.label -->\n                } @else if (filter.type === 'toggle') {\n                    <label class=\"flex items-center gap-2\">\n                        <input\n                            [formControlName]=\"filter.id\"\n                            tuiCheckbox\n                            type=\"checkbox\"\n                        />\n                        <span class=\"text-body-s-bold\">{{ filter.label }}</span>\n                    </label>\n\n                    <!-- Range: FormGroup(from, to, slider) \u0441 \u0434\u0432\u0443\u0441\u0442\u043E\u0440\u043E\u043D\u043D\u0435\u0439 \u0441\u0438\u043D\u0445\u0440\u043E\u043D\u0438\u0437\u0430\u0446\u0438\u0435\u0439 -->\n                } @else if (filter.type === 'range') {\n                    <div\n                        [formGroupName]=\"filter.id\"\n                        class=\"flex flex-col gap-3\"\n                    >\n                        <div class=\"flex gap-3 px-1\">\n                            <label\n                                tuiLabel\n                                class=\"min-w-0 flex-1\"\n                            >\n                                \u041E\u0442\n                                <tui-textfield [tuiTextfieldCleaner]=\"false\">\n                                    <input\n                                        scSelectOnFocusin\n                                        tuiInputNumber\n                                        formControlName=\"from\"\n                                        [min]=\"+filter.min\"\n                                        [max]=\"+filter.max\"\n                                        autocomplete=\"off\"\n                                    />\n                                    @if (form.get(filter.id)?.get('from')?.dirty) {\n                                        <button\n                                            tuiIconButton\n                                            type=\"button\"\n                                            size=\"xs\"\n                                            appearance=\"icon\"\n                                            iconStart=\"@tui.x\"\n                                            (click)=\"resetRangeFrom(filter.id, filter.min)\"\n                                        ></button>\n                                    }\n                                </tui-textfield>\n                            </label>\n                            <label\n                                tuiLabel\n                                class=\"min-w-0 flex-1\"\n                            >\n                                \u0414\u043E\n                                <tui-textfield [tuiTextfieldCleaner]=\"false\">\n                                    <input\n                                        scSelectOnFocusin\n                                        tuiInputNumber\n                                        formControlName=\"to\"\n                                        [min]=\"+filter.min\"\n                                        [max]=\"+filter.max\"\n                                        autocomplete=\"off\"\n                                    />\n                                    @if (form.get(filter.id)?.get('to')?.dirty) {\n                                        <button\n                                            tuiIconButton\n                                            type=\"button\"\n                                            size=\"xs\"\n                                            appearance=\"icon\"\n                                            iconStart=\"@tui.x\"\n                                            (click)=\"resetRangeTo(filter.id, filter.max)\"\n                                        ></button>\n                                    }\n                                </tui-textfield>\n                            </label>\n                        </div>\n\n                        <tui-range\n                            size=\"m\"\n                            formControlName=\"slider\"\n                            [min]=\"+filter.min\"\n                            [max]=\"+filter.max\"\n                            [style.--tui-thickness.rem]=\"0.25\"\n                        />\n                    </div>\n                }\n            </div>\n        }\n        <button\n            tuiButton\n            appearance=\"secondary\"\n            type=\"button\"\n            class=\"mt-2\"\n            (click)=\"onResetFiltersClick()\"\n        >\n            \u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C \u0444\u0438\u043B\u044C\u0442\u0440\u044B\n        </button>\n        @if (showResultsButton()) {\n            <button\n                tuiButton\n                appearance=\"primary\"\n                type=\"button\"\n                class=\"mt-2\"\n                (click)=\"onShowResultsClick()\"\n            >\n                \u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u044B\n            </button>\n        }\n    </form>\n}\n", styles: [".accordion [tuiAccordion]{border:none;mask:none}.accordion tui-expand{box-shadow:none}\n"] }]
+                        TuiBlock,
+                        TuiIcon,
+                        TuiLink,
+                    ], template: "@if (filters()?.length) {\n    <form\n        [formGroup]=\"form\"\n        class=\"flex flex-col pb-1\"\n    >\n        @for (filter of filters(); track filter.id; let isFirst = $first) {\n            @if (!isFirst) {\n                <hr class=\"my-3 w-full h-px\" />\n            }\n\n            <div class=\"flex flex-col gap-2\">\n                <!-- \u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \u0433\u0440\u0443\u043F\u043F\u044B. \u0414\u043B\u044F toggle \u043F\u043E\u0434\u043F\u0438\u0441\u0438 \u043D\u0435\u0442: \u043C\u0435\u0442\u043A\u0430 \u0438\u0434\u0451\u0442 \u043F\u0440\u044F\u043C\u043E \u0440\u044F\u0434\u043E\u043C \u0441 \u0441\u0430\u043C\u0438\u043C checkbox. -->\n                @if (filter.type !== 'toggle') {\n                    <label class=\"text-body-s-bold\">{{ filter.label }}</label>\n                }\n\n                <!-- Checkbox: FormGroup(value.id \u2192 boolean) \u0434\u043B\u044F \u043B\u044E\u0431\u043E\u0433\u043E \u0447\u0438\u0441\u043B\u0430 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0439.\n                     \u0420\u0430\u0437\u0432\u0438\u043B\u043A\u0430 \u043E\u0434\u043D\u043E/\u043C\u043D\u043E\u0433\u043E \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0439 \u0432\u044B\u043D\u0435\u0441\u0435\u043D\u0430 \u0432 TS (\u0441\u043C. processCheckboxFilter).\n                     ng-template \u0432\u043D\u0443\u0442\u0440\u0438 formGroupName: \u0438\u043D\u0430\u0447\u0435 reactive forms \u043D\u0435 \u043D\u0430\u0439\u0434\u0451\u0442 ControlContainer \u043F\u0440\u0438 \u043F\u0440\u043E\u0435\u043A\u0446\u0438\u0438 \u0432 \u0434\u043E\u0447\u0435\u0440\u043D\u0438\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442. -->\n                @if (filter.type === 'checkbox') {\n                    @let preview = filter.previewType ? previews[filter.previewType] : undefined;\n                    <div\n                        class=\"flex flex-col gap-2\"\n                        [formGroupName]=\"filter.id\"\n                    >\n                        <!-- \u041F\u043B\u0438\u0442\u043A\u0438 \u0441 \u0438\u043A\u043E\u043D\u043A\u0430\u043C\u0438: \u0442\u0438\u043F \u043F\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043B\u0435\u043D\u0438\u044F \u0444\u0438\u043B\u044C\u0442\u0440\u0430 \u0435\u0441\u0442\u044C \u0432 \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0430\u0445 SC_CATALOG_FILTER_PREVIEWS.\n                             \u041E\u0444\u043E\u0440\u043C\u043B\u0435\u043D\u0438\u0435 \u043F\u043B\u0438\u0442\u043A\u0438 \u0437\u0430\u0434\u0430\u0451\u0442 input[tuiBlock], \u0443 label \u043E\u0444\u043E\u0440\u043C\u043B\u0435\u043D\u0438\u0435 \u0441\u043D\u044F\u0442\u043E (appearance=\"\"). -->\n                        @if (preview) {\n                            <div class=\"grid grid-cols-2 gap-2\">\n                                @for (value of filter.values; track value.id) {\n                                    @let icon = preview.icons[value.id];\n                                    <label\n                                        class=\"flex-col items-center text-center\"\n                                        appearance=\"\"\n                                        tuiBlock=\"s\"\n                                    >\n                                        <input\n                                            class=\"bg-tui-background-neutral-1\"\n                                            [formControlName]=\"value.id\"\n                                            tuiBlock\n                                            type=\"checkbox\"\n                                        />\n                                        @if (icon) {\n                                            <tui-icon [icon]=\"icon\" />\n                                        }\n                                        <span class=\"text-body-s-bold\">{{ value.label }}</span>\n                                    </label>\n                                }\n                            </div>\n                            @if (form.get(filter.id)?.dirty) {\n                                <button\n                                    tuiLink\n                                    type=\"button\"\n                                    class=\"text-start !text-body-s\"\n                                    (click)=\"resetCheckboxGroup(filter.id)\"\n                                >\n                                    \u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C\n                                </button>\n                            }\n                        } @else {\n                            <sc-catalog-filter-collapsible\n                                [itemsCount]=\"filter.values.length\"\n                                [showReset]=\"form.get(filter.id)?.dirty ?? false\"\n                                (resetGroup)=\"resetCheckboxGroup(filter.id)\"\n                            >\n                                <ng-template>\n                                    <div class=\"flex flex-col gap-2\">\n                                        @for (value of filter.values; track value.id) {\n                                            <label class=\"flex items-center gap-2\">\n                                                <input\n                                                    [formControlName]=\"value.id\"\n                                                    tuiCheckbox\n                                                    type=\"checkbox\"\n                                                />\n                                                <span class=\"text-body-s\">{{ value.label }}</span>\n                                            </label>\n                                        }\n                                    </div>\n                                </ng-template>\n                            </sc-catalog-filter-collapsible>\n                        }\n                    </div>\n\n                    <!-- Toggle: \u043E\u0434\u0438\u043D boolean \u043D\u0430 \u043A\u043E\u0440\u043D\u0435 \u0444\u043E\u0440\u043C\u044B, \u043F\u043E\u0434\u043F\u0438\u0441\u044C = filter.label -->\n                } @else if (filter.type === 'toggle') {\n                    <label class=\"flex items-center gap-2\">\n                        <input\n                            [formControlName]=\"filter.id\"\n                            tuiCheckbox\n                            type=\"checkbox\"\n                        />\n                        <span class=\"text-body-s-bold\">{{ filter.label }}</span>\n                    </label>\n\n                    <!-- Range: FormGroup(from, to, slider) \u0441 \u0434\u0432\u0443\u0441\u0442\u043E\u0440\u043E\u043D\u043D\u0435\u0439 \u0441\u0438\u043D\u0445\u0440\u043E\u043D\u0438\u0437\u0430\u0446\u0438\u0435\u0439 -->\n                } @else if (filter.type === 'range') {\n                    <div\n                        [formGroupName]=\"filter.id\"\n                        class=\"flex flex-col gap-3\"\n                    >\n                        <div class=\"flex gap-3 px-1\">\n                            <label\n                                tuiLabel\n                                class=\"min-w-0 flex-1\"\n                            >\n                                \u041E\u0442\n                                <tui-textfield [tuiTextfieldCleaner]=\"false\">\n                                    <input\n                                        scSelectOnFocusin\n                                        tuiInputNumber\n                                        formControlName=\"from\"\n                                        [min]=\"+filter.min\"\n                                        [max]=\"+filter.max\"\n                                        autocomplete=\"off\"\n                                    />\n                                    @if (form.get(filter.id)?.get('from')?.dirty) {\n                                        <button\n                                            tuiIconButton\n                                            type=\"button\"\n                                            size=\"xs\"\n                                            appearance=\"icon\"\n                                            iconStart=\"@tui.x\"\n                                            (click)=\"resetRangeFrom(filter.id, filter.min)\"\n                                        ></button>\n                                    }\n                                </tui-textfield>\n                            </label>\n                            <label\n                                tuiLabel\n                                class=\"min-w-0 flex-1\"\n                            >\n                                \u0414\u043E\n                                <tui-textfield [tuiTextfieldCleaner]=\"false\">\n                                    <input\n                                        scSelectOnFocusin\n                                        tuiInputNumber\n                                        formControlName=\"to\"\n                                        [min]=\"+filter.min\"\n                                        [max]=\"+filter.max\"\n                                        autocomplete=\"off\"\n                                    />\n                                    @if (form.get(filter.id)?.get('to')?.dirty) {\n                                        <button\n                                            tuiIconButton\n                                            type=\"button\"\n                                            size=\"xs\"\n                                            appearance=\"icon\"\n                                            iconStart=\"@tui.x\"\n                                            (click)=\"resetRangeTo(filter.id, filter.max)\"\n                                        ></button>\n                                    }\n                                </tui-textfield>\n                            </label>\n                        </div>\n\n                        <tui-range\n                            size=\"m\"\n                            formControlName=\"slider\"\n                            [min]=\"+filter.min\"\n                            [max]=\"+filter.max\"\n                            [style.--tui-thickness.rem]=\"0.25\"\n                        />\n                    </div>\n                }\n            </div>\n        }\n        <button\n            tuiButton\n            appearance=\"secondary\"\n            type=\"button\"\n            class=\"mt-2\"\n            (click)=\"onResetFiltersClick()\"\n        >\n            \u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C \u0444\u0438\u043B\u044C\u0442\u0440\u044B\n        </button>\n        @if (showResultsButton()) {\n            <button\n                tuiButton\n                appearance=\"primary\"\n                type=\"button\"\n                class=\"mt-2\"\n                (click)=\"onShowResultsClick()\"\n            >\n                \u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u044B\n            </button>\n        }\n    </form>\n}\n", styles: [".accordion [tuiAccordion]{border:none;mask:none}.accordion tui-expand{box-shadow:none}\n"] }]
         }], ctorParameters: () => [] });
 
 /* eslint-disable @typescript-eslint/unbound-method */
@@ -8065,6 +8096,13 @@ const scClientUiIconsName = [
     'catalog.stiz',
     'catalog.thermometer',
     'catalog.windowsill',
+    'catalog-filters.additional-profiles',
+    'catalog-filters.balcony-railing',
+    'catalog-filters.door-entrance',
+    'catalog-filters.glazing-sliding',
+    'catalog-filters.stained-glass',
+    'catalog-filters.ventilation-grille',
+    'catalog-filters.window-hinged',
     'img.email',
     'img.facebook',
     'img.instagram',
@@ -9071,10 +9109,11 @@ class ScOrderFormComponent {
         this.initDateFieldActivationChange();
     }
     /**
-     * Инициализирует подписку на изменение поля прикрепления файла.
+     * Инициализирует подписку на изменение поля прикрепления файла. Файл, не прошедший проверку формата или размера, к заказу не прикрепляется.
      */
     initFileChange() {
-        this.controlFile.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((file) => {
+        this.accepted$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((files) => {
+            const file = files.at(0);
             if (file && this.form.controls.image) {
                 this.onUploadFile(file, this.form.controls.image);
             }
@@ -10761,7 +10800,7 @@ class ScFeedbackFormComponent {
                 this['subscription'].unsubscribe();
             }
         };
-        merge(this.accepted$, this.user$, this.loadedFile.valueChanges.pipe(tap((files) => {
+        merge(this.user$, this.accepted$.pipe(tap((files) => {
             this.form.controls.files.reset([]);
             this.onUploadFile(files);
         })))
@@ -11502,5 +11541,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, 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_FAQ_GROUP_QUERY_PARAM, SC_FAQ_QUESTION_ANCHOR_PREFIX, 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_FORM_CONFIG, 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, ScCatalogFilterCollapsibleComponent, 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, ScNewOrderItemsComponent, ScNewsCardComponent, ScNewsCardSkeletonComponent, ScNewsListComponent, ScNewsModule, ScNextInputFocusDirective, ScNextInputFocusModule, ScNoindexDirective, ScNoindexWrapperComponent, ScNotifyWhenInStockDialogComponent, ScOrderAccessorDirective, ScOrderFormComponent, ScOrderItemComponent, ScOrderItemsListByStockComponent, ScOrderItemsListComponent, ScOrderItemsListWithActionsComponent, ScOrderModule, ScPaginationLinksComponent, 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, ScShareDialogComponent, ScShareMessengersLinksComponent, ScShareService, ScSignInFormByEmailComponent, ScSignInFormByPhoneComponent, ScSignInFormComponent, ScSignUpFormComponent, ScSimpleSignUpFormComponent, ScSuggestionFieldComponent, ScTelLinkDirective, ScTerminalLinkDirective, ScUpdateUserInfoDialogComponent, ScUserManagersComponent, ScUserModule, ScUserPhoneApproveDialogComponent, ScVerificationModule, ScVerificationPhoneCheckFormComponent, TreeDirective, TreeIconService, TreeLoaderService, TreeTopDirective, cleanupRecaptchaArtifacts, phoneValidator, scAtLeastOneRequiredValidator, scBicValidator, scClientUiIconsName, scCorrespondentAccountValidator, scGetCurrentRoute, scGetFaqGroupQueryParams, scGetFaqQuestionAnchor, scGetFaqQuestionIdFromAnchor, 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_FILTER_PREVIEWS, 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_FAQ_GROUP_QUERY_PARAM, SC_FAQ_QUESTION_ANCHOR_PREFIX, 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_FORM_CONFIG, 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, ScCatalogFilterCollapsibleComponent, 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, ScNewOrderItemsComponent, ScNewsCardComponent, ScNewsCardSkeletonComponent, ScNewsListComponent, ScNewsModule, ScNextInputFocusDirective, ScNextInputFocusModule, ScNoindexDirective, ScNoindexWrapperComponent, ScNotifyWhenInStockDialogComponent, ScOrderAccessorDirective, ScOrderFormComponent, ScOrderItemComponent, ScOrderItemsListByStockComponent, ScOrderItemsListComponent, ScOrderItemsListWithActionsComponent, ScOrderModule, ScPaginationLinksComponent, 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, ScShareDialogComponent, ScShareMessengersLinksComponent, ScShareService, ScSignInFormByEmailComponent, ScSignInFormByPhoneComponent, ScSignInFormComponent, ScSignUpFormComponent, ScSimpleSignUpFormComponent, ScSuggestionFieldComponent, ScTelLinkDirective, ScTerminalLinkDirective, ScUpdateUserInfoDialogComponent, ScUserManagersComponent, ScUserModule, ScUserPhoneApproveDialogComponent, ScVerificationModule, ScVerificationPhoneCheckFormComponent, TreeDirective, TreeIconService, TreeLoaderService, TreeTopDirective, cleanupRecaptchaArtifacts, phoneValidator, scAtLeastOneRequiredValidator, scBicValidator, scClientUiIconsName, scCorrespondentAccountValidator, scGetCurrentRoute, scGetFaqGroupQueryParams, scGetFaqQuestionAnchor, scGetFaqQuestionIdFromAnchor, scPasswordConfirmMatchingValidator, stepValidator, tuiDateValueTransformerDefaultProvider };
 //# sourceMappingURL=snabcentr-client-ui.mjs.map