@snabcentr/client-ui 1.12.1 → 1.14.0

package/fesm2020/snabcentr-client-ui.mjs

@@ -36,6 +36,8 @@ import * as i7$2 from 'angular8-yandex-maps';
 import { AngularYandexMapsModule } from 'angular8-yandex-maps';
 import * as i3$1 from '@taiga-ui/layout';
 import { TuiBlockStatusModule } from '@taiga-ui/layout';
+import * as i7$3 from 'ng-recaptcha';
+import { RecaptchaModule, RecaptchaFormsModule } from 'ng-recaptcha';
 
 /**
  * Перечисление типов аутентификации.
@@ -3008,13 +3010,13 @@ let ScBannerComponent = class ScBannerComponent {
     }
 };
 ScBannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScBannerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ScBannerService }, { token: IntersectionObserverService }, { token: ElementRef }, { token: ScPxConverter }, { token: i1.ScUserMetrikaService }], target: i0.ɵɵFactoryTarget.Component });
-ScBannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScBannerComponent, selector: "sc-banner", inputs: { navigateButton: "navigateButton", playerInterval: "playerInterval", disabled: "disabled", bannerLocation: "bannerLocation", resizable: "resizable" }, outputs: { loadBannersEvent: "loadBannersEvent", clickBannerEvent: "clickBannerEvent" }, host: { listeners: { "mouseenter": "mouseEnterHandler()", "mouseleave": "mouseLeaveHandler()" }, properties: { "class.!hidden": "this.isHidden", "style.height": "this.height", "style.width": "this.width", "style.aspect-ratio": "this.aspectRatio" } }, providers: [IntersectionObserverService], queries: [{ propertyName: "bannersListRef", predicate: ["banner"] }], viewQueries: [{ propertyName: "videoRef", first: true, predicate: ["videoPlayer"], descendants: true }], ngImport: i0, template: "<ng-container *tuiLet=\"banners$ | async\">\n    <tui-carousel class=\"bg-white w-full h-full shadow-sc-2 rounded-xl overflow-hidden\" [(index)]=\"currentBannerId\">\n        <ng-container *ngFor=\"let banner of banners; let index = index\">\n            <a\n                *tuiItem\n                (click)=\"onClick(banner)\"\n                [style.aspect-ratio]=\"aspectRatio\"\n                [attr.href]=\"banner.url ? banner.url : null\"\n                target=\"_blank\"\n                [title]=\"banner.title\"\n                class=\"relative\"\n            >\n                <ng-container [ngSwitch]=\"banner.mediaType\">\n                    <ng-container *ngSwitchCase=\"'video'\">\n                        <video\n                            #videoPlayer\n                            (suspend)=\"showPlayBtn = true\"\n                            (play)=\"showPlayBtn = false\"\n                            [src]=\"banner.mediaFile\"\n                            (ended)=\"onEndedVideo()\"\n                            (mouseover)=\"videoPlayer.pause()\"\n                            (mouseout)=\"videoPlayer.play()\"\n                            class=\"object-cover h-full\"\n                            muted\n                            autoplay\n                        ></video>\n                        <button\n                            *ngIf=\"showPlayBtn\"\n                            tuiIconButton\n                            [@tuiFadeIn]=\"200\"\n                            matRipple\n                            (click)=\"$event.preventDefault(); videoPlayer.play()\"\n                            size=\"s\"\n                            appearance=\"secondary\"\n                            class=\"!absolute left-8 bottom-4\"\n                        >\n                            <i class=\"icon-refresh text-black\"></i>\n                        </button>\n                    </ng-container>\n\n                    <img *ngSwitchCase=\"'image'\" [src]=\"banner.mediaFile\" alt=\"\u0411\u0430\u043D\u043D\u0435\u0440\" class=\"object-cover h-full\" />\n                </ng-container>\n            </a>\n        </ng-container>\n        <ng-container *ngFor=\"let item of bannersListRef\">\n            <div *tuiItem [style.height]=\"height\" [style.width]=\"width\" [style.aspect-ratio]=\"aspectRatio\" class=\"overflow-hidden\">\n                <ng-container [ngTemplateOutlet]=\"item\"></ng-container>\n            </div>\n        </ng-container>\n    </tui-carousel>\n</ng-container>\n<div *ngIf=\"navigateButton && !disabled && this.banners && (this.bannersListRef.length + this.banners.length) > 1\" tuiMode=\"onLight\" class=\"flex items-center\">\n    <button tuiIconButton icon=\"tuiIconChevronLeftLarge\" size=\"m\" shape=\"rounded\" appearance=\"flat\" (click)=\"onPreviousBanner()\" class=\"!absolute left-2\"></button>\n    <button tuiIconButton icon=\"tuiIconChevronRightLarge\" size=\"m\" shape=\"rounded\" appearance=\"flat\" (click)=\"onNextBanner()\" class=\"!absolute right-2\"></button>\n</div>\n", styles: [":host{--tui-carousel-padding: 0;display:flex;position:relative}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i4$1.TuiCarouselComponent, selector: "tui-carousel", inputs: ["draggable", "itemsCount", "index"], outputs: ["indexChange"] }, { kind: "directive", type: i4$1.TuiCarouselDirective, selector: "tui-carousel", inputs: ["duration", "index"] }, { kind: "directive", type: i6.TuiItemDirective, selector: "[tuiItem]" }, { kind: "directive", type: i4.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { kind: "directive", type: i6.TuiLetDirective, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], animations: [tuiFadeIn], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ScBannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScBannerComponent, selector: "sc-banner", inputs: { navigateButton: "navigateButton", playerInterval: "playerInterval", disabled: "disabled", bannerLocation: "bannerLocation", resizable: "resizable" }, outputs: { loadBannersEvent: "loadBannersEvent", clickBannerEvent: "clickBannerEvent" }, host: { listeners: { "mouseenter": "mouseEnterHandler()", "mouseleave": "mouseLeaveHandler()" }, properties: { "class.!hidden": "this.isHidden", "style.height": "this.height", "style.width": "this.width", "style.aspect-ratio": "this.aspectRatio" } }, providers: [IntersectionObserverService], queries: [{ propertyName: "bannersListRef", predicate: ["banner"] }], viewQueries: [{ propertyName: "videoRef", first: true, predicate: ["videoPlayer"], descendants: true }], ngImport: i0, template: "<ng-container *tuiLet=\"banners$ | async\">\n    <tui-carousel class=\"bg-white w-full h-full shadow-sc-2 rounded-xl overflow-hidden\" [(index)]=\"currentBannerId\">\n        <ng-container *ngFor=\"let banner of banners; let index = index\">\n            <a\n                *tuiItem\n                (click)=\"onClick(banner)\"\n                [style.aspect-ratio]=\"aspectRatio\"\n                [attr.href]=\"banner.url ? banner.url : null\"\n                target=\"_blank\"\n                [title]=\"banner.title\"\n                class=\"relative\"\n            >\n                <ng-container [ngSwitch]=\"banner.mediaType\">\n                    <ng-container *ngSwitchCase=\"'video'\">\n                        <video\n                            #videoPlayer\n                            (suspend)=\"showPlayBtn = true\"\n                            (play)=\"showPlayBtn = false\"\n                            [src]=\"banner.mediaFile\"\n                            (ended)=\"onEndedVideo()\"\n                            (mouseover)=\"videoPlayer.pause()\"\n                            (mouseout)=\"videoPlayer.play()\"\n                            class=\"object-cover h-full\"\n                            muted\n                            autoplay\n                        ></video>\n                        <button\n                            *ngIf=\"showPlayBtn\"\n                            tuiIconButton\n                            [@tuiFadeIn]=\"200\"\n                            matRipple\n                            (click)=\"$event.preventDefault(); videoPlayer.play()\"\n                            size=\"s\"\n                            appearance=\"secondary\"\n                            class=\"!absolute left-8 bottom-4\"\n                        >\n                            <i class=\"icon-refresh text-black\"></i>\n                        </button>\n                    </ng-container>\n\n                    <img *ngSwitchCase=\"'image'\" [src]=\"banner.mediaFile\" alt=\"\u0411\u0430\u043D\u043D\u0435\u0440\" class=\"object-cover h-full\" />\n                </ng-container>\n            </a>\n        </ng-container>\n        <ng-container *ngFor=\"let item of bannersListRef\">\n            <div *tuiItem [style.height]=\"height\" [style.width]=\"width\" [style.aspect-ratio]=\"aspectRatio\" class=\"overflow-hidden\">\n                <ng-container [ngTemplateOutlet]=\"item\"></ng-container>\n            </div>\n        </ng-container>\n    </tui-carousel>\n</ng-container>\n<div *ngIf=\"navigateButton && !disabled && this.banners && (this.bannersListRef.length + this.banners.length) > 1\" tuiMode=\"onLight\" class=\"flex items-center\">\n    <button tuiIconButton icon=\"tuiIconChevronLeftLarge\" size=\"m\" shape=\"rounded\" appearance=\"flat\" (click)=\"onPreviousBanner()\" class=\"!absolute left-2\"></button>\n    <button tuiIconButton icon=\"tuiIconChevronRightLarge\" size=\"m\" shape=\"rounded\" appearance=\"flat\" (click)=\"onNextBanner()\" class=\"!absolute right-2\"></button>\n</div>\n", styles: [":host{--tui-carousel-padding: 0;display:flex;position:relative}::ng-deep tui-carousel .t-scroller{touch-action:auto!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i4$1.TuiCarouselComponent, selector: "tui-carousel", inputs: ["draggable", "itemsCount", "index"], outputs: ["indexChange"] }, { kind: "directive", type: i4$1.TuiCarouselDirective, selector: "tui-carousel", inputs: ["duration", "index"] }, { kind: "directive", type: i6.TuiItemDirective, selector: "[tuiItem]" }, { kind: "directive", type: i4.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { kind: "directive", type: i6.TuiLetDirective, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], animations: [tuiFadeIn], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 ScBannerComponent = __decorate([
     UntilDestroy({ checkProperties: true })
 ], ScBannerComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScBannerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-banner', changeDetection: ChangeDetectionStrategy.OnPush, providers: [IntersectionObserverService], animations: [tuiFadeIn], template: "<ng-container *tuiLet=\"banners$ | async\">\n    <tui-carousel class=\"bg-white w-full h-full shadow-sc-2 rounded-xl overflow-hidden\" [(index)]=\"currentBannerId\">\n        <ng-container *ngFor=\"let banner of banners; let index = index\">\n            <a\n                *tuiItem\n                (click)=\"onClick(banner)\"\n                [style.aspect-ratio]=\"aspectRatio\"\n                [attr.href]=\"banner.url ? banner.url : null\"\n                target=\"_blank\"\n                [title]=\"banner.title\"\n                class=\"relative\"\n            >\n                <ng-container [ngSwitch]=\"banner.mediaType\">\n                    <ng-container *ngSwitchCase=\"'video'\">\n                        <video\n                            #videoPlayer\n                            (suspend)=\"showPlayBtn = true\"\n                            (play)=\"showPlayBtn = false\"\n                            [src]=\"banner.mediaFile\"\n                            (ended)=\"onEndedVideo()\"\n                            (mouseover)=\"videoPlayer.pause()\"\n                            (mouseout)=\"videoPlayer.play()\"\n                            class=\"object-cover h-full\"\n                            muted\n                            autoplay\n                        ></video>\n                        <button\n                            *ngIf=\"showPlayBtn\"\n                            tuiIconButton\n                            [@tuiFadeIn]=\"200\"\n                            matRipple\n                            (click)=\"$event.preventDefault(); videoPlayer.play()\"\n                            size=\"s\"\n                            appearance=\"secondary\"\n                            class=\"!absolute left-8 bottom-4\"\n                        >\n                            <i class=\"icon-refresh text-black\"></i>\n                        </button>\n                    </ng-container>\n\n                    <img *ngSwitchCase=\"'image'\" [src]=\"banner.mediaFile\" alt=\"\u0411\u0430\u043D\u043D\u0435\u0440\" class=\"object-cover h-full\" />\n                </ng-container>\n            </a>\n        </ng-container>\n        <ng-container *ngFor=\"let item of bannersListRef\">\n            <div *tuiItem [style.height]=\"height\" [style.width]=\"width\" [style.aspect-ratio]=\"aspectRatio\" class=\"overflow-hidden\">\n                <ng-container [ngTemplateOutlet]=\"item\"></ng-container>\n            </div>\n        </ng-container>\n    </tui-carousel>\n</ng-container>\n<div *ngIf=\"navigateButton && !disabled && this.banners && (this.bannersListRef.length + this.banners.length) > 1\" tuiMode=\"onLight\" class=\"flex items-center\">\n    <button tuiIconButton icon=\"tuiIconChevronLeftLarge\" size=\"m\" shape=\"rounded\" appearance=\"flat\" (click)=\"onPreviousBanner()\" class=\"!absolute left-2\"></button>\n    <button tuiIconButton icon=\"tuiIconChevronRightLarge\" size=\"m\" shape=\"rounded\" appearance=\"flat\" (click)=\"onNextBanner()\" class=\"!absolute right-2\"></button>\n</div>\n", styles: [":host{--tui-carousel-padding: 0;display:flex;position:relative}\n"] }]
+            args: [{ selector: 'sc-banner', changeDetection: ChangeDetectionStrategy.OnPush, providers: [IntersectionObserverService], animations: [tuiFadeIn], template: "<ng-container *tuiLet=\"banners$ | async\">\n    <tui-carousel class=\"bg-white w-full h-full shadow-sc-2 rounded-xl overflow-hidden\" [(index)]=\"currentBannerId\">\n        <ng-container *ngFor=\"let banner of banners; let index = index\">\n            <a\n                *tuiItem\n                (click)=\"onClick(banner)\"\n                [style.aspect-ratio]=\"aspectRatio\"\n                [attr.href]=\"banner.url ? banner.url : null\"\n                target=\"_blank\"\n                [title]=\"banner.title\"\n                class=\"relative\"\n            >\n                <ng-container [ngSwitch]=\"banner.mediaType\">\n                    <ng-container *ngSwitchCase=\"'video'\">\n                        <video\n                            #videoPlayer\n                            (suspend)=\"showPlayBtn = true\"\n                            (play)=\"showPlayBtn = false\"\n                            [src]=\"banner.mediaFile\"\n                            (ended)=\"onEndedVideo()\"\n                            (mouseover)=\"videoPlayer.pause()\"\n                            (mouseout)=\"videoPlayer.play()\"\n                            class=\"object-cover h-full\"\n                            muted\n                            autoplay\n                        ></video>\n                        <button\n                            *ngIf=\"showPlayBtn\"\n                            tuiIconButton\n                            [@tuiFadeIn]=\"200\"\n                            matRipple\n                            (click)=\"$event.preventDefault(); videoPlayer.play()\"\n                            size=\"s\"\n                            appearance=\"secondary\"\n                            class=\"!absolute left-8 bottom-4\"\n                        >\n                            <i class=\"icon-refresh text-black\"></i>\n                        </button>\n                    </ng-container>\n\n                    <img *ngSwitchCase=\"'image'\" [src]=\"banner.mediaFile\" alt=\"\u0411\u0430\u043D\u043D\u0435\u0440\" class=\"object-cover h-full\" />\n                </ng-container>\n            </a>\n        </ng-container>\n        <ng-container *ngFor=\"let item of bannersListRef\">\n            <div *tuiItem [style.height]=\"height\" [style.width]=\"width\" [style.aspect-ratio]=\"aspectRatio\" class=\"overflow-hidden\">\n                <ng-container [ngTemplateOutlet]=\"item\"></ng-container>\n            </div>\n        </ng-container>\n    </tui-carousel>\n</ng-container>\n<div *ngIf=\"navigateButton && !disabled && this.banners && (this.bannersListRef.length + this.banners.length) > 1\" tuiMode=\"onLight\" class=\"flex items-center\">\n    <button tuiIconButton icon=\"tuiIconChevronLeftLarge\" size=\"m\" shape=\"rounded\" appearance=\"flat\" (click)=\"onPreviousBanner()\" class=\"!absolute left-2\"></button>\n    <button tuiIconButton icon=\"tuiIconChevronRightLarge\" size=\"m\" shape=\"rounded\" appearance=\"flat\" (click)=\"onNextBanner()\" class=\"!absolute right-2\"></button>\n</div>\n", styles: [":host{--tui-carousel-padding: 0;display:flex;position:relative}::ng-deep tui-carousel .t-scroller{touch-action:auto!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.ScBannerService }, { type: i7.IntersectionObserverService, decorators: [{
                     type: Inject,
                     args: [IntersectionObserverService]
@@ -3859,11 +3861,9 @@ class ScCartItemMobileComponent {
      * @param urls Список ссылок на разделы backend'a.
      * @param pathImageNotFound Путь до изображения 'Товар не найден'.
      */
-    constructor(unitsHelper, previewDialogService, urls, pathImageNotFound) {
+    constructor(unitsHelper, previewDialogService) {
         this.unitsHelper = unitsHelper;
         this.previewDialogService = previewDialogService;
-        this.urls = urls;
-        this.pathImageNotFound = pathImageNotFound;
         /**
          * {@link FormControl} поля ввода количества товара в корзине.
          */
@@ -3884,6 +3884,10 @@ class ScCartItemMobileComponent {
          * Событие нажатия на карточку.
          */
         this.clickCardEvent = new EventEmitter();
+        /**
+         * Хелпер для работы с изображениями товара.
+         */
+        this.imageHelper = inject(ScImageHelper);
     }
     /**
      * Элемент корзины.
@@ -3918,25 +3922,21 @@ class ScCartItemMobileComponent {
     }
     /**
      * Возвращает ссылку на изображение карточки товара.
+     *
+     * @param product Позиция товара/услуги.
      */
-    getCardImage() {
-        return this.product?.getImagePreview(this.urls.imgServerUrl) ?? this.urls.imgServerUrl + this.pathImageNotFound;
+    getCardImage(product) {
+        return this.imageHelper.getImage(product);
     }
 }
-ScCartItemMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCartItemMobileComponent, deps: [{ token: i1.ScUnitsHelper }, { 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\" class=\"!absolute right-0 top-0\"></button> -->\n    <div class=\"flex min-w-72 gap-2 rounded-xl border border-tui-base-04 bg-white p-2 shadow-sc-2\">\n        <div class=\"flex w-40 items-center\">\n            <img\n                (click)=\"clickCardEvent.emit()\"\n                [src]=\"getCardImage()\"\n                [alt]=\"product.name\"\n                class=\"max-h-full w-full rounded-xl object-cover\"\n            />\n        </div>\n        <div class=\"flex w-full flex-col items-center justify-between gap-2 sm:flex-row sm:gap-5\">\n            <div class=\"flex max-w-full flex-col gap-1 self-start\">\n                <a\n                    tuiLink\n                    (click)=\"clickCardEvent.emit()\"\n                >\n                    <span class=\"font-bold\">{{ product.name }}</span>\n                </a>\n\n                <div class=\"flex w-full flex-wrap gap-x-2 gap-y-1 text-xs text-tui-base-05\">\n                    <p *ngIf=\"product.pack\">\n                        \u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}\n                        <tui-svg\n                            *ngIf=\"product.ignoreMinCountCheck\"\n                            src=\"tuiIconPackage\"\n                            [tuiHint]=\"minCountHint\"\n                            [tuiHintShowDelay]=\"100\"\n                            tuiHintDirection=\"top\"\n                        ></tui-svg>\n                        <ng-template #minCountHint>\n                            \u0414\u043E\u0441\u0442\u0443\u043F\u0435\u043D \u0437\u0430\u043A\u0430\u0437 <br />\n                            \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u043B\u044C\u043D\u043E\u0433\u043E <br />\n                            \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u0430\n                        </ng-template>\n                    </p>\n                    <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                </div>\n\n                <div class=\"flex w-full flex-wrap items-center gap-x-2 gap-y-1\">\n                    <p\n                        *ngIf=\"!product.priceInRub\"\n                        class=\"font-bold\"\n                    >\n                        {{ product.costString }}\n                    </p>\n                    <p class=\"text-xs font-bold text-tui-base-05\">{{ product.costRubString }}</p>\n                    <span\n                        *ngIf=\"product.discount\"\n                        class=\"flex items-center\"\n                    >\n                        <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                        <span class=\"font-bold text-tui-success-fill\"> -{{ product.discount.percent }}% </span>\n                        <tui-svg\n                            src=\"tuiIconInfoLarge\"\n                            [tuiHint]=\"discountHint\"\n                            [tuiHintShowDelay]=\"100\"\n                            tuiHintDirection=\"top\"\n                            class=\"!h-4 !text-xs\"\n                        ></tui-svg>\n                        <ng-template #discountHint>\n                            <div class=\"font-bold\">{{ product.discount.name }}</div>\n                            <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n                        </ng-template>\n                    </span>\n                </div>\n\n                <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n\n                <div\n                    *ngIf=\"cartItem.height || cartItem.length || cartItem.width\"\n                    class=\"flex items-center gap-1\"\n                >\n                    <button\n                        tuiIconButton\n                        icon=\"tuiIconSettings\"\n                        (click)=\"clickSettingsEvent.emit()\"\n                        size=\"s\"\n                        appearance=\"secondary\"\n                        class=\"mr-2 !self-center\"\n                    ></button>\n                    <div class=\"flex flex-wrap gap-x-2 text-xs font-thin 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\n                    tuiLink\n                    *ngIf=\"cartItem.specificationImgUrl\"\n                    (click)=\"showSpecification()\"\n                    >\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a\n                >\n                <ng-template\n                    #specificationPreview\n                    let-preview\n                >\n                    <tui-preview\n                        [rotatable]=\"false\"\n                        [zoomable]=\"false\"\n                    >\n                        <img\n                            *polymorpheusOutlet=\"cartItem.specificationImgUrl as src\"\n                            alt=\"preview\"\n                            [src]=\"cartItem.specificationImgUrl\"\n                        />\n                        <button\n                            icon=\"tuiIconClose\"\n                            title=\"Close\"\n                            tuiIconButton\n                            tuiPreviewAction\n                            type=\"button\"\n                            (click)=\"preview.complete()\"\n                        ></button>\n                    </tui-preview>\n                </ng-template>\n            </div>\n            <div class=\"flex flex-col gap-1 self-start 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                        [ignoreStepValidators]=\"product.ignoreMinCountCheck\"\n                        (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n                        class=\"w-28\"\n                    ></sc-input-quantity>\n                    <button\n                        tuiIconButton\n                        icon=\"tuiIconTrash2\"\n                        shape=\"rounded\"\n                        size=\"xs\"\n                        (click)=\"clickDeleteEvent.emit()\"\n                    ></button>\n                </div>\n                <p class=\"text-sm font-bold text-tui-text-01\">\u0418\u0442\u043E\u0433\u043E: {{ cartItem.costRub | tuiFormatNumber }} {{ 'RUB' | tuiCurrency }}</p>\n            </div>\n        </div>\n    </div>\n</ng-container>\n\n<ng-template #skeleton>\n    <div class=\"flex w-full gap-2\">\n        <div class=\"size-20 rounded-xl bg-tui-base-02\"></div>\n        <div class=\"flex grow flex-col gap-2.5 bg-white\">\n            <div class=\"h-4 w-full rounded-xl bg-tui-base-02\"></div>\n            <div class=\"h-4 w-3/5 rounded-xl bg-tui-base-02\"></div>\n            <div class=\"h-4 w-4/5 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", "ignoreStepValidators", "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: "component", type: i4.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i4.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i4.TuiHintDriverDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)" }, { kind: "directive", type: i4.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i4.TuiHintPositionDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintDirection"] }, { kind: "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$1.TuiPreviewComponent, selector: "tui-preview", inputs: ["zoomable", "rotatable"] }, { kind: "directive", type: i7$1.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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCartItemMobileComponent, deps: [{ token: i1.ScUnitsHelper }, { token: TuiPreviewDialogService }], 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\" class=\"!absolute right-0 top-0\"></button> -->\n    <div class=\"flex min-w-72 gap-2 rounded-xl border border-tui-base-04 bg-white p-2 shadow-sc-2\">\n        <div class=\"flex w-40 items-center\">\n            <img\n                (click)=\"clickCardEvent.emit()\"\n                [src]=\"getCardImage(product)\"\n                [alt]=\"product.name\"\n                class=\"max-h-full w-full rounded-xl object-cover\"\n            />\n        </div>\n        <div class=\"flex w-full flex-col items-center justify-between gap-2 sm:flex-row sm:gap-5\">\n            <div class=\"flex max-w-full flex-col gap-1 self-start\">\n                <a\n                    tuiLink\n                    (click)=\"clickCardEvent.emit()\"\n                >\n                    <span class=\"font-bold\">{{ product.name }}</span>\n                </a>\n\n                <div class=\"flex w-full flex-wrap gap-x-2 gap-y-1 text-xs text-tui-base-05\">\n                    <p *ngIf=\"product.pack\">\n                        \u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}\n                        <tui-svg\n                            *ngIf=\"product.ignoreMinCountCheck\"\n                            src=\"tuiIconPackage\"\n                            [tuiHint]=\"minCountHint\"\n                            [tuiHintShowDelay]=\"100\"\n                            tuiHintDirection=\"top\"\n                        ></tui-svg>\n                        <ng-template #minCountHint>\n                            \u0414\u043E\u0441\u0442\u0443\u043F\u0435\u043D \u0437\u0430\u043A\u0430\u0437 <br />\n                            \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u043B\u044C\u043D\u043E\u0433\u043E <br />\n                            \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u0430\n                        </ng-template>\n                    </p>\n                    <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                </div>\n\n                <div class=\"flex w-full flex-wrap items-center gap-x-2 gap-y-1\">\n                    <p\n                        *ngIf=\"!product.priceInRub\"\n                        class=\"font-bold\"\n                    >\n                        {{ product.costString }}\n                    </p>\n                    <p class=\"text-xs font-bold text-tui-base-05\">{{ product.costRubString }}</p>\n                    <span\n                        *ngIf=\"product.discount\"\n                        class=\"flex items-center\"\n                    >\n                        <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                        <span class=\"font-bold text-tui-success-fill\"> -{{ product.discount.percent }}% </span>\n                        <tui-svg\n                            src=\"tuiIconInfoLarge\"\n                            [tuiHint]=\"discountHint\"\n                            [tuiHintShowDelay]=\"100\"\n                            tuiHintDirection=\"top\"\n                            class=\"!h-4 !text-xs\"\n                        ></tui-svg>\n                        <ng-template #discountHint>\n                            <div class=\"font-bold\">{{ product.discount.name }}</div>\n                            <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n                        </ng-template>\n                    </span>\n                </div>\n\n                <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n\n                <div\n                    *ngIf=\"cartItem.height || cartItem.length || cartItem.width\"\n                    class=\"flex items-center gap-1\"\n                >\n                    <button\n                        tuiIconButton\n                        icon=\"tuiIconSettings\"\n                        (click)=\"clickSettingsEvent.emit()\"\n                        size=\"s\"\n                        appearance=\"secondary\"\n                        class=\"mr-2 !self-center\"\n                    ></button>\n                    <div class=\"flex flex-wrap gap-x-2 text-xs font-thin 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\n                    tuiLink\n                    *ngIf=\"cartItem.specificationImgUrl\"\n                    (click)=\"showSpecification()\"\n                    >\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a\n                >\n                <ng-template\n                    #specificationPreview\n                    let-preview\n                >\n                    <tui-preview\n                        [rotatable]=\"false\"\n                        [zoomable]=\"false\"\n                    >\n                        <img\n                            *polymorpheusOutlet=\"cartItem.specificationImgUrl as src\"\n                            alt=\"preview\"\n                            [src]=\"cartItem.specificationImgUrl\"\n                        />\n                        <button\n                            icon=\"tuiIconClose\"\n                            title=\"Close\"\n                            tuiIconButton\n                            tuiPreviewAction\n                            type=\"button\"\n                            (click)=\"preview.complete()\"\n                        ></button>\n                    </tui-preview>\n                </ng-template>\n            </div>\n            <div class=\"flex flex-col gap-1 self-start 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                        [ignoreStepValidators]=\"product.ignoreMinCountCheck\"\n                        (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n                        class=\"w-28\"\n                    ></sc-input-quantity>\n                    <button\n                        tuiIconButton\n                        icon=\"tuiIconTrash2\"\n                        shape=\"rounded\"\n                        size=\"xs\"\n                        (click)=\"clickDeleteEvent.emit()\"\n                    ></button>\n                </div>\n                <p class=\"text-sm font-bold text-tui-text-01\">\u0418\u0442\u043E\u0433\u043E: {{ cartItem.costRub | tuiFormatNumber }} {{ 'RUB' | tuiCurrency }}</p>\n            </div>\n        </div>\n    </div>\n</ng-container>\n\n<ng-template #skeleton>\n    <div class=\"flex w-full gap-2\">\n        <div class=\"size-20 rounded-xl bg-tui-base-02\"></div>\n        <div class=\"flex grow flex-col gap-2.5 bg-white\">\n            <div class=\"h-4 w-full rounded-xl bg-tui-base-02\"></div>\n            <div class=\"h-4 w-3/5 rounded-xl bg-tui-base-02\"></div>\n            <div class=\"h-4 w-4/5 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", "ignoreStepValidators", "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: "component", type: i4.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i4.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i4.TuiHintDriverDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)" }, { kind: "directive", type: i4.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i4.TuiHintPositionDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintDirection"] }, { kind: "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$1.TuiPreviewComponent, selector: "tui-preview", inputs: ["zoomable", "rotatable"] }, { kind: "directive", type: i7$1.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\" class=\"!absolute right-0 top-0\"></button> -->\n    <div class=\"flex min-w-72 gap-2 rounded-xl border border-tui-base-04 bg-white p-2 shadow-sc-2\">\n        <div class=\"flex w-40 items-center\">\n            <img\n                (click)=\"clickCardEvent.emit()\"\n                [src]=\"getCardImage()\"\n                [alt]=\"product.name\"\n                class=\"max-h-full w-full rounded-xl object-cover\"\n            />\n        </div>\n        <div class=\"flex w-full flex-col items-center justify-between gap-2 sm:flex-row sm:gap-5\">\n            <div class=\"flex max-w-full flex-col gap-1 self-start\">\n                <a\n                    tuiLink\n                    (click)=\"clickCardEvent.emit()\"\n                >\n                    <span class=\"font-bold\">{{ product.name }}</span>\n                </a>\n\n                <div class=\"flex w-full flex-wrap gap-x-2 gap-y-1 text-xs text-tui-base-05\">\n                    <p *ngIf=\"product.pack\">\n                        \u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}\n                        <tui-svg\n                            *ngIf=\"product.ignoreMinCountCheck\"\n                            src=\"tuiIconPackage\"\n                            [tuiHint]=\"minCountHint\"\n                            [tuiHintShowDelay]=\"100\"\n                            tuiHintDirection=\"top\"\n                        ></tui-svg>\n                        <ng-template #minCountHint>\n                            \u0414\u043E\u0441\u0442\u0443\u043F\u0435\u043D \u0437\u0430\u043A\u0430\u0437 <br />\n                            \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u043B\u044C\u043D\u043E\u0433\u043E <br />\n                            \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u0430\n                        </ng-template>\n                    </p>\n                    <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                </div>\n\n                <div class=\"flex w-full flex-wrap items-center gap-x-2 gap-y-1\">\n                    <p\n                        *ngIf=\"!product.priceInRub\"\n                        class=\"font-bold\"\n                    >\n                        {{ product.costString }}\n                    </p>\n                    <p class=\"text-xs font-bold text-tui-base-05\">{{ product.costRubString }}</p>\n                    <span\n                        *ngIf=\"product.discount\"\n                        class=\"flex items-center\"\n                    >\n                        <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                        <span class=\"font-bold text-tui-success-fill\"> -{{ product.discount.percent }}% </span>\n                        <tui-svg\n                            src=\"tuiIconInfoLarge\"\n                            [tuiHint]=\"discountHint\"\n                            [tuiHintShowDelay]=\"100\"\n                            tuiHintDirection=\"top\"\n                            class=\"!h-4 !text-xs\"\n                        ></tui-svg>\n                        <ng-template #discountHint>\n                            <div class=\"font-bold\">{{ product.discount.name }}</div>\n                            <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n                        </ng-template>\n                    </span>\n                </div>\n\n                <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n\n                <div\n                    *ngIf=\"cartItem.height || cartItem.length || cartItem.width\"\n                    class=\"flex items-center gap-1\"\n                >\n                    <button\n                        tuiIconButton\n                        icon=\"tuiIconSettings\"\n                        (click)=\"clickSettingsEvent.emit()\"\n                        size=\"s\"\n                        appearance=\"secondary\"\n                        class=\"mr-2 !self-center\"\n                    ></button>\n                    <div class=\"flex flex-wrap gap-x-2 text-xs font-thin 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\n                    tuiLink\n                    *ngIf=\"cartItem.specificationImgUrl\"\n                    (click)=\"showSpecification()\"\n                    >\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a\n                >\n                <ng-template\n                    #specificationPreview\n                    let-preview\n                >\n                    <tui-preview\n                        [rotatable]=\"false\"\n                        [zoomable]=\"false\"\n                    >\n                        <img\n                            *polymorpheusOutlet=\"cartItem.specificationImgUrl as src\"\n                            alt=\"preview\"\n                            [src]=\"cartItem.specificationImgUrl\"\n                        />\n                        <button\n                            icon=\"tuiIconClose\"\n                            title=\"Close\"\n                            tuiIconButton\n                            tuiPreviewAction\n                            type=\"button\"\n                            (click)=\"preview.complete()\"\n                        ></button>\n                    </tui-preview>\n                </ng-template>\n            </div>\n            <div class=\"flex flex-col gap-1 self-start 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                        [ignoreStepValidators]=\"product.ignoreMinCountCheck\"\n                        (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n                        class=\"w-28\"\n                    ></sc-input-quantity>\n                    <button\n                        tuiIconButton\n                        icon=\"tuiIconTrash2\"\n                        shape=\"rounded\"\n                        size=\"xs\"\n                        (click)=\"clickDeleteEvent.emit()\"\n                    ></button>\n                </div>\n                <p class=\"text-sm font-bold text-tui-text-01\">\u0418\u0442\u043E\u0433\u043E: {{ cartItem.costRub | tuiFormatNumber }} {{ 'RUB' | tuiCurrency }}</p>\n            </div>\n        </div>\n    </div>\n</ng-container>\n\n<ng-template #skeleton>\n    <div class=\"flex w-full gap-2\">\n        <div class=\"size-20 rounded-xl bg-tui-base-02\"></div>\n        <div class=\"flex grow flex-col gap-2.5 bg-white\">\n            <div class=\"h-4 w-full rounded-xl bg-tui-base-02\"></div>\n            <div class=\"h-4 w-3/5 rounded-xl bg-tui-base-02\"></div>\n            <div class=\"h-4 w-4/5 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\" class=\"!absolute right-0 top-0\"></button> -->\n    <div class=\"flex min-w-72 gap-2 rounded-xl border border-tui-base-04 bg-white p-2 shadow-sc-2\">\n        <div class=\"flex w-40 items-center\">\n            <img\n                (click)=\"clickCardEvent.emit()\"\n                [src]=\"getCardImage(product)\"\n                [alt]=\"product.name\"\n                class=\"max-h-full w-full rounded-xl object-cover\"\n            />\n        </div>\n        <div class=\"flex w-full flex-col items-center justify-between gap-2 sm:flex-row sm:gap-5\">\n            <div class=\"flex max-w-full flex-col gap-1 self-start\">\n                <a\n                    tuiLink\n                    (click)=\"clickCardEvent.emit()\"\n                >\n                    <span class=\"font-bold\">{{ product.name }}</span>\n                </a>\n\n                <div class=\"flex w-full flex-wrap gap-x-2 gap-y-1 text-xs text-tui-base-05\">\n                    <p *ngIf=\"product.pack\">\n                        \u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}\n                        <tui-svg\n                            *ngIf=\"product.ignoreMinCountCheck\"\n                            src=\"tuiIconPackage\"\n                            [tuiHint]=\"minCountHint\"\n                            [tuiHintShowDelay]=\"100\"\n                            tuiHintDirection=\"top\"\n                        ></tui-svg>\n                        <ng-template #minCountHint>\n                            \u0414\u043E\u0441\u0442\u0443\u043F\u0435\u043D \u0437\u0430\u043A\u0430\u0437 <br />\n                            \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u043B\u044C\u043D\u043E\u0433\u043E <br />\n                            \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u0430\n                        </ng-template>\n                    </p>\n                    <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                </div>\n\n                <div class=\"flex w-full flex-wrap items-center gap-x-2 gap-y-1\">\n                    <p\n                        *ngIf=\"!product.priceInRub\"\n                        class=\"font-bold\"\n                    >\n                        {{ product.costString }}\n                    </p>\n                    <p class=\"text-xs font-bold text-tui-base-05\">{{ product.costRubString }}</p>\n                    <span\n                        *ngIf=\"product.discount\"\n                        class=\"flex items-center\"\n                    >\n                        <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                        <span class=\"font-bold text-tui-success-fill\"> -{{ product.discount.percent }}% </span>\n                        <tui-svg\n                            src=\"tuiIconInfoLarge\"\n                            [tuiHint]=\"discountHint\"\n                            [tuiHintShowDelay]=\"100\"\n                            tuiHintDirection=\"top\"\n                            class=\"!h-4 !text-xs\"\n                        ></tui-svg>\n                        <ng-template #discountHint>\n                            <div class=\"font-bold\">{{ product.discount.name }}</div>\n                            <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n                        </ng-template>\n                    </span>\n                </div>\n\n                <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n\n                <div\n                    *ngIf=\"cartItem.height || cartItem.length || cartItem.width\"\n                    class=\"flex items-center gap-1\"\n                >\n                    <button\n                        tuiIconButton\n                        icon=\"tuiIconSettings\"\n                        (click)=\"clickSettingsEvent.emit()\"\n                        size=\"s\"\n                        appearance=\"secondary\"\n                        class=\"mr-2 !self-center\"\n                    ></button>\n                    <div class=\"flex flex-wrap gap-x-2 text-xs font-thin 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\n                    tuiLink\n                    *ngIf=\"cartItem.specificationImgUrl\"\n                    (click)=\"showSpecification()\"\n                    >\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a\n                >\n                <ng-template\n                    #specificationPreview\n                    let-preview\n                >\n                    <tui-preview\n                        [rotatable]=\"false\"\n                        [zoomable]=\"false\"\n                    >\n                        <img\n                            *polymorpheusOutlet=\"cartItem.specificationImgUrl as src\"\n                            alt=\"preview\"\n                            [src]=\"cartItem.specificationImgUrl\"\n                        />\n                        <button\n                            icon=\"tuiIconClose\"\n                            title=\"Close\"\n                            tuiIconButton\n                            tuiPreviewAction\n                            type=\"button\"\n                            (click)=\"preview.complete()\"\n                        ></button>\n                    </tui-preview>\n                </ng-template>\n            </div>\n            <div class=\"flex flex-col gap-1 self-start 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                        [ignoreStepValidators]=\"product.ignoreMinCountCheck\"\n                        (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n                        class=\"w-28\"\n                    ></sc-input-quantity>\n                    <button\n                        tuiIconButton\n                        icon=\"tuiIconTrash2\"\n                        shape=\"rounded\"\n                        size=\"xs\"\n                        (click)=\"clickDeleteEvent.emit()\"\n                    ></button>\n                </div>\n                <p class=\"text-sm font-bold text-tui-text-01\">\u0418\u0442\u043E\u0433\u043E: {{ cartItem.costRub | tuiFormatNumber }} {{ 'RUB' | tuiCurrency }}</p>\n            </div>\n        </div>\n    </div>\n</ng-container>\n\n<ng-template #skeleton>\n    <div class=\"flex w-full gap-2\">\n        <div class=\"size-20 rounded-xl bg-tui-base-02\"></div>\n        <div class=\"flex grow flex-col gap-2.5 bg-white\">\n            <div class=\"h-4 w-full rounded-xl bg-tui-base-02\"></div>\n            <div class=\"h-4 w-3/5 rounded-xl bg-tui-base-02\"></div>\n            <div class=\"h-4 w-4/5 rounded-xl bg-tui-base-02\"></div>\n        </div>\n    </div>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i1.ScUnitsHelper }, { type: i7$1.TuiPreviewDialogService, decorators: [{
                     type: Inject,
                     args: [TuiPreviewDialogService]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [SC_URLS]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [SC_PATH_IMAGE_NOT_FOUND]
                 }] }]; }, propDecorators: { cartItem: [{
                 type: Input
             }], specificationPreviewRef: [{
@@ -4933,14 +4933,10 @@ class ScOrderItemMobileComponent {
      *
      * @param unitsHelper Объект-хэлпер для работы со значениями единиц измерения товара.
      * @param previewDialogService Сервис диалогового окна предварительного просмотра.
-     * @param urls Список ссылок на разделы backend'a.
-     * @param pathImageNotFound Путь до изображения 'Товар не найден'.
      */
-    constructor(unitsHelper, previewDialogService, urls, pathImageNotFound) {
+    constructor(unitsHelper, previewDialogService) {
         this.unitsHelper = unitsHelper;
         this.previewDialogService = previewDialogService;
-        this.urls = urls;
-        this.pathImageNotFound = pathImageNotFound;
         /**
          * Событие нажатия на карточку.
          */
@@ -4949,6 +4945,10 @@ class ScOrderItemMobileComponent {
          * Событие нажатия на дополнительные действия.
          */
         this.clickActionsEvent = new EventEmitter();
+        /**
+         * Хелпер для работы с изображениями товара.
+         */
+        this.imageHelper = inject(ScImageHelper);
     }
     /**
      * Продукт элемента заказа.
@@ -4964,25 +4964,21 @@ class ScOrderItemMobileComponent {
     }
     /**
      * Возвращает ссылку на изображение карточки товара.
+     *
+     * @param product Позиция товара/услуги.
      */
-    getCardImage() {
-        return this.product?.getImage(this.urls.imgServerUrl) ?? this.urls.imgServerUrl + this.pathImageNotFound;
+    getCardImage(product) {
+        return this.imageHelper.getImage(product);
     }
 }
-ScOrderItemMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScOrderItemMobileComponent, deps: [{ token: i1.ScUnitsHelper }, { token: TuiPreviewDialogService }, { token: SC_URLS }, { token: SC_PATH_IMAGE_NOT_FOUND }], target: i0.ɵɵFactoryTarget.Component });
-ScOrderItemMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScOrderItemMobileComponent, selector: "sc-order-item-mobile", inputs: { orderItem: "orderItem" }, outputs: { clickCardEvent: "clickCardEvent", clickActionsEvent: "clickActionsEvent" }, viewQueries: [{ propertyName: "specificationPreviewRef", first: true, predicate: ["specificationPreview"], descendants: true }], ngImport: i0, template: "<div class=\"relative flex flex-wrap gap-x-4 gap-y-2 rounded-xl border border-tui-base-04 bg-white p-4 shadow-sc-2\">\n    <ng-container *ngIf=\"orderItem && product; else skeleton\">\n        <button\n            tuiIconButton\n            (click)=\"clickActionsEvent.emit()\"\n            size=\"m\"\n            icon=\"scIconVerticalThreeDots\"\n            appearance=\"float\"\n            class=\"!absolute right-0 top-0 !hidden\"\n        ></button>\n        <div class=\"flex grow gap-2\">\n            <div class=\"flex size-20 shrink-0 items-center justify-center overflow-hidden\">\n                <img\n                    (click)=\"clickCardEvent.emit()\"\n                    [src]=\"getCardImage()\"\n                    [alt]=\"product.name\"\n                    [class.p-5]=\"!product.images?.length\"\n                    class=\"cursor-pointer\"\n                />\n            </div>\n\n            <div class=\"flex grow flex-wrap gap-x-8 self-center\">\n                <div class=\"flex grow basis-min-content flex-col\">\n                    <a\n                        tuiLink\n                        (click)=\"clickCardEvent.emit()\"\n                    >\n                        <span class=\"font-bold\">{{ product.name }}</span>\n                    </a>\n                    <div class=\"flex flex-col gap-y-0.5 text-tui-text-02\">\n                        <div class=\"flex flex-wrap\">\n                            <p class=\"w-40\">\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                            <p\n                                class=\"w-40\"\n                                *ngIf=\"product.pack\"\n                            >\n                                \u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}\n                            </p>\n                        </div>\n                        <a\n                            tuiLink\n                            *ngIf=\"orderItem.specificationImgUrl\"\n                            (click)=\"showSpecification()\"\n                            >\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a\n                        >\n                        <ng-template\n                            #specificationPreview\n                            let-preview\n                        >\n                            <tui-preview\n                                [rotatable]=\"false\"\n                                [zoomable]=\"false\"\n                            >\n                                <img\n                                    *polymorpheusOutlet=\"orderItem.specificationImgUrl as src\"\n                                    alt=\"preview\"\n                                    [src]=\"orderItem.specificationImgUrl\"\n                                />\n                                <button\n                                    icon=\"tuiIconClose\"\n                                    title=\"Close\"\n                                    tuiIconButton\n                                    tuiPreviewAction\n                                    type=\"button\"\n                                    (click)=\"preview.complete()\"\n                                ></button>\n                            </tui-preview>\n                        </ng-template>\n                    </div>\n\n                    <div class=\"flex flex-wrap gap-y-0.5\">\n                        <span\n                            *ngIf=\"product.discount\"\n                            class=\"w-50 items-center gap-x-2 gap-y-0.5 text-xs text-tui-text-02\"\n                        >\n                            <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                            <span class=\"font-bold text-tui-success-fill\"> -{{ product.discount.percent }}% </span>\n                            <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=\"w-50 flex items-baseline gap-x-2 gap-y-0.5 font-bold\">\n                            <span>{{ product.costRubString }}</span>\n                            <span\n                                *ngIf=\"!product.priceInRub\"\n                                class=\"text-xs text-tui-text-02\"\n                                >{{ product.costString }}</span\n                            >\n                        </p>\n                    </div>\n                </div>\n                <div class=\"flex flex-wrap content-center\">\n                    <div class=\"w-50 flex flex-col gap-x-8 gap-y-0.5\">\n                        <ng-container *ngIf=\"orderItem.height; else length\">\n                            <p>\u0412\u044B\u0441\u043E\u0442\u0430: {{ orderItem.height }} \u043C.</p>\n                        </ng-container>\n                        <ng-template #length>\n                            <p *ngIf=\"orderItem.length\">\u0414\u043B\u0438\u043D\u0430: {{ orderItem.length }} \u043C.</p>\n                        </ng-template>\n                        <p *ngIf=\"orderItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ orderItem.width }} \u043C.</p>\n                        <p class=\"flex flex-col items-baseline gap-x-2\">\n                            <span class=\"whitespace-nowrap text-body-m-bold\">\n                                \u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E: <span class=\"whitespace-nowrap\">{{ orderItem.quantity }}</span>\n                            </span>\n                        </p>\n                    </div>\n\n                    <div class=\"w-50 flex flex-col gap-y-0.5\">\n                        <p class=\"whitespace-nowrap text-body-m-bold\">\n                            \u0421\u0443\u043C\u043C\u0430: <span class=\"whitespace-nowrap\"> {{ orderItem.getCostRubStr() }} </span>\n                        </p>\n                        <sc-price-warehouse-stock\n                            [product]=\"product\"\n                            [fromMain]=\"false\"\n                        ></sc-price-warehouse-stock>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-template #skeleton>\n        <div class=\"flex w-full gap-2\">\n            <div class=\"size-20 rounded-xl bg-tui-base-02\"></div>\n            <div class=\"flex grow flex-col gap-2.5 bg-white\">\n                <div class=\"h-4 w-full rounded-xl bg-tui-base-02\"></div>\n                <div class=\"h-4 w-3/5 rounded-xl bg-tui-base-02\"></div>\n                <div class=\"h-4 w-4/5 rounded-xl bg-tui-base-02\"></div>\n            </div>\n        </div>\n    </ng-template>\n</div>\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: i4.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i7$1.TuiPreviewComponent, selector: "tui-preview", inputs: ["zoomable", "rotatable"] }, { kind: "directive", type: i7$1.TuiPreviewActionDirective, selector: "[tuiPreviewAction]" }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint", "fromMain"] }, { kind: "directive", type: i2$1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ScOrderItemMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScOrderItemMobileComponent, deps: [{ token: i1.ScUnitsHelper }, { token: TuiPreviewDialogService }], target: i0.ɵɵFactoryTarget.Component });
+ScOrderItemMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScOrderItemMobileComponent, selector: "sc-order-item-mobile", inputs: { orderItem: "orderItem" }, outputs: { clickCardEvent: "clickCardEvent", clickActionsEvent: "clickActionsEvent" }, viewQueries: [{ propertyName: "specificationPreviewRef", first: true, predicate: ["specificationPreview"], descendants: true }], ngImport: i0, template: "<div class=\"relative flex flex-wrap gap-x-4 gap-y-2 rounded-xl border border-tui-base-04 bg-white p-4 shadow-sc-2\">\n    <ng-container *ngIf=\"orderItem && product; else skeleton\">\n        <button\n            tuiIconButton\n            (click)=\"clickActionsEvent.emit()\"\n            size=\"m\"\n            icon=\"scIconVerticalThreeDots\"\n            appearance=\"float\"\n            class=\"!absolute right-0 top-0 !hidden\"\n        ></button>\n        <div class=\"flex grow gap-2\">\n            <div class=\"flex size-20 shrink-0 items-center justify-center overflow-hidden\">\n                <img\n                    (click)=\"clickCardEvent.emit()\"\n                    [src]=\"getCardImage(product)\"\n                    [alt]=\"product.name\"\n                    [class.p-5]=\"!product.images?.length\"\n                    class=\"cursor-pointer\"\n                />\n            </div>\n\n            <div class=\"flex grow flex-wrap gap-x-8 self-center\">\n                <div class=\"flex grow basis-min-content flex-col\">\n                    <a\n                        tuiLink\n                        (click)=\"clickCardEvent.emit()\"\n                    >\n                        <span class=\"font-bold\">{{ product.name }}</span>\n                    </a>\n                    <div class=\"flex flex-col gap-y-0.5 text-tui-text-02\">\n                        <div class=\"flex flex-wrap\">\n                            <p class=\"w-40\">\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                            <p\n                                class=\"w-40\"\n                                *ngIf=\"product.pack\"\n                            >\n                                \u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}\n                            </p>\n                        </div>\n                        <a\n                            tuiLink\n                            *ngIf=\"orderItem.specificationImgUrl\"\n                            (click)=\"showSpecification()\"\n                            >\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a\n                        >\n                        <ng-template\n                            #specificationPreview\n                            let-preview\n                        >\n                            <tui-preview\n                                [rotatable]=\"false\"\n                                [zoomable]=\"false\"\n                            >\n                                <img\n                                    *polymorpheusOutlet=\"orderItem.specificationImgUrl as src\"\n                                    alt=\"preview\"\n                                    [src]=\"orderItem.specificationImgUrl\"\n                                />\n                                <button\n                                    icon=\"tuiIconClose\"\n                                    title=\"Close\"\n                                    tuiIconButton\n                                    tuiPreviewAction\n                                    type=\"button\"\n                                    (click)=\"preview.complete()\"\n                                ></button>\n                            </tui-preview>\n                        </ng-template>\n                    </div>\n\n                    <div class=\"flex flex-wrap gap-y-0.5\">\n                        <span\n                            *ngIf=\"product.discount\"\n                            class=\"w-50 items-center gap-x-2 gap-y-0.5 text-xs text-tui-text-02\"\n                        >\n                            <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                            <span class=\"font-bold text-tui-success-fill\"> -{{ product.discount.percent }}% </span>\n                            <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=\"w-50 flex items-baseline gap-x-2 gap-y-0.5 font-bold\">\n                            <span>{{ product.costRubString }}</span>\n                            <span\n                                *ngIf=\"!product.priceInRub\"\n                                class=\"text-xs text-tui-text-02\"\n                                >{{ product.costString }}</span\n                            >\n                        </p>\n                    </div>\n                </div>\n                <div class=\"flex flex-wrap content-center\">\n                    <div class=\"w-50 flex flex-col gap-x-8 gap-y-0.5\">\n                        <ng-container *ngIf=\"orderItem.height; else length\">\n                            <p>\u0412\u044B\u0441\u043E\u0442\u0430: {{ orderItem.height }} \u043C.</p>\n                        </ng-container>\n                        <ng-template #length>\n                            <p *ngIf=\"orderItem.length\">\u0414\u043B\u0438\u043D\u0430: {{ orderItem.length }} \u043C.</p>\n                        </ng-template>\n                        <p *ngIf=\"orderItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ orderItem.width }} \u043C.</p>\n                        <p class=\"flex flex-col items-baseline gap-x-2\">\n                            <span class=\"whitespace-nowrap text-body-m-bold\">\n                                \u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E: <span class=\"whitespace-nowrap\">{{ orderItem.quantity }}</span>\n                            </span>\n                        </p>\n                    </div>\n\n                    <div class=\"w-50 flex flex-col gap-y-0.5\">\n                        <p class=\"whitespace-nowrap text-body-m-bold\">\n                            \u0421\u0443\u043C\u043C\u0430: <span class=\"whitespace-nowrap\"> {{ orderItem.getCostRubStr() }} </span>\n                        </p>\n                        <sc-price-warehouse-stock\n                            [product]=\"product\"\n                            [fromMain]=\"false\"\n                        ></sc-price-warehouse-stock>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-template #skeleton>\n        <div class=\"flex w-full gap-2\">\n            <div class=\"size-20 rounded-xl bg-tui-base-02\"></div>\n            <div class=\"flex grow flex-col gap-2.5 bg-white\">\n                <div class=\"h-4 w-full rounded-xl bg-tui-base-02\"></div>\n                <div class=\"h-4 w-3/5 rounded-xl bg-tui-base-02\"></div>\n                <div class=\"h-4 w-4/5 rounded-xl bg-tui-base-02\"></div>\n            </div>\n        </div>\n    </ng-template>\n</div>\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: i4.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i7$1.TuiPreviewComponent, selector: "tui-preview", inputs: ["zoomable", "rotatable"] }, { kind: "directive", type: i7$1.TuiPreviewActionDirective, selector: "[tuiPreviewAction]" }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint", "fromMain"] }, { kind: "directive", type: i2$1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScOrderItemMobileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-order-item-mobile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative flex flex-wrap gap-x-4 gap-y-2 rounded-xl border border-tui-base-04 bg-white p-4 shadow-sc-2\">\n    <ng-container *ngIf=\"orderItem && product; else skeleton\">\n        <button\n            tuiIconButton\n            (click)=\"clickActionsEvent.emit()\"\n            size=\"m\"\n            icon=\"scIconVerticalThreeDots\"\n            appearance=\"float\"\n            class=\"!absolute right-0 top-0 !hidden\"\n        ></button>\n        <div class=\"flex grow gap-2\">\n            <div class=\"flex size-20 shrink-0 items-center justify-center overflow-hidden\">\n                <img\n                    (click)=\"clickCardEvent.emit()\"\n                    [src]=\"getCardImage()\"\n                    [alt]=\"product.name\"\n                    [class.p-5]=\"!product.images?.length\"\n                    class=\"cursor-pointer\"\n                />\n            </div>\n\n            <div class=\"flex grow flex-wrap gap-x-8 self-center\">\n                <div class=\"flex grow basis-min-content flex-col\">\n                    <a\n                        tuiLink\n                        (click)=\"clickCardEvent.emit()\"\n                    >\n                        <span class=\"font-bold\">{{ product.name }}</span>\n                    </a>\n                    <div class=\"flex flex-col gap-y-0.5 text-tui-text-02\">\n                        <div class=\"flex flex-wrap\">\n                            <p class=\"w-40\">\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                            <p\n                                class=\"w-40\"\n                                *ngIf=\"product.pack\"\n                            >\n                                \u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}\n                            </p>\n                        </div>\n                        <a\n                            tuiLink\n                            *ngIf=\"orderItem.specificationImgUrl\"\n                            (click)=\"showSpecification()\"\n                            >\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a\n                        >\n                        <ng-template\n                            #specificationPreview\n                            let-preview\n                        >\n                            <tui-preview\n                                [rotatable]=\"false\"\n                                [zoomable]=\"false\"\n                            >\n                                <img\n                                    *polymorpheusOutlet=\"orderItem.specificationImgUrl as src\"\n                                    alt=\"preview\"\n                                    [src]=\"orderItem.specificationImgUrl\"\n                                />\n                                <button\n                                    icon=\"tuiIconClose\"\n                                    title=\"Close\"\n                                    tuiIconButton\n                                    tuiPreviewAction\n                                    type=\"button\"\n                                    (click)=\"preview.complete()\"\n                                ></button>\n                            </tui-preview>\n                        </ng-template>\n                    </div>\n\n                    <div class=\"flex flex-wrap gap-y-0.5\">\n                        <span\n                            *ngIf=\"product.discount\"\n                            class=\"w-50 items-center gap-x-2 gap-y-0.5 text-xs text-tui-text-02\"\n                        >\n                            <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                            <span class=\"font-bold text-tui-success-fill\"> -{{ product.discount.percent }}% </span>\n                            <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=\"w-50 flex items-baseline gap-x-2 gap-y-0.5 font-bold\">\n                            <span>{{ product.costRubString }}</span>\n                            <span\n                                *ngIf=\"!product.priceInRub\"\n                                class=\"text-xs text-tui-text-02\"\n                                >{{ product.costString }}</span\n                            >\n                        </p>\n                    </div>\n                </div>\n                <div class=\"flex flex-wrap content-center\">\n                    <div class=\"w-50 flex flex-col gap-x-8 gap-y-0.5\">\n                        <ng-container *ngIf=\"orderItem.height; else length\">\n                            <p>\u0412\u044B\u0441\u043E\u0442\u0430: {{ orderItem.height }} \u043C.</p>\n                        </ng-container>\n                        <ng-template #length>\n                            <p *ngIf=\"orderItem.length\">\u0414\u043B\u0438\u043D\u0430: {{ orderItem.length }} \u043C.</p>\n                        </ng-template>\n                        <p *ngIf=\"orderItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ orderItem.width }} \u043C.</p>\n                        <p class=\"flex flex-col items-baseline gap-x-2\">\n                            <span class=\"whitespace-nowrap text-body-m-bold\">\n                                \u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E: <span class=\"whitespace-nowrap\">{{ orderItem.quantity }}</span>\n                            </span>\n                        </p>\n                    </div>\n\n                    <div class=\"w-50 flex flex-col gap-y-0.5\">\n                        <p class=\"whitespace-nowrap text-body-m-bold\">\n                            \u0421\u0443\u043C\u043C\u0430: <span class=\"whitespace-nowrap\"> {{ orderItem.getCostRubStr() }} </span>\n                        </p>\n                        <sc-price-warehouse-stock\n                            [product]=\"product\"\n                            [fromMain]=\"false\"\n                        ></sc-price-warehouse-stock>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-template #skeleton>\n        <div class=\"flex w-full gap-2\">\n            <div class=\"size-20 rounded-xl bg-tui-base-02\"></div>\n            <div class=\"flex grow flex-col gap-2.5 bg-white\">\n                <div class=\"h-4 w-full rounded-xl bg-tui-base-02\"></div>\n                <div class=\"h-4 w-3/5 rounded-xl bg-tui-base-02\"></div>\n                <div class=\"h-4 w-4/5 rounded-xl bg-tui-base-02\"></div>\n            </div>\n        </div>\n    </ng-template>\n</div>\n" }]
+            args: [{ selector: 'sc-order-item-mobile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative flex flex-wrap gap-x-4 gap-y-2 rounded-xl border border-tui-base-04 bg-white p-4 shadow-sc-2\">\n    <ng-container *ngIf=\"orderItem && product; else skeleton\">\n        <button\n            tuiIconButton\n            (click)=\"clickActionsEvent.emit()\"\n            size=\"m\"\n            icon=\"scIconVerticalThreeDots\"\n            appearance=\"float\"\n            class=\"!absolute right-0 top-0 !hidden\"\n        ></button>\n        <div class=\"flex grow gap-2\">\n            <div class=\"flex size-20 shrink-0 items-center justify-center overflow-hidden\">\n                <img\n                    (click)=\"clickCardEvent.emit()\"\n                    [src]=\"getCardImage(product)\"\n                    [alt]=\"product.name\"\n                    [class.p-5]=\"!product.images?.length\"\n                    class=\"cursor-pointer\"\n                />\n            </div>\n\n            <div class=\"flex grow flex-wrap gap-x-8 self-center\">\n                <div class=\"flex grow basis-min-content flex-col\">\n                    <a\n                        tuiLink\n                        (click)=\"clickCardEvent.emit()\"\n                    >\n                        <span class=\"font-bold\">{{ product.name }}</span>\n                    </a>\n                    <div class=\"flex flex-col gap-y-0.5 text-tui-text-02\">\n                        <div class=\"flex flex-wrap\">\n                            <p class=\"w-40\">\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                            <p\n                                class=\"w-40\"\n                                *ngIf=\"product.pack\"\n                            >\n                                \u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}\n                            </p>\n                        </div>\n                        <a\n                            tuiLink\n                            *ngIf=\"orderItem.specificationImgUrl\"\n                            (click)=\"showSpecification()\"\n                            >\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a\n                        >\n                        <ng-template\n                            #specificationPreview\n                            let-preview\n                        >\n                            <tui-preview\n                                [rotatable]=\"false\"\n                                [zoomable]=\"false\"\n                            >\n                                <img\n                                    *polymorpheusOutlet=\"orderItem.specificationImgUrl as src\"\n                                    alt=\"preview\"\n                                    [src]=\"orderItem.specificationImgUrl\"\n                                />\n                                <button\n                                    icon=\"tuiIconClose\"\n                                    title=\"Close\"\n                                    tuiIconButton\n                                    tuiPreviewAction\n                                    type=\"button\"\n                                    (click)=\"preview.complete()\"\n                                ></button>\n                            </tui-preview>\n                        </ng-template>\n                    </div>\n\n                    <div class=\"flex flex-wrap gap-y-0.5\">\n                        <span\n                            *ngIf=\"product.discount\"\n                            class=\"w-50 items-center gap-x-2 gap-y-0.5 text-xs text-tui-text-02\"\n                        >\n                            <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                            <span class=\"font-bold text-tui-success-fill\"> -{{ product.discount.percent }}% </span>\n                            <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=\"w-50 flex items-baseline gap-x-2 gap-y-0.5 font-bold\">\n                            <span>{{ product.costRubString }}</span>\n                            <span\n                                *ngIf=\"!product.priceInRub\"\n                                class=\"text-xs text-tui-text-02\"\n                                >{{ product.costString }}</span\n                            >\n                        </p>\n                    </div>\n                </div>\n                <div class=\"flex flex-wrap content-center\">\n                    <div class=\"w-50 flex flex-col gap-x-8 gap-y-0.5\">\n                        <ng-container *ngIf=\"orderItem.height; else length\">\n                            <p>\u0412\u044B\u0441\u043E\u0442\u0430: {{ orderItem.height }} \u043C.</p>\n                        </ng-container>\n                        <ng-template #length>\n                            <p *ngIf=\"orderItem.length\">\u0414\u043B\u0438\u043D\u0430: {{ orderItem.length }} \u043C.</p>\n                        </ng-template>\n                        <p *ngIf=\"orderItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ orderItem.width }} \u043C.</p>\n                        <p class=\"flex flex-col items-baseline gap-x-2\">\n                            <span class=\"whitespace-nowrap text-body-m-bold\">\n                                \u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E: <span class=\"whitespace-nowrap\">{{ orderItem.quantity }}</span>\n                            </span>\n                        </p>\n                    </div>\n\n                    <div class=\"w-50 flex flex-col gap-y-0.5\">\n                        <p class=\"whitespace-nowrap text-body-m-bold\">\n                            \u0421\u0443\u043C\u043C\u0430: <span class=\"whitespace-nowrap\"> {{ orderItem.getCostRubStr() }} </span>\n                        </p>\n                        <sc-price-warehouse-stock\n                            [product]=\"product\"\n                            [fromMain]=\"false\"\n                        ></sc-price-warehouse-stock>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-template #skeleton>\n        <div class=\"flex w-full gap-2\">\n            <div class=\"size-20 rounded-xl bg-tui-base-02\"></div>\n            <div class=\"flex grow flex-col gap-2.5 bg-white\">\n                <div class=\"h-4 w-full rounded-xl bg-tui-base-02\"></div>\n                <div class=\"h-4 w-3/5 rounded-xl bg-tui-base-02\"></div>\n                <div class=\"h-4 w-4/5 rounded-xl bg-tui-base-02\"></div>\n            </div>\n        </div>\n    </ng-template>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.ScUnitsHelper }, { type: i7$1.TuiPreviewDialogService, decorators: [{
                     type: Inject,
                     args: [TuiPreviewDialogService]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [SC_URLS]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [SC_PATH_IMAGE_NOT_FOUND]
                 }] }]; }, propDecorators: { specificationPreviewRef: [{
                 type: ViewChild,
                 args: ['specificationPreview']
@@ -5057,11 +5053,13 @@ let ScAskToSampleFormComponent = class ScAskToSampleFormComponent {
             .getUserChange$()
             .pipe(tap((user) => {
             if (user.isGuest) {
+                this.form.addControl('recaptcha', this.recaptchaControl);
                 this.form.controls.email.reset();
                 this.form.controls.name.reset();
                 this.form.controls.phone.reset();
             }
             else {
+                this.form.removeControl('recaptcha');
                 this.form.patchValue({
                     name: user.name,
                     phone: user.contacts.phone.value,
@@ -5069,9 +5067,16 @@ let ScAskToSampleFormComponent = class ScAskToSampleFormComponent {
                 });
             }
         }), untilDestroyed(this));
+        /**
+         * Контекст диалогового окна, в котором открыт компонент.
+         */
         this.context = inject(POLYMORPHEUS_CONTEXT, {
             optional: true,
         });
+        /**
+         * Поле ввода для recaptcha.
+         */
+        this.recaptchaControl = new FormControl(null, Validators.required);
         /**
          * Группа полей ввода для формы «Пожелания и предложения по улучшению сайта».
          */
@@ -5080,6 +5085,7 @@ let ScAskToSampleFormComponent = class ScAskToSampleFormComponent {
             phone: new FormControl(null, [Validators.required, Validators.minLength(12)]),
             email: new FormControl(null, [Validators.required, Validators.email]),
             description: new FormControl('Неизвестная форма', [Validators.required, Validators.minLength(3)]),
+            recaptcha: new FormControl(null, Validators.required),
         });
         /**
          * Перечисление типов подсказок.
@@ -5143,13 +5149,13 @@ let ScAskToSampleFormComponent = class ScAskToSampleFormComponent {
     }
 };
 ScAskToSampleFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScAskToSampleFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ScAskToSampleFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScAskToSampleFormComponent, selector: "sc-ask-to-sample-form", inputs: { formName: "formName" }, ngImport: i0, template: "<form\n    *tuiLet=\"user$ | async\"\n    [formGroup]=\"form\"\n    (ngSubmit)=\"onSubmit.next()\"\n    class=\"flex flex-col justify-between gap-4\"\n>\n    <label tuiLabel=\"\u0424\u0418\u041E\">\n        <tui-input formControlName=\"name\"> \u0418\u0432\u0430\u043D\u043E\u0432 \u0418\u0432\u0430\u043D \u0418\u0432\u0430\u043D\u043E\u0432\u0438\u0447 </tui-input>\n        <tui-error\n            formControlName=\"name\"\n            [error]=\"[] | tuiFieldError | async\"\n        ></tui-error>\n    </label>\n    <label tuiLabel=\"\u0422\u0435\u043B\u0435\u0444\u043E\u043D\">\n        <tui-input-phone formControlName=\"phone\"> \u0422\u0435\u043B\u0435\u0444\u043E\u043D </tui-input-phone>\n        <tui-error\n            formControlName=\"phone\"\n            [error]=\"[] | tuiFieldError | async\"\n        ></tui-error>\n    </label>\n    <label\n        tuiLabel=\"\u0410\u0434\u0440\u0435\u0441 \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u044B\"\n        class=\"w-full\"\n    >\n        <tui-input formControlName=\"email\">\n            \u0410\u0434\u0440\u0435\u0441 \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u044B\n            <sc-suggestion-field\n                *tuiDataList\n                [type]=\"suggestionType.email\"\n            ></sc-suggestion-field>\n        </tui-input>\n        <tui-error\n            formControlName=\"email\"\n            [error]=\"[] | tuiFieldError | async\"\n        ></tui-error>\n    </label>\n    <button\n        tuiButton\n        [disabled]=\"form.invalid\"\n        [showLoader]=\"!!(loading$ | async)\"\n        type=\"submit\"\n        icon=\"scIconSend\"\n        class=\"self-center\"\n    >\n        \u041E\u0441\u0442\u0430\u0432\u0438\u0442\u044C\n    </button>\n</form>\n", dependencies: [{ kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.TuiErrorComponent, selector: "tui-error", inputs: ["error"] }, { kind: "component", type: ScSuggestionFieldComponent, selector: "sc-suggestion-field", inputs: ["type"], outputs: ["selectedClick"] }, { kind: "component", type: i4$1.TuiInputComponent, selector: "tui-input" }, { kind: "directive", type: i4$1.TuiInputDirective, selector: "tui-input" }, { kind: "component", type: i4$1.TuiInputPhoneComponent, selector: "tui-input-phone", inputs: ["countryCode", "phoneMaskAfterCountryCode", "allowText", "search"], outputs: ["searchChange"] }, { kind: "directive", type: i4$1.TuiInputPhoneDirective, selector: "tui-input-phone" }, { kind: "directive", type: i6.TuiLetDirective, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "component", type: i4.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i4.TuiLabelComponent, selector: "label[tuiLabel]", inputs: ["tuiLabel", "context"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.TuiFieldErrorPipe, name: "tuiFieldError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ScAskToSampleFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScAskToSampleFormComponent, selector: "sc-ask-to-sample-form", inputs: { formName: "formName" }, ngImport: i0, template: "<form\n    *tuiLet=\"user$ | async\"\n    [formGroup]=\"form\"\n    (ngSubmit)=\"onSubmit.next()\"\n    class=\"flex flex-col justify-between gap-4\"\n>\n    <label tuiLabel=\"\u0424\u0418\u041E\">\n        <tui-input formControlName=\"name\"> \u0418\u0432\u0430\u043D\u043E\u0432 \u0418\u0432\u0430\u043D \u0418\u0432\u0430\u043D\u043E\u0432\u0438\u0447 </tui-input>\n        <tui-error\n            formControlName=\"name\"\n            [error]=\"[] | tuiFieldError | async\"\n        ></tui-error>\n    </label>\n    <label tuiLabel=\"\u0422\u0435\u043B\u0435\u0444\u043E\u043D\">\n        <tui-input-phone formControlName=\"phone\"> \u0422\u0435\u043B\u0435\u0444\u043E\u043D </tui-input-phone>\n        <tui-error\n            formControlName=\"phone\"\n            [error]=\"[] | tuiFieldError | async\"\n        ></tui-error>\n    </label>\n    <label\n        tuiLabel=\"\u0410\u0434\u0440\u0435\u0441 \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u044B\"\n        class=\"w-full\"\n    >\n        <tui-input formControlName=\"email\">\n            \u0410\u0434\u0440\u0435\u0441 \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u044B\n            <sc-suggestion-field\n                *tuiDataList\n                [type]=\"suggestionType.email\"\n            ></sc-suggestion-field>\n        </tui-input>\n        <tui-error\n            formControlName=\"email\"\n            [error]=\"[] | tuiFieldError | async\"\n        ></tui-error>\n    </label>\n    <div\n        *ngIf=\"form.get('recaptcha')\"\n        class=\"mb-3 max-h-20 overflow-hidden duration-500\"\n        [ngClass]=\"{ '!max-h-0 !-m-2': form.get('recaptcha')?.valid }\"\n    >\n        <re-captcha formControlName=\"recaptcha\"></re-captcha>\n    </div>\n    <button\n        tuiButton\n        [disabled]=\"form.invalid\"\n        [showLoader]=\"!!(loading$ | async)\"\n        type=\"submit\"\n        icon=\"scIconSend\"\n        class=\"self-center\"\n    >\n        \u041E\u0441\u0442\u0430\u0432\u0438\u0442\u044C\n    </button>\n</form>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.TuiErrorComponent, selector: "tui-error", inputs: ["error"] }, { kind: "component", type: ScSuggestionFieldComponent, selector: "sc-suggestion-field", inputs: ["type"], outputs: ["selectedClick"] }, { kind: "component", type: i4$1.TuiInputComponent, selector: "tui-input" }, { kind: "directive", type: i4$1.TuiInputDirective, selector: "tui-input" }, { kind: "component", type: i4$1.TuiInputPhoneComponent, selector: "tui-input-phone", inputs: ["countryCode", "phoneMaskAfterCountryCode", "allowText", "search"], outputs: ["searchChange"] }, { kind: "directive", type: i4$1.TuiInputPhoneDirective, selector: "tui-input-phone" }, { kind: "directive", type: i6.TuiLetDirective, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "component", type: i4.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i4.TuiLabelComponent, selector: "label[tuiLabel]", inputs: ["tuiLabel", "context"] }, { kind: "component", type: i7$3.RecaptchaComponent, selector: "re-captcha", inputs: ["id", "siteKey", "theme", "type", "size", "tabIndex", "badge", "errorMode"], outputs: ["resolved", "error"], exportAs: ["reCaptcha"] }, { kind: "directive", type: i7$3.RecaptchaValueAccessorDirective, selector: "re-captcha[formControlName],re-captcha[formControl],re-captcha[ngModel]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.TuiFieldErrorPipe, name: "tuiFieldError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 ScAskToSampleFormComponent = __decorate([
     UntilDestroy({ checkProperties: true })
 ], ScAskToSampleFormComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScAskToSampleFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-ask-to-sample-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form\n    *tuiLet=\"user$ | async\"\n    [formGroup]=\"form\"\n    (ngSubmit)=\"onSubmit.next()\"\n    class=\"flex flex-col justify-between gap-4\"\n>\n    <label tuiLabel=\"\u0424\u0418\u041E\">\n        <tui-input formControlName=\"name\"> \u0418\u0432\u0430\u043D\u043E\u0432 \u0418\u0432\u0430\u043D \u0418\u0432\u0430\u043D\u043E\u0432\u0438\u0447 </tui-input>\n        <tui-error\n            formControlName=\"name\"\n            [error]=\"[] | tuiFieldError | async\"\n        ></tui-error>\n    </label>\n    <label tuiLabel=\"\u0422\u0435\u043B\u0435\u0444\u043E\u043D\">\n        <tui-input-phone formControlName=\"phone\"> \u0422\u0435\u043B\u0435\u0444\u043E\u043D </tui-input-phone>\n        <tui-error\n            formControlName=\"phone\"\n            [error]=\"[] | tuiFieldError | async\"\n        ></tui-error>\n    </label>\n    <label\n        tuiLabel=\"\u0410\u0434\u0440\u0435\u0441 \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u044B\"\n        class=\"w-full\"\n    >\n        <tui-input formControlName=\"email\">\n            \u0410\u0434\u0440\u0435\u0441 \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u044B\n            <sc-suggestion-field\n                *tuiDataList\n                [type]=\"suggestionType.email\"\n            ></sc-suggestion-field>\n        </tui-input>\n        <tui-error\n            formControlName=\"email\"\n            [error]=\"[] | tuiFieldError | async\"\n        ></tui-error>\n    </label>\n    <button\n        tuiButton\n        [disabled]=\"form.invalid\"\n        [showLoader]=\"!!(loading$ | async)\"\n        type=\"submit\"\n        icon=\"scIconSend\"\n        class=\"self-center\"\n    >\n        \u041E\u0441\u0442\u0430\u0432\u0438\u0442\u044C\n    </button>\n</form>\n" }]
+            args: [{ selector: 'sc-ask-to-sample-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form\n    *tuiLet=\"user$ | async\"\n    [formGroup]=\"form\"\n    (ngSubmit)=\"onSubmit.next()\"\n    class=\"flex flex-col justify-between gap-4\"\n>\n    <label tuiLabel=\"\u0424\u0418\u041E\">\n        <tui-input formControlName=\"name\"> \u0418\u0432\u0430\u043D\u043E\u0432 \u0418\u0432\u0430\u043D \u0418\u0432\u0430\u043D\u043E\u0432\u0438\u0447 </tui-input>\n        <tui-error\n            formControlName=\"name\"\n            [error]=\"[] | tuiFieldError | async\"\n        ></tui-error>\n    </label>\n    <label tuiLabel=\"\u0422\u0435\u043B\u0435\u0444\u043E\u043D\">\n        <tui-input-phone formControlName=\"phone\"> \u0422\u0435\u043B\u0435\u0444\u043E\u043D </tui-input-phone>\n        <tui-error\n            formControlName=\"phone\"\n            [error]=\"[] | tuiFieldError | async\"\n        ></tui-error>\n    </label>\n    <label\n        tuiLabel=\"\u0410\u0434\u0440\u0435\u0441 \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u044B\"\n        class=\"w-full\"\n    >\n        <tui-input formControlName=\"email\">\n            \u0410\u0434\u0440\u0435\u0441 \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u044B\n            <sc-suggestion-field\n                *tuiDataList\n                [type]=\"suggestionType.email\"\n            ></sc-suggestion-field>\n        </tui-input>\n        <tui-error\n            formControlName=\"email\"\n            [error]=\"[] | tuiFieldError | async\"\n        ></tui-error>\n    </label>\n    <div\n        *ngIf=\"form.get('recaptcha')\"\n        class=\"mb-3 max-h-20 overflow-hidden duration-500\"\n        [ngClass]=\"{ '!max-h-0 !-m-2': form.get('recaptcha')?.valid }\"\n    >\n        <re-captcha formControlName=\"recaptcha\"></re-captcha>\n    </div>\n    <button\n        tuiButton\n        [disabled]=\"form.invalid\"\n        [showLoader]=\"!!(loading$ | async)\"\n        type=\"submit\"\n        icon=\"scIconSend\"\n        class=\"self-center\"\n    >\n        \u041E\u0441\u0442\u0430\u0432\u0438\u0442\u044C\n    </button>\n</form>\n" }]
         }], propDecorators: { formName: [{
                 type: Input
             }] } });
@@ -5246,7 +5252,9 @@ ScPreviewSampleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
         TuiHoveredModule,
         TuiLetModule,
         TuiButtonModule,
-        TuiLabelModule], exports: [ScPreviewSampleComponent, ScAskToSampleFormComponent] });
+        TuiLabelModule,
+        RecaptchaModule,
+        RecaptchaFormsModule], exports: [ScPreviewSampleComponent, ScAskToSampleFormComponent] });
 ScPreviewSampleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPreviewSampleModule, imports: [CommonModule,
         ReactiveFormsModule,
         TuiErrorModule,
@@ -5259,7 +5267,9 @@ ScPreviewSampleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", v
         TuiHoveredModule,
         TuiLetModule,
         TuiButtonModule,
-        TuiLabelModule] });
+        TuiLabelModule,
+        RecaptchaModule,
+        RecaptchaFormsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPreviewSampleModule, decorators: [{
             type: NgModule,
             args: [{
@@ -5278,6 +5288,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         TuiLetModule,
                         TuiButtonModule,
                         TuiLabelModule,
+                        RecaptchaModule,
+                        RecaptchaFormsModule,
                     ],
                     exports: [ScPreviewSampleComponent, ScAskToSampleFormComponent],
                 }]