@snabcentr/client-ui 0.0.19 → 0.0.21

package/fesm2020/snabcentr-client-ui.mjs

@@ -736,6 +736,14 @@ class ScPriceCardComponent {
         this.warehouseService = warehouseService;
         this.urls = urls;
         this.pathImageNotFound = pathImageNotFound;
+        /**
+         * Признак, что необходимо отобразить лоадер для поля ввода количества товара.
+         */
+        this.quantityShowLoader = false;
+        /**
+         * Признак, что необходимо отобразить поле ввода количества товара.
+         */
+        this.showQuantityControl = false;
         /**
          * Событие нажатия на кнопку "В избранное".
          */
@@ -744,6 +752,10 @@ class ScPriceCardComponent {
          * Событие нажатия на кнопку "В корзину".
          */
         this.clickAddToCartEvent = new EventEmitter();
+        /**
+         * Событие нажатия на кнопку очистки количества товара.
+         */
+        this.clickClearEvent = new EventEmitter();
         /**
          * Событие нажатия на карточку товара.
          */
@@ -752,6 +764,14 @@ class ScPriceCardComponent {
          * {@link Observable} изменения выбранного склада.
          */
         this.warehouseSelect$ = this.warehouseService.getWarehouseSelectChange$();
+        /**
+         * {@link FormControl} поля ввода количества товара в корзине.
+         */
+        this.quantityControl = new FormControl(null);
+        /**
+         * {@link Observable} изменения количества товара в корзине.
+         */
+        this.quantityValueChanges = this.quantityControl.valueChanges;
         /**
          * {@link Observable} изменения статуса авторизации.
          */
@@ -761,19 +781,30 @@ class ScPriceCardComponent {
          */
         this.size = 'm';
     }
+    /**
+     * Позиция товара в корзине.
+     *
+     * 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;
+    }
     /**
      * Признак, что нужно показать скелетон.
      */
     get skeletonVisible() {
         return !this.product;
     }
-    /** @inheritDoc */
-    ngOnInit() {
-        if (this.product?.cartItem) {
-            this.quantityControl = new FormControl(this.product.cartItem.quantity);
-            this.quantityValueChanges = this.quantityControl.valueChanges;
-        }
-    }
     /**
      * Возвращает ссылку на изображение карточки товара.
      */
@@ -782,22 +813,28 @@ class ScPriceCardComponent {
     }
 }
 ScPriceCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceCardComponent, deps: [{ 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: { product: "product", size: "size" }, outputs: { clickFavoriteEvent: "clickFavoriteEvent", clickAddToCartEvent: "clickAddToCartEvent", clickCardEvent: "clickCardEvent", quantityValueChanges: "quantityValueChanges" }, host: { properties: { "attr.data-size": "this.size" } }, ngImport: i0, template: "<div *ngIf=\"product; else skeleton\" class=\"card-wrapper flex flex-col w-40 h-64 bg-tui-base-03 rounded-xl shadow-sc-2 overflow-hidden text-xs\">\n    <!-- \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 -->\n    <div class=\"flex flex-col grow overflow-hidden\">\n        <div class=\"flex justify-center items-center grow overflow-hidden relative\">\n            <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" [class.p-12]=\"!product.images?.length\" class=\"cursor-pointer\" />\n            <tui-svg *ngIf=\"product.cartItem\" src=\"tuiIconCheck\" class=\"!h-5 !w-5 bg-tui-primary text-white rounded-md absolute right-2 top-2\"></tui-svg>\n            <sc-favorite-btn *ngIf=\"authStatus$ | async\" [class.!block]=\"product.isFavorite\" class=\"top-1 left-1 absolute hidden group-hover:block\"></sc-favorite-btn>\n        </div>\n    </div>\n\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=\"bg-white relative shrink-0\">\n        <div class=\"wrapper-info flex flex-col content-between flex-auto justify-between\">\n            <a class=\"name !transition-all !duration-500\" tuiLink iconAlign=\"left\" (click)=\"clickCardEvent.emit()\">\n                <span class=\"font-bold\">{{ product.name }}</span>\n            </a>\n            <div class=\"info text-tui-text-02 overflow-hidden duration-500\">\n                <p *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n                <div class=\"sub-info\">\n                    <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                    <p *ngIf=\"(authStatus$ | async) && product.costDate\" class=\"text-tui-link hover:text-tui-link-hover cursor-pointer\">\u0414\u0430\u0442\u0430: {{ product.costDate }}</p>\n                </div>\n            </div>\n            <div *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"flex flex-col\">\n                <span *ngIf=\"product.discount\" class=\"flex items-center text-tui-text-02\">\n                    <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                    <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n                    <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-xs !h-4\"></tui-svg>\n                    <ng-template #discountHint>\n                        <div class=\"font-bold\">{{ product.discount.name }}</div>\n                        <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n                    </ng-template>\n                </span>\n                <span [class.text-tui-text-02]=\"!product.isWarehouseStockExist(warehouseSelect.id)\" class=\"cost font-bold\">{{ product.costRubString }}</span>\n                <span *ngIf=\"!product.priceInRub\" class=\"text-xs font-bold text-tui-text-02 hidden group-hover:block\">{{ product.costString }}</span>\n                <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n            </div>\n        </div>\n        <div class=\"button-wrapper overflow-hidden duration-500\">\n            <button *ngIf=\"!quantityControl\" tuiButton [size]=\"size\" class=\"w-full\">\n                <span class=\"font-bold\"> <tui-svg src=\"scIconCart\"></tui-svg> \u0412 \u043A\u043E\u0440\u0437\u0438\u043D\u0443</span>\n            </button>\n            <sc-input-quantity\n                *ngIf=\"quantityControl\"\n                [formControl]=\"quantityControl\"\n                [quantityUnit]=\"product.quantityUnit\"\n                [size]=\"size === 'm' ? 'l' : 'm'\"\n                [step]=\"product.minCount || 1\"\n            ></sc-input-quantity>\n        </div>\n        <div *ngIf=\"product.isPreviouslyOrdered\" matTooltip=\"\u0422\u043E\u0432\u0430\u0440 \u0438\u0437 \u0438\u0441\u0442\u043E\u0440\u0438\u0438 \u043F\u043E\u043A\u0443\u043F\u043E\u043A\" class=\"rotate-45 z-10 absolute bg-tui-error-fill -bottom-4 -right-4 h-8 w-8\"></div>\n    </div>\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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i3.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.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i3.TuiHintDriverDirective, selector: "[tuiHint]" }, { kind: "directive", type: i3.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i3.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { kind: "component", type: i3.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: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ScPriceCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScPriceCardComponent, selector: "sc-price-card", inputs: { showQuantityControl: "showQuantityControl", cartItem: "cartItem", product: "product", size: "size" }, outputs: { clickFavoriteEvent: "clickFavoriteEvent", clickAddToCartEvent: "clickAddToCartEvent", clickClearEvent: "clickClearEvent", clickCardEvent: "clickCardEvent", quantityValueChanges: "quantityValueChanges" }, host: { properties: { "attr.data-size": "this.size" } }, ngImport: i0, template: "<div *ngIf=\"product; else skeleton\" class=\"card-wrapper flex flex-col w-40 h-64 bg-tui-base-03 rounded-xl shadow-sc-2 overflow-hidden text-xs\">\n    <!-- \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 -->\n    <div class=\"flex flex-col grow overflow-hidden\">\n        <div class=\"flex justify-center items-center grow overflow-hidden relative\">\n            <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" [class.p-12]=\"!product.images?.length\" class=\"cursor-pointer\" />\n            <tui-svg *ngIf=\"cartItem\" src=\"tuiIconCheck\" class=\"!h-5 !w-5 bg-tui-primary text-white rounded-md absolute right-2 top-2\"></tui-svg>\n            <sc-favorite-btn *ngIf=\"authStatus$ | async\" [class.!block]=\"product.isFavorite\" class=\"top-1 left-1 absolute hidden group-hover:block\"></sc-favorite-btn>\n        </div>\n    </div>\n\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=\"bg-white relative shrink-0\">\n        <div class=\"wrapper-info flex flex-col content-between flex-auto justify-between\">\n            <a class=\"name !transition-all !duration-500\" tuiLink iconAlign=\"left\" (click)=\"clickCardEvent.emit()\">\n                <span class=\"font-bold\">{{ product.name }}</span>\n            </a>\n            <div class=\"info text-tui-text-02 overflow-hidden duration-500\">\n                <p *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n                <div class=\"sub-info\">\n                    <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                    <p *ngIf=\"(authStatus$ | async) && product.costDate\" class=\"text-tui-link hover:text-tui-link-hover cursor-pointer\">\u0414\u0430\u0442\u0430: {{ product.costDate }}</p>\n                </div>\n            </div>\n            <div *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"flex flex-col\">\n                <span *ngIf=\"product.discount\" class=\"flex items-center text-tui-text-02\">\n                    <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                    <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n                    <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-xs !h-4\"></tui-svg>\n                    <ng-template #discountHint>\n                        <div class=\"font-bold\">{{ product.discount.name }}</div>\n                        <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n                    </ng-template>\n                </span>\n                <span [class.text-tui-text-02]=\"!product.isWarehouseStockExist(warehouseSelect.id)\" class=\"cost font-bold\">{{ product.costRubString }}</span>\n                <span *ngIf=\"!product.priceInRub\" class=\"text-xs font-bold text-tui-text-02 hidden group-hover:block\">{{ product.costString }}</span>\n                <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n            </div>\n        </div>\n        <div class=\"button-wrapper overflow-hidden duration-500\">\n            <button *ngIf=\"!showQuantityControl\" tuiButton (click)=\"clickAddToCartEvent.emit(product)\" [showLoader]=\"quantityShowLoader\" [size]=\"size\" class=\"w-full\">\n                <span class=\"font-bold\"> <tui-svg src=\"scIconCart\"></tui-svg> \u0412 \u043A\u043E\u0440\u0437\u0438\u043D\u0443</span>\n            </button>\n            <sc-input-quantity\n                *ngIf=\"showQuantityControl\"\n                [formControl]=\"quantityControl\"\n                [quantityUnit]=\"product.quantityUnit\"\n                [size]=\"size === 'm' ? 'l' : 'm'\"\n                [step]=\"product.minCount || 1\"\n                [showLoader]=\"quantityShowLoader\"\n                (clickClearEvent)=\"clickClearEvent.emit(cartItem)\"\n            ></sc-input-quantity>\n        </div>\n        <div *ngIf=\"product.isPreviouslyOrdered\" matTooltip=\"\u0422\u043E\u0432\u0430\u0440 \u0438\u0437 \u0438\u0441\u0442\u043E\u0440\u0438\u0438 \u043F\u043E\u043A\u0443\u043F\u043E\u043A\" class=\"rotate-45 z-10 absolute bg-tui-error-fill -bottom-4 -right-4 h-8 w-8\"></div>\n    </div>\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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i3.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.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i3.TuiHintDriverDirective, selector: "[tuiHint]" }, { kind: "directive", type: i3.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i3.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { kind: "component", type: i3.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: i2.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: "<div *ngIf=\"product; else skeleton\" class=\"card-wrapper flex flex-col w-40 h-64 bg-tui-base-03 rounded-xl shadow-sc-2 overflow-hidden text-xs\">\n    <!-- \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 -->\n    <div class=\"flex flex-col grow overflow-hidden\">\n        <div class=\"flex justify-center items-center grow overflow-hidden relative\">\n            <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" [class.p-12]=\"!product.images?.length\" class=\"cursor-pointer\" />\n            <tui-svg *ngIf=\"product.cartItem\" src=\"tuiIconCheck\" class=\"!h-5 !w-5 bg-tui-primary text-white rounded-md absolute right-2 top-2\"></tui-svg>\n            <sc-favorite-btn *ngIf=\"authStatus$ | async\" [class.!block]=\"product.isFavorite\" class=\"top-1 left-1 absolute hidden group-hover:block\"></sc-favorite-btn>\n        </div>\n    </div>\n\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=\"bg-white relative shrink-0\">\n        <div class=\"wrapper-info flex flex-col content-between flex-auto justify-between\">\n            <a class=\"name !transition-all !duration-500\" tuiLink iconAlign=\"left\" (click)=\"clickCardEvent.emit()\">\n                <span class=\"font-bold\">{{ product.name }}</span>\n            </a>\n            <div class=\"info text-tui-text-02 overflow-hidden duration-500\">\n                <p *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n                <div class=\"sub-info\">\n                    <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                    <p *ngIf=\"(authStatus$ | async) && product.costDate\" class=\"text-tui-link hover:text-tui-link-hover cursor-pointer\">\u0414\u0430\u0442\u0430: {{ product.costDate }}</p>\n                </div>\n            </div>\n            <div *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"flex flex-col\">\n                <span *ngIf=\"product.discount\" class=\"flex items-center text-tui-text-02\">\n                    <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                    <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n                    <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-xs !h-4\"></tui-svg>\n                    <ng-template #discountHint>\n                        <div class=\"font-bold\">{{ product.discount.name }}</div>\n                        <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n                    </ng-template>\n                </span>\n                <span [class.text-tui-text-02]=\"!product.isWarehouseStockExist(warehouseSelect.id)\" class=\"cost font-bold\">{{ product.costRubString }}</span>\n                <span *ngIf=\"!product.priceInRub\" class=\"text-xs font-bold text-tui-text-02 hidden group-hover:block\">{{ product.costString }}</span>\n                <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n            </div>\n        </div>\n        <div class=\"button-wrapper overflow-hidden duration-500\">\n            <button *ngIf=\"!quantityControl\" tuiButton [size]=\"size\" class=\"w-full\">\n                <span class=\"font-bold\"> <tui-svg src=\"scIconCart\"></tui-svg> \u0412 \u043A\u043E\u0440\u0437\u0438\u043D\u0443</span>\n            </button>\n            <sc-input-quantity\n                *ngIf=\"quantityControl\"\n                [formControl]=\"quantityControl\"\n                [quantityUnit]=\"product.quantityUnit\"\n                [size]=\"size === 'm' ? 'l' : 'm'\"\n                [step]=\"product.minCount || 1\"\n            ></sc-input-quantity>\n        </div>\n        <div *ngIf=\"product.isPreviouslyOrdered\" matTooltip=\"\u0422\u043E\u0432\u0430\u0440 \u0438\u0437 \u0438\u0441\u0442\u043E\u0440\u0438\u0438 \u043F\u043E\u043A\u0443\u043F\u043E\u043A\" class=\"rotate-45 z-10 absolute bg-tui-error-fill -bottom-4 -right-4 h-8 w-8\"></div>\n    </div>\n</div>\n\n<ng-template #skeleton>\n    <div class=\"flex flex-col card-wrapper bg-white rounded-xl overflow-hidden shadow-sc-1\">\n        <!-- \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 -->\n        <div class=\"w-full h-3/5 rounded-t bg-tui-base-02\"></div>\n        <!-- \u041A\u0440\u0430\u0442\u043A\u0430\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F \u043E \u0442\u043E\u0432\u0430\u0440\u0435 -->\n        <div class=\"flex flex-col grow gap-2.5 bg-white rounded-b p-5\">\n            <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n            <div class=\"w-3/5 h-4 rounded bg-tui-base-02\"></div>\n            <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n        </div>\n    </div>\n</ng-template>\n", styles: [":host[data-size=s] .card-wrapper{width:10rem;height:16rem}:host[data-size=s] .card-wrapper .wrapper-info{padding:8px}:host[data-size=s] .card-wrapper .wrapper-info .cost{font-size:.875rem;line-height:1.25rem}:host[data-size=s] .card-wrapper .button-wrapper tui-svg{font-size:.75rem;line-height:1rem;width:1rem}:host[data-size=m] .card-wrapper{width:12.5rem;height:20rem}:host[data-size=m] .card-wrapper .wrapper-info{padding-inline:16px;padding-block:8px}:host[data-size=m] .card-wrapper .name{font-size:.875rem;line-height:1.25rem;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:3rem}:host[data-size=m] .card-wrapper .info{max-height:1rem}:host[data-size=m] .card-wrapper .cost{font-size:1.125rem;line-height:1.75rem}:host[data-size=m] .card-wrapper .button-wrapper{max-height:0px;font-size:.75rem;line-height:1rem}:host[data-size=m] .card-wrapper:hover .name{-webkit-line-clamp:unset;max-height:6rem}:host[data-size=m] .card-wrapper:hover .info{max-height:3rem}:host[data-size=m] .card-wrapper:hover .button-wrapper{max-height:3rem}\n"] }]
+            args: [{ selector: 'sc-price-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"product; else skeleton\" class=\"card-wrapper flex flex-col w-40 h-64 bg-tui-base-03 rounded-xl shadow-sc-2 overflow-hidden text-xs\">\n    <!-- \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 -->\n    <div class=\"flex flex-col grow overflow-hidden\">\n        <div class=\"flex justify-center items-center grow overflow-hidden relative\">\n            <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" [class.p-12]=\"!product.images?.length\" class=\"cursor-pointer\" />\n            <tui-svg *ngIf=\"cartItem\" src=\"tuiIconCheck\" class=\"!h-5 !w-5 bg-tui-primary text-white rounded-md absolute right-2 top-2\"></tui-svg>\n            <sc-favorite-btn *ngIf=\"authStatus$ | async\" [class.!block]=\"product.isFavorite\" class=\"top-1 left-1 absolute hidden group-hover:block\"></sc-favorite-btn>\n        </div>\n    </div>\n\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=\"bg-white relative shrink-0\">\n        <div class=\"wrapper-info flex flex-col content-between flex-auto justify-between\">\n            <a class=\"name !transition-all !duration-500\" tuiLink iconAlign=\"left\" (click)=\"clickCardEvent.emit()\">\n                <span class=\"font-bold\">{{ product.name }}</span>\n            </a>\n            <div class=\"info text-tui-text-02 overflow-hidden duration-500\">\n                <p *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n                <div class=\"sub-info\">\n                    <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                    <p *ngIf=\"(authStatus$ | async) && product.costDate\" class=\"text-tui-link hover:text-tui-link-hover cursor-pointer\">\u0414\u0430\u0442\u0430: {{ product.costDate }}</p>\n                </div>\n            </div>\n            <div *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"flex flex-col\">\n                <span *ngIf=\"product.discount\" class=\"flex items-center text-tui-text-02\">\n                    <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                    <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n                    <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-xs !h-4\"></tui-svg>\n                    <ng-template #discountHint>\n                        <div class=\"font-bold\">{{ product.discount.name }}</div>\n                        <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n                    </ng-template>\n                </span>\n                <span [class.text-tui-text-02]=\"!product.isWarehouseStockExist(warehouseSelect.id)\" class=\"cost font-bold\">{{ product.costRubString }}</span>\n                <span *ngIf=\"!product.priceInRub\" class=\"text-xs font-bold text-tui-text-02 hidden group-hover:block\">{{ product.costString }}</span>\n                <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n            </div>\n        </div>\n        <div class=\"button-wrapper overflow-hidden duration-500\">\n            <button *ngIf=\"!showQuantityControl\" tuiButton (click)=\"clickAddToCartEvent.emit(product)\" [showLoader]=\"quantityShowLoader\" [size]=\"size\" class=\"w-full\">\n                <span class=\"font-bold\"> <tui-svg src=\"scIconCart\"></tui-svg> \u0412 \u043A\u043E\u0440\u0437\u0438\u043D\u0443</span>\n            </button>\n            <sc-input-quantity\n                *ngIf=\"showQuantityControl\"\n                [formControl]=\"quantityControl\"\n                [quantityUnit]=\"product.quantityUnit\"\n                [size]=\"size === 'm' ? 'l' : 'm'\"\n                [step]=\"product.minCount || 1\"\n                [showLoader]=\"quantityShowLoader\"\n                (clickClearEvent)=\"clickClearEvent.emit(cartItem)\"\n            ></sc-input-quantity>\n        </div>\n        <div *ngIf=\"product.isPreviouslyOrdered\" matTooltip=\"\u0422\u043E\u0432\u0430\u0440 \u0438\u0437 \u0438\u0441\u0442\u043E\u0440\u0438\u0438 \u043F\u043E\u043A\u0443\u043F\u043E\u043A\" class=\"rotate-45 z-10 absolute bg-tui-error-fill -bottom-4 -right-4 h-8 w-8\"></div>\n    </div>\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: 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: { product: [{
+                }] }]; }, propDecorators: { showQuantityControl: [{
+                type: Input
+            }], cartItem: [{
+                type: Input
+            }], product: [{
                 type: Input
             }], clickFavoriteEvent: [{
                 type: Output
             }], clickAddToCartEvent: [{
                 type: Output
+            }], clickClearEvent: [{
+                type: Output
             }], clickCardEvent: [{
                 type: Output
             }], quantityValueChanges: [{
@@ -1208,6 +1245,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 
 /**
  * Список иконок.
+ * TODO: TASK[#7779] Добавить иконки отдельных значков для соц. сетей после добавления их в кит дизайна.
  */
 const scClientUiIconsName = [
     'scIconCalendar',
@@ -1301,20 +1339,48 @@ const scClientUiIconsName = [
     'scIconArrowDown',
     'scIconApplication',
     'scIconAddProfile',
+    'scIconSocialCopy',
+    'scIconSocialEmail',
+    'scIconSocialFacebook',
+    'scIconSocialInstagram',
+    'scIconSocialQR',
+    'scIconSocialTelegram',
+    'scIconSocialViber',
+    'scIconSocialVk',
+    'scIconSocialWhatsapp',
 ];
 
 /**
  * Компонент кнопки "Поделиться".
  */
-/* TODO: TASK[#6895] Реализовать логику компонента кнопки "Поделиться".*/
 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", ngImport: i0, template: "<!--TODO: TASK[#6895] \u0420\u0435\u0430\u043B\u0438\u0437\u043E\u0432\u0430\u0442\u044C \u0448\u0430\u0431\u043B\u043E\u043D \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430 \u043A\u043D\u043E\u043F\u043A\u0438 \"\u041F\u043E\u0434\u0435\u043B\u0438\u0442\u044C\u0441\u044F\".-->\n<svg width=\"20\" height=\"22\" viewBox=\"0 0 20 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M15.5 15.6673C14.5335 15.6673 13.75 16.4508 13.75 17.4173C13.75 18.3838 14.5335 19.1673 15.5 19.1673C16.4665 19.1673 17.25 18.3838 17.25 17.4173C17.25 16.4508 16.4665 15.6673 15.5 15.6673ZM11.75 17.4173C11.75 15.3462 13.4289 13.6673 15.5 13.6673C17.5711 13.6673 19.25 15.3462 19.25 17.4173C19.25 19.4884 17.5711 21.1673 15.5 21.1673C13.4289 21.1673 11.75 19.4884 11.75 17.4173Z\"\n        fill=\"#1E50C8\"\n    />\n    <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M4.5 9.25065C3.5335 9.25065 2.75 10.0342 2.75 11.0007C2.75 11.9671 3.5335 12.7507 4.5 12.7507C5.4665 12.7507 6.25 11.9671 6.25 11.0007C6.25 10.0342 5.4665 9.25065 4.5 9.25065ZM0.75 11.0007C0.75 8.92958 2.42893 7.25065 4.5 7.25065C6.57107 7.25065 8.25 8.92958 8.25 11.0007C8.25 13.0717 6.57107 14.7507 4.5 14.7507C2.42893 14.7507 0.75 13.0717 0.75 11.0007Z\"\n        fill=\"#1E50C8\"\n    />\n    <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M6.01016 11.8813C6.28822 11.4042 6.90047 11.2427 7.37764 11.5208L13.6385 15.1691C14.1157 15.4472 14.2771 16.0595 13.999 16.5366C13.7209 17.0138 13.1087 17.1752 12.6315 16.8972L6.37069 13.2488C5.89351 12.9708 5.7321 12.3585 6.01016 11.8813Z\"\n        fill=\"#1E50C8\"\n    />\n    <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M15.5 2.83398C14.5335 2.83398 13.75 3.61749 13.75 4.58398C13.75 5.55048 14.5335 6.33398 15.5 6.33398C16.4665 6.33398 17.25 5.55048 17.25 4.58398C17.25 3.61749 16.4665 2.83398 15.5 2.83398ZM11.75 4.58398C11.75 2.51292 13.4289 0.833984 15.5 0.833984C17.5711 0.833984 19.25 2.51292 19.25 4.58398C19.25 6.65505 17.5711 8.33398 15.5 8.33398C13.4289 8.33398 11.75 6.65505 11.75 4.58398Z\"\n        fill=\"#1E50C8\"\n    />\n    <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M13.9895 5.46412C14.2679 5.94112 14.1069 6.55347 13.6299 6.83184L7.37819 10.4802C6.90119 10.7585 6.28885 10.5975 6.01048 10.1205C5.73211 9.64351 5.89314 9.03116 6.37014 8.7528L12.6218 5.10446C13.0988 4.8261 13.7112 4.98712 13.9895 5.46412Z\"\n        fill=\"#1E50C8\"\n    />\n</svg>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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)=\"clickShareEvent.emit()\"></button>\n", dependencies: [{ kind: "component", type: i3.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: "<!--TODO: TASK[#6895] \u0420\u0435\u0430\u043B\u0438\u0437\u043E\u0432\u0430\u0442\u044C \u0448\u0430\u0431\u043B\u043E\u043D \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430 \u043A\u043D\u043E\u043F\u043A\u0438 \"\u041F\u043E\u0434\u0435\u043B\u0438\u0442\u044C\u0441\u044F\".-->\n<svg width=\"20\" height=\"22\" viewBox=\"0 0 20 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M15.5 15.6673C14.5335 15.6673 13.75 16.4508 13.75 17.4173C13.75 18.3838 14.5335 19.1673 15.5 19.1673C16.4665 19.1673 17.25 18.3838 17.25 17.4173C17.25 16.4508 16.4665 15.6673 15.5 15.6673ZM11.75 17.4173C11.75 15.3462 13.4289 13.6673 15.5 13.6673C17.5711 13.6673 19.25 15.3462 19.25 17.4173C19.25 19.4884 17.5711 21.1673 15.5 21.1673C13.4289 21.1673 11.75 19.4884 11.75 17.4173Z\"\n        fill=\"#1E50C8\"\n    />\n    <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M4.5 9.25065C3.5335 9.25065 2.75 10.0342 2.75 11.0007C2.75 11.9671 3.5335 12.7507 4.5 12.7507C5.4665 12.7507 6.25 11.9671 6.25 11.0007C6.25 10.0342 5.4665 9.25065 4.5 9.25065ZM0.75 11.0007C0.75 8.92958 2.42893 7.25065 4.5 7.25065C6.57107 7.25065 8.25 8.92958 8.25 11.0007C8.25 13.0717 6.57107 14.7507 4.5 14.7507C2.42893 14.7507 0.75 13.0717 0.75 11.0007Z\"\n        fill=\"#1E50C8\"\n    />\n    <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M6.01016 11.8813C6.28822 11.4042 6.90047 11.2427 7.37764 11.5208L13.6385 15.1691C14.1157 15.4472 14.2771 16.0595 13.999 16.5366C13.7209 17.0138 13.1087 17.1752 12.6315 16.8972L6.37069 13.2488C5.89351 12.9708 5.7321 12.3585 6.01016 11.8813Z\"\n        fill=\"#1E50C8\"\n    />\n    <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M15.5 2.83398C14.5335 2.83398 13.75 3.61749 13.75 4.58398C13.75 5.55048 14.5335 6.33398 15.5 6.33398C16.4665 6.33398 17.25 5.55048 17.25 4.58398C17.25 3.61749 16.4665 2.83398 15.5 2.83398ZM11.75 4.58398C11.75 2.51292 13.4289 0.833984 15.5 0.833984C17.5711 0.833984 19.25 2.51292 19.25 4.58398C19.25 6.65505 17.5711 8.33398 15.5 8.33398C13.4289 8.33398 11.75 6.65505 11.75 4.58398Z\"\n        fill=\"#1E50C8\"\n    />\n    <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M13.9895 5.46412C14.2679 5.94112 14.1069 6.55347 13.6299 6.83184L7.37819 10.4802C6.90119 10.7585 6.28885 10.5975 6.01048 10.1205C5.73211 9.64351 5.89314 9.03116 6.37014 8.7528L12.6218 5.10446C13.0988 4.8261 13.7112 4.98712 13.9895 5.46412Z\"\n        fill=\"#1E50C8\"\n    />\n</svg>\n" }]
-        }] });
+            args: [{ selector: 'sc-share-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button tuiIconButton icon=\"scIconShare\" [appearance]=\"appearance\" [size]=\"size\" (click)=\"clickShareEvent.emit()\"></button>\n" }]
+        }], propDecorators: { appearance: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], clickShareEvent: [{
+                type: Output
+            }] } });
 
 /**
  * Компонент карточки новости.
@@ -1325,17 +1391,23 @@ class ScNewsCardComponent {
          * Событие клика по карточке новости.
          */
         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" }, 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 bg-white overflow-hidden\">\n        <div class=\"w-full flex justify-between align-baseline mb-2.5\">\n            <p class=\"text-sm text-tui-text-02\">{{ news.created_at }}</p>\n            <sc-share-button></sc-share-button>\n        </div>\n        <p>\n            <a class=\"text-sm font-bold text-black line-clamp-3\">{{ news.subject }}</a>\n        </p>\n    </div>\n</div>\n", dependencies: [{ kind: "component", type: ScShareButtonComponent, selector: "sc-share-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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 bg-white overflow-hidden\">\n        <div class=\"w-full flex justify-between align-baseline mb-2.5\">\n            <p class=\"text-sm text-tui-text-02\">{{ news.created_at }}</p>\n            <sc-share-button (clickShareEvent)=\"clickShareEvent.emit()\"></sc-share-button>\n        </div>\n        <p>\n            <a class=\"text-sm font-bold text-black line-clamp-3\">{{ news.subject }}</a>\n        </p>\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 bg-white overflow-hidden\">\n        <div class=\"w-full flex justify-between align-baseline mb-2.5\">\n            <p class=\"text-sm text-tui-text-02\">{{ news.created_at }}</p>\n            <sc-share-button></sc-share-button>\n        </div>\n        <p>\n            <a class=\"text-sm font-bold text-black line-clamp-3\">{{ news.subject }}</a>\n        </p>\n    </div>\n</div>\n" }]
+            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 bg-white overflow-hidden\">\n        <div class=\"w-full flex justify-between align-baseline mb-2.5\">\n            <p class=\"text-sm text-tui-text-02\">{{ news.created_at }}</p>\n            <sc-share-button (clickShareEvent)=\"clickShareEvent.emit()\"></sc-share-button>\n        </div>\n        <p>\n            <a class=\"text-sm font-bold text-black line-clamp-3\">{{ news.subject }}</a>\n        </p>\n    </div>\n</div>\n" }]
         }], propDecorators: { news: [{
                 type: Input
             }], clickCardEvent: [{
                 type: Output
+            }], clickShareEvent: [{
+                type: Output
             }] } });
 
 /**
@@ -1364,13 +1436,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 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], exports: [ScShareButtonComponent] });
-ScShareButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScShareButtonModule, imports: [CommonModule] });
+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],
+                    imports: [CommonModule, TuiButtonModule],
                     exports: [ScShareButtonComponent],
                 }]
         }] });