@snabcentr/client-ui 0.28.0 → 0.28.3

package/fesm2020/snabcentr-client-ui.mjs

@@ -3320,6 +3320,12 @@ class ScPriceCardComponent extends AbstractScPriceCard {
          */
         this.isMobile = inject(TUI_IS_MOBILE);
     }
+    /**
+     * Признак того, что компонент находится в корзине.
+     */
+    get isInCart() {
+        return Boolean(this.cartItem);
+    }
     /**
      * Устанавливает компонент в очередь на обновление.
      */
@@ -3328,10 +3334,10 @@ class ScPriceCardComponent extends AbstractScPriceCard {
     }
 }
 ScPriceCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceCardComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ScPriceCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScPriceCardComponent, selector: "sc-price-card", inputs: { size: "size" }, host: { properties: { "attr.data-size": "this.size", "attr.is_mobile": "this.isMobile" } }, 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        <tui-svg\n            *ngIf=\"product.isPreviouslyOrdered\"\n            src=\"scIconStar\"\n            class=\"absolute right-2 top-2 text-red-700\"\n        ></tui-svg>\n    </div>\n    <div class=\"p-2\">\n        <tui-elastic-container class=\"shrink-0\">\n            <a\n                tuiLink\n                class=\"name\"\n                iconAlign=\"left\"\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=\"text-tui-text-02\"\n            >\n                \u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}\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                iconAlign=\"left\"\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-svg\n                    src=\"tuiIconInfoLarge\"\n                    [tuiHint]=\"discountHint\"\n                    [tuiHintShowDelay]=\"100\"\n                    tuiHintDirection=\"top\"\n                    class=\"!h-4 text-black\"\n                ></tui-svg>\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                [showLoader]=\"quantityShowLoader\"\n                [size]=\"size === 's' ? 'xs' : 's'\"\n                class=\"mt-2 grow\"\n                icon=\"tuiIconShoppingCart\"\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                [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[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] .name{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}:host[is_mobile=false] .code,:host[is_mobile=false] .history{display:none}:host[is_mobile=false] .cart-actions{max-height:0;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out}:host[is_mobile=false]:hover .code,:host[is_mobile=false]:hover .history,:host[is_mobile=false]:hover .name{overflow:visible;display:block;-webkit-box-orient:horizontal;-webkit-line-clamp:none}:host[is_mobile=false]:hover .cart-actions{max-height:3rem}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i4.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "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: i4.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i4.TuiHintDriverDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)" }, { kind: "directive", type: i4.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i4.TuiHintPositionDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintDirection"] }, { kind: "component", type: i4.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: i4$1.TuiElasticContainerComponent, selector: "tui-elastic-container" }, { kind: "directive", type: i4$1.TuiHighlightDirective, selector: "[tuiHighlight]", inputs: ["tuiHighlight", "tuiHighlightColor"] }, { 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", "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 });
+ScPriceCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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-svg\n                *ngIf=\"product.isPreviouslyOrdered\"\n                src=\"tuiIconStarLarge\"\n                class=\"!size-6 rounded-lg !fill-white text-tui-negative\"\n            ></tui-svg>\n            <tui-svg\n                *ngIf=\"product.cartItem\"\n                src=\"tuiIconCheck\"\n                class=\"!size-6 rounded-lg bg-tui-primary text-white\"\n            ></tui-svg>\n        </div>\n    </div>\n    <div class=\"p-2\">\n        <tui-elastic-container class=\"shrink-0\">\n            <a\n                tuiLink\n                class=\"name\"\n                iconAlign=\"left\"\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=\"text-tui-text-02\"\n            >\n                \u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}\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                iconAlign=\"left\"\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-svg\n                    src=\"tuiIconInfoLarge\"\n                    [tuiHint]=\"discountHint\"\n                    [tuiHintShowDelay]=\"100\"\n                    tuiHintDirection=\"top\"\n                    class=\"!h-4 text-black\"\n                ></tui-svg>\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                [showLoader]=\"quantityShowLoader\"\n                [size]=\"size === 's' ? 'xs' : 's'\"\n                class=\"mt-2 grow\"\n                icon=\"tuiIconShoppingCart\"\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                [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: "component", type: i4.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i4.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "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: i4.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i4.TuiHintDriverDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)" }, { kind: "directive", type: i4.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i4.TuiHintPositionDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintDirection"] }, { kind: "component", type: i4.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: i4$1.TuiElasticContainerComponent, selector: "tui-elastic-container" }, { kind: "directive", type: i4$1.TuiHighlightDirective, selector: "[tuiHighlight]", inputs: ["tuiHighlight", "tuiHighlightColor"] }, { 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", "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: "14.3.0", 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        <tui-svg\n            *ngIf=\"product.isPreviouslyOrdered\"\n            src=\"scIconStar\"\n            class=\"absolute right-2 top-2 text-red-700\"\n        ></tui-svg>\n    </div>\n    <div class=\"p-2\">\n        <tui-elastic-container class=\"shrink-0\">\n            <a\n                tuiLink\n                class=\"name\"\n                iconAlign=\"left\"\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=\"text-tui-text-02\"\n            >\n                \u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}\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                iconAlign=\"left\"\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-svg\n                    src=\"tuiIconInfoLarge\"\n                    [tuiHint]=\"discountHint\"\n                    [tuiHintShowDelay]=\"100\"\n                    tuiHintDirection=\"top\"\n                    class=\"!h-4 text-black\"\n                ></tui-svg>\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                [showLoader]=\"quantityShowLoader\"\n                [size]=\"size === 's' ? 'xs' : 's'\"\n                class=\"mt-2 grow\"\n                icon=\"tuiIconShoppingCart\"\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                [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[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] .name{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}:host[is_mobile=false] .code,:host[is_mobile=false] .history{display:none}:host[is_mobile=false] .cart-actions{max-height:0;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out}:host[is_mobile=false]:hover .code,:host[is_mobile=false]:hover .history,:host[is_mobile=false]:hover .name{overflow:visible;display:block;-webkit-box-orient:horizontal;-webkit-line-clamp:none}:host[is_mobile=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 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-svg\n                *ngIf=\"product.isPreviouslyOrdered\"\n                src=\"tuiIconStarLarge\"\n                class=\"!size-6 rounded-lg !fill-white text-tui-negative\"\n            ></tui-svg>\n            <tui-svg\n                *ngIf=\"product.cartItem\"\n                src=\"tuiIconCheck\"\n                class=\"!size-6 rounded-lg bg-tui-primary text-white\"\n            ></tui-svg>\n        </div>\n    </div>\n    <div class=\"p-2\">\n        <tui-elastic-container class=\"shrink-0\">\n            <a\n                tuiLink\n                class=\"name\"\n                iconAlign=\"left\"\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=\"text-tui-text-02\"\n            >\n                \u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}\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                iconAlign=\"left\"\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-svg\n                    src=\"tuiIconInfoLarge\"\n                    [tuiHint]=\"discountHint\"\n                    [tuiHintShowDelay]=\"100\"\n                    tuiHintDirection=\"top\"\n                    class=\"!h-4 text-black\"\n                ></tui-svg>\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                [showLoader]=\"quantityShowLoader\"\n                [size]=\"size === 's' ? 'xs' : 's'\"\n                class=\"mt-2 grow\"\n                icon=\"tuiIconShoppingCart\"\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                [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"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { size: [{
                 type: Input
             }, {
@@ -3340,6 +3346,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }], isMobile: [{
                 type: HostBinding,
                 args: ['attr.is_mobile']
+            }], isInCart: [{
+                type: HostBinding,
+                args: ['attr.is_in_cart']
             }] } });
 
 /**
@@ -3564,10 +3573,10 @@ class ScPriceListPaginationComponent {
     }
 }
 ScPriceListPaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceListPaginationComponent, deps: [{ token: SC_NEXT_PAGE_PAGINATION_CLICK }, { token: SC_PRODUCT_PAGINATION_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
-ScPriceListPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScPriceListPaginationComponent, selector: "sc-price-list-pagination", inputs: { meta: "meta", loadingPagination: "loadingPagination" }, providers: [SC_PRODUCT_PAGINATION_CHANGE_PROVIDERS], ngImport: i0, template: "<button *ngIf=\"meta?.currentPage !== meta?.lastPage\" tuiButton (click)=\"nextPageClickEvent.emit()\" [disabled]=\"loadingPagination\" appearance=\"secondary\" size=\"l\" class=\"w-full\">\n    \u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0435\u0449\u0451 {{ options.perPage }} \u0442\u043E\u0432\u0430\u0440\u043E\u0432\n</button>\n<!-- \u0412 \u0431\u0443\u0434\u0443\u0449\u0435\u043C \u043C\u043E\u0436\u043D\u043E \u0434\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043F\u0430\u0433\u0438\u043D\u0430\u0446\u0438\u044E \u043F\u043E \u043D\u043E\u043C\u0435\u0440\u0430\u043C \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u044B. -->\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ScPriceListPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScPriceListPaginationComponent, selector: "sc-price-list-pagination", inputs: { meta: "meta", loadingPagination: "loadingPagination" }, providers: [SC_PRODUCT_PAGINATION_CHANGE_PROVIDERS], ngImport: i0, template: "<button\n    *ngIf=\"meta?.currentPage !== meta?.lastPage\"\n    tuiButton\n    (click)=\"nextPageClickEvent.emit()\"\n    [disabled]=\"loadingPagination\"\n    appearance=\"secondary\"\n    class=\"!font-bold\"\n>\n    \u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0435\u0449\u0451 {{ options.perPage }} \u0442\u043E\u0432\u0430\u0440\u043E\u0432\n</button>\n<!-- \u0412 \u0431\u0443\u0434\u0443\u0449\u0435\u043C \u043C\u043E\u0436\u043D\u043E \u0434\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043F\u0430\u0433\u0438\u043D\u0430\u0446\u0438\u044E \u043F\u043E \u043D\u043E\u043C\u0435\u0440\u0430\u043C \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u044B. -->\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceListPaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-price-list-pagination', changeDetection: ChangeDetectionStrategy.OnPush, providers: [SC_PRODUCT_PAGINATION_CHANGE_PROVIDERS], template: "<button *ngIf=\"meta?.currentPage !== meta?.lastPage\" tuiButton (click)=\"nextPageClickEvent.emit()\" [disabled]=\"loadingPagination\" appearance=\"secondary\" size=\"l\" class=\"w-full\">\n    \u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0435\u0449\u0451 {{ options.perPage }} \u0442\u043E\u0432\u0430\u0440\u043E\u0432\n</button>\n<!-- \u0412 \u0431\u0443\u0434\u0443\u0449\u0435\u043C \u043C\u043E\u0436\u043D\u043E \u0434\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043F\u0430\u0433\u0438\u043D\u0430\u0446\u0438\u044E \u043F\u043E \u043D\u043E\u043C\u0435\u0440\u0430\u043C \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u044B. -->\n" }]
+            args: [{ selector: 'sc-price-list-pagination', changeDetection: ChangeDetectionStrategy.OnPush, providers: [SC_PRODUCT_PAGINATION_CHANGE_PROVIDERS], template: "<button\n    *ngIf=\"meta?.currentPage !== meta?.lastPage\"\n    tuiButton\n    (click)=\"nextPageClickEvent.emit()\"\n    [disabled]=\"loadingPagination\"\n    appearance=\"secondary\"\n    class=\"!font-bold\"\n>\n    \u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0435\u0449\u0451 {{ options.perPage }} \u0442\u043E\u0432\u0430\u0440\u043E\u0432\n</button>\n<!-- \u0412 \u0431\u0443\u0434\u0443\u0449\u0435\u043C \u043C\u043E\u0436\u043D\u043E \u0434\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043F\u0430\u0433\u0438\u043D\u0430\u0446\u0438\u044E \u043F\u043E \u043D\u043E\u043C\u0435\u0440\u0430\u043C \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u044B. -->\n" }]
         }], ctorParameters: function () { return [{ type: i0.EventEmitter, decorators: [{
                     type: Inject,
                     args: [SC_NEXT_PAGE_PAGINATION_CLICK]