@snabcentr/client-ui 0.19.0 → 0.21.0

package/fesm2020/snabcentr-client-ui.mjs

@@ -11,7 +11,7 @@ import { TuiTextfieldControllerModule, TuiLinkModule, TuiButtonModule, TuiLabelM
 import * as i3 from '@angular/forms';
 import { FormGroupDirective, FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule, NgControl, FormArray } from '@angular/forms';
 import * as i6 from '@taiga-ui/cdk';
-import { tuiControlValue, tuiIsFalsy, TuiLetModule, tuiCreateToken, AbstractTuiNullableControl, TUI_IS_MOBILE, tuiPure, TuiDay, TuiDayRange, TuiMonth, tuiIsPresent, TuiDestroyService, TuiRepeatTimesModule, tuiMarkControlAsTouchedAndValidate, ALWAYS_TRUE_HANDLER } from '@taiga-ui/cdk';
+import { tuiControlValue, tuiIsFalsy, TuiLetModule, tuiCreateToken, AbstractTuiNullableControl, TUI_IS_MOBILE, tuiPure, TuiDay, tuiIsPresent, TuiDayRange, TuiMonth, TuiDestroyService, TuiRepeatTimesModule, tuiMarkControlAsTouchedAndValidate, ALWAYS_TRUE_HANDLER } from '@taiga-ui/cdk';
 import * as i4$1 from '@taiga-ui/kit';
 import { TuiInputPasswordModule, TuiInputModule, TuiFieldErrorPipeModule, TuiInputPhoneModule, TuiAccordionItemComponent, TuiAccordionModule, TuiElasticContainerModule, TuiCarouselModule, TUI_NUMBER_VALUE_TRANSFORMER, TuiInputNumberComponent, TuiIslandModule, TuiInputNumberModule, TuiHighlightModule, TuiCarouselComponent, TuiComboBoxModule, TuiDataListWrapperModule, TuiFilterByInputPipeModule, TuiStringifyContentPipeModule, TuiSelectModule, TuiTreeService, TuiTreeItemContentComponent, TUI_TREE_START, TUI_TREE_CONTENT, TUI_TREE_LOADING, TUI_TREE_LOADER, TuiTreeModule, TuiCheckboxModule, TuiCheckboxLabeledModule } from '@taiga-ui/kit';
 import * as i6$1 from '@maskito/angular';
@@ -27,10 +27,10 @@ import * as i7$1 from '@taiga-ui/addon-preview';
 import { TuiPreviewDialogService, TuiPreviewModule } from '@taiga-ui/addon-preview';
 import * as i9 from '@taiga-ui/addon-commerce';
 import { TuiCurrencyPipeModule } from '@taiga-ui/addon-commerce';
-import * as i3$1 from '@taiga-ui/addon-charts';
+import * as i4$2 from '@taiga-ui/addon-charts';
 import { TuiLineDaysChartModule, TuiAxesModule } from '@taiga-ui/addon-charts';
 import { HttpErrorResponse } from '@angular/common/http';
-import * as i3$2 from '@taiga-ui/layout';
+import * as i3$1 from '@taiga-ui/layout';
 import { TuiBlockStatusModule } from '@taiga-ui/layout';
 
 /**
@@ -1417,7 +1417,7 @@ let ScCategoriesListComponent = class ScCategoriesListComponent {
     }
 };
 ScCategoriesListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCategoriesListComponent, deps: [{ token: SC_URLS }, { token: i1.ScFavoriteService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ScCategoriesListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScCategoriesListComponent, selector: "sc-categories-list", inputs: { categories: "categories" }, outputs: { clickCategoryEvent: "clickCategoryEvent" }, ngImport: i0, template: "<div class=\"grid grid-cols-[repeat(auto-fill,minmax(21rem,1fr))] gap-x-8 gap-y-2\">\n    <ng-container *ngIf=\"categories; else categoriesSkeleton\">\n        <button\n            *ngFor=\"let item of $any(categories)\"\n            class=\"group flex gap-2 py-1.5 px-3 bg-tui-base-02 rounded-xl h-11 items-center text-left hover-hover:hover:ring-2 hover-none:active:ring-2 ring-tui-primary duration-150\"\n            (click)=\"clickCategoryEvent.emit(item)\"\n        >\n            <img *ngIf=\"item.properties?.image as image\" [src]=\"getCategoryImage(image)\" [alt]=\"item.name\" class=\"w-8 h-8 object-cover rounded bg-tui-base-03\" />\n            <tui-svg *ngIf=\"!item.properties?.image && checkImagesExists(categories)\" src=\"tuiIconCameraOffLarge\" class=\"bg-tui-base-03 !w-8 !h-8 rounded text-tui-base-05\"></tui-svg>\n            <div *tuiLet=\"\" class=\"flex grow truncate\">\n                <p class=\"text-base font-bold truncate\">{{ item.name }}</p>\n                <tui-svg *ngIf=\"item.isFavorite\" src=\"scIconFavoriteFill\" class=\"text-tui-primary !text-sm mr-auto\"></tui-svg>\n            </div>\n            <tui-svg src=\"tuiIconChevronRightLarge\" class=\"hover-hover:group-hover:text-tui-primary hover-none:group-active:text-tui-primary duration-150\"></tui-svg>\n        </button>\n    </ng-container>\n</div>\n\n<ng-template #categoriesSkeleton>\n    <button\n        *tuiRepeatTimes=\"let index of isMobile ? 3 : 6\"\n        class=\"group flex gap-2 py-1.5 px-3 bg-tui-base-02 rounded-xl h-11 items-center text-left hover-hover:hover:ring-2 hover-none:active:ring-2 ring-tui-base-05 duration-150\"\n    >\n        <div class=\"w-8 h-8 tui-skeleton\"></div>\n        <div class=\"h-4 grow tui-skeleton\"></div>\n        <tui-svg src=\"tuiIconChevronRightLarge\" class=\"hover-hover:group-hover:text-tui-primary hover-none:group-active:text-tui-primary duration-150  tui-skeleton\"></tui-svg>\n    </button>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i6.TuiLetDirective, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "directive", type: i6.TuiRepeatTimesDirective, selector: "[tuiRepeatTimes][tuiRepeatTimesOf]", inputs: ["tuiRepeatTimesOf"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ScCategoriesListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScCategoriesListComponent, selector: "sc-categories-list", inputs: { categories: "categories" }, outputs: { clickCategoryEvent: "clickCategoryEvent" }, ngImport: i0, template: "<div class=\"grid grid-cols-[repeat(auto-fill,minmax(21rem,1fr))] gap-x-8 gap-y-2\">\n    <ng-container *ngIf=\"categories; else categoriesSkeleton\">\n        <button\n            *ngFor=\"let item of $any(categories)\"\n            class=\"group flex h-11 items-center gap-2 rounded-xl bg-tui-base-02 px-3 py-1.5 text-left ring-tui-primary duration-150 hover-hover:hover:ring-2 hover-none:active:ring-2\"\n            (click)=\"clickCategoryEvent.emit(item)\"\n        >\n            <img\n                *ngIf=\"item.properties?.image as image\"\n                [src]=\"getCategoryImage(image)\"\n                [alt]=\"item.name\"\n                class=\"size-8 rounded bg-tui-base-03 object-cover\"\n            />\n\n            <tui-svg\n                *ngIf=\"!item.properties?.image && checkImagesExists(categories)\"\n                src=\"tuiIconCameraOffLarge\"\n                class=\"!h-8 !w-8 rounded bg-tui-base-03 text-tui-base-05\"\n            ></tui-svg>\n            <div class=\"flex grow flex-col truncate\">\n                <div class=\"flex grow truncate\">\n                    <p class=\"truncate text-base font-bold\">{{ item.name }}</p>\n                    <tui-svg\n                        *ngIf=\"item.isFavorite\"\n                        src=\"scIconFavoriteFill\"\n                        class=\"mr-auto !text-sm text-tui-primary\"\n                    ></tui-svg>\n                </div>\n                <p\n                    *ngIf=\"item.m2Price as m2Price\"\n                    class=\"text-xs font-medium text-tui-text-02\"\n                >\n                    \u0421\u0440\u0435\u0434\u043D\u044F\u044F \u0441\u0442\u043E\u0438\u043C\u043E\u0441\u0442\u044C <span [innerHTML]=\"m2Price\"></span>\n                </p>\n            </div>\n\n            <tui-svg\n                src=\"tuiIconChevronRightLarge\"\n                class=\"duration-150 hover-hover:group-hover:text-tui-primary hover-none:group-active:text-tui-primary\"\n            ></tui-svg>\n        </button>\n    </ng-container>\n</div>\n\n<ng-template #categoriesSkeleton>\n    <button\n        *tuiRepeatTimes=\"let index of isMobile ? 3 : 6\"\n        class=\"group flex h-11 items-center gap-2 rounded-xl bg-tui-base-02 px-3 py-1.5 text-left ring-tui-base-05 duration-150 hover-hover:hover:ring-2 hover-none:active:ring-2\"\n    >\n        <div class=\"tui-skeleton size-8\"></div>\n        <div class=\"tui-skeleton h-4 grow\"></div>\n        <tui-svg\n            src=\"tuiIconChevronRightLarge\"\n            class=\"tui-skeleton duration-150 hover-hover:group-hover:text-tui-primary hover-none:group-active:text-tui-primary\"\n        ></tui-svg>\n    </button>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i6.TuiRepeatTimesDirective, selector: "[tuiRepeatTimes][tuiRepeatTimesOf]", inputs: ["tuiRepeatTimesOf"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
     tuiPure
 ], ScCategoriesListComponent.prototype, "checkImagesExists", null);
@@ -1426,7 +1426,7 @@ ScCategoriesListComponent = __decorate([
 ], ScCategoriesListComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCategoriesListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-categories-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"grid grid-cols-[repeat(auto-fill,minmax(21rem,1fr))] gap-x-8 gap-y-2\">\n    <ng-container *ngIf=\"categories; else categoriesSkeleton\">\n        <button\n            *ngFor=\"let item of $any(categories)\"\n            class=\"group flex gap-2 py-1.5 px-3 bg-tui-base-02 rounded-xl h-11 items-center text-left hover-hover:hover:ring-2 hover-none:active:ring-2 ring-tui-primary duration-150\"\n            (click)=\"clickCategoryEvent.emit(item)\"\n        >\n            <img *ngIf=\"item.properties?.image as image\" [src]=\"getCategoryImage(image)\" [alt]=\"item.name\" class=\"w-8 h-8 object-cover rounded bg-tui-base-03\" />\n            <tui-svg *ngIf=\"!item.properties?.image && checkImagesExists(categories)\" src=\"tuiIconCameraOffLarge\" class=\"bg-tui-base-03 !w-8 !h-8 rounded text-tui-base-05\"></tui-svg>\n            <div *tuiLet=\"\" class=\"flex grow truncate\">\n                <p class=\"text-base font-bold truncate\">{{ item.name }}</p>\n                <tui-svg *ngIf=\"item.isFavorite\" src=\"scIconFavoriteFill\" class=\"text-tui-primary !text-sm mr-auto\"></tui-svg>\n            </div>\n            <tui-svg src=\"tuiIconChevronRightLarge\" class=\"hover-hover:group-hover:text-tui-primary hover-none:group-active:text-tui-primary duration-150\"></tui-svg>\n        </button>\n    </ng-container>\n</div>\n\n<ng-template #categoriesSkeleton>\n    <button\n        *tuiRepeatTimes=\"let index of isMobile ? 3 : 6\"\n        class=\"group flex gap-2 py-1.5 px-3 bg-tui-base-02 rounded-xl h-11 items-center text-left hover-hover:hover:ring-2 hover-none:active:ring-2 ring-tui-base-05 duration-150\"\n    >\n        <div class=\"w-8 h-8 tui-skeleton\"></div>\n        <div class=\"h-4 grow tui-skeleton\"></div>\n        <tui-svg src=\"tuiIconChevronRightLarge\" class=\"hover-hover:group-hover:text-tui-primary hover-none:group-active:text-tui-primary duration-150  tui-skeleton\"></tui-svg>\n    </button>\n</ng-template>\n" }]
+            args: [{ selector: 'sc-categories-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"grid grid-cols-[repeat(auto-fill,minmax(21rem,1fr))] gap-x-8 gap-y-2\">\n    <ng-container *ngIf=\"categories; else categoriesSkeleton\">\n        <button\n            *ngFor=\"let item of $any(categories)\"\n            class=\"group flex h-11 items-center gap-2 rounded-xl bg-tui-base-02 px-3 py-1.5 text-left ring-tui-primary duration-150 hover-hover:hover:ring-2 hover-none:active:ring-2\"\n            (click)=\"clickCategoryEvent.emit(item)\"\n        >\n            <img\n                *ngIf=\"item.properties?.image as image\"\n                [src]=\"getCategoryImage(image)\"\n                [alt]=\"item.name\"\n                class=\"size-8 rounded bg-tui-base-03 object-cover\"\n            />\n\n            <tui-svg\n                *ngIf=\"!item.properties?.image && checkImagesExists(categories)\"\n                src=\"tuiIconCameraOffLarge\"\n                class=\"!h-8 !w-8 rounded bg-tui-base-03 text-tui-base-05\"\n            ></tui-svg>\n            <div class=\"flex grow flex-col truncate\">\n                <div class=\"flex grow truncate\">\n                    <p class=\"truncate text-base font-bold\">{{ item.name }}</p>\n                    <tui-svg\n                        *ngIf=\"item.isFavorite\"\n                        src=\"scIconFavoriteFill\"\n                        class=\"mr-auto !text-sm text-tui-primary\"\n                    ></tui-svg>\n                </div>\n                <p\n                    *ngIf=\"item.m2Price as m2Price\"\n                    class=\"text-xs font-medium text-tui-text-02\"\n                >\n                    \u0421\u0440\u0435\u0434\u043D\u044F\u044F \u0441\u0442\u043E\u0438\u043C\u043E\u0441\u0442\u044C <span [innerHTML]=\"m2Price\"></span>\n                </p>\n            </div>\n\n            <tui-svg\n                src=\"tuiIconChevronRightLarge\"\n                class=\"duration-150 hover-hover:group-hover:text-tui-primary hover-none:group-active:text-tui-primary\"\n            ></tui-svg>\n        </button>\n    </ng-container>\n</div>\n\n<ng-template #categoriesSkeleton>\n    <button\n        *tuiRepeatTimes=\"let index of isMobile ? 3 : 6\"\n        class=\"group flex h-11 items-center gap-2 rounded-xl bg-tui-base-02 px-3 py-1.5 text-left ring-tui-base-05 duration-150 hover-hover:hover:ring-2 hover-none:active:ring-2\"\n    >\n        <div class=\"tui-skeleton size-8\"></div>\n        <div class=\"tui-skeleton h-4 grow\"></div>\n        <tui-svg\n            src=\"tuiIconChevronRightLarge\"\n            class=\"tui-skeleton duration-150 hover-hover:group-hover:text-tui-primary hover-none:group-active:text-tui-primary\"\n        ></tui-svg>\n    </button>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [SC_URLS]
@@ -1757,11 +1757,13 @@ class ScPriceHistoryComponent {
      *
      * @param catalogService Сервис для работы с каталогом.
      * @param months$ Перечисление месяцев.
+     * @param userMetrikaService Сервис для сбора метрик о действиях пользователей.
      * @param context Контекст диалогового окна, в котором открыт компонент.
      */
-    constructor(catalogService, months$, context) {
+    constructor(catalogService, months$, userMetrikaService, context) {
         this.catalogService = catalogService;
         this.months$ = months$;
+        this.userMetrikaService = userMetrikaService;
         this.context = context;
         /**
          * {@link Observable} функция для преобразования значения number в строку в подсказке по оси X.
@@ -1783,12 +1785,20 @@ class ScPriceHistoryComponent {
     ngOnInit() {
         this.history$ = this.catalogService.getPriceHistory$(this.product).pipe(map((history) => Object.keys(history)
             .map((item) => [TuiDay.normalizeParse(item, 'DMY'), history[String(item)].cost])
-            .sort((a, b) => (a[0] > b[0] ? 1 : -1))), shareReplay({ bufferSize: 1, refCount: true }), filter((history) => history.length > 1));
-        this.priceInfo$ = this.history$.pipe(map((history) => history.map((item) => item[1])), map((values) => ({
+            .sort((a, b) => (a[0] > b[0] ? 1 : -1))), startWith(null), shareReplay({ bufferSize: 1, refCount: true }));
+        this.loadingHistory$ = this.history$.pipe(map(tuiIsFalsy));
+        this.priceInfo$ = this.history$.pipe(filter(tuiIsPresent), tap(() => {
+            this.userMetrikaService.emitUserMetrikaEvent({
+                target: ScUserMetrikaGoalsEnum.productPriceHistoryShow,
+                params: {
+                    product_id: this.product.id,
+                },
+            });
+        }), filter((history) => history.length > 1), map((history) => history.map((item) => item[1])), map((values) => ({
             min: Math.min(...values),
             max: Math.max(...values),
         })));
-        this.range$ = this.history$.pipe(map((value) => ({ from: value.at(0)?.[0], to: value.at(-1)?.[0] })), filter((range) => !!range.from && !!range.to), map((range) => {
+        this.range$ = this.history$.pipe(filter(tuiIsPresent), filter((history) => history.length > 1), map((value) => ({ from: value.at(0)?.[0], to: value.at(-1)?.[0] })), filter((range) => !!range.from && !!range.to), map((range) => {
             return new TuiDayRange(range.from, range.to);
         }));
     }
@@ -1827,8 +1837,8 @@ class ScPriceHistoryComponent {
         }, []));
     }
 }
-ScPriceHistoryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceHistoryComponent, deps: [{ token: i1.ScCatalogService }, { token: TUI_MONTHS }, { token: POLYMORPHEUS_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ScPriceHistoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScPriceHistoryComponent, selector: "sc-price-history", inputs: { product: "product" }, ngImport: i0, template: "<div class=\"flex flex-col items-center\">\n    <ng-container *ngIf=\"priceInfo$ | async as priceInfo; else isNotExist\">\n        <div class=\"w-174 mb-1 text-end text-lg font-bold\">\u043E\u0442 {{ priceInfo.min.toLocaleString() }} \u20BD \u0434\u043E {{ priceInfo.max.toLocaleString() }} \u20BD</div>\n\n        <ng-container *ngIf=\"history$ | async as history\">\n            <div\n                *ngIf=\"range$ | async as range\"\n                class=\"relative h-56 w-full p-5 text-tui-primary\"\n            >\n                <tui-axes\n                    *ngIf=\"computeLabels$(range) | async as labels\"\n                    class=\"h-full\"\n                    [axisXLabels]=\"labels\"\n                    [horizontalLines]=\"4\"\n                    [verticalLines]=\"labels.length\"\n                >\n                    <tui-line-days-chart\n                        class=\"chart\"\n                        [height]=\"priceInfo.max\"\n                        [smoothingFactor]=\"10\"\n                        [y]=\"priceInfo.min - (priceInfo.min * 1) / 4\"\n                        [value]=\"computeValue(range, history)\"\n                        [xStringify]=\"xStringify$ | async\"\n                        [yStringify]=\"yStringify\"\n                        [hintContent]=\"hint\"\n                    ></tui-line-days-chart>\n                </tui-axes>\n            </div>\n        </ng-container>\n    </ng-container>\n    <ng-template #isNotExist>\n        <p class=\"text-base font-bold\">\u0426\u0435\u043D\u0430 \u043D\u0430 \u0442\u043E\u0432\u0430\u0440 \u043D\u0435 \u0438\u0437\u043C\u0435\u043D\u044F\u043B\u0430\u0441\u044C</p>\n    </ng-template>\n    <ng-template\n        #hint\n        let-data\n    >\n        <div class=\"font-bold\">{{ data[1].toLocaleString() }} \u20BD</div>\n        <div>{{ data[0] }}</div>\n    </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.TuiLineDaysChartComponent, selector: "tui-line-days-chart", inputs: ["value", "y", "height", "smoothingFactor", "hintContent", "xStringify", "yStringify", "dots"] }, { kind: "component", type: i3$1.TuiAxesComponent, selector: "tui-axes", inputs: ["axisX", "axisXLabels", "axisY", "axisYInset", "axisYLabels", "axisYName", "axisYSecondaryInset", "axisYSecondaryLabels", "axisYSecondaryName", "horizontalLines", "horizontalLinesHandler", "verticalLines", "verticalLinesHandler"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ScPriceHistoryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceHistoryComponent, deps: [{ token: i1.ScCatalogService }, { token: TUI_MONTHS }, { token: i1.ScUserMetrikaService }, { token: POLYMORPHEUS_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+ScPriceHistoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScPriceHistoryComponent, selector: "sc-price-history", inputs: { product: "product" }, ngImport: i0, template: "<tui-loader [showLoader]=\"!!(loadingHistory$ | async)\"> </tui-loader>\n\n<div\n    *ngIf=\"(loadingHistory$ | async) === false\"\n    class=\"flex flex-col items-center\"\n>\n    <ng-container *ngIf=\"priceInfo$ | async as priceInfo; else isNotExist\">\n        <div class=\"w-174 mb-1 text-end text-lg font-bold\">\u043E\u0442 {{ priceInfo.min.toLocaleString() }} \u20BD \u0434\u043E {{ priceInfo.max.toLocaleString() }} \u20BD</div>\n\n        <ng-container *ngIf=\"history$ | async as history\">\n            <div\n                *ngIf=\"range$ | async as range\"\n                class=\"relative h-56 w-full p-5 text-tui-primary\"\n            >\n                <tui-axes\n                    *ngIf=\"computeLabels$(range) | async as labels\"\n                    class=\"h-full\"\n                    [axisXLabels]=\"labels\"\n                    [horizontalLines]=\"4\"\n                    [verticalLines]=\"labels.length\"\n                >\n                    <tui-line-days-chart\n                        class=\"chart\"\n                        [height]=\"priceInfo.max\"\n                        [smoothingFactor]=\"10\"\n                        [y]=\"priceInfo.min - (priceInfo.min * 1) / 4\"\n                        [value]=\"computeValue(range, history)\"\n                        [xStringify]=\"xStringify$ | async\"\n                        [yStringify]=\"yStringify\"\n                        [hintContent]=\"hint\"\n                    ></tui-line-days-chart>\n                </tui-axes>\n            </div>\n        </ng-container>\n    </ng-container>\n    <ng-template #isNotExist>\n        <p class=\"text-base font-bold\">\u0426\u0435\u043D\u0430 \u043D\u0430 \u0442\u043E\u0432\u0430\u0440 \u043D\u0435 \u0438\u0437\u043C\u0435\u043D\u044F\u043B\u0430\u0441\u044C</p>\n    </ng-template>\n    <ng-template\n        #hint\n        let-data\n    >\n        <div class=\"font-bold\">{{ data[1].toLocaleString() }} \u20BD</div>\n        <div>{{ data[0] }}</div>\n    </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TuiLoaderComponent, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { kind: "component", type: i4$2.TuiLineDaysChartComponent, selector: "tui-line-days-chart", inputs: ["value", "y", "height", "smoothingFactor", "hintContent", "xStringify", "yStringify", "dots"] }, { kind: "component", type: i4$2.TuiAxesComponent, selector: "tui-axes", inputs: ["axisX", "axisXLabels", "axisY", "axisYInset", "axisYLabels", "axisYName", "axisYSecondaryInset", "axisYSecondaryLabels", "axisYSecondaryName", "horizontalLines", "horizontalLinesHandler", "verticalLines", "verticalLinesHandler"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
     tuiPure
 ], ScPriceHistoryComponent.prototype, "computeLabels$", null);
@@ -1837,11 +1847,11 @@ __decorate([
 ], ScPriceHistoryComponent.prototype, "computeValue", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceHistoryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-price-history', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col items-center\">\n    <ng-container *ngIf=\"priceInfo$ | async as priceInfo; else isNotExist\">\n        <div class=\"w-174 mb-1 text-end text-lg font-bold\">\u043E\u0442 {{ priceInfo.min.toLocaleString() }} \u20BD \u0434\u043E {{ priceInfo.max.toLocaleString() }} \u20BD</div>\n\n        <ng-container *ngIf=\"history$ | async as history\">\n            <div\n                *ngIf=\"range$ | async as range\"\n                class=\"relative h-56 w-full p-5 text-tui-primary\"\n            >\n                <tui-axes\n                    *ngIf=\"computeLabels$(range) | async as labels\"\n                    class=\"h-full\"\n                    [axisXLabels]=\"labels\"\n                    [horizontalLines]=\"4\"\n                    [verticalLines]=\"labels.length\"\n                >\n                    <tui-line-days-chart\n                        class=\"chart\"\n                        [height]=\"priceInfo.max\"\n                        [smoothingFactor]=\"10\"\n                        [y]=\"priceInfo.min - (priceInfo.min * 1) / 4\"\n                        [value]=\"computeValue(range, history)\"\n                        [xStringify]=\"xStringify$ | async\"\n                        [yStringify]=\"yStringify\"\n                        [hintContent]=\"hint\"\n                    ></tui-line-days-chart>\n                </tui-axes>\n            </div>\n        </ng-container>\n    </ng-container>\n    <ng-template #isNotExist>\n        <p class=\"text-base font-bold\">\u0426\u0435\u043D\u0430 \u043D\u0430 \u0442\u043E\u0432\u0430\u0440 \u043D\u0435 \u0438\u0437\u043C\u0435\u043D\u044F\u043B\u0430\u0441\u044C</p>\n    </ng-template>\n    <ng-template\n        #hint\n        let-data\n    >\n        <div class=\"font-bold\">{{ data[1].toLocaleString() }} \u20BD</div>\n        <div>{{ data[0] }}</div>\n    </ng-template>\n</div>\n" }]
+            args: [{ selector: 'sc-price-history', changeDetection: ChangeDetectionStrategy.OnPush, template: "<tui-loader [showLoader]=\"!!(loadingHistory$ | async)\"> </tui-loader>\n\n<div\n    *ngIf=\"(loadingHistory$ | async) === false\"\n    class=\"flex flex-col items-center\"\n>\n    <ng-container *ngIf=\"priceInfo$ | async as priceInfo; else isNotExist\">\n        <div class=\"w-174 mb-1 text-end text-lg font-bold\">\u043E\u0442 {{ priceInfo.min.toLocaleString() }} \u20BD \u0434\u043E {{ priceInfo.max.toLocaleString() }} \u20BD</div>\n\n        <ng-container *ngIf=\"history$ | async as history\">\n            <div\n                *ngIf=\"range$ | async as range\"\n                class=\"relative h-56 w-full p-5 text-tui-primary\"\n            >\n                <tui-axes\n                    *ngIf=\"computeLabels$(range) | async as labels\"\n                    class=\"h-full\"\n                    [axisXLabels]=\"labels\"\n                    [horizontalLines]=\"4\"\n                    [verticalLines]=\"labels.length\"\n                >\n                    <tui-line-days-chart\n                        class=\"chart\"\n                        [height]=\"priceInfo.max\"\n                        [smoothingFactor]=\"10\"\n                        [y]=\"priceInfo.min - (priceInfo.min * 1) / 4\"\n                        [value]=\"computeValue(range, history)\"\n                        [xStringify]=\"xStringify$ | async\"\n                        [yStringify]=\"yStringify\"\n                        [hintContent]=\"hint\"\n                    ></tui-line-days-chart>\n                </tui-axes>\n            </div>\n        </ng-container>\n    </ng-container>\n    <ng-template #isNotExist>\n        <p class=\"text-base font-bold\">\u0426\u0435\u043D\u0430 \u043D\u0430 \u0442\u043E\u0432\u0430\u0440 \u043D\u0435 \u0438\u0437\u043C\u0435\u043D\u044F\u043B\u0430\u0441\u044C</p>\n    </ng-template>\n    <ng-template\n        #hint\n        let-data\n    >\n        <div class=\"font-bold\">{{ data[1].toLocaleString() }} \u20BD</div>\n        <div>{{ data[0] }}</div>\n    </ng-template>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.ScCatalogService }, { type: i10.Observable, decorators: [{
                     type: Inject,
                     args: [TUI_MONTHS]
-                }] }, { type: undefined, decorators: [{
+                }] }, { type: i1.ScUserMetrikaService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -4194,7 +4204,7 @@ class ScPaymentStatusComponent {
     }
 }
 ScPaymentStatusComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPaymentStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ScPaymentStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScPaymentStatusComponent, selector: "sc-payment-status", inputs: { status: "status", orderId: "orderId" }, outputs: { backToOrdersClick: "backToOrdersClick", backToOrderClick: "backToOrderClick" }, ngImport: i0, template: "<ng-container *ngIf=\"status && orderId; else failed\">\n    <ng-container [ngSwitch]=\"status\">\n        <tui-block-status *ngSwitchCase=\"'success'\">\n            <tui-svg src=\"tuiIconCheckCircleLarge\" tuiSlot=\"top\" class=\"scale-[3] !h-20 !text-green-500\"></tui-svg>\n            <h4>\u0421\u043F\u0430\u0441\u0438\u0431\u043E!</h4>\n            <br />\n            <div class=\"font-bold\">\u0412\u0430\u0448 \u0437\u0430\u043A\u0430\u0437 \u0443\u0441\u043F\u0435\u0448\u043D\u043E \u043E\u043F\u043B\u0430\u0447\u0435\u043D. \u041C\u044B \u0441\u0432\u044F\u0436\u0435\u043C\u0441\u044F \u0441 \u0432\u0430\u043C\u0438 \u0432 \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0435 \u0432\u0440\u0435\u043C\u044F.</div>\n            <br />\n            <div class=\"font-bold\">\n                \u041D\u043E\u043C\u0435\u0440 \u0432\u0430\u0448\u0435\u0433\u043E \u0437\u0430\u043A\u0430\u0437\u0430: <a tuiLink [pseudo]=\"true\" (click)=\"backToOrderClick.emit()\">{{orderId}}</a>\n            </div>\n\n            <button tuiButton (click)=\"backToOrdersClick.emit()\">\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043A \u0437\u0430\u043A\u0430\u0437\u0430\u043C</button>\n        </tui-block-status>\n        <tui-block-status *ngSwitchCase=\"'error'\">\n            <tui-svg src=\"tuiIconXCircleLarge\" class=\"scale-[3] !h-20 !text-red-500\" tuiSlot=\"top\"></tui-svg>\n            <h4>\u041E\u043F\u043B\u0430\u0442\u0430 \u043D\u0435 \u043F\u0440\u043E\u0448\u043B\u0430!</h4>\n            <br />\n            <div class=\"font-bold\">\u041F\u0440\u0438 \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0435 \u043F\u043B\u0430\u0442\u0435\u0436\u0430 \u043F\u0440\u043E\u0438\u0437\u043E\u0448\u043B\u0430 \u043E\u0448\u0438\u0431\u043A\u0430.</div>\n            <button tuiButton tuiItem (click)=\"backToOrderClick.emit()\">\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043A \u0437\u0430\u043A\u0430\u0437\u0443</button>\n        </tui-block-status>\n    </ng-container>\n</ng-container>\n\n<ng-template #failed>\n    <tui-block-status>\n        <tui-svg src=\"tuiIconInfoLarge\" class=\"scale-[3] !h-20 !text-yellow-500\" tuiSlot=\"top\"></tui-svg>\n        <h4>\u0427\u0442\u043E-\u0442\u043E \u043F\u043E\u0448\u043B\u043E \u043D\u0435 \u0442\u0430\u043A!</h4>\n        <button tuiButton tuiItem (click)=\"backToOrdersClick.emit()\">\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043A \u0437\u0430\u043A\u0430\u0437\u0430\u043C</button>\n    </tui-block-status>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: i4.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i4.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "component", type: i3$2.TuiBlockStatusComponent, selector: "tui-block-status", inputs: ["card"] }, { kind: "directive", type: i3$2.TuiBlockStatusDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ScPaymentStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScPaymentStatusComponent, selector: "sc-payment-status", inputs: { status: "status", orderId: "orderId" }, outputs: { backToOrdersClick: "backToOrdersClick", backToOrderClick: "backToOrderClick" }, ngImport: i0, template: "<ng-container *ngIf=\"status && orderId; else failed\">\n    <ng-container [ngSwitch]=\"status\">\n        <tui-block-status *ngSwitchCase=\"'success'\">\n            <tui-svg src=\"tuiIconCheckCircleLarge\" tuiSlot=\"top\" class=\"scale-[3] !h-20 !text-green-500\"></tui-svg>\n            <h4>\u0421\u043F\u0430\u0441\u0438\u0431\u043E!</h4>\n            <br />\n            <div class=\"font-bold\">\u0412\u0430\u0448 \u0437\u0430\u043A\u0430\u0437 \u0443\u0441\u043F\u0435\u0448\u043D\u043E \u043E\u043F\u043B\u0430\u0447\u0435\u043D. \u041C\u044B \u0441\u0432\u044F\u0436\u0435\u043C\u0441\u044F \u0441 \u0432\u0430\u043C\u0438 \u0432 \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0435 \u0432\u0440\u0435\u043C\u044F.</div>\n            <br />\n            <div class=\"font-bold\">\n                \u041D\u043E\u043C\u0435\u0440 \u0432\u0430\u0448\u0435\u0433\u043E \u0437\u0430\u043A\u0430\u0437\u0430: <a tuiLink [pseudo]=\"true\" (click)=\"backToOrderClick.emit()\">{{orderId}}</a>\n            </div>\n\n            <button tuiButton (click)=\"backToOrdersClick.emit()\">\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043A \u0437\u0430\u043A\u0430\u0437\u0430\u043C</button>\n        </tui-block-status>\n        <tui-block-status *ngSwitchCase=\"'error'\">\n            <tui-svg src=\"tuiIconXCircleLarge\" class=\"scale-[3] !h-20 !text-red-500\" tuiSlot=\"top\"></tui-svg>\n            <h4>\u041E\u043F\u043B\u0430\u0442\u0430 \u043D\u0435 \u043F\u0440\u043E\u0448\u043B\u0430!</h4>\n            <br />\n            <div class=\"font-bold\">\u041F\u0440\u0438 \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0435 \u043F\u043B\u0430\u0442\u0435\u0436\u0430 \u043F\u0440\u043E\u0438\u0437\u043E\u0448\u043B\u0430 \u043E\u0448\u0438\u0431\u043A\u0430.</div>\n            <button tuiButton tuiItem (click)=\"backToOrderClick.emit()\">\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043A \u0437\u0430\u043A\u0430\u0437\u0443</button>\n        </tui-block-status>\n    </ng-container>\n</ng-container>\n\n<ng-template #failed>\n    <tui-block-status>\n        <tui-svg src=\"tuiIconInfoLarge\" class=\"scale-[3] !h-20 !text-yellow-500\" tuiSlot=\"top\"></tui-svg>\n        <h4>\u0427\u0442\u043E-\u0442\u043E \u043F\u043E\u0448\u043B\u043E \u043D\u0435 \u0442\u0430\u043A!</h4>\n        <button tuiButton tuiItem (click)=\"backToOrdersClick.emit()\">\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043A \u0437\u0430\u043A\u0430\u0437\u0430\u043C</button>\n    </tui-block-status>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: i4.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i4.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "component", type: i3$1.TuiBlockStatusComponent, selector: "tui-block-status", inputs: ["card"] }, { kind: "directive", type: i3$1.TuiBlockStatusDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPaymentStatusComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sc-payment-status', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"status && orderId; else failed\">\n    <ng-container [ngSwitch]=\"status\">\n        <tui-block-status *ngSwitchCase=\"'success'\">\n            <tui-svg src=\"tuiIconCheckCircleLarge\" tuiSlot=\"top\" class=\"scale-[3] !h-20 !text-green-500\"></tui-svg>\n            <h4>\u0421\u043F\u0430\u0441\u0438\u0431\u043E!</h4>\n            <br />\n            <div class=\"font-bold\">\u0412\u0430\u0448 \u0437\u0430\u043A\u0430\u0437 \u0443\u0441\u043F\u0435\u0448\u043D\u043E \u043E\u043F\u043B\u0430\u0447\u0435\u043D. \u041C\u044B \u0441\u0432\u044F\u0436\u0435\u043C\u0441\u044F \u0441 \u0432\u0430\u043C\u0438 \u0432 \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0435 \u0432\u0440\u0435\u043C\u044F.</div>\n            <br />\n            <div class=\"font-bold\">\n                \u041D\u043E\u043C\u0435\u0440 \u0432\u0430\u0448\u0435\u0433\u043E \u0437\u0430\u043A\u0430\u0437\u0430: <a tuiLink [pseudo]=\"true\" (click)=\"backToOrderClick.emit()\">{{orderId}}</a>\n            </div>\n\n            <button tuiButton (click)=\"backToOrdersClick.emit()\">\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043A \u0437\u0430\u043A\u0430\u0437\u0430\u043C</button>\n        </tui-block-status>\n        <tui-block-status *ngSwitchCase=\"'error'\">\n            <tui-svg src=\"tuiIconXCircleLarge\" class=\"scale-[3] !h-20 !text-red-500\" tuiSlot=\"top\"></tui-svg>\n            <h4>\u041E\u043F\u043B\u0430\u0442\u0430 \u043D\u0435 \u043F\u0440\u043E\u0448\u043B\u0430!</h4>\n            <br />\n            <div class=\"font-bold\">\u041F\u0440\u0438 \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0435 \u043F\u043B\u0430\u0442\u0435\u0436\u0430 \u043F\u0440\u043E\u0438\u0437\u043E\u0448\u043B\u0430 \u043E\u0448\u0438\u0431\u043A\u0430.</div>\n            <button tuiButton tuiItem (click)=\"backToOrderClick.emit()\">\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043A \u0437\u0430\u043A\u0430\u0437\u0443</button>\n        </tui-block-status>\n    </ng-container>\n</ng-container>\n\n<ng-template #failed>\n    <tui-block-status>\n        <tui-svg src=\"tuiIconInfoLarge\" class=\"scale-[3] !h-20 !text-yellow-500\" tuiSlot=\"top\"></tui-svg>\n        <h4>\u0427\u0442\u043E-\u0442\u043E \u043F\u043E\u0448\u043B\u043E \u043D\u0435 \u0442\u0430\u043A!</h4>\n        <button tuiButton tuiItem (click)=\"backToOrdersClick.emit()\">\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043A \u0437\u0430\u043A\u0430\u0437\u0430\u043C</button>\n    </tui-block-status>\n</ng-template>\n" }]