@snabcentr/client-ui 0.30.2 → 0.31.0

package/fesm2020/snabcentr-client-ui.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, ChangeDetectionStrategy, Inject, Input, Output, SkipSelf, Directive, HostBinding, ContentChild, ViewChild, NgModule, Optional, Injectable, ElementRef, ContentChildren, HostListener, ChangeDetectorRef, Self, inject, InjectionToken, forwardRef } from '@angular/core';
 import * as i1 from '@snabcentr/client-core';
-import { ScUserMetrikaGoalsEnum, ScISuggestionType, ScOpfList, SC_URLS, SC_PATH_IMAGE_NOT_FOUND, ScWarehouseService, ScAuthService, SEARCH_TERM, ScImageHelper, SEARCH_TERM_PROVIDERS, ScCatalogService, ScCartService, ScIconTypesEnum, ScUserService } from '@snabcentr/client-core';
+import { ScUserMetrikaGoalsEnum, ScISuggestionType, ScOpfList, SC_URLS, SC_PATH_IMAGE_NOT_FOUND, IS_RUNNING_ON_TERMINAL, TERMINAL_PROVIDERS, ScWarehouseService, ScAuthService, SEARCH_TERM, ScImageHelper, SEARCH_TERM_PROVIDERS, ScCatalogService, ScCartService, ScIconTypesEnum, ScUserService } from '@snabcentr/client-core';
 import * as i5 from 'rxjs';
 import { Subject, map, filter, switchMap, tap, catchError, of, finalize, startWith, share, timer, scan, takeWhile, endWith, distinctUntilChanged, combineLatest, debounceTime, throwError, shareReplay, interval, takeUntil, skip, merge } from 'rxjs';
 import * as i2 from '@angular/common';
@@ -2920,11 +2920,13 @@ let ScCategoriesListComponent = class ScCategoriesListComponent {
      * Инициализирует экземпляр класса {@link ScCategoriesListComponent}.
      *
      * @param urls объект информации о базовом списке ссылок приложения.
+     * @param terminal Данные о запуске приложения на терминале.
      * @param favoriteService Сервис для работы с корзиной.
      * @param cdr Объект для работы с обнаружением изменений.
      */
-    constructor(urls, favoriteService, cdr) {
+    constructor(urls, terminal, favoriteService, cdr) {
         this.urls = urls;
+        this.terminal = terminal;
         this.favoriteService = favoriteService;
         this.cdr = cdr;
         /**
@@ -2939,12 +2941,14 @@ let ScCategoriesListComponent = class ScCategoriesListComponent {
     /** @inheritDoc */
     ngOnInit() {
         this.favoriteService.categories$
-            .pipe(filter(() => !!this.categories && Boolean(this.categories.length) && 'id' in this.categories[0]), tap((categories) => {
-            this.categories?.forEach(category => {
-                category.isFavorite = categories.findIndex(item => category.id === item.id) !== -1;
+            .pipe(filter(() => !!this.categories && this.categories.length > 0 && 'id' in this.categories[0]), tap((categories) => {
+            this.categories.forEach((category) => {
+                category.isFavorite = categories.findIndex((item) => category.id === item.id) !== -1;
             });
         }), untilDestroyed(this))
-            .subscribe(() => this.cdr.markForCheck());
+            .subscribe(() => {
+            this.cdr.markForCheck();
+        });
     }
     /**
      * Возвращает путь до изображения на сервере.
@@ -2952,7 +2956,7 @@ let ScCategoriesListComponent = class ScCategoriesListComponent {
      * @param imgPath путь, где хранится изображение.
      */
     getCategoryImage(imgPath) {
-        return this.urls.imgServerUrl + '/' + imgPath;
+        return `${this.urls.imgServerUrl}/${imgPath}`;
     }
     /**
      * Проверяет наличие хотя бы одного изображения.
@@ -2964,8 +2968,8 @@ let ScCategoriesListComponent = class ScCategoriesListComponent {
         return categories.some((item) => item.properties?.image);
     }
 };
-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 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 });
+ScCategoriesListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCategoriesListComponent, deps: [{ token: SC_URLS }, { token: IS_RUNNING_ON_TERMINAL }, { 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" }, providers: [TERMINAL_PROVIDERS], ngImport: i0, template: "<div\n    [ngClass]=\"{ '!flex !flex-col': terminal.isRunningOnTerminal }\"\n    class=\"grid grid-cols-[repeat(auto-fill,minmax(21rem,1fr))] gap-x-8 gap-y-2\"\n>\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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);
@@ -2974,10 +2978,13 @@ 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 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" }]
+            args: [{ selector: 'sc-categories-list', providers: [TERMINAL_PROVIDERS], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    [ngClass]=\"{ '!flex !flex-col': terminal.isRunningOnTerminal }\"\n    class=\"grid grid-cols-[repeat(auto-fill,minmax(21rem,1fr))] gap-x-8 gap-y-2\"\n>\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]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [IS_RUNNING_ON_TERMINAL]
                 }] }, { type: i1.ScFavoriteService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { categories: [{
                 type: Input
             }], clickCategoryEvent: [{