@snabcentr/client-ui 0.11.2 → 0.11.4

package/fesm2020/snabcentr-client-ui.mjs

@@ -3,7 +3,7 @@ import { EventEmitter, Component, ChangeDetectionStrategy, Inject, Input, Output
 import * as i10 from 'rxjs';
 import { Subject, filter, map, switchMap, tap, catchError, of, finalize, startWith, share, timer, scan, takeWhile, endWith, distinctUntilChanged, shareReplay, interval, takeUntil, skip, debounceTime, merge, combineLatest, throwError } from 'rxjs';
 import * as i1 from '@snabcentr/client-core';
-import { SC_URLS, SC_PATH_IMAGE_NOT_FOUND, ScCatalogService, ScCartService, ScIconTypesEnum, ScUserService, ScISuggestionType } from '@snabcentr/client-core';
+import { SC_URLS, SC_PATH_IMAGE_NOT_FOUND, ScCatalogService, ScCartService, ScAuthService, ScIconTypesEnum, ScUserService, ScISuggestionType } from '@snabcentr/client-core';
 import * as i2 from '@angular/common';
 import { CommonModule, formatDate } from '@angular/common';
 import * as i4 from '@taiga-ui/core';
@@ -1270,10 +1270,10 @@ class ScCategoriesListComponent {
     }
 }
 ScCategoriesListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCategoriesListComponent, deps: [{ token: SC_URLS }], 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\" [src]=\"getCategoryImage(item.properties?.image)\" [alt]=\"item.name\" class=\"w-8 h-8 object-cover rounded bg-tui-base-03\" />\n            <tui-svg *ngIf=\"!item.properties?.image\" src=\"tuiIconCameraOffLarge\" class=\"bg-tui-base-03 !w-8 !h-8 rounded text-tui-base-05\"></tui-svg>\n            <div 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=\"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"] }], 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 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\" [src]=\"getCategoryImage(item.properties?.image)\" [alt]=\"item.name\" class=\"w-8 h-8 object-cover rounded bg-tui-base-03\" />\n            <tui-svg *ngIf=\"!item.properties?.image\" src=\"tuiIconCameraOffLarge\" class=\"bg-tui-base-03 !w-8 !h-8 rounded text-tui-base-05\"></tui-svg>\n            <div 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: i5.TuiRepeatTimesDirective, selector: "[tuiRepeatTimes][tuiRepeatTimesOf]", inputs: ["tuiRepeatTimesOf"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 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\" [src]=\"getCategoryImage(item.properties?.image)\" [alt]=\"item.name\" class=\"w-8 h-8 object-cover rounded bg-tui-base-03\" />\n            <tui-svg *ngIf=\"!item.properties?.image\" src=\"tuiIconCameraOffLarge\" class=\"bg-tui-base-03 !w-8 !h-8 rounded text-tui-base-05\"></tui-svg>\n            <div 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=\"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 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\" [src]=\"getCategoryImage(item.properties?.image)\" [alt]=\"item.name\" class=\"w-8 h-8 object-cover rounded bg-tui-base-03\" />\n            <tui-svg *ngIf=\"!item.properties?.image\" src=\"tuiIconCameraOffLarge\" class=\"bg-tui-base-03 !w-8 !h-8 rounded text-tui-base-05\"></tui-svg>\n            <div 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" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [SC_URLS]
@@ -1788,10 +1788,11 @@ const SC_PRODUCT_PAGINATION_PARAMS = tuiCreateToken(paginationParams$);
  *
  * @param catalogService Сервис для работы с каталогом.
  * @param cartService Сервис для работы с корзиной.
+ * @param authService Сервис для работы с аутентификации пользователей.
  * @param destroy$ Сервис завершения {@link Observable} через `takeUntil`.
  */
-function productsPaginationChangeFactory({ paramMap }, catalogService, cartService, destroy$) {
-    return paramMap.pipe(map((params) => params.get('categoryId')), filter(tuiIsPresent), switchMap((categoryId) => paginationParams$.pipe(debounceTime(20), switchMap((paginationParams) => catalogService.getCategoryProducts$(Number(categoryId), paginationParams)), filter(tuiIsPresent), scan((acc, value) => {
+function productsPaginationChangeFactory({ paramMap }, catalogService, cartService, authService, destroy$) {
+    return paramMap.pipe(map((params) => params.get('categoryId')), filter(tuiIsPresent), switchMap((categoryId) => paginationParams$.pipe(debounceTime(20), switchMap((paginationParams) => authService.getAuthChange().pipe(switchMap(() => catalogService.getCategoryProducts$(Number(categoryId), paginationParams)))), filter(tuiIsPresent), scan((acc, value) => {
         if (acc && value && value.meta.currentPage > 1)
             value.data.unshift(...acc.data);
         return value;
@@ -1841,7 +1842,7 @@ const SC_PRODUCT_PAGINATION_CHANGE_PROVIDERS = [
     TuiDestroyService,
     {
         provide: SC_PRODUCT_PAGINATION_CHANGE_INFO,
-        deps: [ActivatedRoute, ScCatalogService, ScCartService, TuiDestroyService],
+        deps: [ActivatedRoute, ScCatalogService, ScCartService, ScAuthService, TuiDestroyService],
         useFactory: productsPaginationChangeFactory,
     },
     {