@snabcentr/client-ui 4.9.2 → 4.11.0

package/fesm2022/snabcentr-client-ui.mjs

@@ -1,20 +1,20 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, Injectable, NgZone, signal, EventEmitter, ChangeDetectorRef, Directive, Input, Output, Pipe, ElementRef, HostListener, Renderer2, ContentChildren, NgModule, input, computed, Component, ChangeDetectionStrategy, Inject, HostBinding, model, output, SkipSelf, DestroyRef, effect, ContentChild, ViewChild, viewChild, Optional, contentChild, TemplateRef, forwardRef } from '@angular/core';
 import * as i1 from '@snabcentr/client-core';
-import { ScContactsService, ScUserService, ScLocationsService, ScAuthService, SEARCH_TERM, ScUnitsHelper, ScImageHelper, SC_PATH_IMAGE_NOT_FOUND, ScImage, ScPhoneService, ScUserMetrikaService, ScUserMetrikaGoalsEnum, IS_RUNNING_ON_TERMINAL, ScVCardService, ScVerificationService, ScISuggestionType, SC_MIN_LENGTH_SEARCH_TERM, ScConvertersService, ScOpfList, ScReferencesService, ScContragentService, ScBannerService, ScMediaImageTransformerPipe, ScCartService, ScUploadedFile, loadingPlaceholder, SC_ORDER_LOADER, ScMimeTypes, ScCatalogService, SC_URLS, IS_SERVER, ScWarehouseService, SEARCH_TERM_PROVIDERS, ScPaginationService, SC_NEXT_PAGE_PAGINATION_CLICK, SC_PRODUCT_PAGINATION_OPTIONS, ScCatalogFilterService, ScIdOrSlugPipe, SC_CATEGORY_INFO, ScConfiguratorService, RESPONSE, ScIconTypesEnum, ScDocumentInfoTypesEnum, ScDeliveryAddressService, ScOrdersService, ScUIService, SC_USER_INFO as SC_USER_INFO$1, ScPaymentType, ScDeliveryType, TERMINAL_PROVIDERS, ScOrderDraftsService, ScRouteKeys, ScSeoService, scOrderIsLoaded, ScFrequentlyAskedQuestionsService, SchemaOrgFactory, SC_COMPANY_INFO, ScFeedbackService } from '@snabcentr/client-core';
+import { ScContactsService, ScUserService, ScLocationsService, ScAuthService, SEARCH_TERM, ScUnitsHelper, ScImageHelper, SC_PATH_IMAGE_NOT_FOUND, ScImage, ScPhoneService, ScUserMetrikaService, ScUserMetrikaGoalsEnum, IS_RUNNING_ON_TERMINAL, ScVCardService, ScVerificationService, ScISuggestionType, SC_MIN_LENGTH_SEARCH_TERM, ScConvertersService, ScOpfList, ScReferencesService, ScContragentService, ScBannerService, ScMediaImageTransformerPipe, ScCartService, ScUploadedFile, loadingPlaceholder, SC_ORDER_LOADER, ScMimeTypes, ScCatalogService, SC_URLS, IS_SERVER, ScWarehouseService, SEARCH_TERM_PROVIDERS, ScPaginationService, SC_NEXT_PAGE_PAGINATION_CLICK, SC_PRODUCT_PAGINATION_OPTIONS, ScCatalogFilterService, ScIdOrSlugPipe, SC_CATEGORY_INFO, ScConfiguratorService, RESPONSE, ScIconTypesEnum, ScDocumentInfoTypesEnum, ScDeliveryAddressService, ScOrdersService, ScUIService, SC_USER_INFO as SC_USER_INFO$1, ScPaymentType, ScDeliveryType, TERMINAL_PROVIDERS, ScOrderDraftsService, ScRouteKeys, ScSeoService, scOrderIsLoaded, SC_PAGE_QUERY_PARAM, ScFrequentlyAskedQuestionsService, SchemaOrgFactory, scGetPageQueryParamChanges, ScNewsService, SC_COMPANY_INFO, ScFeedbackService } from '@snabcentr/client-core';
 import * as i5$1 from 'rxjs';
 import { EMPTY, BehaviorSubject, switchMap, of, shareReplay, map, Subject, filter, tap, catchError, finalize, startWith, share, timer, scan, takeWhile, endWith, distinctUntilChanged, debounceTime, throwError, combineLatest, Observable, pairwise, Subscription, merge, skip, from, concatMap, noop, first, retry } from 'rxjs';
 import { WA_WINDOW } from '@ng-web-apis/common';
 import { takeUntilDestroyed, toSignal, outputFromObservable, toObservable } from '@angular/core/rxjs-interop';
 import * as i4$1 from '@taiga-ui/cdk';
-import { TuiDay, TuiTime, TuiValueTransformer, TUI_IS_MOBILE, tuiControlValue, tuiIsPresent, tuiMarkControlAsTouchedAndValidate, tuiIsFalsy, TuiAutoFocus, TuiRepeatTimes, TuiHovered, TuiDayRange, TuiMonth, tuiPure, tuiProvide, TuiValidationError, TUI_WINDOW_SIZE, TUI_TRUE_HANDLER } from '@taiga-ui/cdk';
+import { TuiDay, TuiTime, TuiValueTransformer, TUI_IS_MOBILE, tuiControlValue, tuiIsPresent, tuiMarkControlAsTouchedAndValidate, tuiIsFalsy, TuiAutoFocus, TuiRepeatTimes, TuiHovered, TuiDayRange, TuiMonth, tuiPure, tuiProvide, TuiValidationError, tuiClamp, TUI_WINDOW_SIZE, 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, TuiPagination, 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, 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';
 import * as i1$2 from '@taiga-ui/core';
-import { TuiButton, TuiDialog, TuiDialogService, TuiLink, TuiFallbackSrcPipe, TuiInitialsPipe, TuiIcon, TuiAppearance, TuiWithAppearance, TuiIcons, TuiWithIcons, TUI_DATA_LIST_HOST, tuiDropdownOptionsProvider, TuiLabel, TuiError, TuiLoader, TuiDataList, TuiNotification, TuiTextfield, TuiTitle, TuiNumberFormat, TuiHint, TUI_MONTHS, TuiScrollbar, tuiNumberFormatProvider, tuiItemsHandlersProvider, tuiTextfieldOptionsProvider, tuiHintOptionsProvider, TuiFormatNumberPipe, TuiHintDriver, TuiHintHover, TuiHintPosition, TuiHintDirective, TuiDataListComponent, TuiOption, TUI_BUTTON_OPTIONS, TUI_BUTTON_DEFAULT_OPTIONS, TuiSurface, tuiFadeIn } from '@taiga-ui/core';
+import { TuiButton, TuiDialog, TuiDialogService, TuiLink, TuiFallbackSrcPipe, TuiInitialsPipe, TuiIcon, TuiAppearance, TuiWithAppearance, TuiIcons, TuiWithIcons, TUI_DATA_LIST_HOST, tuiDropdownOptionsProvider, TuiLabel, TuiError, TuiLoader, TuiDataList, TuiNotification, TuiTextfield, TuiTitle, TuiNumberFormat, TuiHint, TUI_MONTHS, TuiScrollbar, tuiNumberFormatProvider, tuiItemsHandlersProvider, tuiTextfieldOptionsProvider, tuiHintOptionsProvider, TuiFormatNumberPipe, TuiHintDriver, TuiHintHover, TuiHintPosition, TuiHintDirective, TuiDataListComponent, TuiOption, TUI_BUTTON_OPTIONS, TUI_BUTTON_DEFAULT_OPTIONS, TUI_SPIN_ICONS, TuiSurface, tuiFadeIn } from '@taiga-ui/core';
 import { isValidPhoneNumber } from 'libphonenumber-js/max';
 import * as i4 from '@taiga-ui/legacy/components/primitive-textfield';
 import * as i3 from '@taiga-ui/legacy';
@@ -9454,6 +9454,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }] });
 
+/**
+ * Наименование query-параметра идентификатора группы часто задаваемых вопросов.
+ */
+const SC_FAQ_GROUP_QUERY_PARAM = 'group';
+
 /**
  * Компонент часто задаваемых вопросов.
  */
@@ -9496,48 +9501,178 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ], host: { ngSkipHydration: 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<tui-loader\n    [showLoader]=\"showLoading()\"\n    [overlay]=\"true\"\n>\n    <tui-accordion\n        class=\"accordion\"\n        [closeOthers]=\"false\"\n    >\n        @for (item of items(); track item.id) {\n            <button\n                [tuiAccordion]=\"isServer\"\n                class=\"!whitespace-normal !text-body-m-bold\"\n            >\n                {{ item.question }}\n            </button>\n            <tui-expand>\n                <div [innerHTML]=\"item.answer\"></div>\n            </tui-expand>\n        }\n    </tui-accordion>\n</tui-loader>\n", styles: [".accordion{border-radius:0}.accordion,.accordion[data-size=s],.accordion[data-size=m],.accordion[data-size=l],.accordion .tui-list{font:inherit}.accordion [tuiAccordion]{border-block:1px solid var(--tui-border-normal);border-block-end-color:#fff!important;font-weight:400;border-color:var(--tui-border-normal);mask:none;block-size:auto;padding-block:.5rem;min-block-size:var(--t-size)}.accordion [tuiAccordion]._open{border-block-end-color:var(--tui-border-normal)!important}.accordion tui-expand,.accordion [tuiAccordion]{box-shadow:none;white-space:normal}\n"] }]
         }] });
 
+/**
+ * Возвращает query-параметры ссылки на группу часто задаваемых вопросов.
+ *
+ * При смене группы пагинация сбрасывается на первую страницу.
+ *
+ * @param group Группа вопросов.
+ */
+const scGetFaqGroupQueryParams = (group) => ({
+    [SC_FAQ_GROUP_QUERY_PARAM]: group.id ?? null,
+    [SC_PAGE_QUERY_PARAM]: null,
+});
+
 /**
  * Компонент выбора группы часто задаваемых вопросов.
+ *
+ * TODO: [TAIGA:5]: Заменить legacy tui-select и tuiItemsHandlersProvider на актуальные аналоги.
  */
 class ScFrequentlyAskedQuestionsGroupSelectorComponent {
+    /**
+     * Инициализирует экземпляр класса {@link ScFrequentlyAskedQuestionsGroupSelectorComponent}.
+     */
     constructor() {
+        /**
+         * Сервис маршрутизации.
+         */
+        this.router = inject(Router);
+        /**
+         * Активный маршрут.
+         */
+        this.route = inject(ActivatedRoute);
         /**
          * {@link Observable} списка группы часто задаваемых вопросов.
          */
-        this.groups$ = inject(ScFrequentlyAskedQuestionsService).groups$.pipe(first(), tap((groups) => {
-            if (groups.length > 0) {
-                this.groupControl.setValue(groups[0]);
-            }
-        }));
+        this.groups$ = inject(ScFrequentlyAskedQuestionsService).groups$;
         /**
          * {@link FormControl} выбранной группы.
          */
         this.groupControl = new FormControl(null);
         /**
-         * {@link OutputRef} сигнал изменения идентификатора группы.
+         * {@link InputSignal} идентификатора выбранной группы.
          */
-        this.groupIdChange = outputFromObservable(this.groupControl.valueChanges.pipe(filter(tuiIsPresent), 
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        map((group) => group.id)));
+        this.selectedGroupId = input(null);
         /**
          * Формат отображения. 'list' - в виде списка,  'select' в виде выпадающего списка.
          */
         this.viewMode = input('list');
+        /**
+         * Возвращает query-параметры ссылки на группу вопросов.
+         */
+        this.getGroupQueryParams = scGetFaqGroupQueryParams;
+        // Синхронизирует значение выпадающего списка с выбранной группой.
+        combineLatest([this.groups$, toObservable(this.selectedGroupId)])
+            .pipe(takeUntilDestroyed())
+            .subscribe(([groups, selectedGroupId]) => {
+            this.groupControl.setValue(groups.find((group) => (group.id ?? null) === selectedGroupId) ?? null, { emitEvent: false });
+        });
+        // Выбор группы в выпадающем списке переводит на адрес этой группы.
+        this.groupControl.valueChanges.pipe(filter(tuiIsPresent), takeUntilDestroyed()).subscribe((group) => {
+            this.router
+                .navigate([], {
+                relativeTo: this.route,
+                queryParams: this.getGroupQueryParams(group),
+                queryParamsHandling: 'merge',
+            })
+                .catch(noop);
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScFrequentlyAskedQuestionsGroupSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ScFrequentlyAskedQuestionsGroupSelectorComponent, isStandalone: true, selector: "sc-frequently-asked-questions-group-selector", inputs: { viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { groupIdChange: "groupIdChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ScFrequentlyAskedQuestionsGroupSelectorComponent, isStandalone: true, selector: "sc-frequently-asked-questions-group-selector", inputs: { selectedGroupId: { classPropertyName: "selectedGroupId", publicName: "selectedGroupId", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             tuiItemsHandlersProvider$1({
                 stringify: (item) => item.name,
             }),
-        ], ngImport: i0, template: "@let groups = groups$ | async;\n\n@if (groups && groups.length) {\n    @switch (viewMode()) {\n        @case ('list') {\n            <div class=\"flex flex-col items-center gap-3 rounded-xl p-4 shadow-sc\">\n                <div class=\"flex w-full flex-col gap-2\">\n                    @for (item of groups; track $index) {\n                        <button\n                            tuiButton\n                            size=\"xs\"\n                            [tuiAppearanceState]=\"groupControl.value === item ? 'hover' : null\"\n                            [disabled]=\"groupControl.value === item\"\n                            (click)=\"groupControl.patchValue(item)\"\n                            appearance=\"flat-grayscale\"\n                            class=\"!justify-start !text-body-s-bold\"\n                        >\n                            {{ item.name }}\n                        </button>\n                    }\n                </div>\n            </div>\n        }\n\n        @case ('select') {\n            <form>\n                <tui-select\n                    [formControl]=\"groupControl\"\n                    [tuiTextfieldLabelOutside]=\"true\"\n                >\n                    <tui-data-list-wrapper\n                        *tuiDataList\n                        [items]=\"groups\"\n                    />\n                </tui-select>\n            </form>\n        }\n    }\n}\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TuiSelectModule }, { kind: "component", type: i3.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { kind: "directive", type: i3.TuiSelectDirective, selector: "tui-select" }, { kind: "directive", type: i3$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { kind: "component", type: i3$3.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels]), tui-data-list-wrapper:not([labels])[new]", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i3.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "@let groups = groups$ | async;\n\n@if (groups && groups.length) {\n    @switch (viewMode()) {\n        @case ('list') {\n            <div class=\"flex flex-col items-center gap-3 rounded-xl p-4 shadow-sc\">\n                <div class=\"flex w-full flex-col gap-2\">\n                    @for (item of groups; track $index) {\n                        @let isSelected = item.id === selectedGroupId();\n\n                        <a\n                            tuiButton\n                            size=\"xs\"\n                            [tuiAppearanceState]=\"isSelected ? 'hover' : null\"\n                            [attr.aria-current]=\"isSelected ? 'page' : null\"\n                            [class.pointer-events-none]=\"isSelected\"\n                            [routerLink]=\"[]\"\n                            [queryParams]=\"getGroupQueryParams(item)\"\n                            queryParamsHandling=\"merge\"\n                            appearance=\"flat-grayscale\"\n                            class=\"!justify-start !text-body-s-bold\"\n                        >\n                            {{ item.name }}\n                        </a>\n                    }\n                </div>\n            </div>\n        }\n\n        @case ('select') {\n            <form>\n                <tui-select\n                    [formControl]=\"groupControl\"\n                    [tuiTextfieldLabelOutside]=\"true\"\n                >\n                    <tui-data-list-wrapper\n                        *tuiDataList\n                        [items]=\"groups\"\n                    />\n                </tui-select>\n            </form>\n        }\n    }\n}\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TuiSelectModule }, { kind: "component", type: i3.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { kind: "directive", type: i3.TuiSelectDirective, selector: "tui-select" }, { kind: "directive", type: i3$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { kind: "component", type: i3$3.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels]), tui-data-list-wrapper:not([labels])[new]", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i3.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScFrequentlyAskedQuestionsGroupSelectorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'sc-frequently-asked-questions-group-selector', imports: [AsyncPipe, TuiSelectModule, TuiTextfieldControllerModule, ReactiveFormsModule, TuiDataList, TuiDataListWrapper, NgIf, TuiButton, FormsModule], providers: [
+            args: [{ standalone: true, selector: 'sc-frequently-asked-questions-group-selector', imports: [AsyncPipe, TuiSelectModule, TuiTextfieldControllerModule, ReactiveFormsModule, TuiDataList, TuiDataListWrapper, NgIf, TuiButton, FormsModule, RouterLink], providers: [
                         tuiItemsHandlersProvider$1({
                             stringify: (item) => item.name,
                         }),
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let groups = groups$ | async;\n\n@if (groups && groups.length) {\n    @switch (viewMode()) {\n        @case ('list') {\n            <div class=\"flex flex-col items-center gap-3 rounded-xl p-4 shadow-sc\">\n                <div class=\"flex w-full flex-col gap-2\">\n                    @for (item of groups; track $index) {\n                        <button\n                            tuiButton\n                            size=\"xs\"\n                            [tuiAppearanceState]=\"groupControl.value === item ? 'hover' : null\"\n                            [disabled]=\"groupControl.value === item\"\n                            (click)=\"groupControl.patchValue(item)\"\n                            appearance=\"flat-grayscale\"\n                            class=\"!justify-start !text-body-s-bold\"\n                        >\n                            {{ item.name }}\n                        </button>\n                    }\n                </div>\n            </div>\n        }\n\n        @case ('select') {\n            <form>\n                <tui-select\n                    [formControl]=\"groupControl\"\n                    [tuiTextfieldLabelOutside]=\"true\"\n                >\n                    <tui-data-list-wrapper\n                        *tuiDataList\n                        [items]=\"groups\"\n                    />\n                </tui-select>\n            </form>\n        }\n    }\n}\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let groups = groups$ | async;\n\n@if (groups && groups.length) {\n    @switch (viewMode()) {\n        @case ('list') {\n            <div class=\"flex flex-col items-center gap-3 rounded-xl p-4 shadow-sc\">\n                <div class=\"flex w-full flex-col gap-2\">\n                    @for (item of groups; track $index) {\n                        @let isSelected = item.id === selectedGroupId();\n\n                        <a\n                            tuiButton\n                            size=\"xs\"\n                            [tuiAppearanceState]=\"isSelected ? 'hover' : null\"\n                            [attr.aria-current]=\"isSelected ? 'page' : null\"\n                            [class.pointer-events-none]=\"isSelected\"\n                            [routerLink]=\"[]\"\n                            [queryParams]=\"getGroupQueryParams(item)\"\n                            queryParamsHandling=\"merge\"\n                            appearance=\"flat-grayscale\"\n                            class=\"!justify-start !text-body-s-bold\"\n                        >\n                            {{ item.name }}\n                        </a>\n                    }\n                </div>\n            </div>\n        }\n\n        @case ('select') {\n            <form>\n                <tui-select\n                    [formControl]=\"groupControl\"\n                    [tuiTextfieldLabelOutside]=\"true\"\n                >\n                    <tui-data-list-wrapper\n                        *tuiDataList\n                        [items]=\"groups\"\n                    />\n                </tui-select>\n            </form>\n        }\n    }\n}\n" }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Компонент пагинации, в котором страницы являются ссылками с номером страницы в query-параметрах.
+ *
+ * Ссылки позволяют переходить между страницами при отключенном JavaScript и корректно работают при SSR.
+ * Внешний вид повторяет tui-pagination из @taiga-ui/kit.
+ *
+ * TODO: [TAIGA:5]: Проверить, появилась ли в tui-pagination поддержка ссылок, и заменить компонент на неё.
+ */
+class ScPaginationLinksComponent {
+    constructor() {
+        /**
+         * Иконки стрелок переключения страниц.
+         */
+        this.icons = inject(TUI_SPIN_ICONS);
+        /**
+         * {@link Observable} подписей стрелок переключения страниц.
+         */
+        this.texts$ = inject(TUI_PAGINATION_TEXTS);
+        /**
+         * {@link InputSignal} общего количества страниц.
+         */
+        this.length = input.required();
+        /**
+         * {@link InputSignal} номера текущей страницы, начиная с единицы.
+         */
+        this.index = input.required();
+        /**
+         * {@link InputSignal} наименования query-параметра, в котором хранится номер страницы.
+         */
+        this.queryParam = input(SC_PAGE_QUERY_PARAM);
+        /**
+         * {@link InputSignal} количества страниц, отображаемых по обе стороны от текущей.
+         */
+        this.activePadding = input(1);
+        /**
+         * {@link InputSignal} количества страниц, отображаемых по краям.
+         */
+        this.sidePadding = input(1);
+        /**
+         * {@link Signal} номеров отображаемых страниц, где `null` - разделитель пропущенных страниц.
+         *
+         * Состав страниц рассчитывается так же, как в tui-pagination: количество отображаемых элементов постоянно,
+         * а окно вокруг текущей страницы расширяется у краёв списка.
+         */
+        this.pages = computed(() => {
+            const length = this.length();
+            const sidePadding = this.sidePadding();
+            // Половина элементов: страницы у края, разделитель и страницы вокруг текущей.
+            const maxHalfLength = sidePadding + 1 + this.activePadding();
+            const maxElementsLength = maxHalfLength * 2 + 1;
+            const elementsLength = Math.min(length, maxElementsLength);
+            const lastIndex = length - 1;
+            const index = this.index() - 1;
+            const reverseIndex = lastIndex - index;
+            const hasCollapsedItems = (value) => length > maxElementsLength && value > maxHalfLength;
+            return Array.from({ length: elementsLength }, (_, elementIndex) => {
+                const reverseElementIndex = elementsLength - 1 - elementIndex;
+                if (elementIndex < sidePadding) {
+                    return elementIndex + 1;
+                }
+                if (elementIndex === sidePadding && hasCollapsedItems(index)) {
+                    return null;
+                }
+                if (reverseElementIndex < sidePadding) {
+                    return lastIndex - reverseElementIndex + 1;
+                }
+                if (reverseElementIndex === sidePadding && hasCollapsedItems(reverseIndex)) {
+                    return null;
+                }
+                return tuiClamp(index - maxHalfLength + elementIndex, elementIndex, lastIndex - reverseElementIndex) + 1;
+            });
+        });
+    }
+    /**
+     * Возвращает query-параметры ссылки на страницу.
+     *
+     * Для первой страницы параметр удаляется, чтобы её адрес совпадал с адресом страницы без пагинации.
+     *
+     * @param page Номер страницы.
+     */
+    getPageQueryParams(page) {
+        return { [this.queryParam()]: page > 1 ? page : null };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScPaginationLinksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ScPaginationLinksComponent, isStandalone: true, selector: "sc-pagination-links", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, queryParam: { classPropertyName: "queryParam", publicName: "queryParam", isSignal: true, isRequired: false, transformFunction: null }, activePadding: { classPropertyName: "activePadding", publicName: "activePadding", isSignal: true, isRequired: false, transformFunction: null }, sidePadding: { classPropertyName: "sidePadding", publicName: "sidePadding", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let texts = texts$ | async;\n\n@if (texts) {\n    <div class=\"t-content\">\n        @if (index() > 1) {\n            <a\n                tuiIconButton\n                size=\"s\"\n                appearance=\"flat\"\n                tabIndex=\"-1\"\n                class=\"t-button\"\n                [iconStart]=\"icons.decrement\"\n                [routerLink]=\"[]\"\n                [queryParams]=\"getPageQueryParams(index() - 1)\"\n                queryParamsHandling=\"merge\"\n            >\n                {{ texts[0] }}\n            </a>\n        } @else {\n            <button\n                tuiIconButton\n                size=\"s\"\n                appearance=\"flat\"\n                type=\"button\"\n                tabIndex=\"-1\"\n                class=\"t-button\"\n                [iconStart]=\"icons.decrement\"\n                [disabled]=\"true\"\n            >\n                {{ texts[0] }}\n            </button>\n        }\n\n        @for (page of pages(); track $index) {\n            @if (page) {\n                <a\n                    automation-id=\"sc-pagination-links__element\"\n                    tuiButton\n                    size=\"s\"\n                    class=\"t-button\"\n                    [appearance]=\"page === index() ? 'primary' : 'flat'\"\n                    [attr.aria-current]=\"page === index() ? 'page' : null\"\n                    [routerLink]=\"[]\"\n                    [queryParams]=\"getPageQueryParams(page)\"\n                    queryParamsHandling=\"merge\"\n                >\n                    {{ page }}\n                </a>\n            } @else {\n                <div class=\"t-dots\"></div>\n            }\n        }\n\n        @if (index() < length()) {\n            <a\n                tuiIconButton\n                size=\"s\"\n                appearance=\"flat\"\n                tabIndex=\"-1\"\n                class=\"t-button\"\n                [iconStart]=\"icons.increment\"\n                [routerLink]=\"[]\"\n                [queryParams]=\"getPageQueryParams(index() + 1)\"\n                queryParamsHandling=\"merge\"\n            >\n                {{ texts[1] }}\n            </a>\n        } @else {\n            <button\n                tuiIconButton\n                size=\"s\"\n                appearance=\"flat\"\n                type=\"button\"\n                tabIndex=\"-1\"\n                class=\"t-button\"\n                [iconStart]=\"icons.increment\"\n                [disabled]=\"true\"\n            >\n                {{ texts[1] }}\n            </button>\n        }\n    </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font:var(--tui-font-text-s);color:var(--tui-text-primary);text-align:center}.t-content{display:flex;justify-content:center}.t-button{flex-shrink:0;margin:0 .125rem}.t-button[tuiButton]{min-inline-size:var(--tui-height-s);padding:0 .5rem}.t-button:first-child{margin-inline-start:0}.t-button:last-child{margin-inline-end:0}.t-dots{flex-shrink:0;inline-size:var(--tui-height-s);block-size:var(--tui-height-s);line-height:var(--tui-height-s);margin:0 .125rem;color:var(--tui-text-action);text-align:center;cursor:default}.t-dots:before{content:\"\\2026\"}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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: ScPaginationLinksComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'sc-pagination-links', imports: [AsyncPipe, RouterLink, TuiButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let texts = texts$ | async;\n\n@if (texts) {\n    <div class=\"t-content\">\n        @if (index() > 1) {\n            <a\n                tuiIconButton\n                size=\"s\"\n                appearance=\"flat\"\n                tabIndex=\"-1\"\n                class=\"t-button\"\n                [iconStart]=\"icons.decrement\"\n                [routerLink]=\"[]\"\n                [queryParams]=\"getPageQueryParams(index() - 1)\"\n                queryParamsHandling=\"merge\"\n            >\n                {{ texts[0] }}\n            </a>\n        } @else {\n            <button\n                tuiIconButton\n                size=\"s\"\n                appearance=\"flat\"\n                type=\"button\"\n                tabIndex=\"-1\"\n                class=\"t-button\"\n                [iconStart]=\"icons.decrement\"\n                [disabled]=\"true\"\n            >\n                {{ texts[0] }}\n            </button>\n        }\n\n        @for (page of pages(); track $index) {\n            @if (page) {\n                <a\n                    automation-id=\"sc-pagination-links__element\"\n                    tuiButton\n                    size=\"s\"\n                    class=\"t-button\"\n                    [appearance]=\"page === index() ? 'primary' : 'flat'\"\n                    [attr.aria-current]=\"page === index() ? 'page' : null\"\n                    [routerLink]=\"[]\"\n                    [queryParams]=\"getPageQueryParams(page)\"\n                    queryParamsHandling=\"merge\"\n                >\n                    {{ page }}\n                </a>\n            } @else {\n                <div class=\"t-dots\"></div>\n            }\n        }\n\n        @if (index() < length()) {\n            <a\n                tuiIconButton\n                size=\"s\"\n                appearance=\"flat\"\n                tabIndex=\"-1\"\n                class=\"t-button\"\n                [iconStart]=\"icons.increment\"\n                [routerLink]=\"[]\"\n                [queryParams]=\"getPageQueryParams(index() + 1)\"\n                queryParamsHandling=\"merge\"\n            >\n                {{ texts[1] }}\n            </a>\n        } @else {\n            <button\n                tuiIconButton\n                size=\"s\"\n                appearance=\"flat\"\n                type=\"button\"\n                tabIndex=\"-1\"\n                class=\"t-button\"\n                [iconStart]=\"icons.increment\"\n                [disabled]=\"true\"\n            >\n                {{ texts[1] }}\n            </button>\n        }\n    </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font:var(--tui-font-text-s);color:var(--tui-text-primary);text-align:center}.t-content{display:flex;justify-content:center}.t-button{flex-shrink:0;margin:0 .125rem}.t-button[tuiButton]{min-inline-size:var(--tui-height-s);padding:0 .5rem}.t-button:first-child{margin-inline-start:0}.t-button:last-child{margin-inline-end:0}.t-dots{flex-shrink:0;inline-size:var(--tui-height-s);block-size:var(--tui-height-s);line-height:var(--tui-height-s);margin:0 .125rem;color:var(--tui-text-action);text-align:center;cursor:default}.t-dots:before{content:\"\\2026\"}\n"] }]
         }] });
 
 /**
@@ -9573,9 +9708,13 @@ class ScFrequentlyAskedQuestionsWithGroupsComponent {
          */
         this.router = inject(Router);
         /**
-         * Индекс первой страницы.
+         * Активный маршрут.
+         */
+        this.route = inject(ActivatedRoute);
+        /**
+         * Признак, что приложение запущено на сервере.
          */
-        this.firstPageIndex = 1;
+        this.isServer = inject(IS_SERVER);
         /**
          * Количество записей на странице пагинации.
          */
@@ -9585,13 +9724,15 @@ class ScFrequentlyAskedQuestionsWithGroupsComponent {
          */
         this.perPage$ = new BehaviorSubject(this.pageSizeOptions[0]);
         /**
-         * {@link BehaviorSubject} изменения номера страницы.
+         * {@link Observable} изменения номера страницы пагинации из query-параметров.
          */
-        this.page$ = new BehaviorSubject(this.firstPageIndex);
+        this.page$ = scGetPageQueryParamChanges();
         /**
-         * {@link BehaviorSubject} изменения идентификатора группы.
+         * {@link Observable} изменения идентификатора выбранной группы.
+         *
+         * Идентификатор берётся из query-параметров, а если параметр не задан - используется первая группа списка.
          */
-        this.groupId$ = new Subject();
+        this.groupId$ = combineLatest([this.route.queryParamMap, this.frequentlyAskedQuestionsService.groups$]).pipe(map(([params, groups]) => Number(params.get(SC_FAQ_GROUP_QUERY_PARAM)) || (groups[0]?.id ?? null)), distinctUntilChanged(), shareReplay({ refCount: true, bufferSize: 1 }));
         /**
          * Сигнал нажатия на кнопку "Задать вопрос".
          */
@@ -9602,7 +9743,7 @@ class ScFrequentlyAskedQuestionsWithGroupsComponent {
         this.request$ = combineLatest({
             page: this.page$,
             perPage: this.perPage$,
-            group: this.groupId$,
+            group: this.groupId$.pipe(filter(tuiIsPresent)),
             paginate: of(true),
         }).pipe(
         // Нулевой debounceTime для случая, когда меняются направление и поле сортировки одновременно.
@@ -9621,7 +9762,7 @@ class ScFrequentlyAskedQuestionsWithGroupsComponent {
         /**
          * {@link Observable} изменения номера страницы пагинации из данных пагинации запроса.
          */
-        this.currentPage$ = this.request$.pipe(filter(tuiIsPresent), map(({ meta }) => meta.currentPage - 1));
+        this.currentPage$ = this.request$.pipe(filter(tuiIsPresent), map(({ meta }) => meta.currentPage));
         /**
          * {@link Observable} изменения состояния загрузки данных.
          */
@@ -9633,33 +9774,99 @@ class ScFrequentlyAskedQuestionsWithGroupsComponent {
         /**
          * {@link Observable} изменения формата отображения фильтра групп.
          */
-        this.viewMode$ = inject(TUI_WINDOW_SIZE).pipe(map((rect) => (rect.width > 768 ? 'list' : 'select')));
-    }
-    /**
-     * Устанавливает данные пагинации.
-     *
-     * @param pageIndex Индекс страницы.
-     */
-    paginationChange(pageIndex) {
-        this.page$.next(pageIndex + 1);
-    }
-    /**
-     * Устанавливает идентификатор группы.
-     *
-     * @param id Идентификатор группы.
-     */
-    groupIdChange(id) {
-        this.groupId$.next(id);
-        this.paginationChange(0);
+        this.viewMode$ = this.isServer
+            ? of('list')
+            : inject(TUI_WINDOW_SIZE).pipe(map((rect) => (rect.width > 768 ? 'list' : 'select')));
+        /**
+         * Наименование query-параметра номера страницы пагинации.
+         */
+        this.pageQueryParam = SC_PAGE_QUERY_PARAM;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScFrequentlyAskedQuestionsWithGroupsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ScFrequentlyAskedQuestionsWithGroupsComponent, isStandalone: true, selector: "sc-frequently-asked-questions-with-groups", outputs: { clickSendQuestion: "clickSendQuestion" }, ngImport: i0, template: "@let items = data$ | async;\n@let pageCount = pageCount$ | async;\n@let viewMode = viewMode$ | async;\n\n<div\n    *ngIf=\"viewMode\"\n    class=\"flex gap-6\"\n    [class.flex-col]=\"viewMode === 'select'\"\n>\n    <div class=\"flex flex-col gap-7\">\n        <sc-frequently-asked-questions-group-selector\n            (groupIdChange)=\"groupIdChange($event)\"\n            [viewMode]=\"viewMode\"\n            class=\"shrink-0\"\n            [class.w-64]=\"viewMode !== 'select'\"\n        />\n\n        <button\n            *ngIf=\"viewMode === 'list'\"\n            tuiButton\n            size=\"m\"\n            type=\"button\"\n            iconStart=\"@tui.circle-help\"\n            appearance=\"secondary\"\n            (click)=\"clickSendQuestion.emit()\"\n            class=\"self-center\"\n        >\n            \u0417\u0430\u0434\u0430\u0442\u044C \u0432\u043E\u043F\u0440\u043E\u0441\n        </button>\n    </div>\n\n    <div class=\"grow\">\n        @if (items && items.length) {\n            <sc-frequently-asked-questions\n                [items]=\"items\"\n                [showLoading]=\"isLoading()\"\n            />\n\n            <tui-pagination\n                *ngIf=\"pageCount && pageCount > 1\"\n                [length]=\"pageCount\"\n                [index]=\"(currentPage$ | async) ?? 0\"\n                (indexChange)=\"paginationChange($event)\"\n                class=\"mt-4 !justify-items-center\"\n            />\n        } @else {\n            <p class=\"text-body-s-bold\">\u0421\u043F\u0438\u0441\u043E\u043A \u0432\u043E\u043F\u0440\u043E\u0441\u043E\u0432 \u043F\u0443\u0441\u0442</p>\n        }\n    </div>\n</div>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ScFrequentlyAskedQuestionsGroupSelectorComponent, selector: "sc-frequently-asked-questions-group-selector", inputs: ["viewMode"], outputs: ["groupIdChange"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: ScFrequentlyAskedQuestionsComponent, selector: "sc-frequently-asked-questions", inputs: ["items", "showLoading"] }, { kind: "component", type: TuiPagination, selector: "tui-pagination", inputs: ["length", "focusable", "size", "disabled", "activePadding", "sidePadding", "content", "index"], outputs: ["indexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ScFrequentlyAskedQuestionsWithGroupsComponent, isStandalone: true, selector: "sc-frequently-asked-questions-with-groups", outputs: { clickSendQuestion: "clickSendQuestion" }, host: { attributes: { "ngSkipHydration": "true" } }, ngImport: i0, template: "@let items = data$ | async;\n@let pageCount = pageCount$ | async;\n@let viewMode = viewMode$ | async;\n\n<div\n    *ngIf=\"viewMode\"\n    class=\"flex gap-6\"\n    [class.flex-col]=\"viewMode === 'select'\"\n>\n    <div class=\"flex flex-col gap-7\">\n        <sc-frequently-asked-questions-group-selector\n            [selectedGroupId]=\"groupId$ | async\"\n            [viewMode]=\"viewMode\"\n            class=\"shrink-0\"\n            [class.w-64]=\"viewMode !== 'select'\"\n        />\n\n        <button\n            *ngIf=\"viewMode === 'list'\"\n            tuiButton\n            size=\"m\"\n            type=\"button\"\n            iconStart=\"@tui.circle-help\"\n            appearance=\"secondary\"\n            (click)=\"clickSendQuestion.emit()\"\n            class=\"self-center\"\n        >\n            \u0417\u0430\u0434\u0430\u0442\u044C \u0432\u043E\u043F\u0440\u043E\u0441\n        </button>\n    </div>\n\n    <div class=\"grow\">\n        @if (items && items.length) {\n            <sc-frequently-asked-questions\n                [items]=\"items\"\n                [showLoading]=\"isLoading()\"\n            />\n\n            <sc-pagination-links\n                *ngIf=\"pageCount && pageCount > 1\"\n                [length]=\"pageCount\"\n                [index]=\"(currentPage$ | async) ?? 1\"\n                [queryParam]=\"pageQueryParam\"\n                class=\"mt-4\"\n            />\n        } @else {\n            <p class=\"text-body-s-bold\">\u0421\u043F\u0438\u0441\u043E\u043A \u0432\u043E\u043F\u0440\u043E\u0441\u043E\u0432 \u043F\u0443\u0441\u0442</p>\n        }\n    </div>\n</div>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ScFrequentlyAskedQuestionsGroupSelectorComponent, selector: "sc-frequently-asked-questions-group-selector", inputs: ["selectedGroupId", "viewMode"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: ScFrequentlyAskedQuestionsComponent, selector: "sc-frequently-asked-questions", inputs: ["items", "showLoading"] }, { kind: "component", type: ScPaginationLinksComponent, selector: "sc-pagination-links", inputs: ["length", "index", "queryParam", "activePadding", "sidePadding"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScFrequentlyAskedQuestionsWithGroupsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'sc-frequently-asked-questions-with-groups', imports: [AsyncPipe, NgIf, ScFrequentlyAskedQuestionsGroupSelectorComponent, TuiButton, ScFrequentlyAskedQuestionsComponent, TuiPagination], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let items = data$ | async;\n@let pageCount = pageCount$ | async;\n@let viewMode = viewMode$ | async;\n\n<div\n    *ngIf=\"viewMode\"\n    class=\"flex gap-6\"\n    [class.flex-col]=\"viewMode === 'select'\"\n>\n    <div class=\"flex flex-col gap-7\">\n        <sc-frequently-asked-questions-group-selector\n            (groupIdChange)=\"groupIdChange($event)\"\n            [viewMode]=\"viewMode\"\n            class=\"shrink-0\"\n            [class.w-64]=\"viewMode !== 'select'\"\n        />\n\n        <button\n            *ngIf=\"viewMode === 'list'\"\n            tuiButton\n            size=\"m\"\n            type=\"button\"\n            iconStart=\"@tui.circle-help\"\n            appearance=\"secondary\"\n            (click)=\"clickSendQuestion.emit()\"\n            class=\"self-center\"\n        >\n            \u0417\u0430\u0434\u0430\u0442\u044C \u0432\u043E\u043F\u0440\u043E\u0441\n        </button>\n    </div>\n\n    <div class=\"grow\">\n        @if (items && items.length) {\n            <sc-frequently-asked-questions\n                [items]=\"items\"\n                [showLoading]=\"isLoading()\"\n            />\n\n            <tui-pagination\n                *ngIf=\"pageCount && pageCount > 1\"\n                [length]=\"pageCount\"\n                [index]=\"(currentPage$ | async) ?? 0\"\n                (indexChange)=\"paginationChange($event)\"\n                class=\"mt-4 !justify-items-center\"\n            />\n        } @else {\n            <p class=\"text-body-s-bold\">\u0421\u043F\u0438\u0441\u043E\u043A \u0432\u043E\u043F\u0440\u043E\u0441\u043E\u0432 \u043F\u0443\u0441\u0442</p>\n        }\n    </div>\n</div>\n" }]
+            args: [{ standalone: true, selector: 'sc-frequently-asked-questions-with-groups', imports: [AsyncPipe, NgIf, ScFrequentlyAskedQuestionsGroupSelectorComponent, TuiButton, ScFrequentlyAskedQuestionsComponent, ScPaginationLinksComponent], host: { ngSkipHydration: 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let items = data$ | async;\n@let pageCount = pageCount$ | async;\n@let viewMode = viewMode$ | async;\n\n<div\n    *ngIf=\"viewMode\"\n    class=\"flex gap-6\"\n    [class.flex-col]=\"viewMode === 'select'\"\n>\n    <div class=\"flex flex-col gap-7\">\n        <sc-frequently-asked-questions-group-selector\n            [selectedGroupId]=\"groupId$ | async\"\n            [viewMode]=\"viewMode\"\n            class=\"shrink-0\"\n            [class.w-64]=\"viewMode !== 'select'\"\n        />\n\n        <button\n            *ngIf=\"viewMode === 'list'\"\n            tuiButton\n            size=\"m\"\n            type=\"button\"\n            iconStart=\"@tui.circle-help\"\n            appearance=\"secondary\"\n            (click)=\"clickSendQuestion.emit()\"\n            class=\"self-center\"\n        >\n            \u0417\u0430\u0434\u0430\u0442\u044C \u0432\u043E\u043F\u0440\u043E\u0441\n        </button>\n    </div>\n\n    <div class=\"grow\">\n        @if (items && items.length) {\n            <sc-frequently-asked-questions\n                [items]=\"items\"\n                [showLoading]=\"isLoading()\"\n            />\n\n            <sc-pagination-links\n                *ngIf=\"pageCount && pageCount > 1\"\n                [length]=\"pageCount\"\n                [index]=\"(currentPage$ | async) ?? 1\"\n                [queryParam]=\"pageQueryParam\"\n                class=\"mt-4\"\n            />\n        } @else {\n            <p class=\"text-body-s-bold\">\u0421\u043F\u0438\u0441\u043E\u043A \u0432\u043E\u043F\u0440\u043E\u0441\u043E\u0432 \u043F\u0443\u0441\u0442</p>\n        }\n    </div>\n</div>\n" }]
         }] });
 
+/**
+ * Компонент списка новостей с пагинацией через query-параметр страницы.
+ *
+ * Ссылки пагинации корректно работают при SSR и позволяют поисковым роботам обходить страницы списка.
+ */
+class ScNewsListComponent {
+    /**
+     * Инициализирует экземпляр класса {@link ScNewsListComponent}.
+     */
+    constructor() {
+        /**
+         * Сервис для получения списка новостей.
+         */
+        this.newsService = inject(ScNewsService);
+        /**
+         * Сервис маршрутизации.
+         */
+        this.router = inject(Router);
+        /**
+         * {@link InputSignal} количества записей на странице пагинации.
+         */
+        this.perPage = input(16);
+        /**
+         * {@link Observable} изменения номера страницы пагинации из query-параметров.
+         */
+        this.page$ = scGetPageQueryParamChanges();
+        /**
+         * {@link Observable} запроса данных списка новостей.
+         */
+        this.request$ = combineLatest([
+            combineLatest({
+                page: this.page$,
+                perPage: toObservable(this.perPage),
+                paginate: of(true),
+            }),
+            inject(SC_USER_INFO$1),
+        ]).pipe(
+        // Нулевой debounceTime для случая, когда номер страницы и количество записей меняются одновременно.
+        debounceTime(0), switchMap(([value]) => this.newsService.getListOfNews$(value).pipe(startWith(null))), share());
+        /**
+         * {@link Observable} изменения количества страниц пагинации.
+         */
+        this.pagesLength$ = this.request$.pipe(filter(tuiIsPresent), map(({ meta }) => meta.lastPage), startWith(20));
+        /**
+         * {@link Observable} изменения номера страницы пагинации из данных пагинации запроса.
+         */
+        this.currentPage$ = this.request$.pipe(filter(tuiIsPresent), map(({ meta }) => meta.currentPage));
+        /**
+         * {@link Observable} изменения состояния загрузки данных.
+         */
+        this.loading$ = this.request$.pipe(map(tuiIsFalsy));
+        /**
+         * {@link Observable} изменения списка новостей страницы пагинации.
+         */
+        this.data$ = this.request$.pipe(filter(tuiIsPresent), map((data) => data.data), 
+        // eslint-disable-next-line unicorn/no-array-callback-reference
+        map((newsList) => newsList.filter(tuiIsPresent)), startWith(null));
+        /**
+         * Событие изменения списка новостей страницы пагинации.
+         */
+        this.dataChangeEvent = outputFromObservable(this.data$.pipe(filter(tuiIsPresent)));
+        inject(SC_USER_INFO$1)
+            .pipe(skip(1), takeUntilDestroyed())
+            .subscribe(() => {
+            // Смена данных пользователя сбрасывает пагинацию на первую страницу.
+            // eslint-disable-next-line no-void
+            void this.router.navigate([], { queryParams: { [SC_PAGE_QUERY_PARAM]: null }, queryParamsHandling: 'merge' });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScNewsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: ScNewsListComponent, isStandalone: true, selector: "sc-news-list", inputs: { perPage: { classPropertyName: "perPage", publicName: "perPage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataChangeEvent: "dataChangeEvent" }, ngImport: i0, template: "@let newsList = data$ | async;\n<tui-loader\n    class=\"mb-4\"\n    [showLoader]=\"!!(loading$ | async) && !!newsList\"\n>\n    <div class=\"grid grid-cols-[repeat(auto-fill,minmax(17rem,1fr))] gap-8\">\n        <ng-container *ngIf=\"newsList; else newsListSkeleton\">\n            <sc-news-card\n                *ngFor=\"let news of newsList\"\n                [news]=\"news\"\n                [href]=\"'/news/' + news.id\"\n            />\n        </ng-container>\n        <ng-template #newsListSkeleton>\n            <sc-news-card-skeleton *ngFor=\"let _ of [].constructor(perPage())\" />\n        </ng-template>\n    </div>\n</tui-loader>\n<tui-loader [showLoader]=\"!!(loading$ | async)\">\n    <sc-pagination-links\n        [index]=\"(currentPage$ | async) ?? 1\"\n        [length]=\"(pagesLength$ | async)!\"\n    />\n</tui-loader>\n", dependencies: [{ kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ScNewsModule }, { kind: "component", type: ScNewsCardComponent, selector: "sc-news-card", inputs: ["news", "href"] }, { kind: "component", type: ScNewsCardSkeletonComponent, selector: "sc-news-card-skeleton", inputs: ["hasImg"] }, { kind: "component", type: ScPaginationLinksComponent, selector: "sc-pagination-links", inputs: ["length", "index", "queryParam", "activePadding", "sidePadding"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScNewsListComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'sc-news-list', imports: [TuiLoader, NgIf, NgFor, ScNewsModule, ScPaginationLinksComponent, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let newsList = data$ | async;\n<tui-loader\n    class=\"mb-4\"\n    [showLoader]=\"!!(loading$ | async) && !!newsList\"\n>\n    <div class=\"grid grid-cols-[repeat(auto-fill,minmax(17rem,1fr))] gap-8\">\n        <ng-container *ngIf=\"newsList; else newsListSkeleton\">\n            <sc-news-card\n                *ngFor=\"let news of newsList\"\n                [news]=\"news\"\n                [href]=\"'/news/' + news.id\"\n            />\n        </ng-container>\n        <ng-template #newsListSkeleton>\n            <sc-news-card-skeleton *ngFor=\"let _ of [].constructor(perPage())\" />\n        </ng-template>\n    </div>\n</tui-loader>\n<tui-loader [showLoader]=\"!!(loading$ | async)\">\n    <sc-pagination-links\n        [index]=\"(currentPage$ | async) ?? 1\"\n        [length]=\"(pagesLength$ | async)!\"\n    />\n</tui-loader>\n" }]
+        }], ctorParameters: () => [] });
+
 /**
  * Компонент политики обработки персональных данных пользователей сайта.
  */
@@ -10819,5 +11026,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_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, ScNewsCardComponent, ScNewsCardSkeletonComponent, ScNewsModule, ScNextInputFocusDirective, ScNextInputFocusModule, ScNoindexDirective, ScNoindexWrapperComponent, ScNotifyWhenInStockDialogComponent, ScOrderAccessorDirective, ScOrderDirectionItemsComponent, ScOrderFormComponent, ScOrderItemComponent, ScOrderItemsByDirection, ScOrderItemsListByDirectionsComponent, ScOrderItemsListByStockComponent, ScOrderItemsListComponent, ScOrderModule, ScPaymentStatusComponent, ScPersonalDataProcessingPolicyComponent, ScPhoneFormatPipe, ScPreviewSampleComponent, ScPreviewSampleModule, ScPreviewSamplesMosquitoComponent, ScPriceCardComponent, ScPriceCardInlineComponent, ScPriceHistoryComponent, ScPriceListPaginationComponent, ScPriceWarehouseStockComponent, ScPrintDirective, ScPrintService, ScPrivacyPolicyComponent, ScProductInAllWarehousesPipe, ScProfileAccordionsContentComponent, ScProfileModule, ScPublicOfferComponent, ScQRCodeDialogComponent, ScQRCodeModule, ScResetUserPasswordComponent, ScResourcePreviewComponent, ScSandwichComponent, ScSandwichM2Component, ScSandwichM2SkeletonComponent, ScSandwichSkeletonComponent, ScSelectOnFocusinDirective, ScSeoTagsComponent, ScShareButtonComponent, ScShareButtonModule, ScSignInFormByEmailComponent, ScSignInFormByPhoneComponent, ScSignInFormComponent, ScSignUpFormComponent, ScSimpleSignUpFormComponent, ScSuggestionFieldComponent, ScTelLinkDirective, ScTerminalLinkDirective, ScUpdateUserInfoDialogComponent, ScUserManagersComponent, ScUserModule, ScUserPhoneApproveDialogComponent, ScVerificationModule, ScVerificationPhoneCheckFormComponent, TreeDirective, TreeIconService, TreeLoaderService, TreeTopDirective, cleanupRecaptchaArtifacts, phoneValidator, scAtLeastOneRequiredValidator, scBicValidator, scClientUiIconsName, scCorrespondentAccountValidator, scGetCurrentRoute, scPasswordConfirmMatchingValidator, stepValidator, tuiDateValueTransformerDefaultProvider };
+export { AbstractScPriceCard, AuthMethod, CURRENT_COUNTRY_ID, CostWithDiscountComponent, FilesAndDocumentsComponent, FilesAndDocumentsModule, FinishDateTimeTransformerDirective, IDLE_ITEM_STATE, IS_DEFAULT_COUNTRY, MAX_FILES_IN_FORM_INPUT, SC_ALLOW_SELECT_TERMINATED, SC_BANNER_DURATION, SC_CATALOG_PRODUCTS_FILTERS, SC_CATALOG_SHOW_PRODUCTS_RECURSIVELY, SC_DATE_FORMATTER, SC_DEBOUNCE_TIME_DEFAULT, SC_DIALOG_SERVICE_TOKEN, SC_ERROR_CHANGE_HANDLER, SC_FAQ_GROUP_QUERY_PARAM, 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, ScNewsCardComponent, ScNewsCardSkeletonComponent, ScNewsListComponent, ScNewsModule, ScNextInputFocusDirective, ScNextInputFocusModule, ScNoindexDirective, ScNoindexWrapperComponent, ScNotifyWhenInStockDialogComponent, ScOrderAccessorDirective, ScOrderDirectionItemsComponent, ScOrderFormComponent, ScOrderItemComponent, ScOrderItemsByDirection, ScOrderItemsListByDirectionsComponent, ScOrderItemsListByStockComponent, ScOrderItemsListComponent, 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, ScShareButtonModule, 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, scPasswordConfirmMatchingValidator, stepValidator, tuiDateValueTransformerDefaultProvider };
 //# sourceMappingURL=snabcentr-client-ui.mjs.map