@snabcentr/client-ui 0.3.2-clients → 0.3.2

package/fesm2020/snabcentr-client-ui.mjs

@@ -335,14 +335,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;
     };
@@ -387,6 +385,12 @@ class ScInputQuantityComponent extends AbstractTuiNullableControl {
          */
         this.clickClearEvent = new EventEmitter();
     }
+    /**
+     * Возвращает элемент, который может быть сфокусирован.
+     */
+    get nativeFocusableElement() {
+        return this.numberInput.nativeFocusableElement;
+    }
     get focused() {
         return !!this.numberInput?.focused;
     }
@@ -509,18 +513,18 @@ class ScPriceWarehouseStockComponent {
         /**
          * {@link Observable} изменения выбранного склада.
          */
-        this.warehouseSelect$ = this.warehouseService.getWarehouseSelectChange$();
+        this.selectedWarehouse$ = this.warehouseService.getWarehouseSelectChange$();
         /**
          * {@link Observable} изменения списка складов.
          */
-        this.stockByWarehouses$ = this.warehouseSelect$.pipe(switchMap((warehouseSelect) => this.warehouseService.getWarehouses$().pipe(map((warehouses) => this.product.stockCount?.map((stock) => [warehouses.find((warehouse) => warehouse.id === stock.id), stock])), map((stockByWarehouses) => stockByWarehouses?.sort((stock) => (stock[0]?.id === warehouseSelect?.id ? -1 : 1))))));
+        this.warehousesList$ = this.selectedWarehouse$.pipe(switchMap((warehouse) => this.warehouseService.getWarehouses$().pipe(map((warehouses) => this.product.stockCount?.map((sc) => ({ w: warehouses.find((w) => w.id === sc.warehouseId), sc: sc }))), map((items) => items?.sort((item) => (item.w?.id === warehouse?.id ? -1 : 1))))));
     }
 }
 ScPriceWarehouseStockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceWarehouseStockComponent, deps: [{ token: i1.ScWarehouseService }], target: i0.ɵɵFactoryTarget.Component });
-ScPriceWarehouseStockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: { classList: "classList", product: "product", withStockHint: "withStockHint" }, ngImport: i0, template: "<ng-container *ngIf=\"product\">\n    <ng-container>\n        <div *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"flex items-center gap-1\">\n            <span *ngIf=\"product.getNotStockMessage(warehouseSelect) as message\" class=\"text-xs min-w-2/5 text-tui-error-fill\" [ngClass]=\"classList\"> {{ message }} </span>\n            <span *ngIf=\"product.isWarehouseStockExist(warehouseSelect.id)\" class=\"text-xs min-w-2/5 text-tui-success-fill\" [ngClass]=\"classList\">\n                \u0412 \u043D\u0430\u043B\u0438\u0447\u0438\u0438<ng-container *ngIf=\"product.getWarehouseStockCount(warehouseSelect.id) as count\"\n                    >:\n                    <span class=\"whitespace-nowrap\">{{ count }} {{ product.quantityUnit }}</span>\n                </ng-container>\n            </span>\n            <span *ngIf=\"product.onOrder\" class=\"text-xs min-w-2/5 text-sc-yellow\" [ngClass]=\"classList\">\u041F\u043E\u0434 \u0437\u0430\u043A\u0430\u0437</span>\n\n            <tui-svg\n                *ngIf=\"withStockHint && (stockByWarehouses$ | async)?.length\"\n                src=\"tuiIconInfoLarge\"\n                [tuiHint]=\"stockHint\"\n                [tuiHintShowDelay]=\"100\"\n                tuiHintDirection=\"top\"\n                class=\"!text-xs !h-3\"\n            ></tui-svg>\n        </div>\n    </ng-container>\n</ng-container>\n\n<ng-template #stockHint>\n    <table *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"text-xs table-auto\" [ngClass]=\"classList\">\n        <tbody>\n            <tr *ngFor=\"let item of stockByWarehouses$ | async\" class=\"border-b\">\n                <ng-container>\n                    <td class=\"px-1\">{{ item[0]?.name }}:</td>\n                    <td class=\"px-1\">{{ item[1].count ? item[1].count + ' ' + product.quantityUnit : '\u0412 \u043D\u0430\u043B\u0438\u0447\u0438\u0438' }}</td>\n                </ng-container>\n            </tr>\n        </tbody>\n    </table>\n</ng-template>\n", styles: ["[tuiIconButton]{--tui-radius-m: .75rem;--tui-height-xs: 1.25rem}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ScPriceWarehouseStockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: { classList: "classList", product: "product", withStockHint: "withStockHint" }, ngImport: i0, template: "<ng-container *ngIf=\"product\">\n    <ng-container>\n        <div *ngIf=\"selectedWarehouse$ | async as warehouseSelect\" class=\"flex items-center gap-1\">\n            <span *ngIf=\"product.getNotStockMessage(warehouseSelect) as message\" class=\"text-xs min-w-2/5 text-tui-error-fill\" [ngClass]=\"classList\"> {{ message }} </span>\n            <span *ngIf=\"product.isWarehouseStockExist(warehouseSelect.id)\" class=\"text-xs min-w-2/5 text-tui-success-fill\" [ngClass]=\"classList\">\n                \u0412 \u043D\u0430\u043B\u0438\u0447\u0438\u0438<ng-container *ngIf=\"product.getWarehouseStockCount(warehouseSelect.id) as count\"\n                    >:\n                    <span class=\"whitespace-nowrap\">{{ count }} {{ product.quantityUnit }}</span>\n                </ng-container>\n            </span>\n            <span *ngIf=\"product.onOrder\" class=\"text-xs min-w-2/5 text-sc-yellow\" [ngClass]=\"classList\">\u041F\u043E\u0434 \u0437\u0430\u043A\u0430\u0437</span>\n\n            <tui-svg\n                *ngIf=\"withStockHint && (warehousesList$ | async)?.length\"\n                src=\"tuiIconInfoLarge\"\n                [tuiHint]=\"stockHint\"\n                [tuiHintShowDelay]=\"100\"\n                tuiHintDirection=\"top\"\n                class=\"!text-xs !h-3\"\n            ></tui-svg>\n        </div>\n    </ng-container>\n</ng-container>\n\n<ng-template #stockHint>\n    <table *ngIf=\"selectedWarehouse$ | async as warehouseSelect\" class=\"text-xs table-auto\" [ngClass]=\"classList\">\n        <tbody>\n            <tr *ngFor=\"let item of warehousesList$ | async\" class=\"border-b\">\n                <ng-container>\n                    <td class=\"px-1\">{{ item.w?.name }}:</td>\n                    <td class=\"px-1\">{{ item.sc.count ? item.sc.count + ' ' + product.quantityUnit : '\u0412 \u043D\u0430\u043B\u0438\u0447\u0438\u0438' }}</td>\n                </ng-container>\n            </tr>\n        </tbody>\n    </table>\n</ng-template>\n", styles: ["[tuiIconButton]{--tui-radius-m: .75rem;--tui-height-xs: 1.25rem}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceWarehouseStockComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-price-warehouse-stock', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"product\">\n    <ng-container>\n        <div *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"flex items-center gap-1\">\n            <span *ngIf=\"product.getNotStockMessage(warehouseSelect) as message\" class=\"text-xs min-w-2/5 text-tui-error-fill\" [ngClass]=\"classList\"> {{ message }} </span>\n            <span *ngIf=\"product.isWarehouseStockExist(warehouseSelect.id)\" class=\"text-xs min-w-2/5 text-tui-success-fill\" [ngClass]=\"classList\">\n                \u0412 \u043D\u0430\u043B\u0438\u0447\u0438\u0438<ng-container *ngIf=\"product.getWarehouseStockCount(warehouseSelect.id) as count\"\n                    >:\n                    <span class=\"whitespace-nowrap\">{{ count }} {{ product.quantityUnit }}</span>\n                </ng-container>\n            </span>\n            <span *ngIf=\"product.onOrder\" class=\"text-xs min-w-2/5 text-sc-yellow\" [ngClass]=\"classList\">\u041F\u043E\u0434 \u0437\u0430\u043A\u0430\u0437</span>\n\n            <tui-svg\n                *ngIf=\"withStockHint && (stockByWarehouses$ | async)?.length\"\n                src=\"tuiIconInfoLarge\"\n                [tuiHint]=\"stockHint\"\n                [tuiHintShowDelay]=\"100\"\n                tuiHintDirection=\"top\"\n                class=\"!text-xs !h-3\"\n            ></tui-svg>\n        </div>\n    </ng-container>\n</ng-container>\n\n<ng-template #stockHint>\n    <table *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"text-xs table-auto\" [ngClass]=\"classList\">\n        <tbody>\n            <tr *ngFor=\"let item of stockByWarehouses$ | async\" class=\"border-b\">\n                <ng-container>\n                    <td class=\"px-1\">{{ item[0]?.name }}:</td>\n                    <td class=\"px-1\">{{ item[1].count ? item[1].count + ' ' + product.quantityUnit : '\u0412 \u043D\u0430\u043B\u0438\u0447\u0438\u0438' }}</td>\n                </ng-container>\n            </tr>\n        </tbody>\n    </table>\n</ng-template>\n", styles: ["[tuiIconButton]{--tui-radius-m: .75rem;--tui-height-xs: 1.25rem}\n"] }]
+            args: [{ selector: 'sc-price-warehouse-stock', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"product\">\n    <ng-container>\n        <div *ngIf=\"selectedWarehouse$ | async as warehouseSelect\" class=\"flex items-center gap-1\">\n            <span *ngIf=\"product.getNotStockMessage(warehouseSelect) as message\" class=\"text-xs min-w-2/5 text-tui-error-fill\" [ngClass]=\"classList\"> {{ message }} </span>\n            <span *ngIf=\"product.isWarehouseStockExist(warehouseSelect.id)\" class=\"text-xs min-w-2/5 text-tui-success-fill\" [ngClass]=\"classList\">\n                \u0412 \u043D\u0430\u043B\u0438\u0447\u0438\u0438<ng-container *ngIf=\"product.getWarehouseStockCount(warehouseSelect.id) as count\"\n                    >:\n                    <span class=\"whitespace-nowrap\">{{ count }} {{ product.quantityUnit }}</span>\n                </ng-container>\n            </span>\n            <span *ngIf=\"product.onOrder\" class=\"text-xs min-w-2/5 text-sc-yellow\" [ngClass]=\"classList\">\u041F\u043E\u0434 \u0437\u0430\u043A\u0430\u0437</span>\n\n            <tui-svg\n                *ngIf=\"withStockHint && (warehousesList$ | async)?.length\"\n                src=\"tuiIconInfoLarge\"\n                [tuiHint]=\"stockHint\"\n                [tuiHintShowDelay]=\"100\"\n                tuiHintDirection=\"top\"\n                class=\"!text-xs !h-3\"\n            ></tui-svg>\n        </div>\n    </ng-container>\n</ng-container>\n\n<ng-template #stockHint>\n    <table *ngIf=\"selectedWarehouse$ | async as warehouseSelect\" class=\"text-xs table-auto\" [ngClass]=\"classList\">\n        <tbody>\n            <tr *ngFor=\"let item of warehousesList$ | async\" class=\"border-b\">\n                <ng-container>\n                    <td class=\"px-1\">{{ item.w?.name }}:</td>\n                    <td class=\"px-1\">{{ item.sc.count ? item.sc.count + ' ' + product.quantityUnit : '\u0412 \u043D\u0430\u043B\u0438\u0447\u0438\u0438' }}</td>\n                </ng-container>\n            </tr>\n        </tbody>\n    </table>\n</ng-template>\n", styles: ["[tuiIconButton]{--tui-radius-m: .75rem;--tui-height-xs: 1.25rem}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ScWarehouseService }]; }, propDecorators: { classList: [{
                 type: Input
             }], product: [{
@@ -549,7 +553,7 @@ class ScCartItemMobileComponent {
         /**
          * {@link FormControl} поля ввода количества товара в корзине.
          */
-        this.quantityControl = new FormControl(0);
+        this.quantityControl = new FormControl(0, { updateOn: 'blur' });
         /**
          * {@link Observable} изменения количества товара в корзине.
          */
@@ -606,10 +610,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,
                     args: [TuiPreviewDialogService]
@@ -841,7 +845,7 @@ class ScPriceCardComponent {
         /**
          * {@link FormControl} поля ввода количества товара в корзине.
          */
-        this.quantityControl = new FormControl(null);
+        this.quantityControl = new FormControl(null, { updateOn: 'blur' });
         /**
          * {@link Observable} изменения количества товара в корзине.
          */
@@ -900,10 +904,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,
                     args: [SC_URLS]
@@ -1632,6 +1636,7 @@ const scClientUiIconsName = [
     'scIconWordFile',
     'scIconWindowsill',
     'scIconWarning',
+    'scIconSandwichPanels',
     'scIconWallet',
     'scIconViewTree',
     'scIconViewInline',