@snabcentr/client-ui 0.2.16 → 0.2.20

package/fesm2015/snabcentr-client-ui.mjs

@@ -341,14 +341,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Проверяет кратность значения.
  *
  * @param step Шаг кратности.
- * @param tolerance Допустимая погрешность.
+ * @param precision Точность, количество чисел после запятой.
  */
-function stepValidator(step, tolerance = 0.0001) {
+function stepValidator(step, precision = 3) {
     return ({ value }) => {
         if (value) {
-            const controlValue = value / step;
-            const closestMultiple = Math.round(controlValue / step) * step;
-            return Math.abs(controlValue - closestMultiple) > tolerance ? { error: `Число не кратно ${step}` } : null;
+            return Number((value / step).toFixed(precision)) % 1 !== 0 ? { error: `Число не кратно ${step}` } : null;
         }
         return null;
     };
@@ -393,6 +391,12 @@ class ScInputQuantityComponent extends AbstractTuiNullableControl {
          */
         this.clickClearEvent = new EventEmitter();
     }
+    /**
+     * Возвращает элемент, который может быть сфокусирован.
+     */
+    get nativeFocusableElement() {
+        return this.numberInput.nativeFocusableElement;
+    }
     get focused() {
         var _a;
         return !!((_a = this.numberInput) === null || _a === void 0 ? void 0 : _a.focused);
@@ -559,7 +563,7 @@ class ScCartItemMobileComponent {
         /**
          * {@link FormControl} поля ввода количества товара в корзине.
          */
-        this.quantityControl = new FormControl(0);
+        this.quantityControl = new FormControl(0, { updateOn: 'blur' });
         /**
          * {@link Observable} изменения количества товара в корзине.
          */
@@ -618,10 +622,10 @@ class ScCartItemMobileComponent {
     }
 }
 ScCartItemMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCartItemMobileComponent, deps: [{ token: UnitsHelper }, { token: TuiPreviewDialogService }, { token: SC_URLS }, { token: SC_PATH_IMAGE_NOT_FOUND }], target: i0.ɵɵFactoryTarget.Component });
-ScCartItemMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScCartItemMobileComponent, selector: "sc-cart-item-mobile", inputs: { cartItem: "cartItem" }, outputs: { quantityValueChanges: "quantityValueChanges", clickDeleteEvent: "clickDeleteEvent", clickSettingsEvent: "clickSettingsEvent", clickCardEvent: "clickCardEvent" }, viewQueries: [{ propertyName: "specificationPreviewRef", first: true, predicate: ["specificationPreview"], descendants: true }], ngImport: i0, template: "<div class=\"ml-2 mt-2 relative p-4 gap-y-2 gap-x-4 flex flex-wrap bg-white border border-tui-base-04 shadow-sc-2 rounded-xl\">\n    <ng-container *ngIf=\"cartItem && product; else skeleton\">\n        <!--\n        TODO: \u041D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u0430 \u0440\u0435\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u044F \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B\u0430.\n        <button tuiIconButton size=\"m\" icon=\"scIconVerticalThreeDots\" appearance=\"float\" tuiMode=\"onLight\" class=\"!absolute right-0 top-0\"></button>\n        -->\n        <button\n            tuiIconButton\n            size=\"m\"\n            icon=\"tuiIconTrash2Large\"\n            appearance=\"secondary\"\n            tuiMode=\"onLight\"\n            (click)=\"clickDeleteEvent.emit()\"\n            class=\"shadow-sc-2 !absolute -left-2 -top-2\"\n        ></button>\n        <div class=\"flex gap-2\">\n            <div class=\"flex shrink-0 h-20 w-20 justify-center items-center overflow-hidden\">\n                <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" [class.p-5]=\"!product.images?.length\" class=\"cursor-pointer\" />\n            </div>\n\n            <div class=\"flex flex-wrap self-center gap-x-8 gap-y-0.5\">\n                <div class=\"w-[13rem]\">\n                    <a tuiLink (click)=\"clickCardEvent.emit()\">\n                        <span class=\"font-bold\">{{ product.name }}</span>\n                    </a>\n                    <div class=\"text-tui-text-02 text-xs\">\n                        <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                        <p *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n                        <a tuiLink *ngIf=\"cartItem.specificationImgUrl\" (click)=\"showSpecification()\">\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a>\n                        <ng-template #specificationPreview let-preview>\n                            <tui-preview [rotatable]=\"false\" [zoomable]=\"false\">\n                                <img *polymorpheusOutlet=\"cartItem.specificationImgUrl as src\" alt=\"preview\" [src]=\"cartItem.specificationImgUrl\" />\n                                <button icon=\"tuiIconClose\" title=\"Close\" tuiIconButton tuiPreviewAction type=\"button\" (click)=\"preview.complete()\"></button>\n                            </tui-preview>\n                        </ng-template>\n                    </div>\n                </div>\n                <div class=\"flex flex-col self-center w-[10rem] gap-x-8 gap-y-0.5\">\n                    <span *ngIf=\"product.discount\" class=\"flex items-center text-xs text-tui-text-02\">\n                        <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                        <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n                        <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-tui-text-01 !text-xs !h-4\"></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                    <p class=\"flex flex-col items-baseline gap-x-2 font-bold\">\n                        <span>{{ product.costRubString }}</span>\n                        <span *ngIf=\"!product.priceInRub\" class=\"text-xs text-tui-text-02\">{{ product.costString }}</span>\n                    </p>\n                    <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"flex gap-2 items-center w-44 text-xs text-tui-text-02\">\n            <!--\n            TODO: \u041D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u0430 \u0440\u0435\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u044F \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B\u0430.\n            <button tuiIconButton (click)=\"clickSettingsEvent.emit()\" size=\"m\" icon=\"scIconSettings\" appearance=\"secondary\" tuiMode=\"onLight\"></button>\n            -->\n            <div>\n                <ng-container *ngIf=\"unitsHelper.productIsMeasurable(product); else notMeasurable\">\n                    <p>\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} {{ product.unit }}</p>\n                </ng-container>\n                <ng-template #notMeasurable>\n                    <p *ngIf=\"cartItem.length && !unitsHelper.productIsMeasurable(product)\">\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} \u043C.</p>\n                    <p *ngIf=\"cartItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ cartItem.width }} \u043C.</p>\n                    <p *ngIf=\"cartItem.height\">\u0412\u044B\u0441\u043E\u0442\u0430: {{ cartItem.height }} \u043C.</p>\n                </ng-template>\n                <p class=\"font-bold text-tui-text-01\">\u0418\u0442\u043E\u0433\u043E: {{ cartItem.costRub | tuiFormatNumber }} {{ 'RUB' | tuiCurrency }}</p>\n            </div>\n        </div>\n        <div class=\"flex items-center grow justify-end\">\n            <sc-input-quantity\n                class=\"w-28\"\n                *ngIf=\"quantityControl\"\n                [formControl]=\"quantityControl\"\n                [quantityUnit]=\"unitsHelper.productIsMeasurable(product) ? '\u0448\u0442' : product.quantityUnit\"\n                [showCross]=\"false\"\n                size=\"s\"\n                [step]=\"unitsHelper.productMultiplicity(product)\"\n            ></sc-input-quantity>\n        </div>\n    </ng-container>\n\n    <ng-template #skeleton>\n        <div class=\"flex gap-2 w-full\">\n            <div class=\"h-20 w-20 bg-tui-base-02 rounded-xl \"></div>\n            <div class=\"flex flex-col grow gap-2.5 bg-white\">\n                <div class=\"w-full h-4 rounded-xl bg-tui-base-02\"></div>\n                <div class=\"w-3/5 h-4 rounded-xl bg-tui-base-02\"></div>\n                <div class=\"w-4/5 h-4 rounded-xl bg-tui-base-02\"></div>\n            </div>\n        </div>\n    </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: ["step", "quantityUnit", "showLoader", "showCross", "appearance", "isDisabled", "size"], outputs: ["clickClearEvent"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint"] }, { kind: "component", type: i3$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "directive", type: i3$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { kind: "component", type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i3$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i3$1.TuiHintDriverDirective, selector: "[tuiHint]" }, { kind: "directive", type: i3$1.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i3$1.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i7$1.TuiPreviewComponent, selector: "tui-preview", inputs: ["zoomable", "rotatable"] }, { kind: "directive", type: i7$1.TuiPreviewActionDirective, selector: "[tuiPreviewAction]" }, { kind: "directive", type: i8$1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "pipe", type: i9.TuiCurrencyPipe, name: "tuiCurrency" }, { kind: "pipe", type: i3$1.TuiFormatNumberPipe, name: "tuiFormatNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ScCartItemMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScCartItemMobileComponent, selector: "sc-cart-item-mobile", inputs: { cartItem: "cartItem" }, outputs: { quantityValueChanges: "quantityValueChanges", clickDeleteEvent: "clickDeleteEvent", clickSettingsEvent: "clickSettingsEvent", clickCardEvent: "clickCardEvent" }, viewQueries: [{ propertyName: "specificationPreviewRef", first: true, predicate: ["specificationPreview"], descendants: true }], ngImport: i0, template: "<div class=\"ml-2 mt-2 relative p-4 gap-y-2 gap-x-4 flex flex-wrap bg-white border border-tui-base-04 shadow-sc-2 rounded-xl\">\n    <ng-container *ngIf=\"cartItem && product; else skeleton\">\n        <!--\n        TODO: \u041D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u0430 \u0440\u0435\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u044F \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B\u0430.\n        <button tuiIconButton size=\"m\" icon=\"scIconVerticalThreeDots\" appearance=\"float\" tuiMode=\"onLight\" class=\"!absolute right-0 top-0\"></button>\n        -->\n        <button\n            tuiIconButton\n            size=\"m\"\n            icon=\"tuiIconTrash2Large\"\n            appearance=\"secondary\"\n            tuiMode=\"onLight\"\n            (click)=\"clickDeleteEvent.emit()\"\n            class=\"shadow-sc-2 !absolute -left-2 -top-2\"\n        ></button>\n        <div class=\"flex gap-2\">\n            <div class=\"flex shrink-0 h-20 w-20 justify-center items-center overflow-hidden\">\n                <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" [class.p-5]=\"!product.images?.length\" class=\"cursor-pointer\" />\n            </div>\n\n            <div class=\"flex flex-wrap self-center gap-x-8 gap-y-0.5\">\n                <div class=\"w-[13rem]\">\n                    <a tuiLink (click)=\"clickCardEvent.emit()\">\n                        <span class=\"font-bold\">{{ product.name }}</span>\n                    </a>\n                    <div class=\"text-tui-text-02 text-xs\">\n                        <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                        <p *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n                        <a tuiLink *ngIf=\"cartItem.specificationImgUrl\" (click)=\"showSpecification()\">\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a>\n                        <ng-template #specificationPreview let-preview>\n                            <tui-preview [rotatable]=\"false\" [zoomable]=\"false\">\n                                <img *polymorpheusOutlet=\"cartItem.specificationImgUrl as src\" alt=\"preview\" [src]=\"cartItem.specificationImgUrl\" />\n                                <button icon=\"tuiIconClose\" title=\"Close\" tuiIconButton tuiPreviewAction type=\"button\" (click)=\"preview.complete()\"></button>\n                            </tui-preview>\n                        </ng-template>\n                    </div>\n                </div>\n                <div class=\"flex flex-col self-center w-[10rem] gap-x-8 gap-y-0.5\">\n                    <span *ngIf=\"product.discount\" class=\"flex items-center text-xs text-tui-text-02\">\n                        <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                        <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n                        <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-tui-text-01 !text-xs !h-4\"></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                    <p class=\"flex flex-col items-baseline gap-x-2 font-bold\">\n                        <span>{{ product.costRubString }}</span>\n                        <span *ngIf=\"!product.priceInRub\" class=\"text-xs text-tui-text-02\">{{ product.costString }}</span>\n                    </p>\n                    <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"flex gap-2 items-center w-44 text-xs text-tui-text-02\">\n            <!--\n            TODO: \u041D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u0430 \u0440\u0435\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u044F \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B\u0430.\n            <button tuiIconButton (click)=\"clickSettingsEvent.emit()\" size=\"m\" icon=\"scIconSettings\" appearance=\"secondary\" tuiMode=\"onLight\"></button>\n            -->\n            <div>\n                <ng-container *ngIf=\"unitsHelper.productIsMeasurable(product); else notMeasurable\">\n                    <p>\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} {{ product.unit }}</p>\n                </ng-container>\n                <ng-template #notMeasurable>\n                    <p *ngIf=\"cartItem.length && !unitsHelper.productIsMeasurable(product)\">\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} \u043C.</p>\n                    <p *ngIf=\"cartItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ cartItem.width }} \u043C.</p>\n                    <p *ngIf=\"cartItem.height\">\u0412\u044B\u0441\u043E\u0442\u0430: {{ cartItem.height }} \u043C.</p>\n                </ng-template>\n                <p class=\"font-bold text-tui-text-01\">\u0418\u0442\u043E\u0433\u043E: {{ cartItem.costRub | tuiFormatNumber }} {{ 'RUB' | tuiCurrency }}</p>\n            </div>\n        </div>\n        <div class=\"flex items-center grow justify-end\">\n            <sc-input-quantity\n                #inputQuantity\n                class=\"w-28\"\n                *ngIf=\"quantityControl\"\n                [formControl]=\"quantityControl\"\n                [quantityUnit]=\"unitsHelper.productIsMeasurable(product) ? '\u0448\u0442' : product.quantityUnit\"\n                [showCross]=\"false\"\n                size=\"s\"\n                [step]=\"unitsHelper.productMultiplicity(product)\"\n                (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n            ></sc-input-quantity>\n        </div>\n    </ng-container>\n\n    <ng-template #skeleton>\n        <div class=\"flex gap-2 w-full\">\n            <div class=\"h-20 w-20 bg-tui-base-02 rounded-xl \"></div>\n            <div class=\"flex flex-col grow gap-2.5 bg-white\">\n                <div class=\"w-full h-4 rounded-xl bg-tui-base-02\"></div>\n                <div class=\"w-3/5 h-4 rounded-xl bg-tui-base-02\"></div>\n                <div class=\"w-4/5 h-4 rounded-xl bg-tui-base-02\"></div>\n            </div>\n        </div>\n    </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: ["step", "quantityUnit", "showLoader", "showCross", "appearance", "isDisabled", "size"], outputs: ["clickClearEvent"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint"] }, { kind: "component", type: i3$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "directive", type: i3$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { kind: "component", type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i3$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i3$1.TuiHintDriverDirective, selector: "[tuiHint]" }, { kind: "directive", type: i3$1.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i3$1.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i7$1.TuiPreviewComponent, selector: "tui-preview", inputs: ["zoomable", "rotatable"] }, { kind: "directive", type: i7$1.TuiPreviewActionDirective, selector: "[tuiPreviewAction]" }, { kind: "directive", type: i8$1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "pipe", type: i9.TuiCurrencyPipe, name: "tuiCurrency" }, { kind: "pipe", type: i3$1.TuiFormatNumberPipe, name: "tuiFormatNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCartItemMobileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-cart-item-mobile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ml-2 mt-2 relative p-4 gap-y-2 gap-x-4 flex flex-wrap bg-white border border-tui-base-04 shadow-sc-2 rounded-xl\">\n    <ng-container *ngIf=\"cartItem && product; else skeleton\">\n        <!--\n        TODO: \u041D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u0430 \u0440\u0435\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u044F \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B\u0430.\n        <button tuiIconButton size=\"m\" icon=\"scIconVerticalThreeDots\" appearance=\"float\" tuiMode=\"onLight\" class=\"!absolute right-0 top-0\"></button>\n        -->\n        <button\n            tuiIconButton\n            size=\"m\"\n            icon=\"tuiIconTrash2Large\"\n            appearance=\"secondary\"\n            tuiMode=\"onLight\"\n            (click)=\"clickDeleteEvent.emit()\"\n            class=\"shadow-sc-2 !absolute -left-2 -top-2\"\n        ></button>\n        <div class=\"flex gap-2\">\n            <div class=\"flex shrink-0 h-20 w-20 justify-center items-center overflow-hidden\">\n                <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" [class.p-5]=\"!product.images?.length\" class=\"cursor-pointer\" />\n            </div>\n\n            <div class=\"flex flex-wrap self-center gap-x-8 gap-y-0.5\">\n                <div class=\"w-[13rem]\">\n                    <a tuiLink (click)=\"clickCardEvent.emit()\">\n                        <span class=\"font-bold\">{{ product.name }}</span>\n                    </a>\n                    <div class=\"text-tui-text-02 text-xs\">\n                        <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                        <p *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n                        <a tuiLink *ngIf=\"cartItem.specificationImgUrl\" (click)=\"showSpecification()\">\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a>\n                        <ng-template #specificationPreview let-preview>\n                            <tui-preview [rotatable]=\"false\" [zoomable]=\"false\">\n                                <img *polymorpheusOutlet=\"cartItem.specificationImgUrl as src\" alt=\"preview\" [src]=\"cartItem.specificationImgUrl\" />\n                                <button icon=\"tuiIconClose\" title=\"Close\" tuiIconButton tuiPreviewAction type=\"button\" (click)=\"preview.complete()\"></button>\n                            </tui-preview>\n                        </ng-template>\n                    </div>\n                </div>\n                <div class=\"flex flex-col self-center w-[10rem] gap-x-8 gap-y-0.5\">\n                    <span *ngIf=\"product.discount\" class=\"flex items-center text-xs text-tui-text-02\">\n                        <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                        <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n                        <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-tui-text-01 !text-xs !h-4\"></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                    <p class=\"flex flex-col items-baseline gap-x-2 font-bold\">\n                        <span>{{ product.costRubString }}</span>\n                        <span *ngIf=\"!product.priceInRub\" class=\"text-xs text-tui-text-02\">{{ product.costString }}</span>\n                    </p>\n                    <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"flex gap-2 items-center w-44 text-xs text-tui-text-02\">\n            <!--\n            TODO: \u041D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u0430 \u0440\u0435\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u044F \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B\u0430.\n            <button tuiIconButton (click)=\"clickSettingsEvent.emit()\" size=\"m\" icon=\"scIconSettings\" appearance=\"secondary\" tuiMode=\"onLight\"></button>\n            -->\n            <div>\n                <ng-container *ngIf=\"unitsHelper.productIsMeasurable(product); else notMeasurable\">\n                    <p>\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} {{ product.unit }}</p>\n                </ng-container>\n                <ng-template #notMeasurable>\n                    <p *ngIf=\"cartItem.length && !unitsHelper.productIsMeasurable(product)\">\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} \u043C.</p>\n                    <p *ngIf=\"cartItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ cartItem.width }} \u043C.</p>\n                    <p *ngIf=\"cartItem.height\">\u0412\u044B\u0441\u043E\u0442\u0430: {{ cartItem.height }} \u043C.</p>\n                </ng-template>\n                <p class=\"font-bold text-tui-text-01\">\u0418\u0442\u043E\u0433\u043E: {{ cartItem.costRub | tuiFormatNumber }} {{ 'RUB' | tuiCurrency }}</p>\n            </div>\n        </div>\n        <div class=\"flex items-center grow justify-end\">\n            <sc-input-quantity\n                class=\"w-28\"\n                *ngIf=\"quantityControl\"\n                [formControl]=\"quantityControl\"\n                [quantityUnit]=\"unitsHelper.productIsMeasurable(product) ? '\u0448\u0442' : product.quantityUnit\"\n                [showCross]=\"false\"\n                size=\"s\"\n                [step]=\"unitsHelper.productMultiplicity(product)\"\n            ></sc-input-quantity>\n        </div>\n    </ng-container>\n\n    <ng-template #skeleton>\n        <div class=\"flex gap-2 w-full\">\n            <div class=\"h-20 w-20 bg-tui-base-02 rounded-xl \"></div>\n            <div class=\"flex flex-col grow gap-2.5 bg-white\">\n                <div class=\"w-full h-4 rounded-xl bg-tui-base-02\"></div>\n                <div class=\"w-3/5 h-4 rounded-xl bg-tui-base-02\"></div>\n                <div class=\"w-4/5 h-4 rounded-xl bg-tui-base-02\"></div>\n            </div>\n        </div>\n    </ng-template>\n</div>\n" }]
+            args: [{ selector: 'sc-cart-item-mobile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ml-2 mt-2 relative p-4 gap-y-2 gap-x-4 flex flex-wrap bg-white border border-tui-base-04 shadow-sc-2 rounded-xl\">\n    <ng-container *ngIf=\"cartItem && product; else skeleton\">\n        <!--\n        TODO: \u041D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u0430 \u0440\u0435\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u044F \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B\u0430.\n        <button tuiIconButton size=\"m\" icon=\"scIconVerticalThreeDots\" appearance=\"float\" tuiMode=\"onLight\" class=\"!absolute right-0 top-0\"></button>\n        -->\n        <button\n            tuiIconButton\n            size=\"m\"\n            icon=\"tuiIconTrash2Large\"\n            appearance=\"secondary\"\n            tuiMode=\"onLight\"\n            (click)=\"clickDeleteEvent.emit()\"\n            class=\"shadow-sc-2 !absolute -left-2 -top-2\"\n        ></button>\n        <div class=\"flex gap-2\">\n            <div class=\"flex shrink-0 h-20 w-20 justify-center items-center overflow-hidden\">\n                <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" [class.p-5]=\"!product.images?.length\" class=\"cursor-pointer\" />\n            </div>\n\n            <div class=\"flex flex-wrap self-center gap-x-8 gap-y-0.5\">\n                <div class=\"w-[13rem]\">\n                    <a tuiLink (click)=\"clickCardEvent.emit()\">\n                        <span class=\"font-bold\">{{ product.name }}</span>\n                    </a>\n                    <div class=\"text-tui-text-02 text-xs\">\n                        <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                        <p *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n                        <a tuiLink *ngIf=\"cartItem.specificationImgUrl\" (click)=\"showSpecification()\">\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a>\n                        <ng-template #specificationPreview let-preview>\n                            <tui-preview [rotatable]=\"false\" [zoomable]=\"false\">\n                                <img *polymorpheusOutlet=\"cartItem.specificationImgUrl as src\" alt=\"preview\" [src]=\"cartItem.specificationImgUrl\" />\n                                <button icon=\"tuiIconClose\" title=\"Close\" tuiIconButton tuiPreviewAction type=\"button\" (click)=\"preview.complete()\"></button>\n                            </tui-preview>\n                        </ng-template>\n                    </div>\n                </div>\n                <div class=\"flex flex-col self-center w-[10rem] gap-x-8 gap-y-0.5\">\n                    <span *ngIf=\"product.discount\" class=\"flex items-center text-xs text-tui-text-02\">\n                        <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                        <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n                        <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-tui-text-01 !text-xs !h-4\"></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                    <p class=\"flex flex-col items-baseline gap-x-2 font-bold\">\n                        <span>{{ product.costRubString }}</span>\n                        <span *ngIf=\"!product.priceInRub\" class=\"text-xs text-tui-text-02\">{{ product.costString }}</span>\n                    </p>\n                    <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"flex gap-2 items-center w-44 text-xs text-tui-text-02\">\n            <!--\n            TODO: \u041D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u0430 \u0440\u0435\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u044F \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B\u0430.\n            <button tuiIconButton (click)=\"clickSettingsEvent.emit()\" size=\"m\" icon=\"scIconSettings\" appearance=\"secondary\" tuiMode=\"onLight\"></button>\n            -->\n            <div>\n                <ng-container *ngIf=\"unitsHelper.productIsMeasurable(product); else notMeasurable\">\n                    <p>\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} {{ product.unit }}</p>\n                </ng-container>\n                <ng-template #notMeasurable>\n                    <p *ngIf=\"cartItem.length && !unitsHelper.productIsMeasurable(product)\">\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} \u043C.</p>\n                    <p *ngIf=\"cartItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ cartItem.width }} \u043C.</p>\n                    <p *ngIf=\"cartItem.height\">\u0412\u044B\u0441\u043E\u0442\u0430: {{ cartItem.height }} \u043C.</p>\n                </ng-template>\n                <p class=\"font-bold text-tui-text-01\">\u0418\u0442\u043E\u0433\u043E: {{ cartItem.costRub | tuiFormatNumber }} {{ 'RUB' | tuiCurrency }}</p>\n            </div>\n        </div>\n        <div class=\"flex items-center grow justify-end\">\n            <sc-input-quantity\n                #inputQuantity\n                class=\"w-28\"\n                *ngIf=\"quantityControl\"\n                [formControl]=\"quantityControl\"\n                [quantityUnit]=\"unitsHelper.productIsMeasurable(product) ? '\u0448\u0442' : product.quantityUnit\"\n                [showCross]=\"false\"\n                size=\"s\"\n                [step]=\"unitsHelper.productMultiplicity(product)\"\n                (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n            ></sc-input-quantity>\n        </div>\n    </ng-container>\n\n    <ng-template #skeleton>\n        <div class=\"flex gap-2 w-full\">\n            <div class=\"h-20 w-20 bg-tui-base-02 rounded-xl \"></div>\n            <div class=\"flex flex-col grow gap-2.5 bg-white\">\n                <div class=\"w-full h-4 rounded-xl bg-tui-base-02\"></div>\n                <div class=\"w-3/5 h-4 rounded-xl bg-tui-base-02\"></div>\n                <div class=\"w-4/5 h-4 rounded-xl bg-tui-base-02\"></div>\n            </div>\n        </div>\n    </ng-template>\n</div>\n" }]
         }], ctorParameters: function () {
         return [{ type: UnitsHelper }, { type: i7$1.TuiPreviewDialogService, decorators: [{
                         type: Inject,
@@ -858,7 +862,7 @@ class ScPriceCardComponent {
         /**
          * {@link FormControl} поля ввода количества товара в корзине.
          */
-        this.quantityControl = new FormControl(null);
+        this.quantityControl = new FormControl(null, { updateOn: 'blur' });
         /**
          * {@link Observable} изменения количества товара в корзине.
          */
@@ -919,10 +923,10 @@ class ScPriceCardComponent {
     }
 }
 ScPriceCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceCardComponent, deps: [{ token: UnitsHelper }, { token: i1.ScAuthService }, { token: i1.ScWarehouseService }, { token: SC_URLS }, { token: SC_PATH_IMAGE_NOT_FOUND }, { 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: { showQuantityControl: "showQuantityControl", cartItem: "cartItem", product: "product", size: "size" }, outputs: { clickFavoriteEvent: "clickFavoriteEvent", clickAddToCartEvent: "clickAddToCartEvent", clickClearEvent: "clickClearEvent", clickCardEvent: "clickCardEvent", quantityValueChanges: "quantityValueChanges" }, host: { properties: { "attr.data-size": "this.size" } }, ngImport: i0, template: "<!-- TODO: \u0440\u0435\u0430\u043B\u0438\u0437\u043E\u0432\u0430\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u0438 \u0434\u043B\u044F \u0434\u0435\u0441\u043A\u0442\u043E\u043F\u0430 \u0438 \u0434\u043B\u044F \u043C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0433\u043E \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u044F. \u0418\u0441\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u0432\u0441\u0435 \u0433\u043B\u043E\u0431\u0430\u043B\u044C\u043D\u044B\u0435 \u0442\u0430\u0439\u0433\u043E\u0432\u0441\u043A\u0438\u0435 \u0441\u0442\u0438\u043B\u0438, \u043F\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u0438\u0445 \u0432 \u043F\u043E\u0440\u044F\u0434\u043E\u043A \u0441\u043E\u0433\u043B\u0430\u0441\u043D\u043E \u0441 \u0434\u0438\u0437\u0430\u0439\u043D\u043E\u043C. -->\n<div *ngIf=\"product; else skeleton\" class=\"min-w-[10rem] shadow-md w-auto rounded-xl p-2 grid h-[19rem] text-xs relative\">\n    <div class=\"overflow-hidden\">\n        <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" class=\"rounded-xl w-full max-h-full object-cover\" />\n    </div>\n    <sc-favorite-btn\n        *ngIf=\"authStatus$ | async\"\n        class=\"top-0 left-0 absolute\"\n        (clickEvent)=\"clickFavoriteEvent.emit()\"\n        [showLoader]=\"favoriteShowLoader\"\n        [isFavorite]=\"product.isFavorite\"\n        [disabled]=\"!!product.primaryCategory?.isFavorite\"\n    ></sc-favorite-btn>\n    <tui-svg *ngIf=\"product.isPreviouslyOrdered\" src=\"scIconStar\" class=\"top-0 right-0 absolute text-red-700\"></tui-svg>\n\n    <a class=\"p-0 m-0\" tuiLink iconAlign=\"left\" (click)=\"clickCardEvent.emit()\">\n        <p class=\"font-bold text-sm line-clamp-3\" style=\"word-break: break-word;\">{{ product.name }}</p>\n    </a>\n    <p *ngIf=\"product?.pack\" class=\"text-tui-text-02\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n\n    <p class=\"text-tui-text-02\">\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n    <p *ngIf=\"(authStatus$ | async) && product?.costDate\" class=\"text-tui-text-02\">\u0414\u0430\u0442\u0430: {{ product.costDate }}</p>\n    <div *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"flex flex-col\">\n        <span *ngIf=\"product.discount\" class=\"flex items-center text-tui-text-02\">\n            <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n            <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n            <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-xs !h-4\"></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 [class.text-tui-text-02]=\"!product.isWarehouseStockExist(warehouseSelect.id)\" class=\"cost font-bold\">{{ product.costRubString }}</span>\n        <span *ngIf=\"!product.priceInRub\" class=\"text-xs font-bold text-tui-text-02 hidden group-hover:block\">{{ product.costString }}</span>\n        <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n    </div>\n    <div *ngIf=\"!showQuantityControl\" class=\"flex gap-2 max-w-full items-center justify-stretch mt-1\">\n        <button tuiButton (click)=\"clickAddToCartEvent.emit(product)\" [showLoader]=\"quantityShowLoader\" [size]=\"size\" class=\"grow\">\n            <tui-svg src=\"scIconCart\" class=\"!text-xs !h-4\"> </tui-svg>\n            \u0412 \u043A\u043E\u0440\u0437\u0438\u043D\u0443\n        </button>\n        <div *ngIf=\"cartItem\" class=\"flex justify-center\">\n            <tui-svg src=\"tuiIconCheck\" class=\"!h-5 !w-5 bg-tui-primary text-black rounded-md\"></tui-svg>\n        </div>\n    </div>\n    <sc-input-quantity\n        *ngIf=\"showQuantityControl\"\n        [formControl]=\"quantityControl\"\n        [quantityUnit]=\"product.quantityUnit\"\n        [size]=\"getQuantitySize\"\n        [step]=\"unitsHelper.productMultiplicity(product)\"\n        [showLoader]=\"quantityShowLoader\"\n        (clickClearEvent)=\"clickClearEvent.emit(cartItem)\"\n        class=\"w-full\"\n    ></sc-input-quantity>\n</div>\n\n<ng-template #skeleton>\n    <div class=\"flex flex-col card-wrapper bg-white rounded-xl overflow-hidden shadow-sc-1\">\n        <!-- \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 -->\n        <div class=\"w-full h-3/5 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 flex-col grow gap-2.5 bg-white rounded-b p-5\">\n            <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n            <div class=\"w-3/5 h-4 rounded bg-tui-base-02\"></div>\n            <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n        </div>\n    </div>\n</ng-template>\n", styles: [":host[data-size=s] .card-wrapper{width:10rem;height:16rem}:host[data-size=s] .card-wrapper .wrapper-info{padding:8px}:host[data-size=s] .card-wrapper .wrapper-info .cost{font-size:.875rem;line-height:1.25rem}:host[data-size=s] .card-wrapper .button-wrapper tui-svg{font-size:.75rem;line-height:1rem;width:1rem}:host[data-size=m] .card-wrapper{width:12.5rem;height:20rem}:host[data-size=m] .card-wrapper .wrapper-info{padding-inline:16px;padding-block:8px}:host[data-size=m] .card-wrapper .name{font-size:.875rem;line-height:1.25rem;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:3rem}:host[data-size=m] .card-wrapper .info{max-height:1rem}:host[data-size=m] .card-wrapper .cost{font-size:1.125rem;line-height:1.75rem}:host[data-size=m] .card-wrapper .button-wrapper{max-height:0px;font-size:.75rem;line-height:1rem}:host[data-size=m] .card-wrapper:hover .name{-webkit-line-clamp:unset;max-height:6rem}:host[data-size=m] .card-wrapper:hover .info{max-height:3rem}:host[data-size=m] .card-wrapper:hover .button-wrapper{max-height:3rem}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i3$1.TuiHintDriverDirective, selector: "[tuiHint]" }, { kind: "directive", type: i3$1.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i3$1.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { kind: "component", type: i3$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: ScFavoriteBtnComponent, selector: "sc-favorite-btn", inputs: ["isFavorite", "showLoader", "disabled"], outputs: ["clickEvent"] }, { kind: "component", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: ["step", "quantityUnit", "showLoader", "showCross", "appearance", "isDisabled", "size"], outputs: ["clickClearEvent"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint"] }, { kind: "pipe", type: i3.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: { showQuantityControl: "showQuantityControl", cartItem: "cartItem", product: "product", size: "size" }, outputs: { clickFavoriteEvent: "clickFavoriteEvent", clickAddToCartEvent: "clickAddToCartEvent", clickClearEvent: "clickClearEvent", clickCardEvent: "clickCardEvent", quantityValueChanges: "quantityValueChanges" }, host: { properties: { "attr.data-size": "this.size" } }, ngImport: i0, template: "<!-- TODO: \u0440\u0435\u0430\u043B\u0438\u0437\u043E\u0432\u0430\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u0438 \u0434\u043B\u044F \u0434\u0435\u0441\u043A\u0442\u043E\u043F\u0430 \u0438 \u0434\u043B\u044F \u043C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0433\u043E \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u044F. \u0418\u0441\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u0432\u0441\u0435 \u0433\u043B\u043E\u0431\u0430\u043B\u044C\u043D\u044B\u0435 \u0442\u0430\u0439\u0433\u043E\u0432\u0441\u043A\u0438\u0435 \u0441\u0442\u0438\u043B\u0438, \u043F\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u0438\u0445 \u0432 \u043F\u043E\u0440\u044F\u0434\u043E\u043A \u0441\u043E\u0433\u043B\u0430\u0441\u043D\u043E \u0441 \u0434\u0438\u0437\u0430\u0439\u043D\u043E\u043C. -->\n<div *ngIf=\"product; else skeleton\" class=\"min-w-[10rem] shadow-md w-auto rounded-xl p-2 grid h-[19rem] text-xs relative\">\n    <div class=\"overflow-hidden\">\n        <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" class=\"rounded-xl w-full max-h-full object-cover\" />\n    </div>\n    <sc-favorite-btn\n        *ngIf=\"authStatus$ | async\"\n        class=\"top-0 left-0 absolute\"\n        (clickEvent)=\"clickFavoriteEvent.emit()\"\n        [showLoader]=\"favoriteShowLoader\"\n        [isFavorite]=\"product.isFavorite\"\n        [disabled]=\"!!product.primaryCategory?.isFavorite\"\n    ></sc-favorite-btn>\n    <tui-svg *ngIf=\"product.isPreviouslyOrdered\" src=\"scIconStar\" class=\"top-0 right-0 absolute text-red-700\"></tui-svg>\n\n    <a class=\"p-0 m-0\" tuiLink iconAlign=\"left\" (click)=\"clickCardEvent.emit()\">\n        <p class=\"font-bold text-sm line-clamp-3\" style=\"word-break: break-word;\">{{ product.name }}</p>\n    </a>\n    <p *ngIf=\"product?.pack\" class=\"text-tui-text-02\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n\n    <p class=\"text-tui-text-02\">\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n    <p *ngIf=\"(authStatus$ | async) && product?.costDate\" class=\"text-tui-text-02\">\u0414\u0430\u0442\u0430: {{ product.costDate }}</p>\n    <div *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"flex flex-col\">\n        <span *ngIf=\"product.discount\" class=\"flex items-center text-tui-text-02\">\n            <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n            <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n            <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-xs !h-4\"></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 [class.text-tui-text-02]=\"!product.isWarehouseStockExist(warehouseSelect.id)\" class=\"cost font-bold\">{{ product.costRubString }}</span>\n        <span *ngIf=\"!product.priceInRub\" class=\"text-xs font-bold text-tui-text-02 hidden group-hover:block\">{{ product.costString }}</span>\n        <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n    </div>\n    <div *ngIf=\"!showQuantityControl\" class=\"flex gap-2 max-w-full items-center justify-stretch mt-1\">\n        <button tuiButton (click)=\"clickAddToCartEvent.emit(product)\" [showLoader]=\"quantityShowLoader\" [size]=\"size\" class=\"grow\">\n            <tui-svg src=\"scIconCart\" class=\"!text-xs !h-4\"> </tui-svg>\n            \u0412 \u043A\u043E\u0440\u0437\u0438\u043D\u0443\n        </button>\n        <div *ngIf=\"cartItem\" class=\"flex justify-center\">\n            <tui-svg src=\"tuiIconCheck\" class=\"!h-5 !w-5 bg-tui-primary text-black rounded-md\"></tui-svg>\n        </div>\n    </div>\n    <sc-input-quantity\n        #inputQuantity\n        *ngIf=\"showQuantityControl\"\n        [formControl]=\"quantityControl\"\n        [quantityUnit]=\"product.quantityUnit\"\n        [size]=\"getQuantitySize\"\n        [step]=\"unitsHelper.productMultiplicity(product)\"\n        [showLoader]=\"quantityShowLoader\"\n        (clickClearEvent)=\"clickClearEvent.emit(cartItem)\"\n        class=\"w-full\"\n        (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n    ></sc-input-quantity>\n</div>\n\n<ng-template #skeleton>\n    <div class=\"flex flex-col card-wrapper bg-white rounded-xl overflow-hidden shadow-sc-1\">\n        <!-- \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 -->\n        <div class=\"w-full h-3/5 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 flex-col grow gap-2.5 bg-white rounded-b p-5\">\n            <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n            <div class=\"w-3/5 h-4 rounded bg-tui-base-02\"></div>\n            <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n        </div>\n    </div>\n</ng-template>\n", styles: [":host[data-size=s] .card-wrapper{width:10rem;height:16rem}:host[data-size=s] .card-wrapper .wrapper-info{padding:8px}:host[data-size=s] .card-wrapper .wrapper-info .cost{font-size:.875rem;line-height:1.25rem}:host[data-size=s] .card-wrapper .button-wrapper tui-svg{font-size:.75rem;line-height:1rem;width:1rem}:host[data-size=m] .card-wrapper{width:12.5rem;height:20rem}:host[data-size=m] .card-wrapper .wrapper-info{padding-inline:16px;padding-block:8px}:host[data-size=m] .card-wrapper .name{font-size:.875rem;line-height:1.25rem;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:3rem}:host[data-size=m] .card-wrapper .info{max-height:1rem}:host[data-size=m] .card-wrapper .cost{font-size:1.125rem;line-height:1.75rem}:host[data-size=m] .card-wrapper .button-wrapper{max-height:0px;font-size:.75rem;line-height:1rem}:host[data-size=m] .card-wrapper:hover .name{-webkit-line-clamp:unset;max-height:6rem}:host[data-size=m] .card-wrapper:hover .info{max-height:3rem}:host[data-size=m] .card-wrapper:hover .button-wrapper{max-height:3rem}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i3$1.TuiHintDriverDirective, selector: "[tuiHint]" }, { kind: "directive", type: i3$1.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i3$1.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { kind: "component", type: i3$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: ScFavoriteBtnComponent, selector: "sc-favorite-btn", inputs: ["isFavorite", "showLoader", "disabled"], outputs: ["clickEvent"] }, { kind: "component", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: ["step", "quantityUnit", "showLoader", "showCross", "appearance", "isDisabled", "size"], outputs: ["clickClearEvent"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint"] }, { kind: "pipe", type: i3.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', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- TODO: \u0440\u0435\u0430\u043B\u0438\u0437\u043E\u0432\u0430\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u0438 \u0434\u043B\u044F \u0434\u0435\u0441\u043A\u0442\u043E\u043F\u0430 \u0438 \u0434\u043B\u044F \u043C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0433\u043E \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u044F. \u0418\u0441\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u0432\u0441\u0435 \u0433\u043B\u043E\u0431\u0430\u043B\u044C\u043D\u044B\u0435 \u0442\u0430\u0439\u0433\u043E\u0432\u0441\u043A\u0438\u0435 \u0441\u0442\u0438\u043B\u0438, \u043F\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u0438\u0445 \u0432 \u043F\u043E\u0440\u044F\u0434\u043E\u043A \u0441\u043E\u0433\u043B\u0430\u0441\u043D\u043E \u0441 \u0434\u0438\u0437\u0430\u0439\u043D\u043E\u043C. -->\n<div *ngIf=\"product; else skeleton\" class=\"min-w-[10rem] shadow-md w-auto rounded-xl p-2 grid h-[19rem] text-xs relative\">\n    <div class=\"overflow-hidden\">\n        <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" class=\"rounded-xl w-full max-h-full object-cover\" />\n    </div>\n    <sc-favorite-btn\n        *ngIf=\"authStatus$ | async\"\n        class=\"top-0 left-0 absolute\"\n        (clickEvent)=\"clickFavoriteEvent.emit()\"\n        [showLoader]=\"favoriteShowLoader\"\n        [isFavorite]=\"product.isFavorite\"\n        [disabled]=\"!!product.primaryCategory?.isFavorite\"\n    ></sc-favorite-btn>\n    <tui-svg *ngIf=\"product.isPreviouslyOrdered\" src=\"scIconStar\" class=\"top-0 right-0 absolute text-red-700\"></tui-svg>\n\n    <a class=\"p-0 m-0\" tuiLink iconAlign=\"left\" (click)=\"clickCardEvent.emit()\">\n        <p class=\"font-bold text-sm line-clamp-3\" style=\"word-break: break-word;\">{{ product.name }}</p>\n    </a>\n    <p *ngIf=\"product?.pack\" class=\"text-tui-text-02\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n\n    <p class=\"text-tui-text-02\">\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n    <p *ngIf=\"(authStatus$ | async) && product?.costDate\" class=\"text-tui-text-02\">\u0414\u0430\u0442\u0430: {{ product.costDate }}</p>\n    <div *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"flex flex-col\">\n        <span *ngIf=\"product.discount\" class=\"flex items-center text-tui-text-02\">\n            <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n            <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n            <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-xs !h-4\"></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 [class.text-tui-text-02]=\"!product.isWarehouseStockExist(warehouseSelect.id)\" class=\"cost font-bold\">{{ product.costRubString }}</span>\n        <span *ngIf=\"!product.priceInRub\" class=\"text-xs font-bold text-tui-text-02 hidden group-hover:block\">{{ product.costString }}</span>\n        <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n    </div>\n    <div *ngIf=\"!showQuantityControl\" class=\"flex gap-2 max-w-full items-center justify-stretch mt-1\">\n        <button tuiButton (click)=\"clickAddToCartEvent.emit(product)\" [showLoader]=\"quantityShowLoader\" [size]=\"size\" class=\"grow\">\n            <tui-svg src=\"scIconCart\" class=\"!text-xs !h-4\"> </tui-svg>\n            \u0412 \u043A\u043E\u0440\u0437\u0438\u043D\u0443\n        </button>\n        <div *ngIf=\"cartItem\" class=\"flex justify-center\">\n            <tui-svg src=\"tuiIconCheck\" class=\"!h-5 !w-5 bg-tui-primary text-black rounded-md\"></tui-svg>\n        </div>\n    </div>\n    <sc-input-quantity\n        *ngIf=\"showQuantityControl\"\n        [formControl]=\"quantityControl\"\n        [quantityUnit]=\"product.quantityUnit\"\n        [size]=\"getQuantitySize\"\n        [step]=\"unitsHelper.productMultiplicity(product)\"\n        [showLoader]=\"quantityShowLoader\"\n        (clickClearEvent)=\"clickClearEvent.emit(cartItem)\"\n        class=\"w-full\"\n    ></sc-input-quantity>\n</div>\n\n<ng-template #skeleton>\n    <div class=\"flex flex-col card-wrapper bg-white rounded-xl overflow-hidden shadow-sc-1\">\n        <!-- \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 -->\n        <div class=\"w-full h-3/5 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 flex-col grow gap-2.5 bg-white rounded-b p-5\">\n            <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n            <div class=\"w-3/5 h-4 rounded bg-tui-base-02\"></div>\n            <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n        </div>\n    </div>\n</ng-template>\n", styles: [":host[data-size=s] .card-wrapper{width:10rem;height:16rem}:host[data-size=s] .card-wrapper .wrapper-info{padding:8px}:host[data-size=s] .card-wrapper .wrapper-info .cost{font-size:.875rem;line-height:1.25rem}:host[data-size=s] .card-wrapper .button-wrapper tui-svg{font-size:.75rem;line-height:1rem;width:1rem}:host[data-size=m] .card-wrapper{width:12.5rem;height:20rem}:host[data-size=m] .card-wrapper .wrapper-info{padding-inline:16px;padding-block:8px}:host[data-size=m] .card-wrapper .name{font-size:.875rem;line-height:1.25rem;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:3rem}:host[data-size=m] .card-wrapper .info{max-height:1rem}:host[data-size=m] .card-wrapper .cost{font-size:1.125rem;line-height:1.75rem}:host[data-size=m] .card-wrapper .button-wrapper{max-height:0px;font-size:.75rem;line-height:1rem}:host[data-size=m] .card-wrapper:hover .name{-webkit-line-clamp:unset;max-height:6rem}:host[data-size=m] .card-wrapper:hover .info{max-height:3rem}:host[data-size=m] .card-wrapper:hover .button-wrapper{max-height:3rem}\n"] }]
+            args: [{ selector: 'sc-price-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- TODO: \u0440\u0435\u0430\u043B\u0438\u0437\u043E\u0432\u0430\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u0438 \u0434\u043B\u044F \u0434\u0435\u0441\u043A\u0442\u043E\u043F\u0430 \u0438 \u0434\u043B\u044F \u043C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0433\u043E \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u044F. \u0418\u0441\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u0432\u0441\u0435 \u0433\u043B\u043E\u0431\u0430\u043B\u044C\u043D\u044B\u0435 \u0442\u0430\u0439\u0433\u043E\u0432\u0441\u043A\u0438\u0435 \u0441\u0442\u0438\u043B\u0438, \u043F\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u0438\u0445 \u0432 \u043F\u043E\u0440\u044F\u0434\u043E\u043A \u0441\u043E\u0433\u043B\u0430\u0441\u043D\u043E \u0441 \u0434\u0438\u0437\u0430\u0439\u043D\u043E\u043C. -->\n<div *ngIf=\"product; else skeleton\" class=\"min-w-[10rem] shadow-md w-auto rounded-xl p-2 grid h-[19rem] text-xs relative\">\n    <div class=\"overflow-hidden\">\n        <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" class=\"rounded-xl w-full max-h-full object-cover\" />\n    </div>\n    <sc-favorite-btn\n        *ngIf=\"authStatus$ | async\"\n        class=\"top-0 left-0 absolute\"\n        (clickEvent)=\"clickFavoriteEvent.emit()\"\n        [showLoader]=\"favoriteShowLoader\"\n        [isFavorite]=\"product.isFavorite\"\n        [disabled]=\"!!product.primaryCategory?.isFavorite\"\n    ></sc-favorite-btn>\n    <tui-svg *ngIf=\"product.isPreviouslyOrdered\" src=\"scIconStar\" class=\"top-0 right-0 absolute text-red-700\"></tui-svg>\n\n    <a class=\"p-0 m-0\" tuiLink iconAlign=\"left\" (click)=\"clickCardEvent.emit()\">\n        <p class=\"font-bold text-sm line-clamp-3\" style=\"word-break: break-word;\">{{ product.name }}</p>\n    </a>\n    <p *ngIf=\"product?.pack\" class=\"text-tui-text-02\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n\n    <p class=\"text-tui-text-02\">\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n    <p *ngIf=\"(authStatus$ | async) && product?.costDate\" class=\"text-tui-text-02\">\u0414\u0430\u0442\u0430: {{ product.costDate }}</p>\n    <div *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"flex flex-col\">\n        <span *ngIf=\"product.discount\" class=\"flex items-center text-tui-text-02\">\n            <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n            <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n            <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-xs !h-4\"></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 [class.text-tui-text-02]=\"!product.isWarehouseStockExist(warehouseSelect.id)\" class=\"cost font-bold\">{{ product.costRubString }}</span>\n        <span *ngIf=\"!product.priceInRub\" class=\"text-xs font-bold text-tui-text-02 hidden group-hover:block\">{{ product.costString }}</span>\n        <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n    </div>\n    <div *ngIf=\"!showQuantityControl\" class=\"flex gap-2 max-w-full items-center justify-stretch mt-1\">\n        <button tuiButton (click)=\"clickAddToCartEvent.emit(product)\" [showLoader]=\"quantityShowLoader\" [size]=\"size\" class=\"grow\">\n            <tui-svg src=\"scIconCart\" class=\"!text-xs !h-4\"> </tui-svg>\n            \u0412 \u043A\u043E\u0440\u0437\u0438\u043D\u0443\n        </button>\n        <div *ngIf=\"cartItem\" class=\"flex justify-center\">\n            <tui-svg src=\"tuiIconCheck\" class=\"!h-5 !w-5 bg-tui-primary text-black rounded-md\"></tui-svg>\n        </div>\n    </div>\n    <sc-input-quantity\n        #inputQuantity\n        *ngIf=\"showQuantityControl\"\n        [formControl]=\"quantityControl\"\n        [quantityUnit]=\"product.quantityUnit\"\n        [size]=\"getQuantitySize\"\n        [step]=\"unitsHelper.productMultiplicity(product)\"\n        [showLoader]=\"quantityShowLoader\"\n        (clickClearEvent)=\"clickClearEvent.emit(cartItem)\"\n        class=\"w-full\"\n        (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n    ></sc-input-quantity>\n</div>\n\n<ng-template #skeleton>\n    <div class=\"flex flex-col card-wrapper bg-white rounded-xl overflow-hidden shadow-sc-1\">\n        <!-- \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 -->\n        <div class=\"w-full h-3/5 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 flex-col grow gap-2.5 bg-white rounded-b p-5\">\n            <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n            <div class=\"w-3/5 h-4 rounded bg-tui-base-02\"></div>\n            <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n        </div>\n    </div>\n</ng-template>\n", styles: [":host[data-size=s] .card-wrapper{width:10rem;height:16rem}:host[data-size=s] .card-wrapper .wrapper-info{padding:8px}:host[data-size=s] .card-wrapper .wrapper-info .cost{font-size:.875rem;line-height:1.25rem}:host[data-size=s] .card-wrapper .button-wrapper tui-svg{font-size:.75rem;line-height:1rem;width:1rem}:host[data-size=m] .card-wrapper{width:12.5rem;height:20rem}:host[data-size=m] .card-wrapper .wrapper-info{padding-inline:16px;padding-block:8px}:host[data-size=m] .card-wrapper .name{font-size:.875rem;line-height:1.25rem;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:3rem}:host[data-size=m] .card-wrapper .info{max-height:1rem}:host[data-size=m] .card-wrapper .cost{font-size:1.125rem;line-height:1.75rem}:host[data-size=m] .card-wrapper .button-wrapper{max-height:0px;font-size:.75rem;line-height:1rem}:host[data-size=m] .card-wrapper:hover .name{-webkit-line-clamp:unset;max-height:6rem}:host[data-size=m] .card-wrapper:hover .info{max-height:3rem}:host[data-size=m] .card-wrapper:hover .button-wrapper{max-height:3rem}\n"] }]
         }], ctorParameters: function () {
         return [{ type: UnitsHelper }, { type: i1.ScAuthService }, { type: i1.ScWarehouseService }, { type: undefined, decorators: [{
                         type: Inject,
@@ -1656,6 +1660,7 @@ const scClientUiIconsName = [
     'scIconWordFile',
     'scIconWindowsill',
     'scIconWarning',
+    'scIconSandwichPanels',
     'scIconWallet',
     'scIconViewTree',
     'scIconViewInline',