@snabcentr/client-ui 3.53.4 → 3.53.6

package/fesm2022/snabcentr-client-ui.mjs

@@ -5646,11 +5646,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         }] });
 
 /**
- * Токен для инъекции {@link Subject} для хранения фильтров продуктов.
+ * Токен для инъекции {@link BehaviorSubject} для хранения фильтров продуктов.
  */
 const SC_CATALOG_PRODUCTS_FILTERS = new InjectionToken('SC_CATALOG_PRODUCTS_FILTERS$', {
     providedIn: 'root',
-    factory: () => new Subject(),
+    factory: () => new BehaviorSubject({}),
 });
 
 /**
@@ -5825,9 +5825,13 @@ class ScCatalogFiltersComponent {
                 case 'checkbox':
                     this.processCheckboxFilter(result, filterItem, controlValue);
                     break;
-                case 'range':
-                    this.processRangeFilter(result, filterItem.id, controlValue);
+                case 'range': {
+                    const rangeGroup = this.form.get(filterItem.id);
+                    if (rangeGroup) {
+                        this.processRangeFilter(result, filterItem.id, rangeGroup);
+                    }
                     break;
+                }
                 case 'toggle':
                     this.processToggleFilter(result, filterItem.id, controlValue);
                     break;
@@ -5853,17 +5857,30 @@ class ScCatalogFiltersComponent {
         });
         return new FormGroup(controls);
     }
+    /**
+     * Значения диапазона по умолчанию: выбранные ранее, либо границы min/max. С ними сравниваются поля при формировании запроса.
+     *
+     * @param rangeFilter Фильтр типа range.
+     */
+    // eslint-disable-next-line class-methods-use-this
+    getRangeDefaults(rangeFilter) {
+        return {
+            from: rangeFilter.selectedMin ?? rangeFilter.min,
+            to: rangeFilter.selectedMax ?? rangeFilter.max,
+        };
+    }
     /**
      * Создаёт {@link FormGroup} для range: {@code from}, {@code to}, {@code slider} (кортеж для {@link TuiRange}).
+     * Поля заполнены дефолтами и валидируются границами; округление значений — на стороне поля ввода Taiga.
      *
      * @param rangeFilter Фильтр типа range.
      */
     createRangeFormControl(rangeFilter) {
-        const fromValue = Number(rangeFilter.selectedMin ?? rangeFilter.min);
-        const toValue = Number(rangeFilter.selectedMax ?? rangeFilter.max);
+        const { min, max } = rangeFilter;
+        const { from: fromValue, to: toValue } = this.getRangeDefaults(rangeFilter);
         return new FormGroup({
-            from: new FormControl(fromValue, { nonNullable: true }),
-            to: new FormControl(toValue, { nonNullable: true }),
+            from: new FormControl(fromValue, { nonNullable: true, validators: [Validators.min(min), Validators.max(max)] }),
+            to: new FormControl(toValue, { nonNullable: true, validators: [Validators.min(min), Validators.max(max)] }),
             slider: new FormControl([fromValue, toValue], { nonNullable: true }),
         });
     }
@@ -5898,7 +5915,7 @@ class ScCatalogFiltersComponent {
         });
     }
     /**
-     * Связывает поля «от»/«до» с контролом слайдера.
+     * Двусторонняя синхронизация полей «от»/«до» и слайдера.
      *
      * @param group FormGroup range-фильтра.
      */
@@ -5910,7 +5927,7 @@ class ScCatalogFiltersComponent {
             return new Subscription();
         }
         const sub = new Subscription();
-        // Инпуты → слайдер; если «от» > «до», поднимаем «до» до «от».
+        // Инпуты → слайдер. Если «от» > «до», поднимаем «до» до «от».
         const applySliderFromInputs = () => {
             const low = Number(from.value);
             let high = Number(to.value);
@@ -5936,7 +5953,7 @@ class ScCatalogFiltersComponent {
                 to.markAsDirty();
             }
         }));
-        // Совпасть с полями при первом показе (уже совпадает при создании, но на всякий случай).
+        // Совпасть с полями при первом показе (без эмиссии, чтобы открытие панели не слало запрос товаров).
         applySliderFromInputs();
         return sub;
     }
@@ -5966,20 +5983,31 @@ class ScCatalogFiltersComponent {
         result[checkboxFilter.id] = selectedIds;
     }
     /**
-     * Обрабатывает range фильтр.
+     * Обрабатывает range фильтр: границы «от»/«до» независимы, на сервер уходит только та, что отличается от дефолта.
+     * Если обе равны дефолтам (диапазон не сужали), фильтр не добавляется.
      *
      * @param result Объект результата для заполнения.
      * @param filterId Идентификатор фильтра.
-     * @param range Значение контрола формы (объект с границами).
-     * @param range.from Начальное значение диапазона.
-     * @param range.to Конечное значение диапазона.
+     * @param group FormGroup range-фильтра (`from`, `to`, `slider`).
      */
-    processRangeFilter(result, filterId, range) {
-        // eslint-disable-next-line security/detect-object-injection, no-param-reassign
-        result[filterId] = {
-            from: String(range.from),
-            to: String(range.to),
-        };
+    processRangeFilter(result, filterId, group) {
+        const rangeFilter = this.getRangeFilter(filterId);
+        if (!rangeFilter) {
+            return;
+        }
+        const defaults = this.getRangeDefaults(rangeFilter);
+        const { from, to } = group.controls;
+        const value = {};
+        if (from.value !== defaults.from) {
+            value.from = String(from.value);
+        }
+        if (to.value !== defaults.to) {
+            value.to = String(to.value);
+        }
+        if (value.from !== undefined || value.to !== undefined) {
+            // eslint-disable-next-line security/detect-object-injection, no-param-reassign
+            result[filterId] = value;
+        }
     }
     /**
      * Обрабатывает toggle фильтр.
@@ -5995,22 +6023,36 @@ class ScCatalogFiltersComponent {
         }
     }
     /**
-     * Сбрасывает поле «от» диапазона к минимальному значению фильтра.
+     * Возвращает метафильтр range по идентификатору из текущего списка фильтров.
+     *
+     * @param filterId Идентификатор фильтра.
+     */
+    getRangeFilter(filterId) {
+        return this.filters()?.find((item) => item.type === 'range' && item.id === filterId);
+    }
+    /**
+     * Сбрасывает поле «от» диапазона к значению по умолчанию (граница снова не отправляется на сервер).
      *
      * @param filterId Идентификатор фильтра.
-     * @param min Минимальное значение диапазона.
      */
-    resetRangeFrom(filterId, min) {
-        this.form.get(filterId)?.get('from')?.reset(+min);
+    resetRangeFrom(filterId) {
+        const rangeFilter = this.getRangeFilter(filterId);
+        this.form
+            .get(filterId)
+            ?.get('from')
+            ?.reset(rangeFilter ? this.getRangeDefaults(rangeFilter).from : null);
     }
     /**
-     * Сбрасывает поле «до» диапазона к максимальному значению фильтра.
+     * Сбрасывает поле «до» диапазона к значению по умолчанию (граница снова не отправляется на сервер).
      *
      * @param filterId Идентификатор фильтра.
-     * @param max Максимальное значение диапазона.
      */
-    resetRangeTo(filterId, max) {
-        this.form.get(filterId)?.get('to')?.reset(+max);
+    resetRangeTo(filterId) {
+        const rangeFilter = this.getRangeFilter(filterId);
+        this.form
+            .get(filterId)
+            ?.get('to')
+            ?.reset(rangeFilter ? this.getRangeDefaults(rangeFilter).to : null);
     }
     /**
      * Сбрасывает все чекбоксы группы в `false`.
@@ -6067,9 +6109,8 @@ class ScCatalogFiltersComponent {
                     break;
                 case 'range': {
                     const group = control;
-                    const min = +filterItem.min;
-                    const max = +filterItem.max;
-                    group.reset({ from: min, to: max, slider: [min, max] });
+                    const defaults = this.getRangeDefaults(filterItem);
+                    group.reset({ from: defaults.from, to: defaults.to, slider: [defaults.from, defaults.to] });
                     break;
                 }
                 default:
@@ -6078,22 +6119,11 @@ class ScCatalogFiltersComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScCatalogFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ScCatalogFiltersComponent, isStandalone: true, selector: "sc-catalog-filters", inputs: { showResultsButton: { classPropertyName: "showResultsButton", publicName: "showResultsButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resetFilters: "resetFilters", showResults: "showResults" }, ngImport: i0, template: "@if (filters()?.length) {\n    <form\n        [formGroup]=\"form\"\n        class=\"flex flex-col pb-1\"\n    >\n        @for (filter of filters(); track filter.id; let isFirst = $first) {\n            @if (!isFirst) {\n                <hr class=\"my-3 w-full h-px\" />\n            }\n\n            <div class=\"flex flex-col gap-2\">\n                <!-- \u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \u0433\u0440\u0443\u043F\u043F\u044B. \u0414\u043B\u044F toggle \u043F\u043E\u0434\u043F\u0438\u0441\u0438 \u043D\u0435\u0442: \u043C\u0435\u0442\u043A\u0430 \u0438\u0434\u0451\u0442 \u043F\u0440\u044F\u043C\u043E \u0440\u044F\u0434\u043E\u043C \u0441 \u0441\u0430\u043C\u0438\u043C checkbox. -->\n                @if (filter.type !== 'toggle') {\n                    <label class=\"text-body-s-bold\">{{ filter.label }}</label>\n                }\n\n                <!-- Checkbox: FormGroup(value.id \u2192 boolean) \u0434\u043B\u044F \u043B\u044E\u0431\u043E\u0433\u043E \u0447\u0438\u0441\u043B\u0430 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0439.\n                     \u0420\u0430\u0437\u0432\u0438\u043B\u043A\u0430 \u043E\u0434\u043D\u043E/\u043C\u043D\u043E\u0433\u043E \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0439 \u0432\u044B\u043D\u0435\u0441\u0435\u043D\u0430 \u0432 TS (\u0441\u043C. processCheckboxFilter).\n                     ng-template \u0432\u043D\u0443\u0442\u0440\u0438 formGroupName: \u0438\u043D\u0430\u0447\u0435 reactive forms \u043D\u0435 \u043D\u0430\u0439\u0434\u0451\u0442 ControlContainer \u043F\u0440\u0438 \u043F\u0440\u043E\u0435\u043A\u0446\u0438\u0438 \u0432 \u0434\u043E\u0447\u0435\u0440\u043D\u0438\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442. -->\n                @if (filter.type === 'checkbox') {\n                    <div\n                        class=\"flex flex-col gap-2\"\n                        [formGroupName]=\"filter.id\"\n                    >\n                        <sc-catalog-filter-collapsible\n                            [itemsCount]=\"filter.values.length\"\n                            [showReset]=\"form.get(filter.id)?.dirty ?? false\"\n                            (resetGroup)=\"resetCheckboxGroup(filter.id)\"\n                        >\n                            <ng-template>\n                                <div class=\"flex flex-col gap-2\">\n                                    @for (value of filter.values; track value.id) {\n                                        <label class=\"flex items-center gap-2\">\n                                            <input\n                                                [formControlName]=\"value.id\"\n                                                tuiCheckbox\n                                                type=\"checkbox\"\n                                            />\n                                            <span class=\"text-body-s\">{{ value.label }}</span>\n                                        </label>\n                                    }\n                                </div>\n                            </ng-template>\n                        </sc-catalog-filter-collapsible>\n                    </div>\n\n                    <!-- Toggle: \u043E\u0434\u0438\u043D boolean \u043D\u0430 \u043A\u043E\u0440\u043D\u0435 \u0444\u043E\u0440\u043C\u044B, \u043F\u043E\u0434\u043F\u0438\u0441\u044C = filter.label -->\n                } @else if (filter.type === 'toggle') {\n                    <label class=\"flex items-center gap-2\">\n                        <input\n                            [formControlName]=\"filter.id\"\n                            tuiCheckbox\n                            type=\"checkbox\"\n                        />\n                        <span class=\"text-body-s-bold\">{{ filter.label }}</span>\n                    </label>\n\n                    <!-- Range: FormGroup(from, to, slider) \u0441 \u0434\u0432\u0443\u0441\u0442\u043E\u0440\u043E\u043D\u043D\u0435\u0439 \u0441\u0438\u043D\u0445\u0440\u043E\u043D\u0438\u0437\u0430\u0446\u0438\u0435\u0439 -->\n                } @else if (filter.type === 'range') {\n                    <div\n                        [formGroupName]=\"filter.id\"\n                        class=\"flex flex-col gap-3\"\n                    >\n                        <div class=\"flex gap-3 px-1\">\n                            <label\n                                tuiLabel\n                                class=\"min-w-0 flex-1\"\n                            >\n                                \u041E\u0442\n                                <tui-textfield [tuiTextfieldCleaner]=\"false\">\n                                    <input\n                                        scSelectOnFocusin\n                                        tuiInputNumber\n                                        formControlName=\"from\"\n                                        [tuiNumberFormat]=\"{ precision: 0 }\"\n                                        [min]=\"+filter.min\"\n                                        [max]=\"+filter.max\"\n                                        autocomplete=\"off\"\n                                    />\n                                    @if (form.get(filter.id)?.get('from')?.dirty) {\n                                        <button\n                                            tuiIconButton\n                                            type=\"button\"\n                                            size=\"xs\"\n                                            appearance=\"icon\"\n                                            iconStart=\"@tui.x\"\n                                            (click)=\"resetRangeFrom(filter.id, filter.min)\"\n                                        ></button>\n                                    }\n                                </tui-textfield>\n                            </label>\n                            <label\n                                tuiLabel\n                                class=\"min-w-0 flex-1\"\n                            >\n                                \u0414\u043E\n                                <tui-textfield [tuiTextfieldCleaner]=\"false\">\n                                    <input\n                                        scSelectOnFocusin\n                                        tuiInputNumber\n                                        formControlName=\"to\"\n                                        [tuiNumberFormat]=\"{ precision: 0 }\"\n                                        [min]=\"+filter.min\"\n                                        [max]=\"+filter.max\"\n                                        autocomplete=\"off\"\n                                    />\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: "directive", type: TuiNumberFormat, selector: "[tuiNumberFormat]", inputs: ["tuiNumberFormat"] }, { 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                    <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)\"\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)\"\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScCatalogFiltersComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'sc-catalog-filters', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        ReactiveFormsModule,
-                        TuiTextfield,
-                        ScSelectOnFocusinDirective,
-                        ScCatalogFilterCollapsibleComponent,
-                        TuiLabel,
-                        TuiNumberFormat,
-                        TuiCheckbox,
-                        TuiInputNumber,
-                        TuiRange,
-                        TuiButton,
-                    ], template: "@if (filters()?.length) {\n    <form\n        [formGroup]=\"form\"\n        class=\"flex flex-col pb-1\"\n    >\n        @for (filter of filters(); track filter.id; let isFirst = $first) {\n            @if (!isFirst) {\n                <hr class=\"my-3 w-full h-px\" />\n            }\n\n            <div class=\"flex flex-col gap-2\">\n                <!-- \u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \u0433\u0440\u0443\u043F\u043F\u044B. \u0414\u043B\u044F toggle \u043F\u043E\u0434\u043F\u0438\u0441\u0438 \u043D\u0435\u0442: \u043C\u0435\u0442\u043A\u0430 \u0438\u0434\u0451\u0442 \u043F\u0440\u044F\u043C\u043E \u0440\u044F\u0434\u043E\u043C \u0441 \u0441\u0430\u043C\u0438\u043C checkbox. -->\n                @if (filter.type !== 'toggle') {\n                    <label class=\"text-body-s-bold\">{{ filter.label }}</label>\n                }\n\n                <!-- Checkbox: FormGroup(value.id \u2192 boolean) \u0434\u043B\u044F \u043B\u044E\u0431\u043E\u0433\u043E \u0447\u0438\u0441\u043B\u0430 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0439.\n                     \u0420\u0430\u0437\u0432\u0438\u043B\u043A\u0430 \u043E\u0434\u043D\u043E/\u043C\u043D\u043E\u0433\u043E \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0439 \u0432\u044B\u043D\u0435\u0441\u0435\u043D\u0430 \u0432 TS (\u0441\u043C. processCheckboxFilter).\n                     ng-template \u0432\u043D\u0443\u0442\u0440\u0438 formGroupName: \u0438\u043D\u0430\u0447\u0435 reactive forms \u043D\u0435 \u043D\u0430\u0439\u0434\u0451\u0442 ControlContainer \u043F\u0440\u0438 \u043F\u0440\u043E\u0435\u043A\u0446\u0438\u0438 \u0432 \u0434\u043E\u0447\u0435\u0440\u043D\u0438\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442. -->\n                @if (filter.type === 'checkbox') {\n                    <div\n                        class=\"flex flex-col gap-2\"\n                        [formGroupName]=\"filter.id\"\n                    >\n                        <sc-catalog-filter-collapsible\n                            [itemsCount]=\"filter.values.length\"\n                            [showReset]=\"form.get(filter.id)?.dirty ?? false\"\n                            (resetGroup)=\"resetCheckboxGroup(filter.id)\"\n                        >\n                            <ng-template>\n                                <div class=\"flex flex-col gap-2\">\n                                    @for (value of filter.values; track value.id) {\n                                        <label class=\"flex items-center gap-2\">\n                                            <input\n                                                [formControlName]=\"value.id\"\n                                                tuiCheckbox\n                                                type=\"checkbox\"\n                                            />\n                                            <span class=\"text-body-s\">{{ value.label }}</span>\n                                        </label>\n                                    }\n                                </div>\n                            </ng-template>\n                        </sc-catalog-filter-collapsible>\n                    </div>\n\n                    <!-- Toggle: \u043E\u0434\u0438\u043D boolean \u043D\u0430 \u043A\u043E\u0440\u043D\u0435 \u0444\u043E\u0440\u043C\u044B, \u043F\u043E\u0434\u043F\u0438\u0441\u044C = filter.label -->\n                } @else if (filter.type === 'toggle') {\n                    <label class=\"flex items-center gap-2\">\n                        <input\n                            [formControlName]=\"filter.id\"\n                            tuiCheckbox\n                            type=\"checkbox\"\n                        />\n                        <span class=\"text-body-s-bold\">{{ filter.label }}</span>\n                    </label>\n\n                    <!-- Range: FormGroup(from, to, slider) \u0441 \u0434\u0432\u0443\u0441\u0442\u043E\u0440\u043E\u043D\u043D\u0435\u0439 \u0441\u0438\u043D\u0445\u0440\u043E\u043D\u0438\u0437\u0430\u0446\u0438\u0435\u0439 -->\n                } @else if (filter.type === 'range') {\n                    <div\n                        [formGroupName]=\"filter.id\"\n                        class=\"flex flex-col gap-3\"\n                    >\n                        <div class=\"flex gap-3 px-1\">\n                            <label\n                                tuiLabel\n                                class=\"min-w-0 flex-1\"\n                            >\n                                \u041E\u0442\n                                <tui-textfield [tuiTextfieldCleaner]=\"false\">\n                                    <input\n                                        scSelectOnFocusin\n                                        tuiInputNumber\n                                        formControlName=\"from\"\n                                        [tuiNumberFormat]=\"{ precision: 0 }\"\n                                        [min]=\"+filter.min\"\n                                        [max]=\"+filter.max\"\n                                        autocomplete=\"off\"\n                                    />\n                                    @if (form.get(filter.id)?.get('from')?.dirty) {\n                                        <button\n                                            tuiIconButton\n                                            type=\"button\"\n                                            size=\"xs\"\n                                            appearance=\"icon\"\n                                            iconStart=\"@tui.x\"\n                                            (click)=\"resetRangeFrom(filter.id, filter.min)\"\n                                        ></button>\n                                    }\n                                </tui-textfield>\n                            </label>\n                            <label\n                                tuiLabel\n                                class=\"min-w-0 flex-1\"\n                            >\n                                \u0414\u043E\n                                <tui-textfield [tuiTextfieldCleaner]=\"false\">\n                                    <input\n                                        scSelectOnFocusin\n                                        tuiInputNumber\n                                        formControlName=\"to\"\n                                        [tuiNumberFormat]=\"{ precision: 0 }\"\n                                        [min]=\"+filter.min\"\n                                        [max]=\"+filter.max\"\n                                        autocomplete=\"off\"\n                                    />\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"] }]
+            args: [{ standalone: true, selector: 'sc-catalog-filters', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, TuiTextfield, ScSelectOnFocusinDirective, ScCatalogFilterCollapsibleComponent, TuiLabel, TuiCheckbox, 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)\"\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)\"\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 */
@@ -8057,11 +8087,11 @@ class ScBrandsListComponent {
         this.items = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScBrandsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ScBrandsListComponent, selector: "sc-brands-list", inputs: { items: "items" }, ngImport: i0, template: "<!-- TODO: TASK:[#9893] \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0440\u0430\u0437\u0434\u0435\u043B\u0435\u043D\u0438\u0435 \u043D\u0430 \u043D\u0435\u0441\u043A\u043E\u043B\u044C\u043A\u043E \u0441\u0442\u0440\u043E\u043A \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0439, \u043F\u0440\u0438 \u0443\u0432\u0435\u043B\u0438\u0447\u0435\u043D\u0438\u0438 \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0431\u0440\u0435\u043D\u0434\u043E\u0432. -->\n<div class=\"flex flex-col gap-4\">\n    <div class=\"relative\">\n        <div class=\"absolute -left-1 top-0 z-10 block h-full w-12 bg-gradient-to-r from-tui-base-01 to-transparent\"></div>\n        <div class=\"flex select-none items-center justify-center gap-12 overflow-hidden contrast-150 saturate-0\">\n            <div\n                *ngFor=\"let _ of [].constructor(3)\"\n                class=\"animate-scroll-slow scroll-slow-revert flex shrink-0 items-center gap-16\"\n            >\n                <div\n                    *tuiRepeatTimes=\"let index of items.length - (items.length - (items.length % 2)) / 2\"\n                    class=\"flex items-center justify-center\"\n                >\n                    @let brandItem = items[index + (items.length - (items.length % 2)) / 2];\n                    <img\n                        [src]=\"brandItem.src\"\n                        [alt]=\"items[index].alt\"\n                        [attr.width]=\"brandItem.width\"\n                        [attr.height]=\"brandItem.height\"\n                    />\n                </div>\n            </div>\n        </div>\n        <div class=\"absolute -right-1 top-0 z-10 block h-full w-12 bg-gradient-to-r from-transparent to-tui-base-01\"></div>\n    </div>\n    <div class=\"relative\">\n        <div class=\"absolute -left-1 top-0 z-10 block h-full w-12 bg-gradient-to-r from-tui-base-01 to-transparent\"></div>\n        <div class=\"flex select-none items-center justify-center gap-12 overflow-hidden contrast-150 saturate-0\">\n            <div\n                *ngFor=\"let _ of [].constructor(3)\"\n                class=\"animate-scroll-slow flex shrink-0 items-center gap-16\"\n            >\n                <div\n                    *tuiRepeatTimes=\"let index of (items.length - (items.length % 2)) / 2\"\n                    class=\"flex items-center justify-center\"\n                >\n                    @let brandItem = items[index];\n                    <img\n                        [src]=\"brandItem.src\"\n                        [alt]=\"brandItem.alt\"\n                        [attr.width]=\"brandItem.width\"\n                        [attr.height]=\"brandItem.height\"\n                    />\n                </div>\n            </div>\n        </div>\n        <div class=\"absolute -right-1 top-0 z-10 block h-full w-12 bg-gradient-to-r from-transparent to-tui-base-01\"></div>\n    </div>\n</div>\n", styles: [".scroll-slow-revert{animation-direction:reverse!important;animation-delay:-15s!important}@keyframes scroll-slow{0%{transform:translate(0)}to{transform:translate(calc(-100% - 3rem))}}.animate-scroll-slow{animation:scroll-slow 30s linear infinite}\n"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.TuiRepeatTimes, selector: "[tuiRepeatTimes][tuiRepeatTimesOf]", inputs: ["tuiRepeatTimesOf"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ScBrandsListComponent, selector: "sc-brands-list", inputs: { items: "items" }, ngImport: i0, template: "<!-- TODO: TASK:[#9893] \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0440\u0430\u0437\u0434\u0435\u043B\u0435\u043D\u0438\u0435 \u043D\u0430 \u043D\u0435\u0441\u043A\u043E\u043B\u044C\u043A\u043E \u0441\u0442\u0440\u043E\u043A \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0439, \u043F\u0440\u0438 \u0443\u0432\u0435\u043B\u0438\u0447\u0435\u043D\u0438\u0438 \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0431\u0440\u0435\u043D\u0434\u043E\u0432. -->\n<div class=\"flex flex-col gap-4\">\n    <div class=\"relative\">\n        <div class=\"absolute -left-1 top-0 z-10 block h-full w-12 bg-gradient-to-r from-tui-base-01 to-transparent\"></div>\n        <div class=\"flex select-none items-center justify-center gap-12 overflow-hidden contrast-150 saturate-0\">\n            <div\n                *ngFor=\"let _ of [].constructor(3)\"\n                class=\"animate-scroll-slow scroll-slow-revert flex shrink-0 items-center gap-16\"\n            >\n                <div\n                    *tuiRepeatTimes=\"let index of items.length - (items.length - (items.length % 2)) / 2\"\n                    class=\"flex items-center justify-center\"\n                >\n                    @let brandItem = items[index + (items.length - (items.length % 2)) / 2];\n                    <picture>\n                        @if (brandItem.webp) {\n                            <source\n                                type=\"image/webp\"\n                                [srcset]=\"brandItem.webp\"\n                            />\n                        }\n                        <img\n                            [src]=\"brandItem.src\"\n                            [alt]=\"items[index].alt\"\n                            [attr.width]=\"brandItem.width\"\n                            [attr.height]=\"brandItem.height\"\n                        />\n                    </picture>\n                </div>\n            </div>\n        </div>\n        <div class=\"absolute -right-1 top-0 z-10 block h-full w-12 bg-gradient-to-r from-transparent to-tui-base-01\"></div>\n    </div>\n    <div class=\"relative\">\n        <div class=\"absolute -left-1 top-0 z-10 block h-full w-12 bg-gradient-to-r from-tui-base-01 to-transparent\"></div>\n        <div class=\"flex select-none items-center justify-center gap-12 overflow-hidden contrast-150 saturate-0\">\n            <div\n                *ngFor=\"let _ of [].constructor(3)\"\n                class=\"animate-scroll-slow flex shrink-0 items-center gap-16\"\n            >\n                <div\n                    *tuiRepeatTimes=\"let index of (items.length - (items.length % 2)) / 2\"\n                    class=\"flex items-center justify-center\"\n                >\n                    @let brandItem = items[index];\n                    <picture>\n                        @if (brandItem.webp) {\n                            <source\n                                type=\"image/webp\"\n                                [srcset]=\"brandItem.webp\"\n                            />\n                        }\n                        <img\n                            [src]=\"brandItem.src\"\n                            [alt]=\"brandItem.alt\"\n                            [attr.width]=\"brandItem.width\"\n                            [attr.height]=\"brandItem.height\"\n                        />\n                    </picture>\n                </div>\n            </div>\n        </div>\n        <div class=\"absolute -right-1 top-0 z-10 block h-full w-12 bg-gradient-to-r from-transparent to-tui-base-01\"></div>\n    </div>\n</div>\n", styles: [".scroll-slow-revert{animation-direction:reverse!important;animation-delay:-15s!important}@keyframes scroll-slow{0%{transform:translate(0)}to{transform:translate(calc(-100% - 3rem))}}.animate-scroll-slow{animation:scroll-slow 30s linear infinite}\n"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.TuiRepeatTimes, selector: "[tuiRepeatTimes][tuiRepeatTimesOf]", inputs: ["tuiRepeatTimesOf"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScBrandsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-brands-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- TODO: TASK:[#9893] \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0440\u0430\u0437\u0434\u0435\u043B\u0435\u043D\u0438\u0435 \u043D\u0430 \u043D\u0435\u0441\u043A\u043E\u043B\u044C\u043A\u043E \u0441\u0442\u0440\u043E\u043A \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0439, \u043F\u0440\u0438 \u0443\u0432\u0435\u043B\u0438\u0447\u0435\u043D\u0438\u0438 \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0431\u0440\u0435\u043D\u0434\u043E\u0432. -->\n<div class=\"flex flex-col gap-4\">\n    <div class=\"relative\">\n        <div class=\"absolute -left-1 top-0 z-10 block h-full w-12 bg-gradient-to-r from-tui-base-01 to-transparent\"></div>\n        <div class=\"flex select-none items-center justify-center gap-12 overflow-hidden contrast-150 saturate-0\">\n            <div\n                *ngFor=\"let _ of [].constructor(3)\"\n                class=\"animate-scroll-slow scroll-slow-revert flex shrink-0 items-center gap-16\"\n            >\n                <div\n                    *tuiRepeatTimes=\"let index of items.length - (items.length - (items.length % 2)) / 2\"\n                    class=\"flex items-center justify-center\"\n                >\n                    @let brandItem = items[index + (items.length - (items.length % 2)) / 2];\n                    <img\n                        [src]=\"brandItem.src\"\n                        [alt]=\"items[index].alt\"\n                        [attr.width]=\"brandItem.width\"\n                        [attr.height]=\"brandItem.height\"\n                    />\n                </div>\n            </div>\n        </div>\n        <div class=\"absolute -right-1 top-0 z-10 block h-full w-12 bg-gradient-to-r from-transparent to-tui-base-01\"></div>\n    </div>\n    <div class=\"relative\">\n        <div class=\"absolute -left-1 top-0 z-10 block h-full w-12 bg-gradient-to-r from-tui-base-01 to-transparent\"></div>\n        <div class=\"flex select-none items-center justify-center gap-12 overflow-hidden contrast-150 saturate-0\">\n            <div\n                *ngFor=\"let _ of [].constructor(3)\"\n                class=\"animate-scroll-slow flex shrink-0 items-center gap-16\"\n            >\n                <div\n                    *tuiRepeatTimes=\"let index of (items.length - (items.length % 2)) / 2\"\n                    class=\"flex items-center justify-center\"\n                >\n                    @let brandItem = items[index];\n                    <img\n                        [src]=\"brandItem.src\"\n                        [alt]=\"brandItem.alt\"\n                        [attr.width]=\"brandItem.width\"\n                        [attr.height]=\"brandItem.height\"\n                    />\n                </div>\n            </div>\n        </div>\n        <div class=\"absolute -right-1 top-0 z-10 block h-full w-12 bg-gradient-to-r from-transparent to-tui-base-01\"></div>\n    </div>\n</div>\n", styles: [".scroll-slow-revert{animation-direction:reverse!important;animation-delay:-15s!important}@keyframes scroll-slow{0%{transform:translate(0)}to{transform:translate(calc(-100% - 3rem))}}.animate-scroll-slow{animation:scroll-slow 30s linear infinite}\n"] }]
+            args: [{ selector: 'sc-brands-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- TODO: TASK:[#9893] \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0440\u0430\u0437\u0434\u0435\u043B\u0435\u043D\u0438\u0435 \u043D\u0430 \u043D\u0435\u0441\u043A\u043E\u043B\u044C\u043A\u043E \u0441\u0442\u0440\u043E\u043A \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0439, \u043F\u0440\u0438 \u0443\u0432\u0435\u043B\u0438\u0447\u0435\u043D\u0438\u0438 \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0431\u0440\u0435\u043D\u0434\u043E\u0432. -->\n<div class=\"flex flex-col gap-4\">\n    <div class=\"relative\">\n        <div class=\"absolute -left-1 top-0 z-10 block h-full w-12 bg-gradient-to-r from-tui-base-01 to-transparent\"></div>\n        <div class=\"flex select-none items-center justify-center gap-12 overflow-hidden contrast-150 saturate-0\">\n            <div\n                *ngFor=\"let _ of [].constructor(3)\"\n                class=\"animate-scroll-slow scroll-slow-revert flex shrink-0 items-center gap-16\"\n            >\n                <div\n                    *tuiRepeatTimes=\"let index of items.length - (items.length - (items.length % 2)) / 2\"\n                    class=\"flex items-center justify-center\"\n                >\n                    @let brandItem = items[index + (items.length - (items.length % 2)) / 2];\n                    <picture>\n                        @if (brandItem.webp) {\n                            <source\n                                type=\"image/webp\"\n                                [srcset]=\"brandItem.webp\"\n                            />\n                        }\n                        <img\n                            [src]=\"brandItem.src\"\n                            [alt]=\"items[index].alt\"\n                            [attr.width]=\"brandItem.width\"\n                            [attr.height]=\"brandItem.height\"\n                        />\n                    </picture>\n                </div>\n            </div>\n        </div>\n        <div class=\"absolute -right-1 top-0 z-10 block h-full w-12 bg-gradient-to-r from-transparent to-tui-base-01\"></div>\n    </div>\n    <div class=\"relative\">\n        <div class=\"absolute -left-1 top-0 z-10 block h-full w-12 bg-gradient-to-r from-tui-base-01 to-transparent\"></div>\n        <div class=\"flex select-none items-center justify-center gap-12 overflow-hidden contrast-150 saturate-0\">\n            <div\n                *ngFor=\"let _ of [].constructor(3)\"\n                class=\"animate-scroll-slow flex shrink-0 items-center gap-16\"\n            >\n                <div\n                    *tuiRepeatTimes=\"let index of (items.length - (items.length % 2)) / 2\"\n                    class=\"flex items-center justify-center\"\n                >\n                    @let brandItem = items[index];\n                    <picture>\n                        @if (brandItem.webp) {\n                            <source\n                                type=\"image/webp\"\n                                [srcset]=\"brandItem.webp\"\n                            />\n                        }\n                        <img\n                            [src]=\"brandItem.src\"\n                            [alt]=\"brandItem.alt\"\n                            [attr.width]=\"brandItem.width\"\n                            [attr.height]=\"brandItem.height\"\n                        />\n                    </picture>\n                </div>\n            </div>\n        </div>\n        <div class=\"absolute -right-1 top-0 z-10 block h-full w-12 bg-gradient-to-r from-transparent to-tui-base-01\"></div>\n    </div>\n</div>\n", styles: [".scroll-slow-revert{animation-direction:reverse!important;animation-delay:-15s!important}@keyframes scroll-slow{0%{transform:translate(0)}to{transform:translate(calc(-100% - 3rem))}}.animate-scroll-slow{animation:scroll-slow 30s linear infinite}\n"] }]
         }], propDecorators: { items: [{
                 type: Input
             }] } });