@snabcentr/client-ui 0.15.2 → 0.15.5

package/fesm2020/snabcentr-client-ui.mjs

@@ -1329,10 +1329,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: "<ng-container *ngIf=\"cartItem && product; else skeleton\">\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    <div class=\"flex relative bg-white border border-tui-base-04 shadow-sc-2 rounded-xl min-w-72 p-4\">\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 mr-5 max-h-52 min-w-[30%] items-center\">\n            <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" class=\"rounded-xl w-full max-h-full object-cover\" />\n        </div>\n        <div class=\"flex flex-col items-start w-full\">\n            <a tuiLink (click)=\"clickCardEvent.emit()\" class=\"mb-1\">\n                <span class=\"font-bold\">{{ product.name }}</span>\n            </a>\n            <div class=\"text-tui-text-02 text-xs\">\n                <p *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n                <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                <div class=\"flex flex-col self-center gap-y-0.5\">\n                    <p class=\"flex flex-col items-baseline gap-x-2 font-bold\">\n                        <span>{{ product.costRubString }}</span>\n                        <span *ngIf=\"!product.priceInRub\">{{ product.costString }}</span>\n                    </p>\n                    <span *ngIf=\"product.discount\" class=\"flex items-center\">\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-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                    <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n                </div>\n\n                <div *ngIf=\"cartItem.height || cartItem.length || cartItem.width\" class=\"flex my-0.5 items-center\">\n                    <button\n                        tuiIconButton\n                        icon=\"tuiIconSettings\"\n                        (click)=\"clickSettingsEvent.emit()\"\n                        size=\"s\"\n                        appearance=\"secondary\"\n                        tuiMode=\"onLight\"\n                        class=\"mr-2 !self-center\"\n                    ></button>\n                    <div>\n                        <ng-container *ngIf=\"cartItem.height; else length\">\n                            <p>\u0412\u044B\u0441\u043E\u0442\u0430: {{ cartItem.height }} \u043C.</p>\n                        </ng-container>\n                        <ng-template #length>\n                            <p *ngIf=\"cartItem.length\">\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} \u043C.</p>\n                        </ng-template>\n                        <p *ngIf=\"cartItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ cartItem.width }} \u043C.</p>\n                    </div>\n                </div>\n\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                <p class=\"font-bold text-tui-text-01 text-sm\">\u0418\u0442\u043E\u0433\u043E: {{ cartItem.costRub | tuiFormatNumber }} {{ 'RUB' | tuiCurrency }}</p>\n            </div>\n            <sc-input-quantity\n                #inputQuantity\n                *ngIf=\"quantityControl\"\n                [formControl]=\"quantityControl\"\n                size=\"s\"\n                [step]=\"unitsHelper.productMultiplicity(product)\"\n                (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n                class=\"w-full mt-2\"\n            ></sc-input-quantity>\n        </div>\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", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: ["step", "showLoader", "showCross", "appearance", "isDisabled", "size"], outputs: ["clickClearEvent"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint", "fromMain"] }, { kind: "component", type: i4.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "directive", type: i4.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { kind: "component", type: i4.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i4.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i4.TuiHintDriverDirective, selector: "[tuiHint]" }, { kind: "directive", type: i4.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i4.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i7.TuiPreviewComponent, selector: "tui-preview", inputs: ["zoomable", "rotatable"] }, { kind: "directive", type: i7.TuiPreviewActionDirective, selector: "[tuiPreviewAction]" }, { kind: "directive", type: i2$1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "pipe", type: i9.TuiCurrencyPipe, name: "tuiCurrency" }, { kind: "pipe", type: i4.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: "<ng-container *ngIf=\"cartItem && product; else skeleton\">\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    <div class=\"flex bg-white border border-tui-base-04 shadow-sc-2 rounded-xl min-w-[18rem] gap-2 p-2\">\n        <div class=\"flex w-40 items-center\">\n            <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" class=\"rounded-xl w-full max-h-full object-cover\" />\n        </div>\n        <div class=\"flex flex-col sm:flex-row sm:gap-5 items-center gap-2 justify-between w-full\">\n            <div class=\"flex flex-col max-w-full gap-1\">\n                <a tuiLink (click)=\"clickCardEvent.emit()\">\n                    <span class=\"font-bold\">{{ product.name }}</span>\n                </a>\n\n                <div class=\"flex flex-wrap gap-y-1 gap-x-2 w-full text-xs text-tui-base-05\">\n                    <p *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n                    <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                </div>\n\n                <div class=\"flex flex-wrap items-center gap-y-1 gap-x-2 w-full\">\n                    <p *ngIf=\"!product.priceInRub\" class=\"font-bold\">{{ product.costString }}</p>\n                    <p class=\"font-bold text-xs text-tui-base-05\">{{ product.costRubString }}</p>\n                    <span *ngIf=\"product.discount\" class=\"flex items-center\">\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-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                </div>\n\n                <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n\n                <div *ngIf=\"cartItem.height || cartItem.length || cartItem.width\" class=\"flex gap-1 items-center\">\n                    <button\n                        tuiIconButton\n                        icon=\"tuiIconSettings\"\n                        (click)=\"clickSettingsEvent.emit()\"\n                        size=\"s\"\n                        appearance=\"secondary\"\n                        tuiMode=\"onLight\"\n                        class=\"mr-2 !self-center\"\n                    ></button>\n                    <div class=\"flex flex-wrap gap-x-2 font-thin text-xs text-tui-base-04\">\n                        <p *ngIf=\"cartItem.marker\">\u041C\u0430\u0440\u043A\u0438\u0440\u043E\u0432\u043A\u0430: {{ cartItem.marker }}</p>\n                        <p *ngIf=\"cartItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ cartItem.width }} \u043C.</p>\n                        <ng-container *ngIf=\"cartItem.height; else length\">\n                            <p>\u0412\u044B\u0441\u043E\u0442\u0430: {{ cartItem.height }} \u043C.</p>\n                        </ng-container>\n                        <ng-template #length>\n                            <p *ngIf=\"cartItem.length\">\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} \u043C.</p>\n                        </ng-template>\n                    </div>\n                </div>\n\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 class=\"flex flex-col self-start gap-1 sm:mr-9 sm:self-center\">\n                    <div class=\"flex gap-2\">\n                        <sc-input-quantity\n                            #inputQuantity\n                            *ngIf=\"quantityControl\"\n                            [formControl]=\"quantityControl\"\n                            [showCross]=\"false\"\n                            size=\"s\"\n                            [step]=\"unitsHelper.productMultiplicity(product)\"\n                            (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n                            class=\"w-28\"\n                        ></sc-input-quantity>\n                        <button tuiIconButton icon=\"tuiIconTrash2\" shape=\"rounded\" size=\"xs\" (click)=\"clickDeleteEvent.emit()\"></button>\n                    </div>\n                    <p class=\"font-bold text-tui-text-01 text-sm\">\u0418\u0442\u043E\u0433\u043E: {{ cartItem.costRub | tuiFormatNumber }} {{ 'RUB' | tuiCurrency }}</p>\n                </div>\n            </div>\n        </div>\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", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: ["step", "showLoader", "showCross", "appearance", "isDisabled", "size"], outputs: ["clickClearEvent"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint", "fromMain"] }, { kind: "component", type: i4.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "directive", type: i4.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { kind: "component", type: i4.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i4.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i4.TuiHintDriverDirective, selector: "[tuiHint]" }, { kind: "directive", type: i4.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i4.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i7.TuiPreviewComponent, selector: "tui-preview", inputs: ["zoomable", "rotatable"] }, { kind: "directive", type: i7.TuiPreviewActionDirective, selector: "[tuiPreviewAction]" }, { kind: "directive", type: i2$1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "pipe", type: i9.TuiCurrencyPipe, name: "tuiCurrency" }, { kind: "pipe", type: i4.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: "<ng-container *ngIf=\"cartItem && product; else skeleton\">\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    <div class=\"flex relative bg-white border border-tui-base-04 shadow-sc-2 rounded-xl min-w-72 p-4\">\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 mr-5 max-h-52 min-w-[30%] items-center\">\n            <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" class=\"rounded-xl w-full max-h-full object-cover\" />\n        </div>\n        <div class=\"flex flex-col items-start w-full\">\n            <a tuiLink (click)=\"clickCardEvent.emit()\" class=\"mb-1\">\n                <span class=\"font-bold\">{{ product.name }}</span>\n            </a>\n            <div class=\"text-tui-text-02 text-xs\">\n                <p *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n                <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                <div class=\"flex flex-col self-center gap-y-0.5\">\n                    <p class=\"flex flex-col items-baseline gap-x-2 font-bold\">\n                        <span>{{ product.costRubString }}</span>\n                        <span *ngIf=\"!product.priceInRub\">{{ product.costString }}</span>\n                    </p>\n                    <span *ngIf=\"product.discount\" class=\"flex items-center\">\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-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                    <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n                </div>\n\n                <div *ngIf=\"cartItem.height || cartItem.length || cartItem.width\" class=\"flex my-0.5 items-center\">\n                    <button\n                        tuiIconButton\n                        icon=\"tuiIconSettings\"\n                        (click)=\"clickSettingsEvent.emit()\"\n                        size=\"s\"\n                        appearance=\"secondary\"\n                        tuiMode=\"onLight\"\n                        class=\"mr-2 !self-center\"\n                    ></button>\n                    <div>\n                        <ng-container *ngIf=\"cartItem.height; else length\">\n                            <p>\u0412\u044B\u0441\u043E\u0442\u0430: {{ cartItem.height }} \u043C.</p>\n                        </ng-container>\n                        <ng-template #length>\n                            <p *ngIf=\"cartItem.length\">\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} \u043C.</p>\n                        </ng-template>\n                        <p *ngIf=\"cartItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ cartItem.width }} \u043C.</p>\n                    </div>\n                </div>\n\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                <p class=\"font-bold text-tui-text-01 text-sm\">\u0418\u0442\u043E\u0433\u043E: {{ cartItem.costRub | tuiFormatNumber }} {{ 'RUB' | tuiCurrency }}</p>\n            </div>\n            <sc-input-quantity\n                #inputQuantity\n                *ngIf=\"quantityControl\"\n                [formControl]=\"quantityControl\"\n                size=\"s\"\n                [step]=\"unitsHelper.productMultiplicity(product)\"\n                (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n                class=\"w-full mt-2\"\n            ></sc-input-quantity>\n        </div>\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" }]
+            args: [{ selector: 'sc-cart-item-mobile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"cartItem && product; else skeleton\">\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    <div class=\"flex bg-white border border-tui-base-04 shadow-sc-2 rounded-xl min-w-[18rem] gap-2 p-2\">\n        <div class=\"flex w-40 items-center\">\n            <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" class=\"rounded-xl w-full max-h-full object-cover\" />\n        </div>\n        <div class=\"flex flex-col sm:flex-row sm:gap-5 items-center gap-2 justify-between w-full\">\n            <div class=\"flex flex-col max-w-full gap-1\">\n                <a tuiLink (click)=\"clickCardEvent.emit()\">\n                    <span class=\"font-bold\">{{ product.name }}</span>\n                </a>\n\n                <div class=\"flex flex-wrap gap-y-1 gap-x-2 w-full text-xs text-tui-base-05\">\n                    <p *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n                    <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                </div>\n\n                <div class=\"flex flex-wrap items-center gap-y-1 gap-x-2 w-full\">\n                    <p *ngIf=\"!product.priceInRub\" class=\"font-bold\">{{ product.costString }}</p>\n                    <p class=\"font-bold text-xs text-tui-base-05\">{{ product.costRubString }}</p>\n                    <span *ngIf=\"product.discount\" class=\"flex items-center\">\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-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                </div>\n\n                <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n\n                <div *ngIf=\"cartItem.height || cartItem.length || cartItem.width\" class=\"flex gap-1 items-center\">\n                    <button\n                        tuiIconButton\n                        icon=\"tuiIconSettings\"\n                        (click)=\"clickSettingsEvent.emit()\"\n                        size=\"s\"\n                        appearance=\"secondary\"\n                        tuiMode=\"onLight\"\n                        class=\"mr-2 !self-center\"\n                    ></button>\n                    <div class=\"flex flex-wrap gap-x-2 font-thin text-xs text-tui-base-04\">\n                        <p *ngIf=\"cartItem.marker\">\u041C\u0430\u0440\u043A\u0438\u0440\u043E\u0432\u043A\u0430: {{ cartItem.marker }}</p>\n                        <p *ngIf=\"cartItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ cartItem.width }} \u043C.</p>\n                        <ng-container *ngIf=\"cartItem.height; else length\">\n                            <p>\u0412\u044B\u0441\u043E\u0442\u0430: {{ cartItem.height }} \u043C.</p>\n                        </ng-container>\n                        <ng-template #length>\n                            <p *ngIf=\"cartItem.length\">\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} \u043C.</p>\n                        </ng-template>\n                    </div>\n                </div>\n\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 class=\"flex flex-col self-start gap-1 sm:mr-9 sm:self-center\">\n                    <div class=\"flex gap-2\">\n                        <sc-input-quantity\n                            #inputQuantity\n                            *ngIf=\"quantityControl\"\n                            [formControl]=\"quantityControl\"\n                            [showCross]=\"false\"\n                            size=\"s\"\n                            [step]=\"unitsHelper.productMultiplicity(product)\"\n                            (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n                            class=\"w-28\"\n                        ></sc-input-quantity>\n                        <button tuiIconButton icon=\"tuiIconTrash2\" shape=\"rounded\" size=\"xs\" (click)=\"clickDeleteEvent.emit()\"></button>\n                    </div>\n                    <p class=\"font-bold text-tui-text-01 text-sm\">\u0418\u0442\u043E\u0433\u043E: {{ cartItem.costRub | tuiFormatNumber }} {{ 'RUB' | tuiCurrency }}</p>\n                </div>\n            </div>\n        </div>\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" }]
         }], ctorParameters: function () { return [{ type: UnitsHelper }, { type: i7.TuiPreviewDialogService, decorators: [{
                     type: Inject,
                     args: [TuiPreviewDialogService]
@@ -4906,5 +4906,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AuthMethod, FilesAndDocumentsComponent, FilesAndDocumentsModule, SC_LINEAR_VALUES, SC_LINEAR_VALUES_TOKEN, SC_LOADING_PAGINATION_CHANGE_INFO, SC_NEXT_PAGE_PAGINATION_CHANGE_INFO, SC_NEXT_PAGE_PAGINATION_CLICK, SC_PRODUCT_PAGINATION_CHANGE_INFO, SC_PRODUCT_PAGINATION_CHANGE_PROVIDERS, SC_PRODUCT_PAGINATION_DEFAULT_OPTIONS, SC_PRODUCT_PAGINATION_OPTIONS, SC_PRODUCT_PAGINATION_PARAMS, SC_USER_INFO, SC_USER_PROVIDERS, ScAccordionComponent, ScAccordionContentDirective, ScAccordionModule, ScAddContactDialogComponent, ScAddContragentBankAccountsDialogComponent, ScAddContragentDialogComponent, ScAddDeliveryAddressDialogComponent, ScAuthModule, ScBannerComponent, ScBannerModule, ScCarouselItemHiddenDirective, ScCarouselItemHiddenModule, ScCartItemMobileComponent, ScCartModule, ScCatalogModule, ScCategoriesListComponent, ScCategoryCardComponent, ScContactsAccordionComponent, ScContactsModule, ScContragentsAccordionComponent, ScContragentsAccordionItemComponent, ScContragentsModule, ScDeliveryAddressAccordionComponent, ScDeliveryAddressAccordionItemComponent, ScDeliveryAddressModule, ScFavoriteBtnComponent, ScInputQuantityComponent, ScNewContactFormComponent, ScNewContragentBankAccountsFormComponent, ScNewContragentFormComponent, ScNewsCardComponent, ScNewsCardSkeletonComponent, ScNewsModule, ScOrderItemMobileComponent, ScOrderModule, ScPaymentStatusComponent, ScPriceCardComponent, ScPriceHistoryComponent, ScPriceListPaginationComponent, ScPriceWarehouseStockComponent, ScProfileAccordionsContentComponent, ScProfileModule, ScResetUserPasswordComponent, ScShareButtonComponent, ScShareButtonModule, ScSignInFormByEmailComponent, ScSignInFormByPhoneComponent, ScSignInFormComponent, ScUpdateUserInfoDialogComponent, ScUserModule, ScUserPhoneApproveDialogComponent, ScVerificationModule, ScVerificationPhoneCheckFormComponent, TreeDirective, TreeIconService, TreeLoaderService, TreeTopDirective, nextPageClickEvent, paginationParams$, scBicValidator, scClientUiIconsName, scCorrespondentAccountValidator, scPasswordConfirmMatchingValidator, scUserFactory, stepValidator };
+export { AuthMethod, FilesAndDocumentsComponent, FilesAndDocumentsModule, SC_LINEAR_VALUES, SC_LINEAR_VALUES_TOKEN, SC_LOADING_PAGINATION_CHANGE_INFO, SC_NEXT_PAGE_PAGINATION_CHANGE_INFO, SC_NEXT_PAGE_PAGINATION_CLICK, SC_PRODUCT_PAGINATION_CHANGE_INFO, SC_PRODUCT_PAGINATION_CHANGE_PROVIDERS, SC_PRODUCT_PAGINATION_DEFAULT_OPTIONS, SC_PRODUCT_PAGINATION_OPTIONS, SC_PRODUCT_PAGINATION_PARAMS, SC_USER_INFO, SC_USER_PROVIDERS, ScAccordionComponent, ScAccordionContentDirective, ScAccordionModule, ScAddContactDialogComponent, ScAddContragentBankAccountsDialogComponent, ScAddContragentDialogComponent, ScAddDeliveryAddressDialogComponent, ScAddressesSelectionFieldComponent, ScAuthModule, ScBannerComponent, ScBannerModule, ScCarouselItemHiddenDirective, ScCarouselItemHiddenModule, ScCartItemMobileComponent, ScCartModule, ScCatalogModule, ScCategoriesListComponent, ScCategoryCardComponent, ScContactsAccordionComponent, ScContactsModule, ScContragentsAccordionComponent, ScContragentsAccordionItemComponent, ScContragentsModule, ScDeliveryAddressAccordionComponent, ScDeliveryAddressAccordionItemComponent, ScDeliveryAddressModule, ScFavoriteBtnComponent, ScFormFieldsModule, ScInputQuantityComponent, ScNewContactFormComponent, ScNewContragentBankAccountsFormComponent, ScNewContragentFormComponent, ScNewsCardComponent, ScNewsCardSkeletonComponent, ScNewsModule, ScOrderItemMobileComponent, ScOrderModule, ScPaymentStatusComponent, ScPriceCardComponent, ScPriceHistoryComponent, ScPriceListPaginationComponent, ScPriceWarehouseStockComponent, ScProfileAccordionsContentComponent, ScProfileModule, ScResetUserPasswordComponent, ScShareButtonComponent, ScShareButtonModule, ScSignInFormByEmailComponent, ScSignInFormByPhoneComponent, ScSignInFormComponent, ScSuggestionFieldComponent, ScUpdateUserInfoDialogComponent, ScUserModule, ScUserPhoneApproveDialogComponent, ScVerificationModule, ScVerificationPhoneCheckFormComponent, TreeDirective, TreeIconService, TreeLoaderService, TreeTopDirective, nextPageClickEvent, paginationParams$, scBicValidator, scClientUiIconsName, scCorrespondentAccountValidator, scPasswordConfirmMatchingValidator, scUserFactory, stepValidator };
 //# sourceMappingURL=snabcentr-client-ui.mjs.map