@snabcentr/client-ui 4.14.1 → 4.14.3

package/fesm2022/snabcentr-client-ui.mjs

@@ -1,10 +1,10 @@
 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, ViewEncapsulation, viewChildren, afterNextRender } 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, ViewEncapsulation, Injector, viewChildren, afterNextRender } 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, ScWarehouseService, SEARCH_TERM_PROVIDERS, ScPaginationService, SC_NEXT_PAGE_PAGINATION_CLICK, SC_PRODUCT_PAGINATION_OPTIONS, ScCatalogFilterService, ScIdOrSlugPipe, SC_CATEGORY_INFO, ScConfiguratorService, IS_SERVER, 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, WA_NAVIGATOR } from '@ng-web-apis/common';
+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, fromEvent, animationFrames, take, takeUntil } 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, tuiClamp, TUI_TRUE_HANDLER } from '@taiga-ui/cdk';
@@ -51,6 +51,7 @@ import * as i5$2 from '@taiga-ui/kit/components/slider';
 import * as i9 from 'angular8-yandex-maps';
 import { AngularYandexMapsModule } from 'angular8-yandex-maps';
 import { isValid, parse, format } from 'date-fns';
+import { Clipboard } from '@angular/cdk/clipboard';
 import * as i2$5 from '@taiga-ui/experimental/components/expand';
 import * as i3$3 from '@taiga-ui/kit/components/data-list-wrapper';
 import { TuiGroup } from '@taiga-ui/core/directives/group';
@@ -9483,9 +9484,9 @@ class ScShareDialogComponent {
          */
         this.context = inject(POLYMORPHEUS_CONTEXT);
         /**
-         * Ссылка на объект навигатора браузера.
+         * Сервис копирования текста в буфер обмена.
          */
-        this.navigator = inject(WA_NAVIGATOR);
+        this.clipboard = inject(Clipboard);
         /**
          * Ссылка на объект окна браузера.
          */
@@ -9548,8 +9549,12 @@ class ScShareDialogComponent {
      */
     copyShareLink() {
         this.emitShareClick('copy_to_clipboard');
-        this.navigator.clipboard.writeText(this.shareUrl).catch(noop);
-        this.alerts.open('Ссылка скопирована в буфер обмена.', { appearance: 'positive' }).subscribe();
+        if (this.clipboard.copy(this.shareUrl)) {
+            this.alerts.open('Ссылка скопирована в буфер обмена.', { appearance: 'positive' }).subscribe();
+        }
+        else {
+            this.alerts.open('Не удалось скопировать ссылку в буфер обмена.', { appearance: 'negative' }).subscribe();
+        }
     }
     /**
      * Открывает диалоговое окно с QR-кодом ссылки.
@@ -9798,8 +9803,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 class ScFrequentlyAskedQuestionsComponent {
     /**
      * Инициализирует экземпляр класса {@link ScFrequentlyAskedQuestionsComponent}.
-     *
-     * Вопрос из якоря адреса раскрывается, а после отрисовки списка к нему выполняется прокрутка (в браузере).
      */
     constructor() {
         /**
@@ -9810,6 +9813,14 @@ class ScFrequentlyAskedQuestionsComponent {
          * {@link InputSignal} отображения загрузки.
          */
         this.showLoading = input(false);
+        /**
+         * {@link InputSignal} параметров прокрутки к вопросу из якоря.
+         */
+        this.scrollOptions = input({ behavior: 'instant', block: 'center' });
+        /**
+         * {@link InputSignal} количества кадров удержания вопроса из якоря в поле зрения (около 5 секунд).
+         */
+        this.scrollHoldFrames = input(300);
         /**
          * Признак, что приложение запущено на сервере.
          */
@@ -9826,20 +9837,37 @@ class ScFrequentlyAskedQuestionsComponent {
          * Активный маршрут.
          */
         this.route = inject(ActivatedRoute);
+        /**
+         * Инжектор компонента.
+         */
+        this.injector = inject(Injector);
+        /**
+         * Ссылка на уничтожение компонента.
+         */
+        this.destroyRef = inject(DestroyRef);
         /**
          * {@link Signal} ссылок на заголовки вопросов.
          */
         this.questionHeaders = viewChildren('questionHeader');
-        const questionId = scGetFaqQuestionIdFromAnchor(this.route.snapshot.fragment);
-        if (questionId === null) {
+        // На сервере все вопросы раскрыты.
+        if (this.isServer) {
             return;
         }
-        this.onOpenedChange(questionId, true);
-        if (!this.isServer) {
+        // Раскрываем вопрос из якоря и прокручиваем к нему: якорь может смениться на открытой странице, список загрузиться позже.
+        combineLatest([this.route.fragment, toObservable(this.items)])
+            .pipe(map(([fragment, items]) => {
+            const questionId = scGetFaqQuestionIdFromAnchor(fragment);
+            return questionId !== null && items.some((item) => item.id === questionId) ? questionId : null;
+        }), filter(tuiIsPresent), takeUntilDestroyed())
+            .subscribe((questionId) => {
+            this.onOpenedChange(questionId, true);
             afterNextRender(() => {
-                this.getQuestionHeader(questionId)?.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            });
-        }
+                const header = this.getQuestionHeader(questionId);
+                if (header) {
+                    this.scrollToHeader(header);
+                }
+            }, { injector: this.injector });
+        });
     }
     /**
      * Возвращает параметры формирования ссылки на вопрос: текущая страница с её query-параметрами и якорем вопроса.
@@ -9880,8 +9908,27 @@ class ScFrequentlyAskedQuestionsComponent {
         const anchor = scGetFaqQuestionAnchor(questionId);
         return this.questionHeaders().find((header) => header.nativeElement.id === anchor)?.nativeElement;
     }
+    /**
+     * Прокручивает страницу к заголовку вопроса и удерживает его в поле зрения.
+     *
+     * @param header Элемент заголовка вопроса.
+     */
+    scrollToHeader(header) {
+        const getTop = () => Math.round(header.getBoundingClientRect().top);
+        const userScroll$ = merge(fromEvent(globalThis, 'wheel'), fromEvent(globalThis, 'touchstart'), fromEvent(globalThis, 'keydown'), fromEvent(globalThis, 'mousedown'));
+        // Мгновенно: плавная прокрутка не выполняется в скрытой вкладке.
+        header.scrollIntoView(this.scrollOptions());
+        let expectedTop = getTop();
+        // Повторяем прокрутку, если вопрос сдвинула догрузка страницы или чужая прокрутка, пока пользователь не начнёт прокручивать сам.
+        animationFrames()
+            .pipe(take(this.scrollHoldFrames()), map(getTop), filter((top) => top !== expectedTop), takeUntilDestroyed(this.destroyRef), takeUntil(userScroll$))
+            .subscribe(() => {
+            header.scrollIntoView(this.scrollOptions());
+            expectedTop = getTop();
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScFrequentlyAskedQuestionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ScFrequentlyAskedQuestionsComponent, isStandalone: true, selector: "sc-frequently-asked-questions", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, showLoading: { classPropertyName: "showLoading", publicName: "showLoading", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ScFrequentlyAskedQuestionsComponent, isStandalone: true, selector: "sc-frequently-asked-questions", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, showLoading: { classPropertyName: "showLoading", publicName: "showLoading", isSignal: true, isRequired: false, transformFunction: null }, scrollOptions: { classPropertyName: "scrollOptions", publicName: "scrollOptions", isSignal: true, isRequired: false, transformFunction: null }, scrollHoldFrames: { classPropertyName: "scrollHoldFrames", publicName: "scrollHoldFrames", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [
             {
                 provide: TUI_BUTTON_OPTIONS,
                 useValue: {
@@ -10188,7 +10235,7 @@ class ScFrequentlyAskedQuestionsWithGroupsComponent {
         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" }, 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 }); }
+    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", "scrollOptions", "scrollHoldFrames"] }, { 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,