@snabcentr/client-ui 2.6.1 → 3.1.0

package/fesm2022/snabcentr-client-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, Inject, Input, Output, inject, DestroyRef, SkipSelf, Directive, HostBinding, ContentChild, ViewChild, NgModule, ContentChildren, HostListener, Renderer2, ElementRef, Pipe, Optional, Injectable, forwardRef, InjectionToken } from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Inject, Input, Output, inject, DestroyRef, SkipSelf, Directive, HostBinding, ContentChild, ViewChild, NgModule, ContentChildren, HostListener, Renderer2, ElementRef, Pipe, Optional, Injectable, signal, forwardRef, InjectionToken } from '@angular/core';
 import * as i1 from '@snabcentr/client-core';
 import { ScUserMetrikaGoalsEnum, ScISuggestionType, SC_MIN_LENGTH_SEARCH_TERM, ScOpfList, ScWarehouseService, ScAuthService, SEARCH_TERM, ScUnitsHelper, ScImageHelper, SC_PATH_IMAGE_NOT_FOUND, ScPhoneService, IS_RUNNING_ON_TERMINAL, SC_URLS, TERMINAL_PROVIDERS, SEARCH_TERM_PROVIDERS, ScPaginationService, SC_NEXT_PAGE_PAGINATION_CLICK, SC_PRODUCT_PAGINATION_OPTIONS, ScIconTypesEnum, ScDocumentInfoTypesEnum, ScSamplesService, ScUserService } from '@snabcentr/client-core';
 import * as i6$1 from 'rxjs';
@@ -19,7 +19,7 @@ import { AbstractTuiControl, TuiInputModule, TuiTextfieldControllerModule, TuiCo
 import * as i8 from '@maskito/angular';
 import { MaskitoDirective } from '@maskito/angular';
 import * as i2$1 from '@taiga-ui/kit';
-import { TuiAccordionItem, TuiElasticContainer, TuiAccordion, TuiPreview, TuiFieldErrorPipe, TuiFilterByInputPipe, TuiStringifyContentPipe, TuiDataListWrapper, TuiButtonLoading, TuiCarousel, TuiCheckbox, TuiStepper, TuiHighlight, TuiPreviewDialogService, TuiTreeService, TuiTreeItemContent, TUI_TREE_START, TUI_TREE_CONTENT, TUI_TREE_LOADING, TUI_TREE_LOADER, TuiTree, TuiAvatar } from '@taiga-ui/kit';
+import { TuiAccordionItem, TuiElasticContainer, TuiAccordion, TuiPreview, TuiFieldErrorPipe, TuiFilterByInputPipe, TuiStringifyContentPipe, TuiDataListWrapper, TuiButtonLoading, TuiCarousel, TuiCheckbox, TuiStepper, TuiPagination, TuiHighlight, TuiAvatar, TuiBadge, TuiLineClamp, TuiPreviewDialogService, TuiTreeService, TuiTreeItemContent, TUI_TREE_START, TUI_TREE_CONTENT, TUI_TREE_LOADING, TUI_TREE_LOADER, TuiTree } from '@taiga-ui/kit';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i2$2 from '@taiga-ui/polymorpheus';
 import { injectContext, PolymorpheusTemplate, PolymorpheusOutlet, POLYMORPHEUS_CONTEXT, PolymorpheusComponent } from '@taiga-ui/polymorpheus';
@@ -1637,6 +1637,15 @@ class AbstractScPriceCard {
     getCardImagePreview() {
         return this.product ? this.imageHelper.getImagePreview(this.product) : this.pathImageNotFound;
     }
+    /**
+     * Возвращает массив превью-изображений товара.
+     *
+     * @param product Объект товара.
+     */
+    getCardImagePreviewList(product) {
+        const images = this.imageHelper.getProductImagePreviewList(product);
+        return images.length > 0 ? images : [this.pathImageNotFound];
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AbstractScPriceCard, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: AbstractScPriceCard, inputs: { cartItem: "cartItem", product: "product", showQuantityControl: "showQuantityControl" }, outputs: { clickFavoriteEvent: "clickFavoriteEvent", clickAddToCartEvent: "clickAddToCartEvent", clickClearEvent: "clickClearEvent", clickCardEvent: "clickCardEvent", clickPriceHistoryEvent: "clickPriceHistoryEvent", quantityValueChanges: "quantityValueChanges" }, ngImport: i0 }); }
 }
@@ -3171,23 +3180,17 @@ class ScCategoryCardComponent {
      * Инициализирует экземпляр класса {@link CategoryCardComponent}.
      *
      * @param urls Список ссылок на разделы backend'a.
-     * @param renderer Экземпляр базового класса для реализации пользовательского рендеринга.
      * @param pathImageNotFound Путь до изображения 'Товар не найден'.
+     * @param cdr Объект для работы с обнаружением изменений.
      */
-    constructor(urls, renderer, pathImageNotFound, authService, cdr) {
+    constructor(urls, pathImageNotFound, cdr) {
         this.urls = urls;
-        this.renderer = renderer;
         this.pathImageNotFound = pathImageNotFound;
-        this.authService = authService;
         this.cdr = cdr;
         /**
          * Размер карточки категории.
          */
         this.size = 'm';
-        /**
-         * Признак, что карточка является скелетоном.
-         */
-        this.isSkeleton = false;
         /**
          * Признак, что необходимо отобразить лоадер для кнопки избранных товаров и категорий.
          */
@@ -3195,11 +3198,15 @@ class ScCategoryCardComponent {
         /**
          * {@link Observable} изменения статуса авторизации.
          */
-        this.authStatus$ = this.authService.getAuthChange();
+        this.authStatus$ = inject(ScAuthService).getAuthChange();
         /**
-         * Признак что категория имеет поведение наведения и скрытия названия.
+         * Признак наведения на карточку.
          */
         this.isHovered = false;
+        /**
+         * Признак того, отображается этот компонент на мобильном устройстве или нет.
+         */
+        this.isMobile = inject(TUI_IS_MOBILE);
         /**
          * Событие нажатия на карточку категории.
          */
@@ -3210,71 +3217,52 @@ class ScCategoryCardComponent {
         this.clickOnFavoriteEvent = new EventEmitter();
     }
     /**
-     * Возвращает путь к изображению категории. Если путь отсутствует, то вернёт изображение по-умолчанию ("product_not_found").
+     * Обработчик события наведения.
      *
-     * @param category Информация о категории.
+     * @param isHovered Признак наведения на карточку.
      */
-    getCategoryImgURL(category) {
-        return category.properties?.image ? this.urls.imgServerUrl + '/' + category.properties?.image : this.pathImageNotFound;
+    onHovered(isHovered) {
+        this.isHovered = isHovered;
     }
     /**
-     * Обработчик события mousemove.
-     */
-    moveEnterHandler() {
-        if (this.isHovered) {
-            this.name.nativeElement.style.maxHeight = `${this.name.nativeElement.scrollHeight / 16}rem`;
-        }
-    }
-    /**
-     * Обработчик события mouseleave.
+     * Возвращает путь к изображению категории. Если путь отсутствует, то вернёт изображение по-умолчанию ("product_not_found").
+     *
+     * @param category Информация о категории.
      */
-    mouseLeaveHandler() {
-        if (this.isHovered) {
-            this.renderer.setStyle(this.name.nativeElement, 'maxHeight', null);
-        }
+    getCategoryImgURL(category) {
+        return category.properties?.image ? `${this.urls.imgServerUrl}/${category.properties.image}` : this.pathImageNotFound;
     }
     /**
      * Устанавливает компонент в очередь на обновление.
+     *
+     * @deprecated
      */
     markForCheck() {
         this.cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ScCategoryCardComponent, deps: [{ token: SC_URLS }, { token: i0.Renderer2 }, { token: SC_PATH_IMAGE_NOT_FOUND }, { token: i1.ScAuthService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: ScCategoryCardComponent, selector: "sc-category-card", inputs: { category: "category", size: "size", isSkeleton: "isSkeleton", isHovered: "isHovered" }, outputs: { clickOnCardEvent: "clickOnCardEvent", clickOnFavoriteEvent: "clickOnFavoriteEvent" }, host: { listeners: { "mousemove": "moveEnterHandler()", "mouseleave": "mouseLeaveHandler()" }, properties: { "attr.data-size": "this.size" } }, viewQueries: [{ propertyName: "name", first: true, predicate: ["name"], descendants: true }], ngImport: i0, template: "<div class=\"relative group\">\n    <button\n        (click)=\"clickOnCardEvent.emit(category)\"\n        [class.pointer-events-none]=\"!category || isSkeleton\"\n        class=\"category-btn flex flex-col relative rounded-tui-radius-m overflow-hidden shadow-sc-2\"\n    >\n        <div class=\"img-wrapper w-full grow bg-tui-base-02 overflow-hidden\">\n            <img *ngIf=\"category && !isSkeleton\" [src]=\"getCategoryImgURL(category)\" [alt]=\"category.name\" class=\"w-full\" />\n        </div>\n        <div #name [attr.data-is-hovered]=\"!isHovered\" class=\"name grid items-center justify-center font-bold bg-white w-full overflow-hidden shrink-0 duration-300\">\n            <span *ngIf=\"category && !isSkeleton; else skeletonName\">{{ category.name }}</span>\n            <ng-template #skeletonName>\n                <div class=\"skeleton-name bg-tui-base-02 rounded-tui-radius-s\"></div>\n            </ng-template>\n        </div>\n    </button>\n    <sc-favorite-btn\n        *ngIf=\"category && !isSkeleton && (authStatus$ | async)\"\n        [showLoader]=\"favoriteShowLoader\"\n        [isFavorite]=\"category.isFavorite\"\n        (clickEvent)=\"clickOnFavoriteEvent.emit()\"\n        class=\"absolute left-1 top-1\"\n    ></sc-favorite-btn>\n</div>\n", styles: [":host[data-size=m] button.category-btn{width:100%;height:12.5rem}:host[data-size=m] button.category-btn .img-wrapper{max-height:8.75rem}:host[data-size=m] button.category-btn .name{min-height:2.5rem;padding-inline:.75rem;margin-block:.75rem}:host[data-size=m] button.category-btn .name:not([data-is-hovered=true]){max-height:2.5rem}:host[data-size=m] button.category-btn .name .skeleton-name{width:10rem;height:1rem}:host[data-size=s] button.category-btn{width:100%;height:10rem}:host[data-size=s] button.category-btn .img-wrapper{max-height:8.75rem}:host[data-size=s] button.category-btn .name{min-height:2rem;font-size:.75rem;line-height:1rem;padding-inline:.5rem;margin-block:.5rem}:host[data-size=s] button.category-btn .name:not([data-is-hovered=true]){max-height:2rem}:host[data-size=s] button.category-btn .name .skeleton-name{width:7rem;height:.75rem}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ScFavoriteBtnComponent, selector: "sc-favorite-btn", inputs: ["isFavorite", "showLoader", "disabled"], outputs: ["clickEvent"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ScCategoryCardComponent, deps: [{ token: SC_URLS }, { token: SC_PATH_IMAGE_NOT_FOUND }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: ScCategoryCardComponent, selector: "sc-category-card", inputs: { category: "category", size: "size" }, outputs: { clickOnCardEvent: "clickOnCardEvent", clickOnFavoriteEvent: "clickOnFavoriteEvent" }, host: { properties: { "attr.data-size": "this.size" } }, ngImport: i0, template: "<div class=\"relative\">\n    <button\n        (click)=\"clickOnCardEvent.emit(category)\"\n        (tuiHoveredChange)=\"onHovered($event)\"\n        class=\"category-btn rounded-tui-radius-m border-tui-base-04 flex flex-col overflow-hidden border\"\n    >\n        <div class=\"img-wrapper w-full grow overflow-hidden\">\n            <img\n                *ngIf=\"category && category.properties?.image\"\n                [src]=\"getCategoryImgURL(category)\"\n                [alt]=\"category.name\"\n                class=\"size-full object-cover\"\n            />\n\n            <div\n                *ngIf=\"!category\"\n                class=\"img-wrapper bg-tui-base-02 size-full\"\n            ></div>\n\n            <img\n                *ngIf=\"category && !category.properties?.image\"\n                [src]=\"getCategoryImgURL(category)\"\n                [alt]=\"category.name\"\n                class=\"size-full rounded-xl object-contain p-2\"\n            />\n        </div>\n\n        <div class=\"name flex w-full items-center justify-center\">\n            <tui-line-clamp\n                *ngIf=\"category; else skeletonName\"\n                [content]=\"category.name\"\n                class=\"pointer-events-none !h-auto\"\n                [linesLimit]=\"isHovered || isMobile ? 4 : 2\"\n            />\n        </div>\n        <ng-template #skeletonName>\n            <div class=\"skeleton-name bg-tui-base-02 rounded-tui-radius-s\"></div>\n        </ng-template>\n    </button>\n    <sc-favorite-btn\n        *ngIf=\"category && (authStatus$ | async)\"\n        [showLoader]=\"favoriteShowLoader\"\n        [isFavorite]=\"category.isFavorite\"\n        (clickEvent)=\"clickOnFavoriteEvent.emit()\"\n        class=\"absolute left-1 top-1\"\n    ></sc-favorite-btn>\n</div>\n", styles: [":host{--tui-duration: .15s}:host[data-size=m] button.category-btn{width:100%;height:12.5rem}:host[data-size=m] button.category-btn .img-wrapper{max-height:8.75rem}:host[data-size=m] button.category-btn .name{padding:.25rem 1rem;margin-block:auto;font-size:.9375rem;line-height:1.5rem;font-weight:800}:host[data-size=m] button.category-btn .name .skeleton-name{width:10rem;height:1rem}:host[data-size=s] button.category-btn{width:100%;height:10rem}:host[data-size=s] button.category-btn .img-wrapper{max-height:7rem}:host[data-size=s] button.category-btn .name{padding:.25rem .5rem;margin-block:auto;font-size:.8125rem;line-height:1.25rem;font-weight:800}:host[data-size=s] button.category-btn .name .skeleton-name{width:7rem;height:.75rem}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.TuiLineClamp, selector: "tui-line-clamp", inputs: ["lineHeight", "content", "linesLimit"], outputs: ["overflownChange"] }, { kind: "directive", type: i6.TuiHovered, selector: "[tuiHoveredChange]", outputs: ["tuiHoveredChange"] }, { kind: "component", type: ScFavoriteBtnComponent, selector: "sc-favorite-btn", inputs: ["isFavorite", "showLoader", "disabled"], outputs: ["clickEvent"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ScCategoryCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-category-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative group\">\n    <button\n        (click)=\"clickOnCardEvent.emit(category)\"\n        [class.pointer-events-none]=\"!category || isSkeleton\"\n        class=\"category-btn flex flex-col relative rounded-tui-radius-m overflow-hidden shadow-sc-2\"\n    >\n        <div class=\"img-wrapper w-full grow bg-tui-base-02 overflow-hidden\">\n            <img *ngIf=\"category && !isSkeleton\" [src]=\"getCategoryImgURL(category)\" [alt]=\"category.name\" class=\"w-full\" />\n        </div>\n        <div #name [attr.data-is-hovered]=\"!isHovered\" class=\"name grid items-center justify-center font-bold bg-white w-full overflow-hidden shrink-0 duration-300\">\n            <span *ngIf=\"category && !isSkeleton; else skeletonName\">{{ category.name }}</span>\n            <ng-template #skeletonName>\n                <div class=\"skeleton-name bg-tui-base-02 rounded-tui-radius-s\"></div>\n            </ng-template>\n        </div>\n    </button>\n    <sc-favorite-btn\n        *ngIf=\"category && !isSkeleton && (authStatus$ | async)\"\n        [showLoader]=\"favoriteShowLoader\"\n        [isFavorite]=\"category.isFavorite\"\n        (clickEvent)=\"clickOnFavoriteEvent.emit()\"\n        class=\"absolute left-1 top-1\"\n    ></sc-favorite-btn>\n</div>\n", styles: [":host[data-size=m] button.category-btn{width:100%;height:12.5rem}:host[data-size=m] button.category-btn .img-wrapper{max-height:8.75rem}:host[data-size=m] button.category-btn .name{min-height:2.5rem;padding-inline:.75rem;margin-block:.75rem}:host[data-size=m] button.category-btn .name:not([data-is-hovered=true]){max-height:2.5rem}:host[data-size=m] button.category-btn .name .skeleton-name{width:10rem;height:1rem}:host[data-size=s] button.category-btn{width:100%;height:10rem}:host[data-size=s] button.category-btn .img-wrapper{max-height:8.75rem}:host[data-size=s] button.category-btn .name{min-height:2rem;font-size:.75rem;line-height:1rem;padding-inline:.5rem;margin-block:.5rem}:host[data-size=s] button.category-btn .name:not([data-is-hovered=true]){max-height:2rem}:host[data-size=s] button.category-btn .name .skeleton-name{width:7rem;height:.75rem}\n"] }]
+            args: [{ selector: 'sc-category-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative\">\n    <button\n        (click)=\"clickOnCardEvent.emit(category)\"\n        (tuiHoveredChange)=\"onHovered($event)\"\n        class=\"category-btn rounded-tui-radius-m border-tui-base-04 flex flex-col overflow-hidden border\"\n    >\n        <div class=\"img-wrapper w-full grow overflow-hidden\">\n            <img\n                *ngIf=\"category && category.properties?.image\"\n                [src]=\"getCategoryImgURL(category)\"\n                [alt]=\"category.name\"\n                class=\"size-full object-cover\"\n            />\n\n            <div\n                *ngIf=\"!category\"\n                class=\"img-wrapper bg-tui-base-02 size-full\"\n            ></div>\n\n            <img\n                *ngIf=\"category && !category.properties?.image\"\n                [src]=\"getCategoryImgURL(category)\"\n                [alt]=\"category.name\"\n                class=\"size-full rounded-xl object-contain p-2\"\n            />\n        </div>\n\n        <div class=\"name flex w-full items-center justify-center\">\n            <tui-line-clamp\n                *ngIf=\"category; else skeletonName\"\n                [content]=\"category.name\"\n                class=\"pointer-events-none !h-auto\"\n                [linesLimit]=\"isHovered || isMobile ? 4 : 2\"\n            />\n        </div>\n        <ng-template #skeletonName>\n            <div class=\"skeleton-name bg-tui-base-02 rounded-tui-radius-s\"></div>\n        </ng-template>\n    </button>\n    <sc-favorite-btn\n        *ngIf=\"category && (authStatus$ | async)\"\n        [showLoader]=\"favoriteShowLoader\"\n        [isFavorite]=\"category.isFavorite\"\n        (clickEvent)=\"clickOnFavoriteEvent.emit()\"\n        class=\"absolute left-1 top-1\"\n    ></sc-favorite-btn>\n</div>\n", styles: [":host{--tui-duration: .15s}:host[data-size=m] button.category-btn{width:100%;height:12.5rem}:host[data-size=m] button.category-btn .img-wrapper{max-height:8.75rem}:host[data-size=m] button.category-btn .name{padding:.25rem 1rem;margin-block:auto;font-size:.9375rem;line-height:1.5rem;font-weight:800}:host[data-size=m] button.category-btn .name .skeleton-name{width:10rem;height:1rem}:host[data-size=s] button.category-btn{width:100%;height:10rem}:host[data-size=s] button.category-btn .img-wrapper{max-height:7rem}:host[data-size=s] button.category-btn .name{padding:.25rem .5rem;margin-block:auto;font-size:.8125rem;line-height:1.25rem;font-weight:800}:host[data-size=s] button.category-btn .name .skeleton-name{width:7rem;height:.75rem}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [SC_URLS]
-                }] }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
+                }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [SC_PATH_IMAGE_NOT_FOUND]
-                }] }, { type: i1.ScAuthService }, { type: i0.ChangeDetectorRef }], propDecorators: { category: [{
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { category: [{
                 type: Input
-            }], name: [{
-                type: ViewChild,
-                args: ['name']
             }], size: [{
                 type: Input
             }, {
                 type: HostBinding,
                 args: ['attr.data-size']
-            }], isSkeleton: [{
-                type: Input
-            }], isHovered: [{
-                type: Input
             }], clickOnCardEvent: [{
                 type: Output
             }], clickOnFavoriteEvent: [{
                 type: Output
-            }], moveEnterHandler: [{
-                type: HostListener,
-                args: ['mousemove']
-            }], mouseLeaveHandler: [{
-                type: HostListener,
-                args: ['mouseleave']
             }] } });
 
 /* eslint-disable @typescript-eslint/dot-notation */
@@ -3428,6 +3416,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 args: ['keydown.arrowUp', ['step']]
             }] } });
 
+/**
+ * Компонент просмотра изображений через событие наведения.
+ */
+class HoverImageCarouselComponent {
+    constructor() {
+        /**
+         * Массив изображений.
+         */
+        this.images = [];
+        /**
+         * {@link WritableSignal} для отслеживания текущего индекса изображения.
+         */
+        this.currentIndex = signal(0);
+    }
+    /**
+     * Обработчик события mousemove.
+     *
+     * @param offsetX Отступ курсора мыши по оси X от края {@link HTMLElement}.
+     * @param target Объект {@link HTMLElement} в котором лежат изображения
+     */
+    onHover(offsetX, target) {
+        if (this.images.length <= 1 || offsetX < 0) {
+            return;
+        }
+        const elementWidth = target.offsetWidth;
+        const hoverPercentage = offsetX / elementWidth;
+        const newIndex = Math.floor(hoverPercentage * this.images.length);
+        this.currentIndex.set(newIndex);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HoverImageCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: HoverImageCarouselComponent, isStandalone: true, selector: "sc-hover-image-carousel", inputs: { images: "images" }, host: { listeners: { "mousemove.silent": "onHover($event.offsetX,$event.target)" } }, ngImport: i0, template: "<div\n    class=\"overflow-hidden rounded-xl\"\n    [class.mb-2]=\"images.length <= 1\"\n    [style.aspect-ratio]=\"'20/19'\"\n>\n    <img\n        [src]=\"images[currentIndex()]\"\n        class=\"size-full rounded-xl object-contain\"\n    />\n</div>\n\n@if (images.length > 1) {\n    <tui-pagination\n        size=\"s\"\n        [length]=\"images.length\"\n        [index]=\"currentIndex()\"\n    />\n}\n", dependencies: [{ kind: "component", type: TuiPagination, selector: "tui-pagination", inputs: ["length", "focusable", "size", "disabled", "activePadding", "sidePadding", "content", "index"], outputs: ["indexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HoverImageCarouselComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-hover-image-carousel', standalone: true, imports: [TuiPagination], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"overflow-hidden rounded-xl\"\n    [class.mb-2]=\"images.length <= 1\"\n    [style.aspect-ratio]=\"'20/19'\"\n>\n    <img\n        [src]=\"images[currentIndex()]\"\n        class=\"size-full rounded-xl object-contain\"\n    />\n</div>\n\n@if (images.length > 1) {\n    <tui-pagination\n        size=\"s\"\n        [length]=\"images.length\"\n        [index]=\"currentIndex()\"\n    />\n}\n" }]
+        }], propDecorators: { images: [{
+                type: Input
+            }], onHover: [{
+                type: HostListener,
+                args: ['mousemove.silent', ['$event.offsetX', '$event.target']]
+            }] } });
+
 /**
  * Компонент информации о наличии товара на складе.
  */
@@ -3490,12 +3520,6 @@ class ScPriceCardComponent extends AbstractScPriceCard {
          */
         this.isMobile = inject(TUI_IS_MOBILE);
     }
-    /**
-     * Признак того, что компонент находится в корзине.
-     */
-    get isInCart() {
-        return Boolean(this.cartItem);
-    }
     /**
      * Устанавливает компонент в очередь на обновление.
      */
@@ -3503,22 +3527,16 @@ class ScPriceCardComponent extends AbstractScPriceCard {
         this.cdr.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ScPriceCardComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: ScPriceCardComponent, selector: "sc-price-card", inputs: { size: "size" }, host: { properties: { "attr.data-size": "this.size", "attr.is_mobile": "this.isMobile", "attr.is_in_cart": "this.isInCart" } }, providers: [SEARCH_TERM_PROVIDERS], usesInheritance: true, ngImport: i0, template: "<div\n    *ngIf=\"product; else skeleton\"\n    class=\"card-wrapper relative flex w-auto min-w-40 flex-col rounded-xl shadow-md\"\n>\n    <div class=\"flex grow flex-col justify-center overflow-hidden rounded-xl p-2\">\n        <img\n            (click)=\"clickCardEvent.emit()\"\n            [src]=\"getCardImagePreview()\"\n            [alt]=\"product.name\"\n            class=\"max-h-full w-full rounded-xl object-cover\"\n        />\n        <sc-favorite-btn\n            *ngIf=\"authStatus$ | async\"\n            class=\"absolute left-2 top-2\"\n            (clickEvent)=\"clickFavoriteEvent.emit()\"\n            [showLoader]=\"favoriteShowLoader\"\n            [isFavorite]=\"product.isFavorite\"\n            [disabled]=\"!!product.primaryCategory?.isFavorite\"\n        ></sc-favorite-btn>\n        <div class=\"absolute right-2 top-2 m-1 flex gap-2\">\n            <tui-icon\n                *ngIf=\"product.isPreviouslyOrdered\"\n                icon=\"@tui.star\"\n                class=\"!size-6 rounded-lg !fill-white text-tui-negative\"\n            ></tui-icon>\n            <tui-icon\n                *ngIf=\"product.cartItem\"\n                icon=\"@tui.check\"\n                class=\"!size-6 rounded-lg bg-tui-primary text-white\"\n            ></tui-icon>\n        </div>\n    </div>\n    <div class=\"p-2\">\n        <tui-elastic-container class=\"shrink-0\">\n            <a\n                tuiLink\n                class=\"name\"\n                [tuiHighlight]=\"(search$ | async) ?? ''\"\n                (click)=\"clickCardEvent.emit()\"\n            >\n                {{ product.name }}\n            </a>\n        </tui-elastic-container>\n        <tui-elastic-container class=\"shrink-0\">\n            <p\n                *ngIf=\"product?.pack\"\n                class=\"flex items-center gap-1 text-tui-text-02\"\n            >\n                \u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}\n                <tui-icon\n                    *ngIf=\"product.ignoreMinCountCheck\"\n                    icon=\"@tui.package\"\n                    [tuiHint]=\"minCountHint\"\n                    [tuiHintShowDelay]=\"100\"\n                    tuiHintDirection=\"top\"\n                    class=\"text-xl\"\n                ></tui-icon>\n                <ng-template #minCountHint>\n                    \u0414\u043E\u0441\u0442\u0443\u043F\u0435\u043D \u0437\u0430\u043A\u0430\u0437 <br />\n                    \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u043B\u044C\u043D\u043E\u0433\u043E <br />\n                    \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u0430\n                </ng-template>\n            </p>\n            <p\n                [tuiHighlight]=\"(search$ | async) ?? ''\"\n                class=\"code text-tui-text-02\"\n            >\n                \u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}\n            </p>\n\n            <a\n                tuiLink\n                *ngIf=\"!isMobile && (authStatus$ | async) && product?.costDate\"\n                aria-disabled=\"true\"\n                class=\"history\"\n                (click)=\"clickPriceHistoryEvent.emit()\"\n            >\n                \u0414\u0430\u0442\u0430: {{ product.costDate }}\n            </a>\n        </tui-elastic-container>\n        <div\n            *ngIf=\"warehouseSelect$ | async as warehouseSelect\"\n            class=\"flex flex-col\"\n        >\n            <span\n                *ngIf=\"product.discount && !isMobile\"\n                class=\"flex items-center text-tui-text-02\"\n            >\n                <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                <span class=\"font-bold text-tui-success-fill\"> -{{ product.discount.percent }}% </span>\n                <tui-icon\n                    icon=\"@tui.info\"\n                    [tuiHint]=\"discountHint\"\n                    [tuiHintShowDelay]=\"100\"\n                    tuiHintDirection=\"top\"\n                    class=\"!h-4 text-black\"\n                ></tui-icon>\n                <ng-template #discountHint>\n                    <div class=\"font-bold\">{{ product.discount.name }}</div>\n                    <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n                </ng-template>\n            </span>\n            <span\n                [class.text-tui-text-02]=\"!product.isWarehouseStockExist(warehouseSelect.id)\"\n                class=\"cost font-bold\"\n                >{{ product.costRubString }}</span\n            >\n            <span\n                *ngIf=\"!product.priceInRub\"\n                class=\"hidden font-bold text-tui-text-02 group-hover:block\"\n                >{{ product.costString }}</span\n            >\n            <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n        </div>\n        <div class=\"cart-actions flex shrink-0 overflow-hidden\">\n            <button\n                *ngIf=\"!showQuantityControl\"\n                tuiButton\n                (click)=\"clickAddToCartEvent.emit(product)\"\n                [loading]=\"quantityShowLoader\"\n                [size]=\"size === 's' ? 'xs' : 's'\"\n                class=\"mt-2 grow\"\n                iconStart=\"@tui.shopping-cart\"\n            >\n                \u0412 \u043A\u043E\u0440\u0437\u0438\u043D\u0443\n            </button>\n            <sc-input-quantity\n                #inputQuantity\n                *ngIf=\"showQuantityControl\"\n                [formControl]=\"quantityControl\"\n                [size]=\"size\"\n                [step]=\"unitsHelper.productMultiplicity(product)\"\n                [ignoreStepValidators]=\"product.ignoreMinCountCheck\"\n                [showLoader]=\"quantityShowLoader\"\n                (clickClearEvent)=\"clickClearEvent.emit(cartItem)\"\n                class=\"mt-2 w-full\"\n                (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n            ></sc-input-quantity>\n        </div>\n    </div>\n</div>\n\n<ng-template #skeleton>\n    <div class=\"card-wrapper flex flex-col overflow-hidden rounded-xl bg-white shadow-sc-1\">\n        <!-- \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 -->\n        <div class=\"h-3/5 w-full rounded-t bg-tui-base-02\"></div>\n        <!-- \u041A\u0440\u0430\u0442\u043A\u0430\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F \u043E \u0442\u043E\u0432\u0430\u0440\u0435 -->\n        <div class=\"flex grow flex-col gap-2.5 rounded-b bg-white p-5\">\n            <div class=\"h-4 w-full rounded bg-tui-base-02\"></div>\n            <div class=\"h-4 w-3/5 rounded bg-tui-base-02\"></div>\n            <div class=\"h-4 w-full rounded bg-tui-base-02\"></div>\n        </div>\n    </div>\n</ng-template>\n", styles: [":host .name{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}:host[data-size=s] .card-wrapper{height:16rem;font:var(--tui-font-text-xs)}:host[data-size=s] .card-wrapper .name,:host[data-size=s] .card-wrapper .cost{font:var(--tui-font-text-s);font-weight:800}:host[data-size=m] .card-wrapper{height:20rem;font:var(--tui-font-text-s)}:host[data-size=m] .card-wrapper .name,:host[data-size=m] .card-wrapper .cost{font:var(--tui-font-text-m);font-weight:800}:host[is_mobile=false][is_in_cart=false] .name{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}:host[is_mobile=false][is_in_cart=false] .code,:host[is_mobile=false][is_in_cart=false] .history{display:none}:host[is_mobile=false][is_in_cart=false] .cart-actions{max-height:0;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out}:host[is_mobile=false][is_in_cart=false]:hover .code,:host[is_mobile=false][is_in_cart=false]:hover .history,:host[is_mobile=false][is_in_cart=false]:hover .name{display:-webkit-box;-webkit-line-clamp:4}:host[is_mobile=false][is_in_cart=false]:hover .cart-actions{max-height:3rem}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: i1$1.TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintContext", "tuiHintAppearance", "tuiHint"] }, { kind: "directive", type: i1$1.TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "component", type: i2$1.TuiElasticContainer, selector: "tui-elastic-container" }, { kind: "directive", type: i2$1.TuiHighlight, selector: "[tuiHighlight]", inputs: ["tuiHighlight", "tuiHighlightColor"] }, { kind: "component", type: i2$1.TuiButtonLoading, selector: "[tuiButton][loading],[tuiIconButton][loading]", inputs: ["size", "loading"] }, { kind: "component", type: ScFavoriteBtnComponent, selector: "sc-favorite-btn", inputs: ["isFavorite", "showLoader", "disabled"], outputs: ["clickEvent"] }, { kind: "component", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: ["step", "showLoader", "showCross", "ignoreStepValidators", "appearance", "isDisabled", "size"], outputs: ["clickClearEvent"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint", "fromMain"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: ScPriceCardComponent, selector: "sc-price-card", inputs: { size: "size" }, host: { properties: { "attr.data-size": "this.size" } }, providers: [SEARCH_TERM_PROVIDERS], usesInheritance: true, ngImport: i0, template: "<div\n    *ngIf=\"product; else skeleton\"\n    class=\"card-wrapper relative flex h-full w-auto flex-col rounded-xl p-1\"\n>\n    <div class=\"flex items-center justify-between\">\n        <span\n            [tuiHighlight]=\"(search$ | async) ?? ''\"\n            class=\"code text-tui-text-02\"\n        >\n            \u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}\n        </span>\n\n        <div class=\"flex gap-2\">\n            <sc-favorite-btn\n                (clickEvent)=\"clickFavoriteEvent.emit()\"\n                [showLoader]=\"favoriteShowLoader\"\n                [isFavorite]=\"product.isFavorite\"\n                [disabled]=\"!!product.primaryCategory?.isFavorite\"\n            ></sc-favorite-btn>\n            <tui-avatar\n                *ngIf=\"product.isPreviouslyOrdered\"\n                src=\"@tui.star-filled\"\n                size=\"s\"\n                [style.background]=\"'var(--tui-status-negative-pale-hover)'\"\n                [style.color]=\"'var(--tui-text-negative)'\"\n            ></tui-avatar>\n        </div>\n    </div>\n\n    <sc-hover-image-carousel\n        (click)=\"clickCardEvent.emit()\"\n        [images]=\"!isMobile ? getCardImagePreviewList(product) : [getCardImagePreview()]\"\n        class=\"cursor-pointer\"\n    ></sc-hover-image-carousel>\n    <div class=\"flex grow flex-col justify-between gap-1\">\n        <div class=\"flex flex-col gap-1\">\n            <a\n                tuiLink\n                class=\"name\"\n                [tuiHighlight]=\"(search$ | async) ?? ''\"\n                (click)=\"clickCardEvent.emit()\"\n            >\n                {{ product.name }}\n            </a>\n            <div\n                *ngIf=\"product?.pack\"\n                class=\"flex items-center gap-1 text-tui-text-02\"\n            >\n                \u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}\n                <tui-icon\n                    *ngIf=\"product.ignoreMinCountCheck\"\n                    icon=\"@tui.package\"\n                    [tuiHint]=\"minCountHint\"\n                    [tuiHintShowDelay]=\"100\"\n                    class=\"text-body-xl text-tui-text-01 opacity-90\"\n                    tuiHintDirection=\"top\"\n                    class=\"text-xl\"\n                ></tui-icon>\n                <ng-template #minCountHint>\n                    \u0414\u043E\u0441\u0442\u0443\u043F\u0435\u043D \u0437\u0430\u043A\u0430\u0437 <br />\n                    \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u043B\u044C\u043D\u043E\u0433\u043E <br />\n                    \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u0430\n                </ng-template>\n            </div>\n            <span *ngIf=\"!isMobile && (authStatus$ | async) && product?.costDate\">\n                \u0414\u0430\u0442\u0430:\n                <a\n                    tuiLink\n                    [pseudo]=\"true\"\n                    class=\"text-tui-text-02\"\n                    (click)=\"clickPriceHistoryEvent.emit()\"\n                >\n                    {{ product.costDate }}\n                </a>\n            </span>\n            <div\n                *ngIf=\"warehouseSelect$ | async as warehouseSelect\"\n                class=\"flex flex-wrap items-center gap-x-2 gap-y-1\"\n            >\n                <div class=\"flex flex-wrap items-center gap-x-2 gap-y-1\">\n                    <span\n                        [class.text-tui-text-02]=\"!product.isWarehouseStockExist(warehouseSelect.id)\"\n                        class=\"cost\"\n                        >{{ product.costRubString }}</span\n                    >\n                    <tui-badge\n                        *ngIf=\"product.discount as discount\"\n                        size=\"m\"\n                        class=\"text-body-xs\"\n                        [style.background]=\"'var(--tui-status-positive)'\"\n                        [tuiHint]=\"discountHint\"\n                        [tuiHintShowDelay]=\"100\"\n                        tuiHintDirection=\"top\"\n                    >\n                        <tui-badge\n                            *ngIf=\"product.discount as discount\"\n                            size=\"s\"\n                            [style.background]=\"'var(--tui-background-base)'\"\n                            class=\"text-tui-text-02 text-body-xs-bold\"\n                        >\n                            {{ discount.percent }}%\n                        </tui-badge>\n                        <span class=\"line-through\">{{ product.discountCostString }}</span>\n                        <ng-template #discountHint>\n                            <div class=\"font-bold\">{{ product.discount.name }}</div>\n                            <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n                        </ng-template>\n                    </tui-badge>\n                </div>\n                <span\n                    *ngIf=\"!product.priceInRub\"\n                    class=\"text-body-xs-bold text-tui-text-02\"\n                    >{{ product.costString }}</span\n                >\n            </div>\n            <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n        </div>\n        <div class=\"mt-1 flex gap-2\">\n            <button\n                *ngIf=\"!showQuantityControl\"\n                tuiButton\n                (click)=\"clickAddToCartEvent.emit(product)\"\n                [loading]=\"quantityShowLoader\"\n                [size]=\"size === 's' ? 'xs' : 's'\"\n                class=\"grow !font-extrabold\"\n                iconStart=\"@tui.shopping-cart\"\n            >\n                \u0412 \u043A\u043E\u0440\u0437\u0438\u043D\u0443\n            </button>\n            <sc-input-quantity\n                #inputQuantity\n                *ngIf=\"showQuantityControl\"\n                [formControl]=\"quantityControl\"\n                [size]=\"size\"\n                [step]=\"unitsHelper.productMultiplicity(product)\"\n                [ignoreStepValidators]=\"product.ignoreMinCountCheck\"\n                [showLoader]=\"quantityShowLoader\"\n                (clickClearEvent)=\"clickClearEvent.emit(cartItem)\"\n                class=\"w-full\"\n                (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n            ></sc-input-quantity>\n            <tui-avatar\n                *ngIf=\"product.cartItem && !showQuantityControl\"\n                src=\"@tui.check\"\n                size=\"s\"\n                [style.background]=\"'var(--tui-status-warning-pale)'\"\n                [style.color]=\"'var(--tui-background-accent-1)'\"\n            ></tui-avatar>\n        </div>\n    </div>\n</div>\n\n<ng-template #skeleton>\n    <div class=\"card-wrapper relative flex h-full w-auto flex-col rounded-xl p-1\"></div>\n</ng-template>\n", styles: [":host tui-badge{--t-padding: .25rem !important}:host .name{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}:host[data-size=s] .card-wrapper{font-size:.6875rem;line-height:1rem;font-weight:500}:host[data-size=s] .card-wrapper .name,:host[data-size=s] .card-wrapper .cost{font-size:.8125rem;line-height:1.25rem;font-weight:800}:host[data-size=m] .card-wrapper{font-size:.8125rem;line-height:1.25rem;font-weight:500}:host[data-size=m] .card-wrapper .name,:host[data-size=m] .card-wrapper .cost{font-size:.9375rem;line-height:1.5rem;font-weight:800}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: i1$1.TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintContext", "tuiHintAppearance", "tuiHint"] }, { kind: "directive", type: i1$1.TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "directive", type: i2$1.TuiHighlight, selector: "[tuiHighlight]", inputs: ["tuiHighlight", "tuiHighlightColor"] }, { kind: "component", type: i2$1.TuiButtonLoading, selector: "[tuiButton][loading],[tuiIconButton][loading]", inputs: ["size", "loading"] }, { kind: "component", type: i2$1.TuiAvatar, selector: "tui-avatar,button[tuiAvatar],a[tuiAvatar]", inputs: ["size", "round", "src"] }, { kind: "directive", type: i2$1.TuiBadge, selector: "tui-badge,[tuiBadge]", inputs: ["size"] }, { kind: "component", type: HoverImageCarouselComponent, selector: "sc-hover-image-carousel", inputs: ["images"] }, { kind: "component", type: ScFavoriteBtnComponent, selector: "sc-favorite-btn", inputs: ["isFavorite", "showLoader", "disabled"], outputs: ["clickEvent"] }, { kind: "component", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: ["step", "showLoader", "showCross", "ignoreStepValidators", "appearance", "isDisabled", "size"], outputs: ["clickClearEvent"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint", "fromMain"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ScPriceCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-price-card', providers: [SEARCH_TERM_PROVIDERS], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    *ngIf=\"product; else skeleton\"\n    class=\"card-wrapper relative flex w-auto min-w-40 flex-col rounded-xl shadow-md\"\n>\n    <div class=\"flex grow flex-col justify-center overflow-hidden rounded-xl p-2\">\n        <img\n            (click)=\"clickCardEvent.emit()\"\n            [src]=\"getCardImagePreview()\"\n            [alt]=\"product.name\"\n            class=\"max-h-full w-full rounded-xl object-cover\"\n        />\n        <sc-favorite-btn\n            *ngIf=\"authStatus$ | async\"\n            class=\"absolute left-2 top-2\"\n            (clickEvent)=\"clickFavoriteEvent.emit()\"\n            [showLoader]=\"favoriteShowLoader\"\n            [isFavorite]=\"product.isFavorite\"\n            [disabled]=\"!!product.primaryCategory?.isFavorite\"\n        ></sc-favorite-btn>\n        <div class=\"absolute right-2 top-2 m-1 flex gap-2\">\n            <tui-icon\n                *ngIf=\"product.isPreviouslyOrdered\"\n                icon=\"@tui.star\"\n                class=\"!size-6 rounded-lg !fill-white text-tui-negative\"\n            ></tui-icon>\n            <tui-icon\n                *ngIf=\"product.cartItem\"\n                icon=\"@tui.check\"\n                class=\"!size-6 rounded-lg bg-tui-primary text-white\"\n            ></tui-icon>\n        </div>\n    </div>\n    <div class=\"p-2\">\n        <tui-elastic-container class=\"shrink-0\">\n            <a\n                tuiLink\n                class=\"name\"\n                [tuiHighlight]=\"(search$ | async) ?? ''\"\n                (click)=\"clickCardEvent.emit()\"\n            >\n                {{ product.name }}\n            </a>\n        </tui-elastic-container>\n        <tui-elastic-container class=\"shrink-0\">\n            <p\n                *ngIf=\"product?.pack\"\n                class=\"flex items-center gap-1 text-tui-text-02\"\n            >\n                \u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}\n                <tui-icon\n                    *ngIf=\"product.ignoreMinCountCheck\"\n                    icon=\"@tui.package\"\n                    [tuiHint]=\"minCountHint\"\n                    [tuiHintShowDelay]=\"100\"\n                    tuiHintDirection=\"top\"\n                    class=\"text-xl\"\n                ></tui-icon>\n                <ng-template #minCountHint>\n                    \u0414\u043E\u0441\u0442\u0443\u043F\u0435\u043D \u0437\u0430\u043A\u0430\u0437 <br />\n                    \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u043B\u044C\u043D\u043E\u0433\u043E <br />\n                    \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u0430\n                </ng-template>\n            </p>\n            <p\n                [tuiHighlight]=\"(search$ | async) ?? ''\"\n                class=\"code text-tui-text-02\"\n            >\n                \u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}\n            </p>\n\n            <a\n                tuiLink\n                *ngIf=\"!isMobile && (authStatus$ | async) && product?.costDate\"\n                aria-disabled=\"true\"\n                class=\"history\"\n                (click)=\"clickPriceHistoryEvent.emit()\"\n            >\n                \u0414\u0430\u0442\u0430: {{ product.costDate }}\n            </a>\n        </tui-elastic-container>\n        <div\n            *ngIf=\"warehouseSelect$ | async as warehouseSelect\"\n            class=\"flex flex-col\"\n        >\n            <span\n                *ngIf=\"product.discount && !isMobile\"\n                class=\"flex items-center text-tui-text-02\"\n            >\n                <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                <span class=\"font-bold text-tui-success-fill\"> -{{ product.discount.percent }}% </span>\n                <tui-icon\n                    icon=\"@tui.info\"\n                    [tuiHint]=\"discountHint\"\n                    [tuiHintShowDelay]=\"100\"\n                    tuiHintDirection=\"top\"\n                    class=\"!h-4 text-black\"\n                ></tui-icon>\n                <ng-template #discountHint>\n                    <div class=\"font-bold\">{{ product.discount.name }}</div>\n                    <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n                </ng-template>\n            </span>\n            <span\n                [class.text-tui-text-02]=\"!product.isWarehouseStockExist(warehouseSelect.id)\"\n                class=\"cost font-bold\"\n                >{{ product.costRubString }}</span\n            >\n            <span\n                *ngIf=\"!product.priceInRub\"\n                class=\"hidden font-bold text-tui-text-02 group-hover:block\"\n                >{{ product.costString }}</span\n            >\n            <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n        </div>\n        <div class=\"cart-actions flex shrink-0 overflow-hidden\">\n            <button\n                *ngIf=\"!showQuantityControl\"\n                tuiButton\n                (click)=\"clickAddToCartEvent.emit(product)\"\n                [loading]=\"quantityShowLoader\"\n                [size]=\"size === 's' ? 'xs' : 's'\"\n                class=\"mt-2 grow\"\n                iconStart=\"@tui.shopping-cart\"\n            >\n                \u0412 \u043A\u043E\u0440\u0437\u0438\u043D\u0443\n            </button>\n            <sc-input-quantity\n                #inputQuantity\n                *ngIf=\"showQuantityControl\"\n                [formControl]=\"quantityControl\"\n                [size]=\"size\"\n                [step]=\"unitsHelper.productMultiplicity(product)\"\n                [ignoreStepValidators]=\"product.ignoreMinCountCheck\"\n                [showLoader]=\"quantityShowLoader\"\n                (clickClearEvent)=\"clickClearEvent.emit(cartItem)\"\n                class=\"mt-2 w-full\"\n                (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n            ></sc-input-quantity>\n        </div>\n    </div>\n</div>\n\n<ng-template #skeleton>\n    <div class=\"card-wrapper flex flex-col overflow-hidden rounded-xl bg-white shadow-sc-1\">\n        <!-- \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 -->\n        <div class=\"h-3/5 w-full rounded-t bg-tui-base-02\"></div>\n        <!-- \u041A\u0440\u0430\u0442\u043A\u0430\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F \u043E \u0442\u043E\u0432\u0430\u0440\u0435 -->\n        <div class=\"flex grow flex-col gap-2.5 rounded-b bg-white p-5\">\n            <div class=\"h-4 w-full rounded bg-tui-base-02\"></div>\n            <div class=\"h-4 w-3/5 rounded bg-tui-base-02\"></div>\n            <div class=\"h-4 w-full rounded bg-tui-base-02\"></div>\n        </div>\n    </div>\n</ng-template>\n", styles: [":host .name{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}:host[data-size=s] .card-wrapper{height:16rem;font:var(--tui-font-text-xs)}:host[data-size=s] .card-wrapper .name,:host[data-size=s] .card-wrapper .cost{font:var(--tui-font-text-s);font-weight:800}:host[data-size=m] .card-wrapper{height:20rem;font:var(--tui-font-text-s)}:host[data-size=m] .card-wrapper .name,:host[data-size=m] .card-wrapper .cost{font:var(--tui-font-text-m);font-weight:800}:host[is_mobile=false][is_in_cart=false] .name{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}:host[is_mobile=false][is_in_cart=false] .code,:host[is_mobile=false][is_in_cart=false] .history{display:none}:host[is_mobile=false][is_in_cart=false] .cart-actions{max-height:0;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out}:host[is_mobile=false][is_in_cart=false]:hover .code,:host[is_mobile=false][is_in_cart=false]:hover .history,:host[is_mobile=false][is_in_cart=false]:hover .name{display:-webkit-box;-webkit-line-clamp:4}:host[is_mobile=false][is_in_cart=false]:hover .cart-actions{max-height:3rem}\n"] }]
+            args: [{ selector: 'sc-price-card', providers: [SEARCH_TERM_PROVIDERS], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    *ngIf=\"product; else skeleton\"\n    class=\"card-wrapper relative flex h-full w-auto flex-col rounded-xl p-1\"\n>\n    <div class=\"flex items-center justify-between\">\n        <span\n            [tuiHighlight]=\"(search$ | async) ?? ''\"\n            class=\"code text-tui-text-02\"\n        >\n            \u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}\n        </span>\n\n        <div class=\"flex gap-2\">\n            <sc-favorite-btn\n                (clickEvent)=\"clickFavoriteEvent.emit()\"\n                [showLoader]=\"favoriteShowLoader\"\n                [isFavorite]=\"product.isFavorite\"\n                [disabled]=\"!!product.primaryCategory?.isFavorite\"\n            ></sc-favorite-btn>\n            <tui-avatar\n                *ngIf=\"product.isPreviouslyOrdered\"\n                src=\"@tui.star-filled\"\n                size=\"s\"\n                [style.background]=\"'var(--tui-status-negative-pale-hover)'\"\n                [style.color]=\"'var(--tui-text-negative)'\"\n            ></tui-avatar>\n        </div>\n    </div>\n\n    <sc-hover-image-carousel\n        (click)=\"clickCardEvent.emit()\"\n        [images]=\"!isMobile ? getCardImagePreviewList(product) : [getCardImagePreview()]\"\n        class=\"cursor-pointer\"\n    ></sc-hover-image-carousel>\n    <div class=\"flex grow flex-col justify-between gap-1\">\n        <div class=\"flex flex-col gap-1\">\n            <a\n                tuiLink\n                class=\"name\"\n                [tuiHighlight]=\"(search$ | async) ?? ''\"\n                (click)=\"clickCardEvent.emit()\"\n            >\n                {{ product.name }}\n            </a>\n            <div\n                *ngIf=\"product?.pack\"\n                class=\"flex items-center gap-1 text-tui-text-02\"\n            >\n                \u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}\n                <tui-icon\n                    *ngIf=\"product.ignoreMinCountCheck\"\n                    icon=\"@tui.package\"\n                    [tuiHint]=\"minCountHint\"\n                    [tuiHintShowDelay]=\"100\"\n                    class=\"text-body-xl text-tui-text-01 opacity-90\"\n                    tuiHintDirection=\"top\"\n                    class=\"text-xl\"\n                ></tui-icon>\n                <ng-template #minCountHint>\n                    \u0414\u043E\u0441\u0442\u0443\u043F\u0435\u043D \u0437\u0430\u043A\u0430\u0437 <br />\n                    \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u043B\u044C\u043D\u043E\u0433\u043E <br />\n                    \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u0430\n                </ng-template>\n            </div>\n            <span *ngIf=\"!isMobile && (authStatus$ | async) && product?.costDate\">\n                \u0414\u0430\u0442\u0430:\n                <a\n                    tuiLink\n                    [pseudo]=\"true\"\n                    class=\"text-tui-text-02\"\n                    (click)=\"clickPriceHistoryEvent.emit()\"\n                >\n                    {{ product.costDate }}\n                </a>\n            </span>\n            <div\n                *ngIf=\"warehouseSelect$ | async as warehouseSelect\"\n                class=\"flex flex-wrap items-center gap-x-2 gap-y-1\"\n            >\n                <div class=\"flex flex-wrap items-center gap-x-2 gap-y-1\">\n                    <span\n                        [class.text-tui-text-02]=\"!product.isWarehouseStockExist(warehouseSelect.id)\"\n                        class=\"cost\"\n                        >{{ product.costRubString }}</span\n                    >\n                    <tui-badge\n                        *ngIf=\"product.discount as discount\"\n                        size=\"m\"\n                        class=\"text-body-xs\"\n                        [style.background]=\"'var(--tui-status-positive)'\"\n                        [tuiHint]=\"discountHint\"\n                        [tuiHintShowDelay]=\"100\"\n                        tuiHintDirection=\"top\"\n                    >\n                        <tui-badge\n                            *ngIf=\"product.discount as discount\"\n                            size=\"s\"\n                            [style.background]=\"'var(--tui-background-base)'\"\n                            class=\"text-tui-text-02 text-body-xs-bold\"\n                        >\n                            {{ discount.percent }}%\n                        </tui-badge>\n                        <span class=\"line-through\">{{ product.discountCostString }}</span>\n                        <ng-template #discountHint>\n                            <div class=\"font-bold\">{{ product.discount.name }}</div>\n                            <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n                        </ng-template>\n                    </tui-badge>\n                </div>\n                <span\n                    *ngIf=\"!product.priceInRub\"\n                    class=\"text-body-xs-bold text-tui-text-02\"\n                    >{{ product.costString }}</span\n                >\n            </div>\n            <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n        </div>\n        <div class=\"mt-1 flex gap-2\">\n            <button\n                *ngIf=\"!showQuantityControl\"\n                tuiButton\n                (click)=\"clickAddToCartEvent.emit(product)\"\n                [loading]=\"quantityShowLoader\"\n                [size]=\"size === 's' ? 'xs' : 's'\"\n                class=\"grow !font-extrabold\"\n                iconStart=\"@tui.shopping-cart\"\n            >\n                \u0412 \u043A\u043E\u0440\u0437\u0438\u043D\u0443\n            </button>\n            <sc-input-quantity\n                #inputQuantity\n                *ngIf=\"showQuantityControl\"\n                [formControl]=\"quantityControl\"\n                [size]=\"size\"\n                [step]=\"unitsHelper.productMultiplicity(product)\"\n                [ignoreStepValidators]=\"product.ignoreMinCountCheck\"\n                [showLoader]=\"quantityShowLoader\"\n                (clickClearEvent)=\"clickClearEvent.emit(cartItem)\"\n                class=\"w-full\"\n                (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n            ></sc-input-quantity>\n            <tui-avatar\n                *ngIf=\"product.cartItem && !showQuantityControl\"\n                src=\"@tui.check\"\n                size=\"s\"\n                [style.background]=\"'var(--tui-status-warning-pale)'\"\n                [style.color]=\"'var(--tui-background-accent-1)'\"\n            ></tui-avatar>\n        </div>\n    </div>\n</div>\n\n<ng-template #skeleton>\n    <div class=\"card-wrapper relative flex h-full w-auto flex-col rounded-xl p-1\"></div>\n</ng-template>\n", styles: [":host tui-badge{--t-padding: .25rem !important}:host .name{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}:host[data-size=s] .card-wrapper{font-size:.6875rem;line-height:1rem;font-weight:500}:host[data-size=s] .card-wrapper .name,:host[data-size=s] .card-wrapper .cost{font-size:.8125rem;line-height:1.25rem;font-weight:800}:host[data-size=m] .card-wrapper{font-size:.8125rem;line-height:1.25rem;font-weight:500}:host[data-size=m] .card-wrapper .name,:host[data-size=m] .card-wrapper .cost{font-size:.9375rem;line-height:1.5rem;font-weight:800}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { size: [{
                 type: Input
             }, {
                 type: HostBinding,
                 args: ['attr.data-size']
-            }], isMobile: [{
-                type: HostBinding,
-                args: ['attr.is_mobile']
-            }], isInCart: [{
-                type: HostBinding,
-                args: ['attr.is_in_cart']
             }] } });
 
 /**
@@ -3719,7 +3737,12 @@ class ScCatalogModule {
             TuiLineDaysChart,
             TuiLineDaysChartHint,
             TuiAxes,
-            TuiButtonLoading], exports: [ScPriceListPaginationComponent,
+            TuiButtonLoading,
+            TuiAvatar,
+            TuiBadge,
+            HoverImageCarouselComponent,
+            TuiLineClamp,
+            TuiHovered], exports: [ScPriceListPaginationComponent,
             ScCategoryCardComponent,
             ScFavoriteBtnComponent,
             ScInputQuantityComponent,
@@ -3737,7 +3760,10 @@ class ScCatalogModule {
             TuiElasticContainer,
             TuiLineDaysChart,
             TuiAxes,
-            TuiButtonLoading] }); }
+            TuiButtonLoading,
+            TuiAvatar,
+            HoverImageCarouselComponent,
+            TuiLineClamp] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ScCatalogModule, decorators: [{
             type: NgModule,
@@ -3785,6 +3811,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         TuiLineDaysChartHint,
                         TuiAxes,
                         TuiButtonLoading,
+                        TuiAvatar,
+                        TuiBadge,
+                        HoverImageCarouselComponent,
+                        TuiLineClamp,
+                        TuiHovered,
                     ],
                 }]
         }] });
@@ -3814,8 +3845,6 @@ class ScCartItemMobileComponent {
      *
      * @param unitsHelper Экземпляр класса-помощника для работы со значениями единиц измерения товара.
      * @param previewDialogService Сервис диалогового окна предварительного просмотра.
-     * @param urls Список ссылок на разделы backend'a.
-     * @param pathImageNotFound Путь до изображения 'Товар не найден'.
      */
     constructor(unitsHelper, previewDialogService) {
         this.unitsHelper = unitsHelper;