@snabcentr/client-ui 0.0.0-test

package/fesm2020/snabcentr-client-ui.mjs

@@ -0,0 +1,1901 @@
+import { __decorate } from 'tslib';
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, ElementRef, Component, ChangeDetectionStrategy, Inject, Input, Output, ContentChildren, ViewChild, HostBinding, HostListener, NgModule, ChangeDetectorRef, Optional, Self, Directive, forwardRef } from '@angular/core';
+import { Subject, map, tap, shareReplay, filter, switchMap, interval, takeUntil, skip } from 'rxjs';
+import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
+import * as i8 from '@ng-web-apis/intersection-observer';
+import { IntersectionObserverService, IntersectionObserverModule } from '@ng-web-apis/intersection-observer';
+import * as i3$1 from '@taiga-ui/core';
+import { tuiFadeIn, TuiButtonModule, TuiModeModule, TuiLoaderModule, tuiFormatNumber, TuiSvgModule, TuiLabelModule, TuiTextfieldControllerModule, TuiHintModule, TuiLinkModule } from '@taiga-ui/core';
+import * as i1 from '@snabcentr/client-core';
+import { SC_URLS, SC_PATH_IMAGE_NOT_FOUND, ScIconTypesEnum } from '@snabcentr/client-core';
+import * as i3 from '@angular/common';
+import { CommonModule, formatDate } from '@angular/common';
+import * as i5 from '@angular/material/core';
+import { MatRippleModule } from '@angular/material/core';
+import * as i3$2 from '@taiga-ui/kit';
+import { TuiCarouselModule, TUI_NUMBER_VALUE_TRANSFORMER, TuiInputNumberComponent, TuiIslandModule, TuiInputNumberModule, TuiFieldErrorPipeModule, TuiElasticContainerModule, TuiTreeService, TuiTreeItemContentComponent, TUI_TREE_START, TUI_TREE_CONTENT, TUI_TREE_LOADING, TUI_TREE_LOADER, TuiTreeModule } from '@taiga-ui/kit';
+import * as i7 from '@taiga-ui/cdk';
+import { TuiLetModule, tuiCreateToken, AbstractTuiNullableControl } from '@taiga-ui/cdk';
+import { RouterModule } from '@angular/router';
+import * as i4 from '@angular/forms';
+import { NgControl, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i7$1 from '@taiga-ui/addon-preview';
+import { TuiPreviewDialogService, TuiPreviewModule } from '@taiga-ui/addon-preview';
+import * as i8$1 from '@tinkoff/ng-polymorpheus';
+import { PolymorpheusModule, PolymorpheusComponent } from '@tinkoff/ng-polymorpheus';
+import * as i2 from 'ngx-echarts';
+import { NgxEchartsModule } from 'ngx-echarts';
+import * as echarts from 'echarts/core';
+import { LineChart } from 'echarts/charts';
+import { TitleComponent, TooltipComponent, GridComponent } from 'echarts/components';
+import { SVGRenderer } from 'echarts/renderers';
+
+/**
+ * Класс-помощник для конвертации пикселей.
+ */
+class ScPxConverter {
+    constructor() {
+        this.rootFontSize = 16;
+    }
+    /**
+     * Конвертирует пиксели в rem.
+     *
+     * @param px Значение которое необходимо конвертировать.
+     */
+    pxToRem(px) {
+        return px / this.rootFontSize;
+    }
+}
+ScPxConverter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPxConverter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ScPxConverter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPxConverter, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPxConverter, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Баннер с прокруткой переданных {@link TemplateRef} элементов, и баннеров локации.
+ */
+let ScBannerComponent = class ScBannerComponent {
+    /**
+     * Инициализирует экземпляр класса {@link ScBannerComponent}.
+     *
+     * @param cdr Объект для работы с обнаружением изменений.
+     * @param bannerService Сервис для работы с баннерами.
+     * @param pxConverter Класс хэлпер для конвертации пикселей.
+     */
+    constructor(cdr, bannerService, entries$, element, pxConverter) {
+        this.cdr = cdr;
+        this.bannerService = bannerService;
+        this.entries$ = entries$;
+        this.element = element;
+        this.pxConverter = pxConverter;
+        /**
+         * Признак, что необходимо показывать кнопки навигации.
+         */
+        this.navigateButton = true;
+        /**
+         * Интервал показа слайдов в миллисекундах.
+         */
+        this.playerInterval = 5000;
+        /**
+         * Признак, что прокрутка выключена.
+         */
+        this.disabled = false;
+        /**
+         * Признак, что компонент должен растягиваться.
+         */
+        this.resizable = true;
+        /**
+         * Событие загрузки баннеров с количеством полученных баннеров.
+         */
+        this.loadBannersEvent = new EventEmitter();
+        /**
+         * Событие нажатия на изображение баннера.
+         */
+        this.clickBannerEvent = new EventEmitter();
+        /**
+         * Идентификатор текущего баннера.
+         */
+        this.currentBannerId = 0;
+        /**
+         * {@link Subject} изменения состояния таймера.
+         */
+        this.toggleTimer$ = new Subject();
+        /**
+         * Признак, что необходимо показывать кнопки старта видео баннера.
+         */
+        this.showPlayBtn = false;
+        /**
+         * {@link Observable} Обновления списка баннеров.
+         */
+        this.banners$ = this.bannerService.banners$.pipe(map((banners) => banners.filter((banner) => banner.location === this.bannerLocation).reverse()), tap((banners) => {
+            if (banners.length) {
+                if (this.resizable) {
+                    this.width = `100%`;
+                }
+                else {
+                    this.height = `${this.pxConverter.pxToRem(banners[0].height)}rem`;
+                    this.width = `${this.pxConverter.pxToRem(banners[0].width)}rem`;
+                }
+                this.aspectRatio = `${banners[0].width} / ${banners[0].height}`;
+                this.banners = banners;
+                this.toggleTimer$.next(true);
+            }
+            this.loadBannersEvent.emit(banners.length);
+        }), shareReplay(1));
+        /**
+         * Список баннеров.
+         */
+        this.banners = [];
+        /**
+         * Свойство, от которого зависит высота `:host` компонента.
+         */
+        this.height = 'auto';
+        /**
+         * Свойство, от которого зависит ширина `:host` компонента.
+         */
+        this.width = '';
+        /**
+         * Свойство, от которого зависит соотношение `:host` компонента.
+         */
+        this.aspectRatio = '';
+        /**
+         * Обработчик события mouseenter.
+         *
+         * @private
+         */
+        this.mouseEnterHandler = () => this.toggleTimer$.next(false);
+        /**
+         * Обработчик события mouseleave.
+         *
+         * @private
+         */
+        this.mouseLeaveHandler = () => this.toggleTimer$.next(true);
+    }
+    /**
+     * Свойство, от которого зависит наличие класса `!hidden` у `:host` компонента.
+     */
+    get isHidden() {
+        return !this.banners || this.bannersListRef.length + this.banners.length === 0;
+    }
+    /** @inheritDoc */
+    ngAfterViewInit() {
+        this.toggleTimer$
+            .pipe(filter((toggle) => toggle), switchMap(() => interval(this.playerInterval).pipe(takeUntil(this.toggleTimer$))), filter(() => !this.disabled && (this.banners?.[this.currentBannerId]?.mediaType === 'image' || this.showPlayBtn)), untilDestroyed(this))
+            .subscribe(() => this.onNextBanner());
+        // Отслеживание пересечения компонента с экраном пользователя.
+        // Если баннера не находится в поле видимости пользователя, то он перестаёт переключатся, а видео останавливается.
+        this.entries$.pipe(map((entries) => entries.find((item) => item.target === this.element.nativeElement))).subscribe((entry) => {
+            this.toggleTimer$.next(!!entry?.isIntersecting);
+        });
+    }
+    /**
+     * Переключает на предыдущий баннер.
+     */
+    onPreviousBanner() {
+        const previous = this.currentBannerId - 1;
+        this.currentBannerId = previous < 0 ? this.bannersListRef.length + (this.banners?.length ?? 0) - 1 : previous;
+        this.cdr.markForCheck();
+    }
+    /**
+     * Переключает на следующий баннер.
+     */
+    onNextBanner() {
+        const next = this.currentBannerId + 1;
+        this.currentBannerId = next === this.bannersListRef.length + (this.banners?.length ?? 0) ? 0 : next;
+        this.cdr.markForCheck();
+    }
+    /**
+     * Переключает на следующий баннер.
+     */
+    onEndedVideo() {
+        this.onNextBanner();
+        this.toggleTimer$.next(true);
+        this.showPlayBtn = true;
+    }
+    /**
+     * Обработчик нажатия на баннер, генерирующий событие {@link clickBannerImgEvent}.
+     *
+     * @param banner Баннер, по ссылке которого совершён переход.
+     */
+    onClick(banner) {
+        if (banner.url) {
+            this.clickBannerEvent.emit(banner);
+        }
+    }
+};
+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 }], 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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "directive", type: i5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i3$2.TuiCarouselComponent, selector: "tui-carousel", inputs: ["draggable", "itemsCount", "index"], outputs: ["indexChange"] }, { kind: "directive", type: i3$2.TuiCarouselDirective, selector: "tui-carousel", inputs: ["duration", "index"] }, { kind: "directive", type: i7.TuiItemDirective, selector: "[tuiItem]" }, { kind: "directive", type: i3$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { kind: "directive", type: i7.TuiLetDirective, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "pipe", type: i3.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"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.ScBannerService }, { type: i8.IntersectionObserverService, decorators: [{
+                    type: Inject,
+                    args: [IntersectionObserverService]
+                }] }, { type: i0.ElementRef, decorators: [{
+                    type: Inject,
+                    args: [ElementRef]
+                }] }, { type: ScPxConverter }]; }, propDecorators: { navigateButton: [{
+                type: Input
+            }], playerInterval: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], bannerLocation: [{
+                type: Input
+            }], resizable: [{
+                type: Input
+            }], loadBannersEvent: [{
+                type: Output
+            }], clickBannerEvent: [{
+                type: Output
+            }], bannersListRef: [{
+                type: ContentChildren,
+                args: ['banner']
+            }], videoRef: [{
+                type: ViewChild,
+                args: ['videoPlayer']
+            }], isHidden: [{
+                type: HostBinding,
+                args: ['class.!hidden']
+            }], height: [{
+                type: HostBinding,
+                args: ['style.height']
+            }], width: [{
+                type: HostBinding,
+                args: ['style.width']
+            }], aspectRatio: [{
+                type: HostBinding,
+                args: ['style.aspect-ratio']
+            }], mouseEnterHandler: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], mouseLeaveHandler: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
+/**
+ * Модуль баннеров.
+ */
+class ScBannerModule {
+}
+ScBannerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScBannerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ScBannerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: ScBannerModule, declarations: [ScBannerComponent], imports: [CommonModule, RouterModule, TuiButtonModule, MatRippleModule, TuiCarouselModule, TuiModeModule, TuiLoaderModule, IntersectionObserverModule, TuiLetModule], exports: [ScBannerComponent] });
+ScBannerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScBannerModule, imports: [CommonModule, RouterModule, TuiButtonModule, MatRippleModule, TuiCarouselModule, TuiModeModule, TuiLoaderModule, IntersectionObserverModule, TuiLetModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScBannerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ScBannerComponent],
+                    imports: [CommonModule, RouterModule, TuiButtonModule, MatRippleModule, TuiCarouselModule, TuiModeModule, TuiLoaderModule, IntersectionObserverModule, TuiLetModule],
+                    exports: [ScBannerComponent],
+                }]
+        }] });
+
+/**
+ * Единицы измерения линейной величины по умолчанию.
+ */
+const SC_LINEAR_VALUES = ['пог.м.', 'м.'];
+/**
+ * Токен единиц измерения линейной величины по умолчанию.
+ */
+const SC_LINEAR_VALUES_TOKEN = tuiCreateToken(SC_LINEAR_VALUES);
+
+/**
+ * Класс хэлпер для работы со значениями единиц измерения товара.
+ */
+class UnitsHelper {
+    /**
+     * Инициирует экземпляр класса {@link UnitsHelper}.
+     *
+     * @param linearValues Единицы измерения линейной величины.
+     */
+    constructor(linearValues) {
+        this.linearValues = linearValues;
+    }
+    /**
+     * Возвращает признак возможности продажи товара на метраж.
+     *
+     * @param linearValues Товар для которого нужно проверить возможность продажи на метраж.
+     */
+    productIsMeasurable(product) {
+        return this.linearValues.includes(product.unit);
+    }
+    /**
+     * Возвращает кратность количества для товара.
+     *
+     * @param linearValues Товар для которого нужно вернуть кратность количества.
+     */
+    productMultiplicity(product) {
+        return product && product.minCount && !this.linearValues.includes(product.unit) ? product.minCount : 1;
+    }
+}
+UnitsHelper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UnitsHelper, deps: [{ token: SC_LINEAR_VALUES_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable });
+UnitsHelper.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UnitsHelper, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UnitsHelper, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SC_LINEAR_VALUES_TOKEN]
+                }] }]; } });
+
+/**
+ * Проверяет кратность значения.
+ *
+ * @param step Шаг кратности.
+ */
+function stepValidator(step) {
+    return (control) => {
+        // Умножение на 1000 нужно для уменьшения вероятности погрешности при выполнении вычислений над десятичными числами.
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        return control.value && (Number.parseFloat(control.value) * 1000) % (step * 1000) ? { error: `Число не кратно ${step}` } : null;
+    };
+}
+
+class ScInputQuantityComponent extends AbstractTuiNullableControl {
+    /**
+     * Инициализирует экземпляр класса {@link ScInputQuantityComponent}.
+     *
+     * @param ngControl Объект поля ввода для настройки валидации.
+     * @param cdr Объект для работы с обнаружением изменений.
+     * @param transformer Преобразователь значений элемента формы.
+     */
+    constructor(ngControl, cdr, transformer) {
+        super(ngControl, cdr, transformer);
+        /**
+         * Шаг увеличения количества. Отвечает за проверку кратности ввода.
+         */
+        this.step = 1;
+        /**
+         * Признак, что необходимо отобразить {@link TuiLoaderComponent} над компонентом.
+         */
+        this.showLoader = false;
+        /**
+         * Признак, что необходимо отобразить кнопку очистки поля ввода.
+         */
+        this.showCross = true;
+        /**
+         * Формат внешнего вида компонента.
+         */
+        this.appearance = 'primary';
+        /**
+         * Признак, что компонент деактивирован.
+         */
+        this.isDisabled = false;
+        /**
+         * Размер компонента.
+         */
+        this.size = 'm';
+        /**
+         * Событие нажатия на кнопку "Очистить".
+         */
+        this.clickClearEvent = new EventEmitter();
+    }
+    get focused() {
+        return !!this.numberInput?.focused;
+    }
+    get formControl() {
+        return this.control;
+    }
+    /** @inheritDoc */
+    ngOnInit() {
+        if (this.control) {
+            this.control.setValidators(stepValidator(this.step));
+        }
+    }
+    /**
+     * Обработчик события нажатия стрелок клавиатуры.
+     *
+     * @param step Шаг изменения количества.
+     */
+    onArrow(step) {
+        if (!step) {
+            return;
+        }
+        if (step > 0) {
+            this.incident();
+        }
+        else {
+            this.decrement();
+        }
+    }
+    /**
+     * Увеличивает значение в поле ввода на 1 шаг. Если число в поле ввода не кратно шагу, то увеличит до ближайшего кратного значения.
+     */
+    incident() {
+        this.numberInput.onArrow(this.step - ((this.numberInput.value || 0) % this.step));
+    }
+    /**
+     * Уменьшает значение в поле ввода на 1 шаг. Если число в поле ввода не кратно шагу, то уменьшит до ближайшего кратного значения.
+     */
+    decrement() {
+        this.numberInput.onArrow(-((this.numberInput.value || 0) % this.step) || -this.step);
+    }
+    /**
+     * Очищает поля ввода.
+     */
+    clear() {
+        this.control?.patchValue(null);
+        this.clickClearEvent.emit();
+    }
+}
+ScInputQuantityComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScInputQuantityComponent, deps: [{ token: NgControl, optional: true, self: true }, { token: ChangeDetectorRef }, { token: TUI_NUMBER_VALUE_TRANSFORMER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+ScInputQuantityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: { step: "step", quantityUnit: "quantityUnit", showLoader: "showLoader", showCross: "showCross", appearance: "appearance", isDisabled: "isDisabled", size: "size" }, outputs: { clickClearEvent: "clickClearEvent" }, host: { listeners: { "keydown.arrowDown": "onArrow(-step)", "keydown.arrowUp": "onArrow(step)" }, properties: { "attr.data-appearance": "this.appearance", "attr.data-disabled": "this.isDisabled", "attr.data-size": "this.size" } }, viewQueries: [{ propertyName: "numberInput", first: true, predicate: TuiInputNumberComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<tui-loader *ngIf=\"formControl\" class=\"w-full\" [overlay]=\"true\" [showLoader]=\"showLoader\" [size]=\"size\">\n    <div class=\"flex items-center text-center gap-1\">\n        <div class=\"field-with-button flex grow rounded-xl\">\n            <button\n                tuiIconButton\n                tuiMode=\"onLight\"\n                [appearance]=\"appearance\"\n                [disabled]=\"!numberInput.canDecrement\"\n                [focusable]=\"false\"\n                [size]=\"size\"\n                (click.prevent)=\"decrement()\"\n                (mousedown.prevent)=\"numberInput.nativeFocusableElement?.focus()\"\n            >\n                <tui-svg src=\"scIconMinus\"></tui-svg>\n            </button>\n            <tui-input-number\n                #numberInput\n                [formControl]=\"formControl\"\n                [tuiHint]=\"([] | tuiFieldError | async )?.message\"\n                [tuiTextfieldPostfix]=\"quantityUnit || ''\"\n                [tuiTextfieldLabelOutside]=\"true\"\n                [min]=\"step\"\n                [tuiTextfieldSize]=\"size\"\n                [required]=\"true\"\n                [style.text-align]=\"'center'\"\n                [style.font-weight]=\"700\"\n                class=\"grow\"\n            >\n            </tui-input-number>\n            <button\n                tuiIconButton\n                tuiMode=\"onLight\"\n                [appearance]=\"appearance\"\n                [size]=\"size\"\n                [disabled]=\"!numberInput.canIncrement\"\n                [focusable]=\"false\"\n                (click.prevent)=\"incident()\"\n                (mousedown.prevent)=\"numberInput.nativeFocusableElement?.focus()\"\n            >\n                <tui-svg src=\"scIconPlus\"></tui-svg>\n            </button>\n        </div>\n        <button\n            *ngIf=\"showCross\"\n            tuiIconButton\n            tuiMode=\"onLight\"\n            [appearance]=\"appearance\"\n            [size]=\"size\"\n            [disabled]=\"!numberInput.canIncrement\"\n            [focusable]=\"false\"\n            (click.prevent)=\"clear()\"\n            (mousedown.prevent)=\"numberInput.nativeFocusableElement?.focus()\"\n        >\n            <tui-svg src=\"scIconCross\"></tui-svg>\n        </button>\n    </div>\n</tui-loader>\n", styles: [":host [data-size=l]{--tui-height-l: var(--tui-height-m);--tui-font-text-m: bold .875rem/1.25rem var(--tui-font-text);--tui-padding-l: 0}:host [data-size=m]{--tui-height-m: var(--tui-height-s);--tui-font-text-s: bold .75rem/1rem var(--tui-font-text);--tui-padding-m: 0}:host [data-size=m] tui-svg{font-size:12px!important}:host [data-size=s]{--tui-height-s: var(--tui-height-xs);--tui-font-text-s: bold .75rem/1rem var(--tui-font-text);--tui-padding-s: 0}:host [data-size=s] tui-svg{font-size:12px!important}:host[data-disabled=true]{pointer-events:none;opacity:var(--tui-disabled-opacity)}:host[data-appearance=secondary] .field-with-button{background-color:var(--tui-base-01);box-shadow:inset 0 0 0 .0625rem var(--tui-base-03)}:host[data-appearance=primary] .field-with-button{background-color:var(--tui-warning-bg)}:host .field-with-button:has(._invalid){background-color:var(--tui-error-bg)}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "component", type: i3$2.TuiInputNumberComponent, selector: "tui-input-number", inputs: ["min", "max", "decimal", "precision", "step", "prefix", "postfix"] }, { kind: "directive", type: i3$2.TuiInputNumberDirective, selector: "tui-input-number" }, { kind: "directive", type: i3$1.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i3$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { kind: "directive", type: i3$1.TuiTextfieldPostfixDirective, selector: "[tuiTextfieldPostfix]", inputs: ["tuiTextfieldPostfix"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i3$1.TuiHintDriverDirective, selector: "[tuiHint]" }, { kind: "directive", type: i3$1.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i3$1.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { kind: "directive", type: i3$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { kind: "component", type: i3$1.TuiLoaderComponent, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$2.TuiFieldErrorPipe, name: "tuiFieldError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScInputQuantityComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-input-quantity', changeDetection: ChangeDetectionStrategy.OnPush, template: "<tui-loader *ngIf=\"formControl\" class=\"w-full\" [overlay]=\"true\" [showLoader]=\"showLoader\" [size]=\"size\">\n    <div class=\"flex items-center text-center gap-1\">\n        <div class=\"field-with-button flex grow rounded-xl\">\n            <button\n                tuiIconButton\n                tuiMode=\"onLight\"\n                [appearance]=\"appearance\"\n                [disabled]=\"!numberInput.canDecrement\"\n                [focusable]=\"false\"\n                [size]=\"size\"\n                (click.prevent)=\"decrement()\"\n                (mousedown.prevent)=\"numberInput.nativeFocusableElement?.focus()\"\n            >\n                <tui-svg src=\"scIconMinus\"></tui-svg>\n            </button>\n            <tui-input-number\n                #numberInput\n                [formControl]=\"formControl\"\n                [tuiHint]=\"([] | tuiFieldError | async )?.message\"\n                [tuiTextfieldPostfix]=\"quantityUnit || ''\"\n                [tuiTextfieldLabelOutside]=\"true\"\n                [min]=\"step\"\n                [tuiTextfieldSize]=\"size\"\n                [required]=\"true\"\n                [style.text-align]=\"'center'\"\n                [style.font-weight]=\"700\"\n                class=\"grow\"\n            >\n            </tui-input-number>\n            <button\n                tuiIconButton\n                tuiMode=\"onLight\"\n                [appearance]=\"appearance\"\n                [size]=\"size\"\n                [disabled]=\"!numberInput.canIncrement\"\n                [focusable]=\"false\"\n                (click.prevent)=\"incident()\"\n                (mousedown.prevent)=\"numberInput.nativeFocusableElement?.focus()\"\n            >\n                <tui-svg src=\"scIconPlus\"></tui-svg>\n            </button>\n        </div>\n        <button\n            *ngIf=\"showCross\"\n            tuiIconButton\n            tuiMode=\"onLight\"\n            [appearance]=\"appearance\"\n            [size]=\"size\"\n            [disabled]=\"!numberInput.canIncrement\"\n            [focusable]=\"false\"\n            (click.prevent)=\"clear()\"\n            (mousedown.prevent)=\"numberInput.nativeFocusableElement?.focus()\"\n        >\n            <tui-svg src=\"scIconCross\"></tui-svg>\n        </button>\n    </div>\n</tui-loader>\n", styles: [":host [data-size=l]{--tui-height-l: var(--tui-height-m);--tui-font-text-m: bold .875rem/1.25rem var(--tui-font-text);--tui-padding-l: 0}:host [data-size=m]{--tui-height-m: var(--tui-height-s);--tui-font-text-s: bold .75rem/1rem var(--tui-font-text);--tui-padding-m: 0}:host [data-size=m] tui-svg{font-size:12px!important}:host [data-size=s]{--tui-height-s: var(--tui-height-xs);--tui-font-text-s: bold .75rem/1rem var(--tui-font-text);--tui-padding-s: 0}:host [data-size=s] tui-svg{font-size:12px!important}:host[data-disabled=true]{pointer-events:none;opacity:var(--tui-disabled-opacity)}:host[data-appearance=secondary] .field-with-button{background-color:var(--tui-base-01);box-shadow:inset 0 0 0 .0625rem var(--tui-base-03)}:host[data-appearance=primary] .field-with-button{background-color:var(--tui-warning-bg)}:host .field-with-button:has(._invalid){background-color:var(--tui-error-bg)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i4.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }, {
+                    type: Inject,
+                    args: [NgControl]
+                }] }, { type: i0.ChangeDetectorRef, decorators: [{
+                    type: Inject,
+                    args: [ChangeDetectorRef]
+                }] }, { type: i7.AbstractTuiValueTransformer, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [TUI_NUMBER_VALUE_TRANSFORMER]
+                }] }]; }, propDecorators: { numberInput: [{
+                type: ViewChild,
+                args: [TuiInputNumberComponent]
+            }], step: [{
+                type: Input
+            }], quantityUnit: [{
+                type: Input
+            }], showLoader: [{
+                type: Input
+            }], showCross: [{
+                type: Input
+            }], appearance: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.data-appearance']
+            }], isDisabled: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.data-disabled']
+            }], size: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.data-size']
+            }], clickClearEvent: [{
+                type: Output
+            }], onArrow: [{
+                type: HostListener,
+                args: ['keydown.arrowDown', ['-step']]
+            }, {
+                type: HostListener,
+                args: ['keydown.arrowUp', ['step']]
+            }] } });
+
+/**
+ * Компонент информации о наличии товара на складе.
+ */
+class ScPriceWarehouseStockComponent {
+    /**
+     * Инициализирует экземпляр класса {@link ScPriceWarehouseStockComponent}.
+     *
+     * @param warehouseService Сервис для работы со складами.
+     */
+    constructor(warehouseService) {
+        this.warehouseService = warehouseService;
+        /**
+         * Признак, что необходимо отобразить подсказку по складам.
+         */
+        this.withStockHint = true;
+        /**
+         * {@link Observable} изменения выбранного склада.
+         */
+        this.warehouseSelect$ = this.warehouseService.getWarehouseSelectChange$();
+        /**
+         * {@link Observable} изменения списка складов.
+         */
+        this.stockByWarehouses$ = this.warehouseSelect$.pipe(switchMap((warehouseSelect) => this.warehouseService.getWarehouses$().pipe(map((warehouses) => this.product.warehouseStockCount?.map((stock) => [warehouses.find((warehouse) => warehouse.id === stock.id), stock])), map((stockByWarehouses) => stockByWarehouses?.sort((stock) => (stock[0]?.id === warehouseSelect?.id ? -1 : 1))))));
+    }
+}
+ScPriceWarehouseStockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceWarehouseStockComponent, deps: [{ token: i1.ScWarehouseService }], target: i0.ɵɵFactoryTarget.Component });
+ScPriceWarehouseStockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: { classList: "classList", product: "product", withStockHint: "withStockHint" }, ngImport: i0, template: "<ng-container *ngIf=\"product\">\n    <ng-container>\n        <div *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"flex items-center gap-1\">\n            <span *ngIf=\"product.getNotStockMessage(warehouseSelect) as message\" class=\"text-xs min-w-2/5 text-tui-error-fill\" [ngClass]=\"classList\"> {{ message }} </span>\n            <span *ngIf=\"product.isWarehouseStockExist(warehouseSelect.id)\" class=\"text-xs min-w-2/5 text-tui-success-fill\" [ngClass]=\"classList\">\n                \u0412 \u043D\u0430\u043B\u0438\u0447\u0438\u0438<ng-container *ngIf=\"product.getWarehouseStockCount(warehouseSelect.id) as count\"\n                    >:\n                    <span class=\"whitespace-nowrap\">{{ count }} {{ product.quantityUnit }}</span>\n                </ng-container>\n            </span>\n            <span *ngIf=\"product.onOrder\" class=\"text-xs min-w-2/5 text-sc-yellow\" [ngClass]=\"classList\">\u041F\u043E\u0434 \u0437\u0430\u043A\u0430\u0437</span>\n\n            <tui-svg\n                *ngIf=\"withStockHint && (stockByWarehouses$ | async)?.length\"\n                src=\"tuiIconInfoLarge\"\n                [tuiHint]=\"stockHint\"\n                [tuiHintShowDelay]=\"100\"\n                tuiHintDirection=\"top\"\n                class=\"!text-xs !h-3\"\n            ></tui-svg>\n        </div>\n    </ng-container>\n</ng-container>\n\n<ng-template #stockHint>\n    <table *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"text-xs table-auto\" [ngClass]=\"classList\">\n        <tbody>\n            <tr *ngFor=\"let item of stockByWarehouses$ | async\" class=\"border-b\" [class.text-tui-primary]=\"warehouseSelect === item[0]\">\n                <ng-container>\n                    <td class=\"px-1\">{{ item[0]?.name }}:</td>\n                    <td class=\"px-1\">{{ item[1].count ? item[1].count + ' ' + product.quantityUnit : '\u0412 \u043D\u0430\u043B\u0438\u0447\u0438\u0438' }}</td>\n                </ng-container>\n            </tr>\n        </tbody>\n    </table>\n</ng-template>\n", styles: ["[tuiIconButton]{--tui-radius-m: .75rem;--tui-height-xs: 1.25rem}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i3$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i3$1.TuiHintDriverDirective, selector: "[tuiHint]" }, { kind: "directive", type: i3$1.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i3$1.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceWarehouseStockComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-price-warehouse-stock', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"product\">\n    <ng-container>\n        <div *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"flex items-center gap-1\">\n            <span *ngIf=\"product.getNotStockMessage(warehouseSelect) as message\" class=\"text-xs min-w-2/5 text-tui-error-fill\" [ngClass]=\"classList\"> {{ message }} </span>\n            <span *ngIf=\"product.isWarehouseStockExist(warehouseSelect.id)\" class=\"text-xs min-w-2/5 text-tui-success-fill\" [ngClass]=\"classList\">\n                \u0412 \u043D\u0430\u043B\u0438\u0447\u0438\u0438<ng-container *ngIf=\"product.getWarehouseStockCount(warehouseSelect.id) as count\"\n                    >:\n                    <span class=\"whitespace-nowrap\">{{ count }} {{ product.quantityUnit }}</span>\n                </ng-container>\n            </span>\n            <span *ngIf=\"product.onOrder\" class=\"text-xs min-w-2/5 text-sc-yellow\" [ngClass]=\"classList\">\u041F\u043E\u0434 \u0437\u0430\u043A\u0430\u0437</span>\n\n            <tui-svg\n                *ngIf=\"withStockHint && (stockByWarehouses$ | async)?.length\"\n                src=\"tuiIconInfoLarge\"\n                [tuiHint]=\"stockHint\"\n                [tuiHintShowDelay]=\"100\"\n                tuiHintDirection=\"top\"\n                class=\"!text-xs !h-3\"\n            ></tui-svg>\n        </div>\n    </ng-container>\n</ng-container>\n\n<ng-template #stockHint>\n    <table *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"text-xs table-auto\" [ngClass]=\"classList\">\n        <tbody>\n            <tr *ngFor=\"let item of stockByWarehouses$ | async\" class=\"border-b\" [class.text-tui-primary]=\"warehouseSelect === item[0]\">\n                <ng-container>\n                    <td class=\"px-1\">{{ item[0]?.name }}:</td>\n                    <td class=\"px-1\">{{ item[1].count ? item[1].count + ' ' + product.quantityUnit : '\u0412 \u043D\u0430\u043B\u0438\u0447\u0438\u0438' }}</td>\n                </ng-container>\n            </tr>\n        </tbody>\n    </table>\n</ng-template>\n", styles: ["[tuiIconButton]{--tui-radius-m: .75rem;--tui-height-xs: 1.25rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.ScWarehouseService }]; }, propDecorators: { classList: [{
+                type: Input
+            }], product: [{
+                type: Input
+            }], withStockHint: [{
+                type: Input
+            }] } });
+
+/**
+ * Компонент карточки элемента корзины.
+ */
+class ScCartItemMobileComponent {
+    /**
+     * Инициирует экземпляр класса {@link ScCartItemMobileComponent}.
+     *
+     * @param unitsHelper Объект-хэлпер для работы со значениями единиц измерения товара.
+     * @param previewDialogService Сервис диалогового окна предварительного просмотра.
+     * @param urls Список ссылок на разделы backend'a.
+     * @param pathImageNotFound Путь до изображения 'Товар не найден'.
+     */
+    constructor(unitsHelper, previewDialogService, urls, pathImageNotFound) {
+        this.unitsHelper = unitsHelper;
+        this.previewDialogService = previewDialogService;
+        this.urls = urls;
+        this.pathImageNotFound = pathImageNotFound;
+        /**
+         * {@link FormControl} поля ввода количества товара в корзине.
+         */
+        this.quantityControl = new FormControl(0);
+        /**
+         * {@link Observable} изменения количества товара в корзине.
+         */
+        this.quantityValueChanges = this.quantityControl.valueChanges.pipe(skip(1));
+        /**
+         * Событие нажатия на кнопку "Удалить из корзины".
+         */
+        this.clickDeleteEvent = new EventEmitter();
+        /**
+         * Событие нажатия на кнопку "Удалить из корзины".
+         */
+        this.clickSettingsEvent = new EventEmitter();
+        /**
+         * Событие нажатия на карточку.
+         */
+        this.clickCardEvent = new EventEmitter();
+    }
+    /**
+     * Элемент корзины.
+     */
+    set cartItem(data) {
+        this._cartItem = data;
+        if (data) {
+            this.quantityControl.patchValue(data.quantity);
+        }
+    }
+    /**
+     * Элемент корзины.
+     */
+    get cartItem() {
+        return this._cartItem;
+    }
+    /**
+     * Продукт элемента корзины.
+     */
+    get product() {
+        return this.cartItem?.product;
+    }
+    /** @inheritDoc */
+    ngOnInit() {
+        this.quantityValueChanges = this.quantityControl.valueChanges;
+    }
+    /**
+     * Отобразить спецификацию.
+     */
+    showSpecification() {
+        this.previewDialogService.open(this.specificationPreviewRef || '').subscribe();
+    }
+    /**
+     * Возвращает ссылку на изображение карточки товара.
+     */
+    getCardImage() {
+        return this.product?.getImage(this.urls.imgServerUrl) ?? this.urls.imgServerUrl + this.pathImageNotFound;
+    }
+}
+ScCartItemMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCartItemMobileComponent, deps: [{ token: UnitsHelper }, { token: TuiPreviewDialogService }, { token: SC_URLS }, { token: SC_PATH_IMAGE_NOT_FOUND }], target: i0.ɵɵFactoryTarget.Component });
+ScCartItemMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScCartItemMobileComponent, selector: "sc-cart-item-mobile", inputs: { cartItem: "cartItem" }, outputs: { quantityValueChanges: "quantityValueChanges", clickDeleteEvent: "clickDeleteEvent", clickSettingsEvent: "clickSettingsEvent", clickCardEvent: "clickCardEvent" }, viewQueries: [{ propertyName: "specificationPreviewRef", first: true, predicate: ["specificationPreview"], descendants: true }], ngImport: i0, template: "<div class=\"ml-2 mt-2 relative p-4 gap-y-2 gap-x-4 flex flex-wrap bg-white border border-tui-base-04 shadow-sc-2 rounded-xl\">\n    <ng-container *ngIf=\"cartItem && product; else skeleton\">\n        <!--\n        TODO: \u041D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u0430 \u0440\u0435\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u044F \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B\u0430.\n        <button tuiIconButton size=\"m\" icon=\"scIconVerticalThreeDots\" appearance=\"float\" tuiMode=\"onLight\" class=\"!absolute right-0 top-0\"></button>\n        -->\n        <button\n            tuiIconButton\n            size=\"m\"\n            icon=\"scIconBasket\"\n            appearance=\"secondary\"\n            tuiMode=\"onLight\"\n            (click)=\"clickDeleteEvent.emit()\"\n            class=\"shadow-sc-2 !absolute -left-2 -top-2\"\n        ></button>\n        <div class=\"flex gap-2\">\n            <div class=\"flex shrink-0 h-20 w-20 justify-center items-center overflow-hidden\">\n                <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" [class.p-5]=\"!product.images?.length\" class=\"cursor-pointer\" />\n            </div>\n\n            <div class=\"flex flex-wrap self-center gap-x-8 gap-y-0.5\">\n                <div class=\"w-[13rem]\">\n                    <a tuiLink (click)=\"clickCardEvent.emit()\">\n                        <span class=\"font-bold\">{{ product.name }}</span>\n                    </a>\n                    <div class=\"text-tui-text-02 text-xs\">\n                        <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                        <p *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n                        <a tuiLink *ngIf=\"cartItem.specificationImgUrl\" (click)=\"showSpecification()\">\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a>\n                        <ng-template #specificationPreview let-preview>\n                            <tui-preview [rotatable]=\"false\" [zoomable]=\"false\">\n                                <img *polymorpheusOutlet=\"cartItem.specificationImgUrl as src\" alt=\"preview\" [src]=\"cartItem.specificationImgUrl\" />\n                                <button icon=\"tuiIconClose\" title=\"Close\" tuiIconButton tuiPreviewAction type=\"button\" (click)=\"preview.complete()\"></button>\n                            </tui-preview>\n                        </ng-template>\n                    </div>\n                </div>\n                <div class=\"flex flex-col self-center w-[10rem] gap-x-8 gap-y-0.5\">\n                    <span *ngIf=\"product.discount\" class=\"flex items-center text-xs text-tui-text-02\">\n                        <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                        <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n                        <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-xs !h-4\"></tui-svg>\n                        <ng-template #discountHint>\n                            <div class=\"font-bold\">{{ product.discount.name }}</div>\n                            <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n                        </ng-template>\n                    </span>\n                    <p class=\"flex flex-col items-baseline gap-x-2 font-bold\">\n                        <span>{{ product.costRubString }}</span>\n                        <span *ngIf=\"!product.priceInRub\" class=\"text-xs text-tui-text-02\">{{ product.costString }}</span>\n                    </p>\n                    <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"flex gap-2 items-center w-44 text-xs text-tui-text-02\">\n            <!--\n            TODO: \u041D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u0430 \u0440\u0435\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u044F \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B\u0430.\n            <button tuiIconButton (click)=\"clickSettingsEvent.emit()\" size=\"m\" icon=\"scIconSettings\" appearance=\"secondary\" tuiMode=\"onLight\"></button>\n            -->\n            <div>\n                <ng-container *ngIf=\"unitsHelper.productIsMeasurable(product); else notMeasurable\">\n                    <p>\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} {{ product.unit }}</p>\n                </ng-container>\n                <ng-template #notMeasurable>\n                    <p *ngIf=\"cartItem.length && !unitsHelper.productIsMeasurable(product)\">\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} \u043C.</p>\n                    <p *ngIf=\"cartItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ cartItem.width }} \u043C.</p>\n                    <p *ngIf=\"cartItem.height\">\u0412\u044B\u0441\u043E\u0442\u0430: {{ cartItem.height }} \u043C.</p>\n                </ng-template>\n            </div>\n        </div>\n        <div class=\"flex items-center grow justify-end\">\n            <sc-input-quantity\n                class=\"w-28\"\n                *ngIf=\"quantityControl\"\n                [formControl]=\"quantityControl\"\n                [quantityUnit]=\"product.quantityUnit\"\n                [showCross]=\"false\"\n                size=\"s\"\n                [step]=\"unitsHelper.productMultiplicity(product)\"\n            ></sc-input-quantity>\n        </div>\n    </ng-container>\n\n    <ng-template #skeleton>\n        <div class=\"flex gap-2 w-full\">\n            <div class=\"h-20 w-20 bg-tui-base-02 rounded-xl \"></div>\n            <div class=\"flex flex-col grow gap-2.5 bg-white\">\n                <div class=\"w-full h-4 rounded-xl bg-tui-base-02\"></div>\n                <div class=\"w-3/5 h-4 rounded-xl bg-tui-base-02\"></div>\n                <div class=\"w-4/5 h-4 rounded-xl bg-tui-base-02\"></div>\n            </div>\n        </div>\n    </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: ["step", "quantityUnit", "showLoader", "showCross", "appearance", "isDisabled", "size"], outputs: ["clickClearEvent"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint"] }, { kind: "component", type: i3$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "directive", type: i3$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { kind: "component", type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i3$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i3$1.TuiHintDriverDirective, selector: "[tuiHint]" }, { kind: "directive", type: i3$1.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i3$1.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i7$1.TuiPreviewComponent, selector: "tui-preview", inputs: ["zoomable", "rotatable"] }, { kind: "directive", type: i7$1.TuiPreviewActionDirective, selector: "[tuiPreviewAction]" }, { kind: "directive", type: i8$1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCartItemMobileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-cart-item-mobile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ml-2 mt-2 relative p-4 gap-y-2 gap-x-4 flex flex-wrap bg-white border border-tui-base-04 shadow-sc-2 rounded-xl\">\n    <ng-container *ngIf=\"cartItem && product; else skeleton\">\n        <!--\n        TODO: \u041D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u0430 \u0440\u0435\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u044F \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B\u0430.\n        <button tuiIconButton size=\"m\" icon=\"scIconVerticalThreeDots\" appearance=\"float\" tuiMode=\"onLight\" class=\"!absolute right-0 top-0\"></button>\n        -->\n        <button\n            tuiIconButton\n            size=\"m\"\n            icon=\"scIconBasket\"\n            appearance=\"secondary\"\n            tuiMode=\"onLight\"\n            (click)=\"clickDeleteEvent.emit()\"\n            class=\"shadow-sc-2 !absolute -left-2 -top-2\"\n        ></button>\n        <div class=\"flex gap-2\">\n            <div class=\"flex shrink-0 h-20 w-20 justify-center items-center overflow-hidden\">\n                <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" [class.p-5]=\"!product.images?.length\" class=\"cursor-pointer\" />\n            </div>\n\n            <div class=\"flex flex-wrap self-center gap-x-8 gap-y-0.5\">\n                <div class=\"w-[13rem]\">\n                    <a tuiLink (click)=\"clickCardEvent.emit()\">\n                        <span class=\"font-bold\">{{ product.name }}</span>\n                    </a>\n                    <div class=\"text-tui-text-02 text-xs\">\n                        <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                        <p *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n                        <a tuiLink *ngIf=\"cartItem.specificationImgUrl\" (click)=\"showSpecification()\">\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a>\n                        <ng-template #specificationPreview let-preview>\n                            <tui-preview [rotatable]=\"false\" [zoomable]=\"false\">\n                                <img *polymorpheusOutlet=\"cartItem.specificationImgUrl as src\" alt=\"preview\" [src]=\"cartItem.specificationImgUrl\" />\n                                <button icon=\"tuiIconClose\" title=\"Close\" tuiIconButton tuiPreviewAction type=\"button\" (click)=\"preview.complete()\"></button>\n                            </tui-preview>\n                        </ng-template>\n                    </div>\n                </div>\n                <div class=\"flex flex-col self-center w-[10rem] gap-x-8 gap-y-0.5\">\n                    <span *ngIf=\"product.discount\" class=\"flex items-center text-xs text-tui-text-02\">\n                        <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                        <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n                        <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-xs !h-4\"></tui-svg>\n                        <ng-template #discountHint>\n                            <div class=\"font-bold\">{{ product.discount.name }}</div>\n                            <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n                        </ng-template>\n                    </span>\n                    <p class=\"flex flex-col items-baseline gap-x-2 font-bold\">\n                        <span>{{ product.costRubString }}</span>\n                        <span *ngIf=\"!product.priceInRub\" class=\"text-xs text-tui-text-02\">{{ product.costString }}</span>\n                    </p>\n                    <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"flex gap-2 items-center w-44 text-xs text-tui-text-02\">\n            <!--\n            TODO: \u041D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u0430 \u0440\u0435\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u044F \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B\u0430.\n            <button tuiIconButton (click)=\"clickSettingsEvent.emit()\" size=\"m\" icon=\"scIconSettings\" appearance=\"secondary\" tuiMode=\"onLight\"></button>\n            -->\n            <div>\n                <ng-container *ngIf=\"unitsHelper.productIsMeasurable(product); else notMeasurable\">\n                    <p>\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} {{ product.unit }}</p>\n                </ng-container>\n                <ng-template #notMeasurable>\n                    <p *ngIf=\"cartItem.length && !unitsHelper.productIsMeasurable(product)\">\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} \u043C.</p>\n                    <p *ngIf=\"cartItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ cartItem.width }} \u043C.</p>\n                    <p *ngIf=\"cartItem.height\">\u0412\u044B\u0441\u043E\u0442\u0430: {{ cartItem.height }} \u043C.</p>\n                </ng-template>\n            </div>\n        </div>\n        <div class=\"flex items-center grow justify-end\">\n            <sc-input-quantity\n                class=\"w-28\"\n                *ngIf=\"quantityControl\"\n                [formControl]=\"quantityControl\"\n                [quantityUnit]=\"product.quantityUnit\"\n                [showCross]=\"false\"\n                size=\"s\"\n                [step]=\"unitsHelper.productMultiplicity(product)\"\n            ></sc-input-quantity>\n        </div>\n    </ng-container>\n\n    <ng-template #skeleton>\n        <div class=\"flex gap-2 w-full\">\n            <div class=\"h-20 w-20 bg-tui-base-02 rounded-xl \"></div>\n            <div class=\"flex flex-col grow gap-2.5 bg-white\">\n                <div class=\"w-full h-4 rounded-xl bg-tui-base-02\"></div>\n                <div class=\"w-3/5 h-4 rounded-xl bg-tui-base-02\"></div>\n                <div class=\"w-4/5 h-4 rounded-xl bg-tui-base-02\"></div>\n            </div>\n        </div>\n    </ng-template>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: UnitsHelper }, { 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']
+            }], cartItem: [{
+                type: Input
+            }], quantityValueChanges: [{
+                type: Output
+            }], clickDeleteEvent: [{
+                type: Output
+            }], clickSettingsEvent: [{
+                type: Output
+            }], clickCardEvent: [{
+                type: Output
+            }] } });
+
+// TODO: TASK[#6771]: Реализовать кнопку избранных товаров.
+/**
+ * Компонент кнопки избранных товаров и категорий.
+ */
+class ScFavoriteBtnComponent {
+    constructor() {
+        /**
+         * Событие нажатия на кнопку.
+         */
+        this.clickEvent = new EventEmitter();
+    }
+}
+ScFavoriteBtnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScFavoriteBtnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ScFavoriteBtnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScFavoriteBtnComponent, selector: "sc-favorite-btn", outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<button tuiIconButton (click)=\"clickEvent.emit()\" appearance=\"flat\" size=\"s\">\n    <tui-svg class=\"text-tui-primary\" src=\"tuiIconBookmarkLarge\"></tui-svg>\n</button>\n", dependencies: [{ kind: "component", type: i3$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScFavoriteBtnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-favorite-btn', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button tuiIconButton (click)=\"clickEvent.emit()\" appearance=\"flat\" size=\"s\">\n    <tui-svg class=\"text-tui-primary\" src=\"tuiIconBookmarkLarge\"></tui-svg>\n</button>\n" }]
+        }], propDecorators: { clickEvent: [{
+                type: Output
+            }] } });
+
+/**
+ * Карточка категории.
+ */
+class ScCategoryCardComponent {
+    /**
+     * Инициализирует экземпляр класса {@link CategoryCardComponent}.
+     *
+     * @param urls Список ссылок на разделы backend'a.
+     * @param renderer Экземпляр базового класса для реализации пользовательского рендеринга.
+     * @param pathImageNotFound Путь до изображения 'Товар не найден'.
+     */
+    constructor(urls, renderer, pathImageNotFound) {
+        this.urls = urls;
+        this.renderer = renderer;
+        this.pathImageNotFound = pathImageNotFound;
+        /**
+         * Размер карточки категории.
+         */
+        this.size = 'm';
+        /**
+         * Признак, что карточка является скелетоном.
+         */
+        this.isSkeleton = false;
+        /**
+         * Признак необходимости отобразить/скрыть кнопку избранной категории.
+         */
+        this.showFavoriteBtn = true;
+        /**
+         * Признак что категория имеет поведение наведения и скрытия названия.
+         */
+        this.isHovered = false;
+        /**
+         * Событие нажатия на карточку категории.
+         */
+        this.clickOnCardEvent = new EventEmitter();
+        /**
+         * Событие нажатия на кнопку избранной категории.
+         */
+        this.clickOnFavoriteEvent = new EventEmitter();
+    }
+    /**
+     * Возвращает путь к изображению категории. Если путь отсутствует, то вернёт изображение по-умолчанию ("product_not_found").
+     *
+     * @param category Информация о категории.
+     */
+    getCategoryImgURL(category) {
+        return category.properties?.image ? this.urls.imgServerUrl + '/' + category.properties?.image : this.pathImageNotFound;
+    }
+    /**
+     * Обработчик события mousemove.
+     */
+    moveEnterHandler() {
+        if (this.isHovered) {
+            this.name.nativeElement.style.maxHeight = `${this.name.nativeElement.scrollHeight / 16}rem`;
+        }
+    }
+    /**
+     * Обработчик события mouseleave.
+     */
+    mouseLeaveHandler() {
+        if (this.isHovered) {
+            this.renderer.setStyle(this.name.nativeElement, 'maxHeight', null);
+        }
+    }
+}
+ScCategoryCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCategoryCardComponent, deps: [{ token: SC_URLS }, { token: i0.Renderer2 }, { token: SC_PATH_IMAGE_NOT_FOUND }], target: i0.ɵɵFactoryTarget.Component });
+ScCategoryCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScCategoryCardComponent, selector: "sc-category-card", inputs: { category: "category", size: "size", isSkeleton: "isSkeleton", showFavoriteBtn: "showFavoriteBtn", isHovered: "isHovered" }, outputs: { clickOnCardEvent: "clickOnCardEvent", clickOnFavoriteEvent: "clickOnFavoriteEvent" }, host: { listeners: { "mousemove": "moveEnterHandler()", "mouseleave": "mouseLeaveHandler()" }, properties: { "attr.data-size": "this.size" } }, viewQueries: [{ propertyName: "name", first: true, predicate: ["name"], descendants: true }], ngImport: i0, template: "<div class=\"relative group\">\n    <button\n        (click)=\"clickOnCardEvent.emit(category)\"\n        [class.pointer-events-none]=\"!category || isSkeleton\"\n        class=\"category-btn flex flex-col relative rounded-tui-radius-m overflow-hidden shadow-sc-2\"\n    >\n        <div class=\"img-wrapper w-full grow bg-tui-base-02 overflow-hidden\">\n            <img *ngIf=\"category && !isSkeleton\" [src]=\"getCategoryImgURL(category)\" [alt]=\"category.name\" class=\"w-full\" />\n        </div>\n        <div #name [attr.data-is-hovered]=\"!isHovered\" class=\"name grid items-center justify-center font-bold bg-white w-full overflow-hidden shrink-0 duration-300\">\n            <span *ngIf=\"category && !isSkeleton; else skeletonName\">{{ category.name }}</span>\n            <ng-template #skeletonName>\n                <div class=\"skeleton-name bg-tui-base-02 rounded-tui-radius-s\"></div>\n            </ng-template>\n        </div>\n    </button>\n    <sc-favorite-btn *ngIf=\"category && !isSkeleton && showFavoriteBtn\" (clickEvent)=\"clickOnFavoriteEvent.emit()\" class=\"absolute left-1 top-1\"></sc-favorite-btn>\n</div>\n", styles: [":host[data-size=m] button.category-btn{width:100%;height:12.5rem}:host[data-size=m] button.category-btn .img-wrapper{max-height:8.75rem}:host[data-size=m] button.category-btn .name{min-height:2.5rem;padding-inline:.75rem;margin-block:.75rem}:host[data-size=m] button.category-btn .name:not([data-is-hovered=true]){max-height:2.5rem}:host[data-size=m] button.category-btn .name .skeleton-name{width:10rem;height:1rem}:host[data-size=s] button.category-btn{width:100%;height:10rem}:host[data-size=s] button.category-btn .img-wrapper{max-height:8.75rem}:host[data-size=s] button.category-btn .name{min-height:2rem;font-size:.75rem;line-height:1rem;padding-inline:.5rem;margin-block:.5rem}:host[data-size=s] button.category-btn .name:not([data-is-hovered=true]){max-height:2rem}:host[data-size=s] button.category-btn .name .skeleton-name{width:7rem;height:.75rem}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ScFavoriteBtnComponent, selector: "sc-favorite-btn", outputs: ["clickEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCategoryCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-category-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative group\">\n    <button\n        (click)=\"clickOnCardEvent.emit(category)\"\n        [class.pointer-events-none]=\"!category || isSkeleton\"\n        class=\"category-btn flex flex-col relative rounded-tui-radius-m overflow-hidden shadow-sc-2\"\n    >\n        <div class=\"img-wrapper w-full grow bg-tui-base-02 overflow-hidden\">\n            <img *ngIf=\"category && !isSkeleton\" [src]=\"getCategoryImgURL(category)\" [alt]=\"category.name\" class=\"w-full\" />\n        </div>\n        <div #name [attr.data-is-hovered]=\"!isHovered\" class=\"name grid items-center justify-center font-bold bg-white w-full overflow-hidden shrink-0 duration-300\">\n            <span *ngIf=\"category && !isSkeleton; else skeletonName\">{{ category.name }}</span>\n            <ng-template #skeletonName>\n                <div class=\"skeleton-name bg-tui-base-02 rounded-tui-radius-s\"></div>\n            </ng-template>\n        </div>\n    </button>\n    <sc-favorite-btn *ngIf=\"category && !isSkeleton && showFavoriteBtn\" (clickEvent)=\"clickOnFavoriteEvent.emit()\" class=\"absolute left-1 top-1\"></sc-favorite-btn>\n</div>\n", styles: [":host[data-size=m] button.category-btn{width:100%;height:12.5rem}:host[data-size=m] button.category-btn .img-wrapper{max-height:8.75rem}:host[data-size=m] button.category-btn .name{min-height:2.5rem;padding-inline:.75rem;margin-block:.75rem}:host[data-size=m] button.category-btn .name:not([data-is-hovered=true]){max-height:2.5rem}:host[data-size=m] button.category-btn .name .skeleton-name{width:10rem;height:1rem}:host[data-size=s] button.category-btn{width:100%;height:10rem}:host[data-size=s] button.category-btn .img-wrapper{max-height:8.75rem}:host[data-size=s] button.category-btn .name{min-height:2rem;font-size:.75rem;line-height:1rem;padding-inline:.5rem;margin-block:.5rem}:host[data-size=s] button.category-btn .name:not([data-is-hovered=true]){max-height:2rem}:host[data-size=s] button.category-btn .name .skeleton-name{width:7rem;height:.75rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SC_URLS]
+                }] }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SC_PATH_IMAGE_NOT_FOUND]
+                }] }]; }, propDecorators: { category: [{
+                type: Input
+            }], name: [{
+                type: ViewChild,
+                args: ['name']
+            }], size: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.data-size']
+            }], isSkeleton: [{
+                type: Input
+            }], showFavoriteBtn: [{
+                type: Input
+            }], isHovered: [{
+                type: Input
+            }], clickOnCardEvent: [{
+                type: Output
+            }], clickOnFavoriteEvent: [{
+                type: Output
+            }], moveEnterHandler: [{
+                type: HostListener,
+                args: ['mousemove']
+            }], mouseLeaveHandler: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
+/**
+ * Компонент карточки товара.
+ */
+class ScPriceCardComponent {
+    /**
+     * Инициирует экземпляр класса {@link ScPriceCardComponent}.
+     *
+     * @param unitsHelper Объект-хэлпер для работы со значениями единиц измерения товара.
+     * @param authService Сервис аутентификации пользователей.
+     * @param warehouseService Сервис для работы со складами.
+     * @param urls Список ссылок на разделы backend'a.
+     * @param pathImageNotFound Путь до изображения 'Товар не найден'.
+     */
+    constructor(unitsHelper, authService, warehouseService, urls, pathImageNotFound) {
+        this.unitsHelper = unitsHelper;
+        this.authService = authService;
+        this.warehouseService = warehouseService;
+        this.urls = urls;
+        this.pathImageNotFound = pathImageNotFound;
+        /**
+         * Признак, что необходимо отобразить лоадер для поля ввода количества товара.
+         */
+        this.quantityShowLoader = false;
+        /**
+         * Признак, что необходимо отобразить поле ввода количества товара.
+         */
+        this.showQuantityControl = false;
+        /**
+         * Событие нажатия на кнопку "В избранное".
+         */
+        this.clickFavoriteEvent = new EventEmitter();
+        /**
+         * Событие нажатия на кнопку "В корзину".
+         */
+        this.clickAddToCartEvent = new EventEmitter();
+        /**
+         * Событие нажатия на кнопку очистки количества товара.
+         */
+        this.clickClearEvent = new EventEmitter();
+        /**
+         * Событие нажатия на карточку товара.
+         */
+        this.clickCardEvent = new EventEmitter();
+        /**
+         * {@link Observable} изменения выбранного склада.
+         */
+        this.warehouseSelect$ = this.warehouseService.getWarehouseSelectChange$();
+        /**
+         * {@link FormControl} поля ввода количества товара в корзине.
+         */
+        this.quantityControl = new FormControl(null);
+        /**
+         * {@link Observable} изменения количества товара в корзине.
+         */
+        this.quantityValueChanges = this.quantityControl.valueChanges;
+        /**
+         * {@link Observable} изменения статуса авторизации.
+         */
+        this.authStatus$ = this.authService.getAuthChange();
+        /**
+         * Размер компонента.
+         */
+        this.size = 'm';
+        /**
+         * Признак того, нужно ли компонент растягивать на всю ширину свободного пространства.
+         */
+        this.isWidthFull = false;
+    }
+    /**
+     * Позиция товара в корзине.
+     *
+     * TODO: Сделать товар в корзине наблюдаемой переменной после реализации TASK:[#7144].
+     */
+    get cartItem() {
+        return this._cartItem;
+    }
+    /**
+     * Позиция товара в корзине
+     *
+     * TODO: Сделать товар в корзине наблюдаемой переменной после реализации TASK:[#7144].
+     */
+    set cartItem(value) {
+        this._cartItem = value;
+        this.quantityControl.patchValue(this._cartItem?.quantity ?? null, { emitEvent: false });
+        this.quantityShowLoader = false;
+    }
+    /**
+     * Конвертация размера для компонента sc-input-quantity.
+     * TODO: Решить проблему с функционалом size для разных платформ.
+     */
+    get getQuantitySize() {
+        return this.size === 'xs' ? 's' : this.size;
+    }
+    /**
+     * Признак, что нужно показать скелетон.
+     */
+    get skeletonVisible() {
+        return !this.product;
+    }
+    /**
+     * Возвращает ссылку на изображение карточки товара.
+     */
+    getCardImage() {
+        return this.product?.getImage(this.urls.imgServerUrl) ?? this.pathImageNotFound;
+    }
+}
+ScPriceCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceCardComponent, deps: [{ token: UnitsHelper }, { token: i1.ScAuthService }, { token: i1.ScWarehouseService }, { token: SC_URLS }, { token: SC_PATH_IMAGE_NOT_FOUND }], target: i0.ɵɵFactoryTarget.Component });
+ScPriceCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScPriceCardComponent, selector: "sc-price-card", inputs: { showQuantityControl: "showQuantityControl", cartItem: "cartItem", product: "product", size: "size", isWidthFull: "isWidthFull" }, outputs: { clickFavoriteEvent: "clickFavoriteEvent", clickAddToCartEvent: "clickAddToCartEvent", clickClearEvent: "clickClearEvent", clickCardEvent: "clickCardEvent", quantityValueChanges: "quantityValueChanges" }, host: { properties: { "attr.data-size": "this.size" } }, ngImport: i0, template: "<!-- TODO: \u0440\u0435\u0430\u043B\u0438\u0437\u043E\u0432\u0430\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u0438 \u0434\u043B\u044F \u0434\u0435\u0441\u043A\u0442\u043E\u043F\u0430 \u0438 \u0434\u043B\u044F \u043C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0433\u043E \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u044F. \u0418\u0441\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u0432\u0441\u0435 \u0433\u043B\u043E\u0431\u0430\u043B\u044C\u043D\u044B\u0435 \u0442\u0430\u0439\u0433\u043E\u0432\u0441\u043A\u0438\u0435 \u0441\u0442\u0438\u043B\u0438, \u043F\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u0438\u0445 \u0432 \u043F\u043E\u0440\u044F\u0434\u043E\u043A \u0441\u043E\u0433\u043B\u0430\u0441\u043D\u043E \u0441 \u0434\u0438\u0437\u0430\u0439\u043D\u043E\u043C. -->\n<div\n    *ngIf=\"product; else skeleton\"\n    class=\"h-[17rem] min-w-[10rem] shadow-md w-auto rounded-xl p-2 grid max-h-[17rem] text-[0.75rem] text-left text-tui-text-02\"\n    [style.width]=\"isWidthFull\"\n>\n    <div class=\"overflow-hidden relative\">\n        <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" class=\"rounded-xl w-full max-h-full object-cover\" />\n        <sc-favorite-btn *ngIf=\"authStatus$ | async\" [class.!block]=\"product.isFavorite\" class=\"top-0 left-0 absolute hidden\"></sc-favorite-btn>\n        <tui-svg *ngIf=\"product.isPreviouslyOrdered\" src=\"scIconStar\" class=\"top-0 right-0 absolute hidden text-red-700\"></tui-svg>\n    </div>\n    <a class=\"p-0 m-0\" tuiLink iconAlign=\"left\" (click)=\"clickCardEvent.emit()\">\n        <p class=\"font-bold text-[0.875rem] text-[#526ED3]\">{{ product.name }}</p>\n    </a>\n    <p *ngIf=\"product?.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n\n    <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n    <p *ngIf=\"(authStatus$ | async) && product?.costDate\">\u0414\u0430\u0442\u0430: {{ product.costDate }}</p>\n    <div *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"flex flex-col\">\n        <span *ngIf=\"product.discount\" class=\"flex items-center text-tui-text-02\">\n            <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n            <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n            <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-[0.75rem] !h-4\"></tui-svg>\n            <ng-template #discountHint>\n                <div class=\"font-bold\">{{ product.discount.name }}</div>\n                <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n            </ng-template>\n        </span>\n        <span [class.text-tui-text-02]=\"!product.isWarehouseStockExist(warehouseSelect.id)\" class=\"cost font-bold\">{{ product.costRubString }}</span>\n        <span *ngIf=\"!product.priceInRub\" class=\"text-xs font-bold text-tui-text-02 hidden group-hover:block\">{{ product.costString }}</span>\n        <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n    </div>\n    <div *ngIf=\"!showQuantityControl\" class=\"flex gap-2 max-w-full items-center justify-stretch mt-1\">\n        <button tuiButton (click)=\"clickAddToCartEvent.emit(product)\" [showLoader]=\"quantityShowLoader\" [size]=\"size\" class=\"grow\">\n            <tui-svg src=\"scIconCart\" class=\"!text-xs !h-4\"> </tui-svg>\n            \u0412 \u043A\u043E\u0440\u0437\u0438\u043D\u0443\n        </button>\n        <div *ngIf=\"cartItem\" class=\"flex justify-center\">\n            <tui-svg src=\"tuiIconCheck\" class=\"!h-5 !w-5 bg-tui-primary text-black rounded-md\"></tui-svg>\n        </div>\n    </div>\n    <sc-input-quantity\n        *ngIf=\"showQuantityControl\"\n        [formControl]=\"quantityControl\"\n        [quantityUnit]=\"product.quantityUnit\"\n        [size]=\"getQuantitySize\"\n        [step]=\"unitsHelper.productMultiplicity(product)\"\n        [showLoader]=\"quantityShowLoader\"\n        (clickClearEvent)=\"clickClearEvent.emit(cartItem)\"\n        class=\"w-full\"\n    ></sc-input-quantity>\n</div>\n\n<ng-template #skeleton>\n    <div class=\"flex flex-col card-wrapper bg-white rounded-xl overflow-hidden shadow-sc-1\">\n        <!-- \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 -->\n        <div class=\"w-full h-3/5 rounded-t bg-tui-base-02\"></div>\n        <!-- \u041A\u0440\u0430\u0442\u043A\u0430\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F \u043E \u0442\u043E\u0432\u0430\u0440\u0435 -->\n        <div class=\"flex flex-col grow gap-2.5 bg-white rounded-b p-5\">\n            <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n            <div class=\"w-3/5 h-4 rounded bg-tui-base-02\"></div>\n            <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n        </div>\n    </div>\n</ng-template>\n", styles: [":host[data-size=s] .card-wrapper{width:10rem;height:16rem}:host[data-size=s] .card-wrapper .wrapper-info{padding:8px}:host[data-size=s] .card-wrapper .wrapper-info .cost{font-size:.875rem;line-height:1.25rem}:host[data-size=s] .card-wrapper .button-wrapper tui-svg{font-size:.75rem;line-height:1rem;width:1rem}:host[data-size=m] .card-wrapper{width:12.5rem;height:20rem}:host[data-size=m] .card-wrapper .wrapper-info{padding-inline:16px;padding-block:8px}:host[data-size=m] .card-wrapper .name{font-size:.875rem;line-height:1.25rem;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:3rem}:host[data-size=m] .card-wrapper .info{max-height:1rem}:host[data-size=m] .card-wrapper .cost{font-size:1.125rem;line-height:1.75rem}:host[data-size=m] .card-wrapper .button-wrapper{max-height:0px;font-size:.75rem;line-height:1rem}:host[data-size=m] .card-wrapper:hover .name{-webkit-line-clamp:unset;max-height:6rem}:host[data-size=m] .card-wrapper:hover .info{max-height:3rem}:host[data-size=m] .card-wrapper:hover .button-wrapper{max-height:3rem}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i3$1.TuiHintDriverDirective, selector: "[tuiHint]" }, { kind: "directive", type: i3$1.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i3$1.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { kind: "component", type: i3$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: ScFavoriteBtnComponent, selector: "sc-favorite-btn", outputs: ["clickEvent"] }, { kind: "component", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: ["step", "quantityUnit", "showLoader", "showCross", "appearance", "isDisabled", "size"], outputs: ["clickClearEvent"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-price-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- TODO: \u0440\u0435\u0430\u043B\u0438\u0437\u043E\u0432\u0430\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u0438 \u0434\u043B\u044F \u0434\u0435\u0441\u043A\u0442\u043E\u043F\u0430 \u0438 \u0434\u043B\u044F \u043C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0433\u043E \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u044F. \u0418\u0441\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u0432\u0441\u0435 \u0433\u043B\u043E\u0431\u0430\u043B\u044C\u043D\u044B\u0435 \u0442\u0430\u0439\u0433\u043E\u0432\u0441\u043A\u0438\u0435 \u0441\u0442\u0438\u043B\u0438, \u043F\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u0438\u0445 \u0432 \u043F\u043E\u0440\u044F\u0434\u043E\u043A \u0441\u043E\u0433\u043B\u0430\u0441\u043D\u043E \u0441 \u0434\u0438\u0437\u0430\u0439\u043D\u043E\u043C. -->\n<div\n    *ngIf=\"product; else skeleton\"\n    class=\"h-[17rem] min-w-[10rem] shadow-md w-auto rounded-xl p-2 grid max-h-[17rem] text-[0.75rem] text-left text-tui-text-02\"\n    [style.width]=\"isWidthFull\"\n>\n    <div class=\"overflow-hidden relative\">\n        <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" class=\"rounded-xl w-full max-h-full object-cover\" />\n        <sc-favorite-btn *ngIf=\"authStatus$ | async\" [class.!block]=\"product.isFavorite\" class=\"top-0 left-0 absolute hidden\"></sc-favorite-btn>\n        <tui-svg *ngIf=\"product.isPreviouslyOrdered\" src=\"scIconStar\" class=\"top-0 right-0 absolute hidden text-red-700\"></tui-svg>\n    </div>\n    <a class=\"p-0 m-0\" tuiLink iconAlign=\"left\" (click)=\"clickCardEvent.emit()\">\n        <p class=\"font-bold text-[0.875rem] text-[#526ED3]\">{{ product.name }}</p>\n    </a>\n    <p *ngIf=\"product?.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n\n    <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n    <p *ngIf=\"(authStatus$ | async) && product?.costDate\">\u0414\u0430\u0442\u0430: {{ product.costDate }}</p>\n    <div *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"flex flex-col\">\n        <span *ngIf=\"product.discount\" class=\"flex items-center text-tui-text-02\">\n            <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n            <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n            <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-[0.75rem] !h-4\"></tui-svg>\n            <ng-template #discountHint>\n                <div class=\"font-bold\">{{ product.discount.name }}</div>\n                <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n            </ng-template>\n        </span>\n        <span [class.text-tui-text-02]=\"!product.isWarehouseStockExist(warehouseSelect.id)\" class=\"cost font-bold\">{{ product.costRubString }}</span>\n        <span *ngIf=\"!product.priceInRub\" class=\"text-xs font-bold text-tui-text-02 hidden group-hover:block\">{{ product.costString }}</span>\n        <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n    </div>\n    <div *ngIf=\"!showQuantityControl\" class=\"flex gap-2 max-w-full items-center justify-stretch mt-1\">\n        <button tuiButton (click)=\"clickAddToCartEvent.emit(product)\" [showLoader]=\"quantityShowLoader\" [size]=\"size\" class=\"grow\">\n            <tui-svg src=\"scIconCart\" class=\"!text-xs !h-4\"> </tui-svg>\n            \u0412 \u043A\u043E\u0440\u0437\u0438\u043D\u0443\n        </button>\n        <div *ngIf=\"cartItem\" class=\"flex justify-center\">\n            <tui-svg src=\"tuiIconCheck\" class=\"!h-5 !w-5 bg-tui-primary text-black rounded-md\"></tui-svg>\n        </div>\n    </div>\n    <sc-input-quantity\n        *ngIf=\"showQuantityControl\"\n        [formControl]=\"quantityControl\"\n        [quantityUnit]=\"product.quantityUnit\"\n        [size]=\"getQuantitySize\"\n        [step]=\"unitsHelper.productMultiplicity(product)\"\n        [showLoader]=\"quantityShowLoader\"\n        (clickClearEvent)=\"clickClearEvent.emit(cartItem)\"\n        class=\"w-full\"\n    ></sc-input-quantity>\n</div>\n\n<ng-template #skeleton>\n    <div class=\"flex flex-col card-wrapper bg-white rounded-xl overflow-hidden shadow-sc-1\">\n        <!-- \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 -->\n        <div class=\"w-full h-3/5 rounded-t bg-tui-base-02\"></div>\n        <!-- \u041A\u0440\u0430\u0442\u043A\u0430\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F \u043E \u0442\u043E\u0432\u0430\u0440\u0435 -->\n        <div class=\"flex flex-col grow gap-2.5 bg-white rounded-b p-5\">\n            <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n            <div class=\"w-3/5 h-4 rounded bg-tui-base-02\"></div>\n            <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n        </div>\n    </div>\n</ng-template>\n", styles: [":host[data-size=s] .card-wrapper{width:10rem;height:16rem}:host[data-size=s] .card-wrapper .wrapper-info{padding:8px}:host[data-size=s] .card-wrapper .wrapper-info .cost{font-size:.875rem;line-height:1.25rem}:host[data-size=s] .card-wrapper .button-wrapper tui-svg{font-size:.75rem;line-height:1rem;width:1rem}:host[data-size=m] .card-wrapper{width:12.5rem;height:20rem}:host[data-size=m] .card-wrapper .wrapper-info{padding-inline:16px;padding-block:8px}:host[data-size=m] .card-wrapper .name{font-size:.875rem;line-height:1.25rem;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:3rem}:host[data-size=m] .card-wrapper .info{max-height:1rem}:host[data-size=m] .card-wrapper .cost{font-size:1.125rem;line-height:1.75rem}:host[data-size=m] .card-wrapper .button-wrapper{max-height:0px;font-size:.75rem;line-height:1rem}:host[data-size=m] .card-wrapper:hover .name{-webkit-line-clamp:unset;max-height:6rem}:host[data-size=m] .card-wrapper:hover .info{max-height:3rem}:host[data-size=m] .card-wrapper:hover .button-wrapper{max-height:3rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: UnitsHelper }, { type: i1.ScAuthService }, { type: i1.ScWarehouseService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SC_URLS]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SC_PATH_IMAGE_NOT_FOUND]
+                }] }]; }, propDecorators: { showQuantityControl: [{
+                type: Input
+            }], cartItem: [{
+                type: Input
+            }], product: [{
+                type: Input
+            }], clickFavoriteEvent: [{
+                type: Output
+            }], clickAddToCartEvent: [{
+                type: Output
+            }], clickClearEvent: [{
+                type: Output
+            }], clickCardEvent: [{
+                type: Output
+            }], quantityValueChanges: [{
+                type: Output
+            }], size: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.data-size']
+            }], isWidthFull: [{
+                type: Input
+            }] } });
+
+/**
+ * Настройки отрисовки графика.
+ *
+ * @see [Документация](https://echarts.apache.org/en/option.html#title)
+ */
+const scChartOption = {
+    grid: {
+        top: 12,
+        left: 64,
+        right: 0,
+        bottom: 24,
+    },
+    tooltip: {
+        trigger: 'axis',
+        formatter: (params) => {
+            const data = Array.isArray(params) ? params[0].data : params.data;
+            const date = new Date(data.value[0]);
+            const nextDate = new Date(data.value[2]);
+            return `
+                <div class="text-center text-black">
+                    <span class="font-bold">${data.value[1]} ₽</span>
+                    </br>
+                    <span class="text-xs">${formatDate(date, 'dd.MM', 'en')} - ${formatDate(nextDate, 'dd.MM', 'en')}</span>
+                </div>
+            `;
+        },
+        axisPointer: {
+            animation: false,
+            type: 'cross',
+        },
+        textStyle: {
+            fontFamily: 'Roboto, "Helvetica Neue", sans-serif',
+        },
+    },
+    xAxis: {
+        type: 'time',
+        splitLine: {
+            show: false,
+        },
+        axisLine: {
+            show: false,
+        },
+        axisTick: {
+            show: false,
+        },
+        axisLabel: {
+            hideOverlap: true,
+        },
+        boundaryGap: ['3%', '3%'],
+    },
+    yAxis: {
+        splitLine: {
+            show: false,
+        },
+        axisLine: {
+            show: false,
+        },
+        axisTick: {
+            show: false,
+        },
+        axisLabel: {
+            formatter: (value) => tuiFormatNumber(value),
+        },
+        type: 'value',
+        boundaryGap: [0, '100%'],
+    },
+    series: {
+        name: 'История цены',
+        type: 'line',
+        showSymbol: false,
+        symbolSize: 12,
+        itemStyle: {
+            color: '#ffcc40',
+        },
+    },
+};
+
+/**
+ * График истории цен товара или услуги.
+ * TODO: TASK[#7482] Перепроверить возможность использования TuiLineDaysChart.
+ */
+class ScPriceHistoryComponent {
+    /**
+     * Инициализирует экземпляр класса {@link PriceHistoryChartComponent}.
+     *
+     * @param cdr Объект для работы с обнаружением изменений.
+     */
+    constructor(cdr) {
+        this.cdr = cdr;
+        /**
+         * Настройки графика.
+         */
+        this.initOption = { locale: 'RU' };
+        /**
+         * Параметры отрисовки графика истории цены.
+         */
+        this.chartOption = scChartOption;
+        /**
+         * Данные об истории цены на товар или услугу.
+         */
+        this.data = [];
+    }
+    /** @inheritDoc */
+    ngOnInit() {
+        if (this.chartOption.series && !Array.isArray(this.chartOption.series)) {
+            this.chartOption.series.data = [];
+        }
+        Object.keys(this.history)
+            .map((key) => {
+            // ? Можно избежать переведя даты в api в формат ECMAScript® 2023: https://tc39.es/ecma262/#sec-date-time-string-format
+            const dataString = key.split('.').reverse(), data = new Date(+dataString[0], +dataString[1] - 1, +dataString[2]);
+            return { data: data, cost: this.history[String(key)].cost };
+        })
+            .sort((a, b) => +a.data - +b.data)
+            .forEach((item, index, array) => {
+            let nextDate;
+            if (array[index + 1]?.data) {
+                nextDate = new Date(array[index + 1]?.data);
+                nextDate.setDate(nextDate.getDate() - 1);
+            }
+            else {
+                nextDate = new Date();
+            }
+            this.pushDataItem(item.cost, item.data, nextDate);
+        });
+        if (this.eChartsInstance) {
+            this.setChartData();
+        }
+    }
+    /**
+     * Перехватчик жизненного цикла {@link ECharts}, который вызывается при его инициализации.
+     *
+     * @param eChartsInstance Экземпляр {@link ECharts}.
+     */
+    onChartInit(eChartsInstance) {
+        this.eChartsInstance = eChartsInstance;
+        if (this.data.length) {
+            this.setChartData();
+        }
+    }
+    /**
+     * Устанавливает новые данные {@link PriceHistoryChartComponent.eChartsInstance}.
+     */
+    setChartData() {
+        if (this.chartOption.series && !Array.isArray(this.chartOption.series)) {
+            this.maxPrice = Math.max(...this.data.map((item) => item.value[1]));
+            this.minPrice = Math.min(...this.data.map((item) => item.value[1]));
+            this.chartOption.series.data = this.data;
+            this.eChartsInstance.clear();
+            this.eChartsInstance.setOption(this.chartOption, true, true);
+            this.cdr.markForCheck();
+        }
+    }
+    /**
+     * Добавляет значение цены товара в массив истории цен.
+     *
+     * @param value Цена товара или услуги.
+     * @param date Дата установки цены.
+     * @param nextDate Следующая дата установки цены.
+     */
+    pushDataItem(value, date, nextDate) {
+        this.data.push({
+            name: date.toString(),
+            value: [date, value, nextDate],
+        });
+    }
+}
+ScPriceHistoryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceHistoryComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ScPriceHistoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScPriceHistoryComponent, selector: "sc-price-history", inputs: { history: "history" }, ngImport: i0, template: "<div class=\"flex flex-col items-center\">\n    <div *ngIf=\"maxPrice && minPrice\" class=\"w-full font-bold text-end text-lg mb-1\">\u043E\u0442 {{ minPrice.toLocaleString() }} \u20BD \u0434\u043E {{ maxPrice.toLocaleString() }} \u20BD</div>\n    <div class=\"relative w-full h-56\">\n        <div class=\"h-48 bg-tui-base-02 mt-2 absolute rounded right-0 left-16\"></div>\n        <div echarts [initOpts]=\"initOption\" (chartInit)=\"onChartInit($event)\" [options]=\"chartOption\" class=\"w-full !h-full touch-none\"></div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "loading", "initOpts", "merge", "autoResize", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartPieSelectChanged", "chartPieSelected", "chartPieUnselected", "chartMapSelectChanged", "chartMapSelected", "chartMapUnselected", "chartAxisAreaSelected", "chartFocusNodeAdjacency", "chartUnfocusNodeAdjacency", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartRendered", "chartFinished"], exportAs: ["echarts"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceHistoryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-price-history', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col items-center\">\n    <div *ngIf=\"maxPrice && minPrice\" class=\"w-full font-bold text-end text-lg mb-1\">\u043E\u0442 {{ minPrice.toLocaleString() }} \u20BD \u0434\u043E {{ maxPrice.toLocaleString() }} \u20BD</div>\n    <div class=\"relative w-full h-56\">\n        <div class=\"h-48 bg-tui-base-02 mt-2 absolute rounded right-0 left-16\"></div>\n        <div echarts [initOpts]=\"initOption\" (chartInit)=\"onChartInit($event)\" [options]=\"chartOption\" class=\"w-full !h-full touch-none\"></div>\n    </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { history: [{
+                type: Input
+            }] } });
+
+/**
+ * Language: Russian.
+ */
+var scLangRU = {
+    time: {
+        month: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
+        monthAbbr: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
+        dayOfWeek: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],
+        dayOfWeekAbbr: ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'],
+    },
+    legend: {
+        selector: {
+            all: 'Всё',
+            inverse: 'Обратить',
+        },
+    },
+    toolbox: {
+        brush: {
+            title: {
+                rect: 'Выделить область',
+                polygon: 'Инструмент «Лассо»',
+                lineX: 'Горизонтальное выделение',
+                lineY: 'Вертикальное выделение',
+                keep: 'Оставить выбранное',
+                clear: 'Очистить выбранное',
+            },
+        },
+        dataView: {
+            title: 'Данные',
+            lang: ['Данные', 'Закрыть', 'Обновить'],
+        },
+        dataZoom: {
+            title: {
+                zoom: 'Увеличить',
+                back: 'Сбросить увеличение',
+            },
+        },
+        magicType: {
+            title: {
+                line: 'Переключиться на линейный график',
+                bar: 'Переключиться на столбчатую диаграмму',
+                stack: 'Стопка',
+                tiled: 'Плитка',
+            },
+        },
+        restore: {
+            title: 'Восстановить',
+        },
+        saveAsImage: {
+            title: 'Сохранить картинку',
+            lang: ['Правый клик, чтобы сохранить картинку'],
+        },
+    },
+    series: {
+        typeNames: {
+            pie: 'Круговая диаграмма',
+            bar: 'Столбчатая диаграмма',
+            line: 'Линейный график',
+            scatter: 'Точечная диаграмма',
+            effectScatter: 'Точечная диаграмма с волнами',
+            radar: 'Лепестковая диаграмма',
+            tree: 'Дерево',
+            treemap: 'Плоское дерево',
+            boxplot: 'Ящик с усами',
+            candlestick: 'Свечной график',
+            k: 'График К-линий',
+            heatmap: 'Тепловая карта',
+            map: 'Карта',
+            parallel: 'Диаграмма параллельных координат',
+            lines: 'Линейный граф',
+            graph: 'Граф отношений',
+            sankey: 'Диаграмма Санкей',
+            funnel: 'Воронкообразная диаграмма',
+            gauge: 'Шкала',
+            pictorialBar: 'Столбец-картинка',
+            themeRiver: 'Тематическая река',
+            sunburst: 'Солнечные лучи',
+        },
+    },
+    aria: {
+        general: {
+            withTitle: 'Это график, показывающий "{title}"',
+            withoutTitle: 'Это график',
+        },
+        series: {
+            single: {
+                prefix: '',
+                withName: ' с типом {seriesType} и именем {seriesName}.',
+                withoutName: ' с типом {seriesType}.',
+            },
+            multiple: {
+                prefix: '. Он состоит из {seriesCount} серий.',
+                withName: ' Серия {seriesId} имеет тип {seriesType} и показывает {seriesName}.',
+                withoutName: ' Серия {seriesId} имеет тип {seriesType}.',
+                separator: {
+                    middle: '',
+                    end: '',
+                },
+            },
+        },
+        data: {
+            allData: 'Данные таковы: ',
+            partialData: 'Первые {displayCnt} элементов: ',
+            withName: 'значение для {name} — {value}',
+            withoutName: '{value}',
+            separator: {
+                middle: ', ',
+                end: '. ',
+            },
+        },
+    },
+};
+
+echarts.registerLocale('RU', scLangRU);
+echarts.use([TitleComponent, TooltipComponent, GridComponent, LineChart, SVGRenderer]);
+/**
+ * Модуль каталога.
+ */
+class ScCatalogModule {
+}
+ScCatalogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCatalogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ScCatalogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: ScCatalogModule, declarations: [ScCategoryCardComponent, ScFavoriteBtnComponent, ScInputQuantityComponent, ScPriceCardComponent, ScPriceWarehouseStockComponent, ScPriceHistoryComponent], imports: [CommonModule,
+        RouterModule,
+        TuiButtonModule,
+        TuiSvgModule,
+        TuiIslandModule,
+        TuiInputNumberModule,
+        TuiLabelModule,
+        TuiTextfieldControllerModule,
+        FormsModule,
+        ReactiveFormsModule,
+        TuiHintModule,
+        TuiModeModule,
+        TuiFieldErrorPipeModule,
+        TuiLoaderModule,
+        TuiLinkModule,
+        TuiElasticContainerModule, i2.NgxEchartsModule], exports: [ScCategoryCardComponent, ScFavoriteBtnComponent, ScInputQuantityComponent, ScPriceCardComponent, ScPriceWarehouseStockComponent, ScPriceHistoryComponent] });
+ScCatalogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCatalogModule, imports: [CommonModule,
+        RouterModule,
+        TuiButtonModule,
+        TuiSvgModule,
+        TuiIslandModule,
+        TuiInputNumberModule,
+        TuiLabelModule,
+        TuiTextfieldControllerModule,
+        FormsModule,
+        ReactiveFormsModule,
+        TuiHintModule,
+        TuiModeModule,
+        TuiFieldErrorPipeModule,
+        TuiLoaderModule,
+        TuiLinkModule,
+        TuiElasticContainerModule,
+        NgxEchartsModule.forRoot({ echarts })] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCatalogModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ScCategoryCardComponent, ScFavoriteBtnComponent, ScInputQuantityComponent, ScPriceCardComponent, ScPriceWarehouseStockComponent, ScPriceHistoryComponent],
+                    exports: [ScCategoryCardComponent, ScFavoriteBtnComponent, ScInputQuantityComponent, ScPriceCardComponent, ScPriceWarehouseStockComponent, ScPriceHistoryComponent],
+                    imports: [
+                        CommonModule,
+                        RouterModule,
+                        TuiButtonModule,
+                        TuiSvgModule,
+                        TuiIslandModule,
+                        TuiInputNumberModule,
+                        TuiLabelModule,
+                        TuiTextfieldControllerModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        TuiHintModule,
+                        TuiModeModule,
+                        TuiFieldErrorPipeModule,
+                        TuiLoaderModule,
+                        TuiLinkModule,
+                        TuiElasticContainerModule,
+                        NgxEchartsModule.forRoot({ echarts }),
+                    ],
+                }]
+        }] });
+
+/**
+ * Модуль корзины.
+ */
+class ScCartModule {
+}
+ScCartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ScCartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: ScCartModule, declarations: [ScCartItemMobileComponent], imports: [CommonModule,
+        TuiLinkModule,
+        ScCatalogModule,
+        TuiButtonModule,
+        TuiModeModule,
+        TuiSvgModule,
+        TuiHintModule,
+        FormsModule,
+        ReactiveFormsModule,
+        TuiPreviewModule,
+        PolymorpheusModule], exports: [ScCartItemMobileComponent] });
+ScCartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCartModule, imports: [CommonModule,
+        TuiLinkModule,
+        ScCatalogModule,
+        TuiButtonModule,
+        TuiModeModule,
+        TuiSvgModule,
+        TuiHintModule,
+        FormsModule,
+        ReactiveFormsModule,
+        TuiPreviewModule,
+        PolymorpheusModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCartModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ScCartItemMobileComponent],
+                    exports: [ScCartItemMobileComponent],
+                    imports: [
+                        CommonModule,
+                        TuiLinkModule,
+                        ScCatalogModule,
+                        TuiButtonModule,
+                        TuiModeModule,
+                        TuiSvgModule,
+                        TuiHintModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        TuiPreviewModule,
+                        PolymorpheusModule,
+                    ],
+                }]
+        }] });
+
+/**
+ * Сервис работающий с значками элементов дерева.
+ */
+class TreeIconService {
+    /**
+     * Назначает значок элементу дерева в зависимости от типа файла.
+     *
+     * @param info Объект пришедших данных о файле.
+     * @returns Возвращает название значка в виде строки.
+     */
+    getIconName(info) {
+        switch (info.getIcon()) {
+            case ScIconTypesEnum.iconImage:
+                return 'scIconImage';
+            case ScIconTypesEnum.iconPdfFile:
+                return 'scIconPdfFile';
+            case ScIconTypesEnum.iconWordFile:
+                return 'scIconWordFile';
+            case ScIconTypesEnum.iconExcelFile:
+                return 'scIconExcelFile';
+            case ScIconTypesEnum.iconFolder:
+                return 'scIconFolder';
+            default:
+                return 'scIconFile';
+        }
+    }
+    /**
+     * Проверяет на признак наличия дочерних элементов.
+     *
+     * @param info Объект пришедших данных о файле.
+     * @returns Возвращает true при наличии дочерних элементов и false при их отсутсвии.
+     */
+    hasChildren(info) {
+        return info.type === 'dir';
+    }
+}
+TreeIconService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeIconService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TreeIconService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeIconService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeIconService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Сервис для асинхронного раскрытия вложенности.
+ */
+class TreeLoaderService {
+    /**
+     * Инициализирует экземпляр класса {@link TreeLoaderService}
+     *
+     * @param filesService Сервис для получения файлов директории.
+     * @param iconService Сервис для определения и назначения значка элементу дерева.
+     */
+    constructor(filesService, iconService) {
+        this.filesService = filesService;
+        this.iconService = iconService;
+    }
+    /**
+     * Загружает дочерние элементы дерева.
+     *
+     * @param item Элемент дерева.
+     * @returns Массив дочерних элементов.
+     */
+    loadChildren(item) {
+        return item.id ? this.initData(item.id) : this.initData(undefined);
+    }
+    /**
+     * Проверяет указанный элемент дерева на наличие дочерних элементов и возвращает массив дочерних элементов, если они есть, либо пустой массив.
+     *
+     * @param node Элемент дерева.
+     * @returns Возвращает массив типа TreeNode[].
+     */
+    hasChildren(node) {
+        return node.hasChildren && !!node.id;
+    }
+    /**
+     * Загружает и заполняет массив дочерних элементов.
+     *
+     * @param id Идентификатор директории, чьи дочернии элементы загружаются.
+     * @returns Возвращает массив дочерних элементов.
+     */
+    initData(id) {
+        return this.filesService.getFiles(id).pipe(map((data) => data.map((item) => ({
+            text: item.name,
+            icon: this.iconService.getIconName(item),
+            hasChildren: this.iconService.hasChildren(item),
+            createdAt: item.createdAt,
+            id: item.id,
+            link: item.link,
+        }))));
+    }
+}
+TreeLoaderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeLoaderService, deps: [{ token: i1.ScFilesService }, { token: TreeIconService }], target: i0.ɵɵFactoryTarget.Injectable });
+TreeLoaderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeLoaderService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeLoaderService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.ScFilesService }, { type: TreeIconService }]; } });
+
+/**
+ * Директива отвечающая за обработку действий над элементами дерева.
+ */
+class TreeDirective {
+    /**
+     * Инициализирует экземпляр класса {@link TreeDirective}.
+     *
+     * @param service Сервис для работы с деревом.
+     */
+    constructor(service) {
+        this.service = service;
+        /**
+         * Карта данных дерева.
+         */
+        this.map = new Map();
+        /**
+         * Проверяет указанный элемент дерева на наличие дочерних элементов и возвращает массив дочерних элементов, если они есть, либо пустой массив.
+         *
+         * @param node Элемент дерева.
+         * @returns Возвращает массив типа TreeNode[].
+         */
+        this.childrenHandler = (node) => (node.hasChildren ? this.service.getChildren(node) : []);
+    }
+    /**
+     * Обрабатывает нажатие на указанный элемент дерева.
+     *
+     * @param node Элемент дерева.
+     */
+    onToggled(node) {
+        this.service.loadChildren(node);
+    }
+}
+TreeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeDirective, deps: [{ token: i3$2.TuiTreeService }], target: i0.ɵɵFactoryTarget.Directive });
+TreeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: TreeDirective, selector: "[scTree]", providers: [TuiTreeService], exportAs: ["scTree"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[scTree]',
+                    exportAs: 'scTree',
+                    providers: [TuiTreeService],
+                }]
+        }], ctorParameters: function () { return [{ type: i3$2.TuiTreeService }]; } });
+
+/**
+ * Компонент для удаления стандартного значка элемента дерева.
+ */
+class FileTreeItemComponent extends TuiTreeItemContentComponent {
+}
+FileTreeItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FileTreeItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FileTreeItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FileTreeItemComponent, selector: "sc-file-tree-item", host: { listeners: { "click": "onClick()" } }, usesInheritance: true, ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"context.template\"></ng-container>\n", styles: [":host{position:relative;min-height:var(--tui-height-s);display:flex;align-items:center;padding:.5rem;margin:.5rem 0;border-radius:12px;background:var(--tui-base-03)}:host._expandable:hover{cursor:pointer;background:var(--tui-base-03)}tui-svg{position:relative;background:inherit;z-index:1}\n"], dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FileTreeItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-file-tree-item', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '(click)': `onClick()`,
+                    }, template: "<ng-container [ngTemplateOutlet]=\"context.template\"></ng-container>\n", styles: [":host{position:relative;min-height:var(--tui-height-s);display:flex;align-items:center;padding:.5rem;margin:.5rem 0;border-radius:12px;background:var(--tui-base-03)}:host._expandable:hover{cursor:pointer;background:var(--tui-base-03)}tui-svg{position:relative;background:inherit;z-index:1}\n"] }]
+        }] });
+
+/* eslint-disable @angular-eslint/no-input-rename */
+/**
+ * Директива отвечающая за корневые элементы дерева.
+ */
+class TreeTopDirective {
+    constructor() {
+        /**
+         * Отображаемое имя корневого элемента дерева.
+         */
+        this.text = '';
+    }
+}
+TreeTopDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeTopDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TreeTopDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: TreeTopDirective, selector: "[scTopNodeText]", inputs: { text: ["scTopNodeText", "text"], icon: ["scTopNodeIcon", "icon"], link: ["scTopNodeLink", "link"], hasChildren: ["scTopNodeChilds", "hasChildren"], id: ["scTopNodeParent", "id"], createdAt: ["scTopNodeDate", "createdAt"] }, providers: [
+        {
+            provide: TUI_TREE_START,
+            useExisting: forwardRef(() => TreeTopDirective),
+        },
+        {
+            provide: TUI_TREE_CONTENT,
+            useValue: new PolymorpheusComponent(FileTreeItemComponent),
+        },
+    ], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeTopDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[scTopNodeText]',
+                    providers: [
+                        {
+                            provide: TUI_TREE_START,
+                            useExisting: forwardRef(() => TreeTopDirective),
+                        },
+                        {
+                            provide: TUI_TREE_CONTENT,
+                            useValue: new PolymorpheusComponent(FileTreeItemComponent),
+                        },
+                    ],
+                }]
+        }], propDecorators: { text: [{
+                type: Input,
+                args: ['scTopNodeText']
+            }], icon: [{
+                type: Input,
+                args: ['scTopNodeIcon']
+            }], link: [{
+                type: Input,
+                args: ['scTopNodeLink']
+            }], hasChildren: [{
+                type: Input,
+                args: ['scTopNodeChilds']
+            }], id: [{
+                type: Input,
+                args: ['scTopNodeParent']
+            }], createdAt: [{
+                type: Input,
+                args: ['scTopNodeDate']
+            }] } });
+
+/**
+ * Компонент файлов и документов.
+ */
+class FilesAndDocumentsComponent {
+    /**
+     * Инициализирует экземпляр класса {@link FilesAndDocumentsComponent}.
+     *
+     * @param loading Объект отвечающий за значок загрузки, в момент раскрытия элемента дерева.
+     * @param iconService Сервис для определения и назначения значка элементу дерева.
+     * @param filesService Сервис для загрузки файлов.
+     */
+    constructor(loading, iconService, filesService) {
+        this.loading = loading;
+        this.iconService = iconService;
+        this.filesService = filesService;
+        /**
+         * Данные визуализации и их начальное получение.
+         */
+        this.data$ = this.filesService.getFiles().pipe(map((data) => data.map((item) => ({
+            text: item.name,
+            icon: this.iconService.getIconName(item),
+            hasChildren: this.iconService.hasChildren(item),
+            createdAt: item.createdAt,
+            id: item.id,
+            link: item.link,
+        }))));
+    }
+}
+FilesAndDocumentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FilesAndDocumentsComponent, deps: [{ token: TUI_TREE_LOADING }, { token: TreeIconService }, { token: i1.ScFilesService }], target: i0.ɵɵFactoryTarget.Component });
+FilesAndDocumentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FilesAndDocumentsComponent, selector: "sc-files-and-documents", providers: [
+        {
+            provide: TUI_TREE_LOADER,
+            useClass: TreeLoaderService,
+        },
+    ], ngImport: i0, template: "<ng-container *ngIf=\"data$ | async as data; else skeleton\">\n    <tui-tree\n        *ngFor=\"let node of data\"\n        #tree=\"scTree\"\n        scTree\n        [scTopNodeText]=\"node.text\"\n        [scTopNodeIcon]=\"node.icon\"\n        [scTopNodeLink]=\"node.link\"\n        [scTopNodeChilds]=\"node.hasChildren\"\n        [scTopNodeParent]=\"node.id\"\n        [scTopNodeDate]=\"node.createdAt\"\n        [childrenHandler]=\"tree.childrenHandler\"\n        [content]=\"content\"\n        [map]=\"tree.map\"\n        [tuiTreeController]=\"false\"\n        [value]=\"tree.service.data$ | async\"\n        (toggled)=\"tree.onToggled($event)\"\n        class=\"overflow-hidden\"\n    ></tui-tree>\n</ng-container>\n\n<ng-template #content let-item>\n    <tui-loader *ngIf=\"item === loading; else text\" class=\"w-8 my-4\"></tui-loader>\n    <ng-template #text>\n        <tui-svg [src]=\"item.icon\" class=\"tui-space_right-2\"></tui-svg>\n        <a tuiLink [pseudo]=\"true\" *ngIf=\"item.link\" href=\"{{ item.link }}\" class=\"grow\">{{ item.text }}</a>\n        <p *ngIf=\"!item.link\" class=\"grow\">{{ item.text }}</p>\n        <p>{{ item.createdAt }}</p>\n    </ng-template>\n</ng-template>\n\n<ng-template #skeleton>\n    <div class=\"flex flex-col gap-2\">\n        <div *ngFor=\"let _ of [].constructor(7)\" class=\"flex items-center gap-2\">\n            <div class=\"tui-skeleton h-6 w-6\"></div>\n            <div class=\"tui-skeleton h-4 w-40\"></div>\n        </div>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.TuiTreeComponent, selector: "tui-tree[value]", inputs: ["value", "trackBy", "content"] }, { kind: "directive", type: i3$2.TuiTreeChildrenDirective, selector: "tui-tree[childrenHandler]", inputs: ["childrenHandler"] }, { kind: "directive", type: i3$2.TuiTreeControllerDirective, selector: "[tuiTreeController][map]", inputs: ["tuiTreeController", "map"], outputs: ["toggled"], exportAs: ["tuiTreeController"] }, { kind: "component", type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "component", type: i3$1.TuiLoaderComponent, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { kind: "component", type: i3$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "directive", type: TreeDirective, selector: "[scTree]", exportAs: ["scTree"] }, { kind: "directive", type: TreeTopDirective, selector: "[scTopNodeText]", inputs: ["scTopNodeText", "scTopNodeIcon", "scTopNodeLink", "scTopNodeChilds", "scTopNodeParent", "scTopNodeDate"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FilesAndDocumentsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-files-and-documents', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: TUI_TREE_LOADER,
+                            useClass: TreeLoaderService,
+                        },
+                    ], template: "<ng-container *ngIf=\"data$ | async as data; else skeleton\">\n    <tui-tree\n        *ngFor=\"let node of data\"\n        #tree=\"scTree\"\n        scTree\n        [scTopNodeText]=\"node.text\"\n        [scTopNodeIcon]=\"node.icon\"\n        [scTopNodeLink]=\"node.link\"\n        [scTopNodeChilds]=\"node.hasChildren\"\n        [scTopNodeParent]=\"node.id\"\n        [scTopNodeDate]=\"node.createdAt\"\n        [childrenHandler]=\"tree.childrenHandler\"\n        [content]=\"content\"\n        [map]=\"tree.map\"\n        [tuiTreeController]=\"false\"\n        [value]=\"tree.service.data$ | async\"\n        (toggled)=\"tree.onToggled($event)\"\n        class=\"overflow-hidden\"\n    ></tui-tree>\n</ng-container>\n\n<ng-template #content let-item>\n    <tui-loader *ngIf=\"item === loading; else text\" class=\"w-8 my-4\"></tui-loader>\n    <ng-template #text>\n        <tui-svg [src]=\"item.icon\" class=\"tui-space_right-2\"></tui-svg>\n        <a tuiLink [pseudo]=\"true\" *ngIf=\"item.link\" href=\"{{ item.link }}\" class=\"grow\">{{ item.text }}</a>\n        <p *ngIf=\"!item.link\" class=\"grow\">{{ item.text }}</p>\n        <p>{{ item.createdAt }}</p>\n    </ng-template>\n</ng-template>\n\n<ng-template #skeleton>\n    <div class=\"flex flex-col gap-2\">\n        <div *ngFor=\"let _ of [].constructor(7)\" class=\"flex items-center gap-2\">\n            <div class=\"tui-skeleton h-6 w-6\"></div>\n            <div class=\"tui-skeleton h-4 w-40\"></div>\n        </div>\n    </div>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_TREE_LOADING]
+                }] }, { type: TreeIconService }, { type: i1.ScFilesService }]; } });
+
+/**
+ * Модуль файлов и документов.
+ */
+class FilesAndDocumentsModule {
+}
+FilesAndDocumentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FilesAndDocumentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FilesAndDocumentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FilesAndDocumentsModule, declarations: [FilesAndDocumentsComponent, TreeDirective, TreeTopDirective, FileTreeItemComponent], imports: [CommonModule, TuiTreeModule, TuiSvgModule, TuiLoaderModule, TuiLinkModule], exports: [FilesAndDocumentsComponent] });
+FilesAndDocumentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FilesAndDocumentsModule, imports: [CommonModule, TuiTreeModule, TuiSvgModule, TuiLoaderModule, TuiLinkModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FilesAndDocumentsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, TuiTreeModule, TuiSvgModule, TuiLoaderModule, TuiLinkModule],
+                    declarations: [FilesAndDocumentsComponent, TreeDirective, TreeTopDirective, FileTreeItemComponent],
+                    exports: [FilesAndDocumentsComponent],
+                }]
+        }] });
+
+/**
+ * Список иконок.
+ * TODO: TASK[#7779] Добавить иконки отдельных значков для соц. сетей после добавления их в кит дизайна.
+ */
+const scClientUiIconsName = [
+    'scIconCalendar',
+    'scIconWordFile',
+    'scIconWarning',
+    'scIconWallet',
+    'scIconViewTree',
+    'scIconMinus',
+    'scIconViewInline',
+    'scIconViewGrid',
+    'scIconVerticalThreeDots',
+    'scIconTop',
+    'scIconTick',
+    'scIconTasks',
+    'scIconSuitcase',
+    'scIconStar',
+    'scIconShare',
+    'scIconSettings',
+    'scIconSend',
+    'scIconSearch',
+    'scIconSave',
+    'scIconRocket',
+    'scIconRequisites',
+    'scIconRepeat',
+    'scIconRefresh',
+    'scIconReclamation',
+    'scIconQuestion',
+    'scIconQRCodeScan',
+    'scIconProfile',
+    'scIconPrice',
+    'scIconPlus',
+    'scIconPhone',
+    'scIconPercentage',
+    'scIconPdfFile',
+    'scIconPalette',
+    'scIconOffer',
+    'scIconNews',
+    'scIconMoney2',
+    'scIconMoney',
+    'scIconMail',
+    'scIconLogOut2',
+    'scIconLogOut',
+    'scIconLogIn',
+    'scIconLockOpen',
+    'scIconLock',
+    'scIconLocation',
+    'scIconList',
+    'scIconLike',
+    'scIconImage',
+    'scIconHome',
+    'scIconHistory',
+    'scIconHeartFill',
+    'scIconHeart',
+    'scIconHamburger',
+    'scIconGraph',
+    'scIconFolderPlus',
+    'scIconFolderOpen',
+    'scIconFolder',
+    'scIconFilter',
+    'scIconFile',
+    'scIconFavoriteFill',
+    'scIconFavorite',
+    'scIconEye',
+    'scIconExcelFile',
+    'scIconError',
+    'scIconEdit',
+    'scIconDownloading',
+    'scIconDone',
+    'scIconDeleteProfile',
+    'scIconCross',
+    'scIconContacts',
+    'scIconConfigurator',
+    'scIconClock',
+    'scIconClip',
+    'scIconClients',
+    'scIconCatalog',
+    'scIconCart',
+    'scIconCancel',
+    'scIconBubble',
+    'scIconBook',
+    'scIconBell',
+    'scIconBasket',
+    'scIconBag',
+    'scIconAttention',
+    'scIconArrowUp',
+    'scIconArrowRight',
+    'scIconArrowReturn',
+    'scIconArrowLeft',
+    'scIconArrowDownLargeEnd',
+    'scIconArrowDownLarge',
+    'scIconArrowDown',
+    'scIconApplication',
+    'scIconAddProfile',
+    'scIconSocialCopy',
+    'scIconSocialEmail',
+    'scIconSocialFacebook',
+    'scIconSocialInstagram',
+    'scIconSocialQR',
+    'scIconSocialTelegram',
+    'scIconSocialViber',
+    'scIconSocialVk',
+    'scIconSocialWhatsapp',
+];
+
+/**
+ * Компонент кнопки "Поделиться".
+ */
+class ScShareButtonComponent {
+    constructor() {
+        /**
+         * Формат внешнего вида кнопки.
+         */
+        this.appearance = 'secondary';
+        /**
+         * Размер кнопки.
+         */
+        this.size = 'm';
+        /**
+         * Событие клика по кнопке "Поделиться".
+         */
+        this.clickShareEvent = new EventEmitter();
+    }
+}
+ScShareButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScShareButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ScShareButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScShareButtonComponent, selector: "sc-share-button", inputs: { appearance: "appearance", size: "size" }, outputs: { clickShareEvent: "clickShareEvent" }, ngImport: i0, template: "<button tuiIconButton icon=\"scIconShare\" [appearance]=\"appearance\" [size]=\"size\" (click)=\"$event.stopPropagation(); clickShareEvent.emit()\"></button>\n", dependencies: [{ kind: "component", type: i3$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScShareButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-share-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button tuiIconButton icon=\"scIconShare\" [appearance]=\"appearance\" [size]=\"size\" (click)=\"$event.stopPropagation(); clickShareEvent.emit()\"></button>\n" }]
+        }], propDecorators: { appearance: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], clickShareEvent: [{
+                type: Output
+            }] } });
+
+/**
+ * Компонент карточки новости.
+ */
+class ScNewsCardComponent {
+    constructor() {
+        /**
+         * Событие клика по карточке новости.
+         */
+        this.clickCardEvent = new EventEmitter();
+        /**
+         * Событие клика по кнопке "Поделиться" карточки новости.
+         */
+        this.clickShareEvent = new EventEmitter();
+    }
+}
+ScNewsCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScNewsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ScNewsCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScNewsCardComponent, selector: "sc-news-card", inputs: { news: "news" }, outputs: { clickCardEvent: "clickCardEvent", clickShareEvent: "clickShareEvent" }, ngImport: i0, template: "<div (click)=\"clickCardEvent.emit(news)\" class=\"block relative h-82 w-70 cursor-pointer shadow-sc-2 rounded-lg overflow-hidden bg-white\">\n    <div [style.background-image]=\"'url(' + news.image + ')'\" class=\"bg-no-repeat bg-center bg-cover bg-tui-base-02 w-full h-50\"></div>\n    <div class=\"px-6 py-4.5 h-32 w-full w-full flex justify-between align-baseline bg-white overflow-hidden\">\n        <div class=\"flex flex-col gap-2.5\">\n            <p class=\"text-sm text-tui-text-02\">{{ news.created_at }}</p>\n            <a class=\"text-sm font-bold text-black line-clamp-3\">{{ news.subject }}</a>\n        </div>\n        <sc-share-button (clickShareEvent)=\"clickShareEvent.emit()\"></sc-share-button>\n    </div>\n</div>\n", dependencies: [{ kind: "component", type: ScShareButtonComponent, selector: "sc-share-button", inputs: ["appearance", "size"], outputs: ["clickShareEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScNewsCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-news-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div (click)=\"clickCardEvent.emit(news)\" class=\"block relative h-82 w-70 cursor-pointer shadow-sc-2 rounded-lg overflow-hidden bg-white\">\n    <div [style.background-image]=\"'url(' + news.image + ')'\" class=\"bg-no-repeat bg-center bg-cover bg-tui-base-02 w-full h-50\"></div>\n    <div class=\"px-6 py-4.5 h-32 w-full w-full flex justify-between align-baseline bg-white overflow-hidden\">\n        <div class=\"flex flex-col gap-2.5\">\n            <p class=\"text-sm text-tui-text-02\">{{ news.created_at }}</p>\n            <a class=\"text-sm font-bold text-black line-clamp-3\">{{ news.subject }}</a>\n        </div>\n        <sc-share-button (clickShareEvent)=\"clickShareEvent.emit()\"></sc-share-button>\n    </div>\n</div>\n" }]
+        }], propDecorators: { news: [{
+                type: Input
+            }], clickCardEvent: [{
+                type: Output
+            }], clickShareEvent: [{
+                type: Output
+            }] } });
+
+/**
+ * Компонент скелетона карточки новости.
+ */
+class ScNewsCardSkeletonComponent {
+    constructor() {
+        /**
+         * Признак, что необходимо отобразить скелетон изображения новости.
+         */
+        this.hasImg = true;
+    }
+}
+ScNewsCardSkeletonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScNewsCardSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ScNewsCardSkeletonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScNewsCardSkeletonComponent, selector: "sc-news-card-skeleton", inputs: { hasImg: "hasImg" }, ngImport: i0, template: "<div class=\"block relative h-82 w-70 shadow-sc-2 rounded-lg overflow-hidden bg-white\">\n    <div *ngIf=\"hasImg; else textBlock\" class=\"bg-tui-base-02 w-full h-50\"></div>\n    <ng-template #textBlock>\n        <div class=\"px-6 py-4.5 w-full flex flex-col gap-2\">\n            <div class=\"h-3 rounded bg-tui-base-02 w-full\"></div>\n            <div class=\"h-3 rounded bg-tui-base-02 w-3/4\"></div>\n            <div class=\"h-3 rounded bg-tui-base-02 w-full\"></div>\n            <div class=\"h-3 rounded bg-tui-base-02 w-3/4\"></div>\n            <div class=\"h-3 rounded bg-tui-base-02 w-full\"></div>\n        </div>\n    </ng-template>\n\n    <div class=\"w-3/4\">\n        <ng-container *ngTemplateOutlet=\"textBlock\"></ng-container>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScNewsCardSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-news-card-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"block relative h-82 w-70 shadow-sc-2 rounded-lg overflow-hidden bg-white\">\n    <div *ngIf=\"hasImg; else textBlock\" class=\"bg-tui-base-02 w-full h-50\"></div>\n    <ng-template #textBlock>\n        <div class=\"px-6 py-4.5 w-full flex flex-col gap-2\">\n            <div class=\"h-3 rounded bg-tui-base-02 w-full\"></div>\n            <div class=\"h-3 rounded bg-tui-base-02 w-3/4\"></div>\n            <div class=\"h-3 rounded bg-tui-base-02 w-full\"></div>\n            <div class=\"h-3 rounded bg-tui-base-02 w-3/4\"></div>\n            <div class=\"h-3 rounded bg-tui-base-02 w-full\"></div>\n        </div>\n    </ng-template>\n\n    <div class=\"w-3/4\">\n        <ng-container *ngTemplateOutlet=\"textBlock\"></ng-container>\n    </div>\n</div>\n" }]
+        }], propDecorators: { hasImg: [{
+                type: Input
+            }] } });
+
+/**
+ * Модуль работы кнопки "Поделиться".
+ */
+class ScShareButtonModule {
+}
+ScShareButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScShareButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ScShareButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: ScShareButtonModule, declarations: [ScShareButtonComponent], imports: [CommonModule, TuiButtonModule], exports: [ScShareButtonComponent] });
+ScShareButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScShareButtonModule, imports: [CommonModule, TuiButtonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScShareButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ScShareButtonComponent],
+                    imports: [CommonModule, TuiButtonModule],
+                    exports: [ScShareButtonComponent],
+                }]
+        }] });
+
+/**
+ * Модуль работы с новостями.
+ */
+class ScNewsModule {
+}
+ScNewsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScNewsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ScNewsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: ScNewsModule, declarations: [ScNewsCardComponent, ScNewsCardSkeletonComponent], imports: [CommonModule, RouterModule, ScShareButtonModule], exports: [ScNewsCardComponent, ScNewsCardSkeletonComponent] });
+ScNewsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScNewsModule, imports: [CommonModule, RouterModule, ScShareButtonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScNewsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ScNewsCardComponent, ScNewsCardSkeletonComponent],
+                    imports: [CommonModule, RouterModule, ScShareButtonModule],
+                    exports: [ScNewsCardComponent, ScNewsCardSkeletonComponent],
+                }]
+        }] });
+
+/**
+ * Компонент карточки элемента заказа.
+ */
+class ScOrderItemMobileComponent {
+    /**
+     * Инициирует экземпляр класса {@link ScOrderItemMobileComponent}.
+     *
+     * @param unitsHelper Объект-хэлпер для работы со значениями единиц измерения товара.
+     * @param previewDialogService Сервис диалогового окна предварительного просмотра.
+     * @param urls Список ссылок на разделы backend'a.
+     * @param pathImageNotFound Путь до изображения 'Товар не найден'.
+     */
+    constructor(unitsHelper, previewDialogService, urls, pathImageNotFound) {
+        this.unitsHelper = unitsHelper;
+        this.previewDialogService = previewDialogService;
+        this.urls = urls;
+        this.pathImageNotFound = pathImageNotFound;
+        /**
+         * Событие нажатия на карточку.
+         */
+        this.clickCardEvent = new EventEmitter();
+        /**
+         * Событие нажатия на дополнительные действия.
+         */
+        this.clickActionsEvent = new EventEmitter();
+    }
+    /**
+     * Продукт элемента заказа.
+     */
+    get product() {
+        return this.orderItem?.product;
+    }
+    /**
+     * Отобразить спецификацию.
+     */
+    showSpecification() {
+        this.previewDialogService.open(this.specificationPreviewRef || '').subscribe();
+    }
+    /**
+     * Возвращает ссылку на изображение карточки товара.
+     */
+    getCardImage() {
+        return this.product?.getImage(this.urls.imgServerUrl) ?? this.urls.imgServerUrl + this.pathImageNotFound;
+    }
+}
+ScOrderItemMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScOrderItemMobileComponent, deps: [{ token: UnitsHelper }, { 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 p-4 gap-y-2 gap-x-4 flex flex-wrap bg-white border border-tui-base-04 shadow-sc-2 rounded-xl\">\n    <ng-container *ngIf=\"orderItem && product; else skeleton\">\n        <button\n            tuiIconButton\n            (click)=\"clickActionsEvent.emit()\"\n            size=\"m\"\n            icon=\"scIconVerticalThreeDots\"\n            appearance=\"float\"\n            tuiMode=\"onLight\"\n            class=\"!hidden !absolute right-0 top-0\"\n        ></button>\n        <div class=\"flex gap-2 grow\">\n            <div class=\"flex shrink-0 h-20 w-20 justify-center items-center overflow-hidden\">\n                <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" [class.p-5]=\"!product.images?.length\" class=\"cursor-pointer\" />\n            </div>\n\n            <div class=\"flex flex-wrap self-center gap-x-8 grow\">\n                <div class=\"basis-min-content flex flex-col grow\">\n                    <a tuiLink (click)=\"clickCardEvent.emit()\">\n                        <span class=\"font-bold\">{{ product.name }}</span>\n                    </a>\n                    <div class=\"text-tui-text-02 text-xs flex flex-col gap-y-0.5\">\n                        <div class=\"flex flex-wrap gap-y-0.5\">\n                            <p class=\"w-40\">\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                            <p class=\"w-40\" *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n                        </div>\n                        <a tuiLink *ngIf=\"orderItem.specificationImgUrl\" (click)=\"showSpecification()\">\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a>\n                    </div>\n                </div>\n                <div class=\"flex flex-wrap content-center\">\n                    <div class=\"flex flex-col w-40 gap-x-8 gap-y-0.5\">\n                        <span *ngIf=\"product.discount\" class=\"flex items-center text-xs text-tui-text-02\">\n                            <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                            <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n                            <ng-template #discountHint>\n                                <div class=\"font-bold\">{{ product.discount.name }}</div>\n                                <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n                            </ng-template>\n                        </span>\n                        <p class=\"flex flex-col items-baseline gap-x-2 font-bold\">\n                            <span>{{ product.costRubString }}</span>\n                            <span *ngIf=\"!product.priceInRub\" class=\"text-xs text-tui-text-02\">{{ product.costString }}</span>\n                        </p>\n                        <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n                    </div>\n\n                    <div class=\"w-40 text-xs text-tui-text-02\">\n                        <ng-container *ngIf=\"unitsHelper.productIsMeasurable(product); else notMeasurable\">\n                            <p>\u0414\u043B\u0438\u043D\u0430: {{ orderItem.length }} {{ product.unit }}</p>\n                        </ng-container>\n                        <ng-template #notMeasurable>\n                            <p *ngIf=\"orderItem.length && !unitsHelper.productIsMeasurable(product)\">\u0414\u043B\u0438\u043D\u0430: {{ orderItem.length }} \u043C.</p>\n                            <p *ngIf=\"orderItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ orderItem.width }} \u043C.</p>\n                            <p *ngIf=\"orderItem.height\">\u0412\u044B\u0441\u043E\u0442\u0430: {{ orderItem.height }} \u043C.</p>\n                        </ng-template>\n                        <p class=\"text-tui-base-09 text-sm\">\n                            \u0421\u0443\u043C\u043C\u0430: <span class=\"font-bold whitespace-nowrap\"> {{ orderItem.getCostRubStr() }} </span>\n                        </p>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-template #skeleton>\n        <div class=\"flex gap-2 w-full\">\n            <div class=\"h-20 w-20 bg-tui-base-02 rounded-xl \"></div>\n            <div class=\"flex flex-col grow gap-2.5 bg-white\">\n                <div class=\"w-full h-4 rounded-xl bg-tui-base-02\"></div>\n                <div class=\"w-3/5 h-4 rounded-xl bg-tui-base-02\"></div>\n                <div class=\"w-4/5 h-4 rounded-xl bg-tui-base-02\"></div>\n            </div>\n        </div>\n    </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: i3$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "directive", type: i3$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint"] }], 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 p-4 gap-y-2 gap-x-4 flex flex-wrap bg-white border border-tui-base-04 shadow-sc-2 rounded-xl\">\n    <ng-container *ngIf=\"orderItem && product; else skeleton\">\n        <button\n            tuiIconButton\n            (click)=\"clickActionsEvent.emit()\"\n            size=\"m\"\n            icon=\"scIconVerticalThreeDots\"\n            appearance=\"float\"\n            tuiMode=\"onLight\"\n            class=\"!hidden !absolute right-0 top-0\"\n        ></button>\n        <div class=\"flex gap-2 grow\">\n            <div class=\"flex shrink-0 h-20 w-20 justify-center items-center overflow-hidden\">\n                <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" [class.p-5]=\"!product.images?.length\" class=\"cursor-pointer\" />\n            </div>\n\n            <div class=\"flex flex-wrap self-center gap-x-8 grow\">\n                <div class=\"basis-min-content flex flex-col grow\">\n                    <a tuiLink (click)=\"clickCardEvent.emit()\">\n                        <span class=\"font-bold\">{{ product.name }}</span>\n                    </a>\n                    <div class=\"text-tui-text-02 text-xs flex flex-col gap-y-0.5\">\n                        <div class=\"flex flex-wrap gap-y-0.5\">\n                            <p class=\"w-40\">\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                            <p class=\"w-40\" *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n                        </div>\n                        <a tuiLink *ngIf=\"orderItem.specificationImgUrl\" (click)=\"showSpecification()\">\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a>\n                    </div>\n                </div>\n                <div class=\"flex flex-wrap content-center\">\n                    <div class=\"flex flex-col w-40 gap-x-8 gap-y-0.5\">\n                        <span *ngIf=\"product.discount\" class=\"flex items-center text-xs text-tui-text-02\">\n                            <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                            <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n                            <ng-template #discountHint>\n                                <div class=\"font-bold\">{{ product.discount.name }}</div>\n                                <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n                            </ng-template>\n                        </span>\n                        <p class=\"flex flex-col items-baseline gap-x-2 font-bold\">\n                            <span>{{ product.costRubString }}</span>\n                            <span *ngIf=\"!product.priceInRub\" class=\"text-xs text-tui-text-02\">{{ product.costString }}</span>\n                        </p>\n                        <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n                    </div>\n\n                    <div class=\"w-40 text-xs text-tui-text-02\">\n                        <ng-container *ngIf=\"unitsHelper.productIsMeasurable(product); else notMeasurable\">\n                            <p>\u0414\u043B\u0438\u043D\u0430: {{ orderItem.length }} {{ product.unit }}</p>\n                        </ng-container>\n                        <ng-template #notMeasurable>\n                            <p *ngIf=\"orderItem.length && !unitsHelper.productIsMeasurable(product)\">\u0414\u043B\u0438\u043D\u0430: {{ orderItem.length }} \u043C.</p>\n                            <p *ngIf=\"orderItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ orderItem.width }} \u043C.</p>\n                            <p *ngIf=\"orderItem.height\">\u0412\u044B\u0441\u043E\u0442\u0430: {{ orderItem.height }} \u043C.</p>\n                        </ng-template>\n                        <p class=\"text-tui-base-09 text-sm\">\n                            \u0421\u0443\u043C\u043C\u0430: <span class=\"font-bold whitespace-nowrap\"> {{ orderItem.getCostRubStr() }} </span>\n                        </p>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-template #skeleton>\n        <div class=\"flex gap-2 w-full\">\n            <div class=\"h-20 w-20 bg-tui-base-02 rounded-xl \"></div>\n            <div class=\"flex flex-col grow gap-2.5 bg-white\">\n                <div class=\"w-full h-4 rounded-xl bg-tui-base-02\"></div>\n                <div class=\"w-3/5 h-4 rounded-xl bg-tui-base-02\"></div>\n                <div class=\"w-4/5 h-4 rounded-xl bg-tui-base-02\"></div>\n            </div>\n        </div>\n    </ng-template>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: UnitsHelper }, { 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']
+            }], orderItem: [{
+                type: Input
+            }], clickCardEvent: [{
+                type: Output
+            }], clickActionsEvent: [{
+                type: Output
+            }] } });
+
+/**
+ * Модуль заказов.
+ */
+class ScOrderModule {
+}
+ScOrderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScOrderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ScOrderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: ScOrderModule, declarations: [ScOrderItemMobileComponent], imports: [CommonModule, TuiLinkModule, TuiButtonModule, TuiModeModule, TuiSvgModule, ScCatalogModule], exports: [ScOrderItemMobileComponent] });
+ScOrderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScOrderModule, imports: [CommonModule, TuiLinkModule, TuiButtonModule, TuiModeModule, TuiSvgModule, ScCatalogModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScOrderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ScOrderItemMobileComponent],
+                    exports: [ScOrderItemMobileComponent],
+                    imports: [CommonModule, TuiLinkModule, TuiButtonModule, TuiModeModule, TuiSvgModule, ScCatalogModule],
+                }]
+        }] });
+
+/*
+ * Public API Surface of ui
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FilesAndDocumentsComponent, FilesAndDocumentsModule, SC_LINEAR_VALUES, SC_LINEAR_VALUES_TOKEN, ScBannerComponent, ScBannerModule, ScCartItemMobileComponent, ScCartModule, ScCatalogModule, ScCategoryCardComponent, ScFavoriteBtnComponent, ScInputQuantityComponent, ScNewsCardComponent, ScNewsCardSkeletonComponent, ScNewsModule, ScOrderItemMobileComponent, ScOrderModule, ScPriceCardComponent, ScPriceHistoryComponent, ScPriceWarehouseStockComponent, ScShareButtonComponent, ScShareButtonModule, TreeDirective, TreeIconService, TreeLoaderService, TreeTopDirective, scClientUiIconsName, stepValidator };
+//# sourceMappingURL=snabcentr-client-ui.mjs.map