@snabcentr/client-ui 0.3.4 → 0.4.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -808,14 +808,16 @@ class ScPriceCardComponent {
808
808
  * @param warehouseService Сервис для работы со складами.
809
809
  * @param urls Список ссылок на разделы backend'a.
810
810
  * @param pathImageNotFound Путь до изображения 'Товар не найден'.
811
+ * @param imageHelper Хелпер для работы с изображениями товара.
811
812
  */
812
- constructor(unitsHelper, authService, warehouseService, urls, pathImageNotFound, cdr) {
813
+ constructor(unitsHelper, authService, warehouseService, urls, pathImageNotFound, cdr, imageHelper) {
813
814
  this.unitsHelper = unitsHelper;
814
815
  this.authService = authService;
815
816
  this.warehouseService = warehouseService;
816
817
  this.urls = urls;
817
818
  this.pathImageNotFound = pathImageNotFound;
818
819
  this.cdr = cdr;
820
+ this.imageHelper = imageHelper;
819
821
  /**
820
822
  * Признак, что необходимо отобразить лоадер для поля ввода количества товара.
821
823
  */
@@ -897,10 +899,10 @@ class ScPriceCardComponent {
897
899
  return !this.product;
898
900
  }
899
901
  /**
900
- * Возвращает ссылку на изображение карточки товара.
902
+ * Возвращает ссылку на preview-изображение карточки товара.
901
903
  */
902
- getCardImage() {
903
- return this.product?.getImage(this.urls.imgServerUrl) ?? this.pathImageNotFound;
904
+ getCardImagePreview() {
905
+ return this.product ? this.imageHelper.getImagePreview(this.product) : this.pathImageNotFound;
904
906
  }
905
907
  /**
906
908
  * Устанавливает компонент в очередь на обновление.
@@ -909,18 +911,18 @@ class ScPriceCardComponent {
909
911
  this.cdr.markForCheck();
910
912
  }
911
913
  }
912
- ScPriceCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceCardComponent, deps: [{ token: UnitsHelper }, { token: i1.ScAuthService }, { token: i1.ScWarehouseService }, { token: SC_URLS }, { token: SC_PATH_IMAGE_NOT_FOUND }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
913
- ScPriceCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScPriceCardComponent, selector: "sc-price-card", inputs: { showQuantityControl: "showQuantityControl", cartItem: "cartItem", product: "product", size: "size" }, outputs: { clickFavoriteEvent: "clickFavoriteEvent", clickAddToCartEvent: "clickAddToCartEvent", clickClearEvent: "clickClearEvent", clickCardEvent: "clickCardEvent", quantityValueChanges: "quantityValueChanges" }, host: { properties: { "attr.data-size": "this.size" } }, ngImport: i0, template: "<!-- TODO: \u0440\u0435\u0430\u043B\u0438\u0437\u043E\u0432\u0430\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u0438 \u0434\u043B\u044F \u0434\u0435\u0441\u043A\u0442\u043E\u043F\u0430 \u0438 \u0434\u043B\u044F \u043C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0433\u043E \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u044F. \u0418\u0441\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u0432\u0441\u0435 \u0433\u043B\u043E\u0431\u0430\u043B\u044C\u043D\u044B\u0435 \u0442\u0430\u0439\u0433\u043E\u0432\u0441\u043A\u0438\u0435 \u0441\u0442\u0438\u043B\u0438, \u043F\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u0438\u0445 \u0432 \u043F\u043E\u0440\u044F\u0434\u043E\u043A \u0441\u043E\u0433\u043B\u0430\u0441\u043D\u043E \u0441 \u0434\u0438\u0437\u0430\u0439\u043D\u043E\u043C. -->\n<div *ngIf=\"product; else skeleton\" class=\"min-w-[10rem] shadow-md w-auto rounded-xl p-2 grid h-[19rem] text-xs relative\">\n <div class=\"overflow-hidden\">\n <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" class=\"rounded-xl w-full max-h-full object-cover\" />\n </div>\n <sc-favorite-btn\n *ngIf=\"authStatus$ | async\"\n class=\"top-0 left-0 absolute\"\n (clickEvent)=\"clickFavoriteEvent.emit()\"\n [showLoader]=\"favoriteShowLoader\"\n [isFavorite]=\"product.isFavorite\"\n [disabled]=\"!!product.primaryCategory?.isFavorite\"\n ></sc-favorite-btn>\n <tui-svg *ngIf=\"product.isPreviouslyOrdered\" src=\"scIconStar\" class=\"top-0 right-0 absolute text-red-700\"></tui-svg>\n\n <a class=\"p-0 m-0\" tuiLink iconAlign=\"left\" (click)=\"clickCardEvent.emit()\">\n <p class=\"font-bold text-sm line-clamp-3\" style=\"word-break: break-word;\">{{ product.name }}</p>\n </a>\n <p *ngIf=\"product?.pack\" class=\"text-tui-text-02\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n\n <p class=\"text-tui-text-02\">\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n <p *ngIf=\"(authStatus$ | async) && product?.costDate\" class=\"text-tui-text-02\">\u0414\u0430\u0442\u0430: {{ product.costDate }}</p>\n <div *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"flex flex-col\">\n <span *ngIf=\"product.discount\" class=\"flex items-center text-tui-text-02\">\n <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-xs !h-4\"></tui-svg>\n <ng-template #discountHint>\n <div class=\"font-bold\">{{ product.discount.name }}</div>\n <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n </ng-template>\n </span>\n <span [class.text-tui-text-02]=\"!product.isWarehouseStockExist(warehouseSelect.id)\" class=\"cost font-bold\">{{ product.costRubString }}</span>\n <span *ngIf=\"!product.priceInRub\" class=\"text-xs font-bold text-tui-text-02 hidden group-hover:block\">{{ product.costString }}</span>\n <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n </div>\n <div *ngIf=\"!showQuantityControl\" class=\"flex gap-2 max-w-full items-center justify-stretch mt-1\">\n <button tuiButton (click)=\"clickAddToCartEvent.emit(product)\" [showLoader]=\"quantityShowLoader\" [size]=\"size\" class=\"grow\">\n <tui-svg src=\"scIconCart\" class=\"!text-xs !h-4\"> </tui-svg>\n \u0412 \u043A\u043E\u0440\u0437\u0438\u043D\u0443\n </button>\n <div *ngIf=\"cartItem\" class=\"flex justify-center\">\n <tui-svg src=\"tuiIconCheck\" class=\"!h-5 !w-5 bg-tui-primary text-black rounded-md\"></tui-svg>\n </div>\n </div>\n <sc-input-quantity\n #inputQuantity\n *ngIf=\"showQuantityControl\"\n [formControl]=\"quantityControl\"\n [quantityUnit]=\"product.quantityUnit\"\n [size]=\"getQuantitySize\"\n [step]=\"unitsHelper.productMultiplicity(product)\"\n [showLoader]=\"quantityShowLoader\"\n (clickClearEvent)=\"clickClearEvent.emit(cartItem)\"\n class=\"w-full\"\n (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n ></sc-input-quantity>\n</div>\n\n<ng-template #skeleton>\n <div class=\"flex flex-col card-wrapper bg-white rounded-xl overflow-hidden shadow-sc-1\">\n <!-- \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 -->\n <div class=\"w-full h-3/5 rounded-t bg-tui-base-02\"></div>\n <!-- \u041A\u0440\u0430\u0442\u043A\u0430\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F \u043E \u0442\u043E\u0432\u0430\u0440\u0435 -->\n <div class=\"flex flex-col grow gap-2.5 bg-white rounded-b p-5\">\n <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n <div class=\"w-3/5 h-4 rounded bg-tui-base-02\"></div>\n <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n </div>\n </div>\n</ng-template>\n", styles: [":host[data-size=s] .card-wrapper{width:10rem;height:16rem}:host[data-size=s] .card-wrapper .wrapper-info{padding:8px}:host[data-size=s] .card-wrapper .wrapper-info .cost{font-size:.875rem;line-height:1.25rem}:host[data-size=s] .card-wrapper .button-wrapper tui-svg{font-size:.75rem;line-height:1rem;width:1rem}:host[data-size=m] .card-wrapper{width:12.5rem;height:20rem}:host[data-size=m] .card-wrapper .wrapper-info{padding-inline:16px;padding-block:8px}:host[data-size=m] .card-wrapper .name{font-size:.875rem;line-height:1.25rem;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:3rem}:host[data-size=m] .card-wrapper .info{max-height:1rem}:host[data-size=m] .card-wrapper .cost{font-size:1.125rem;line-height:1.75rem}:host[data-size=m] .card-wrapper .button-wrapper{max-height:0px;font-size:.75rem;line-height:1rem}:host[data-size=m] .card-wrapper:hover .name{-webkit-line-clamp:unset;max-height:6rem}:host[data-size=m] .card-wrapper:hover .info{max-height:3rem}:host[data-size=m] .card-wrapper:hover .button-wrapper{max-height:3rem}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i3$1.TuiHintDriverDirective, selector: "[tuiHint]" }, { kind: "directive", type: i3$1.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i3$1.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { kind: "component", type: i3$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: ScFavoriteBtnComponent, selector: "sc-favorite-btn", inputs: ["isFavorite", "showLoader", "disabled"], outputs: ["clickEvent"] }, { kind: "component", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: ["step", "quantityUnit", "showLoader", "showCross", "appearance", "isDisabled", "size"], outputs: ["clickClearEvent"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint", "fromMain"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
914
+ ScPriceCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceCardComponent, deps: [{ token: UnitsHelper }, { token: i1.ScAuthService }, { token: i1.ScWarehouseService }, { token: SC_URLS }, { token: SC_PATH_IMAGE_NOT_FOUND }, { token: i0.ChangeDetectorRef }, { token: i1.ScImageHelper }], target: i0.ɵɵFactoryTarget.Component });
915
+ ScPriceCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScPriceCardComponent, selector: "sc-price-card", inputs: { showQuantityControl: "showQuantityControl", cartItem: "cartItem", product: "product", size: "size" }, outputs: { clickFavoriteEvent: "clickFavoriteEvent", clickAddToCartEvent: "clickAddToCartEvent", clickClearEvent: "clickClearEvent", clickCardEvent: "clickCardEvent", quantityValueChanges: "quantityValueChanges" }, host: { properties: { "attr.data-size": "this.size" } }, ngImport: i0, template: "<!-- TODO: \u0440\u0435\u0430\u043B\u0438\u0437\u043E\u0432\u0430\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u0438 \u0434\u043B\u044F \u0434\u0435\u0441\u043A\u0442\u043E\u043F\u0430 \u0438 \u0434\u043B\u044F \u043C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0433\u043E \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u044F. \u0418\u0441\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u0432\u0441\u0435 \u0433\u043B\u043E\u0431\u0430\u043B\u044C\u043D\u044B\u0435 \u0442\u0430\u0439\u0433\u043E\u0432\u0441\u043A\u0438\u0435 \u0441\u0442\u0438\u043B\u0438, \u043F\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u0438\u0445 \u0432 \u043F\u043E\u0440\u044F\u0434\u043E\u043A \u0441\u043E\u0433\u043B\u0430\u0441\u043D\u043E \u0441 \u0434\u0438\u0437\u0430\u0439\u043D\u043E\u043C. -->\n<div *ngIf=\"product; else skeleton\" class=\"min-w-[10rem] shadow-md w-auto rounded-xl p-2 grid h-[19rem] text-xs relative\">\n <div class=\"overflow-hidden\">\n <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImagePreview()\" [alt]=\"product.name\" class=\"rounded-xl w-full max-h-full object-cover\" />\n </div>\n <sc-favorite-btn\n *ngIf=\"authStatus$ | async\"\n class=\"top-0 left-0 absolute\"\n (clickEvent)=\"clickFavoriteEvent.emit()\"\n [showLoader]=\"favoriteShowLoader\"\n [isFavorite]=\"product.isFavorite\"\n [disabled]=\"!!product.primaryCategory?.isFavorite\"\n ></sc-favorite-btn>\n <tui-svg *ngIf=\"product.isPreviouslyOrdered\" src=\"scIconStar\" class=\"top-0 right-0 absolute text-red-700\"></tui-svg>\n\n <a class=\"p-0 m-0\" tuiLink iconAlign=\"left\" (click)=\"clickCardEvent.emit()\">\n <p class=\"font-bold text-sm line-clamp-3\" style=\"word-break: break-word;\">{{ product.name }}</p>\n </a>\n <p *ngIf=\"product?.pack\" class=\"text-tui-text-02\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n\n <p class=\"text-tui-text-02\">\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n <p *ngIf=\"(authStatus$ | async) && product?.costDate\" class=\"text-tui-text-02\">\u0414\u0430\u0442\u0430: {{ product.costDate }}</p>\n <div *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"flex flex-col\">\n <span *ngIf=\"product.discount\" class=\"flex items-center text-tui-text-02\">\n <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-xs !h-4\"></tui-svg>\n <ng-template #discountHint>\n <div class=\"font-bold\">{{ product.discount.name }}</div>\n <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n </ng-template>\n </span>\n <span [class.text-tui-text-02]=\"!product.isWarehouseStockExist(warehouseSelect.id)\" class=\"cost font-bold\">{{ product.costRubString }}</span>\n <span *ngIf=\"!product.priceInRub\" class=\"text-xs font-bold text-tui-text-02 hidden group-hover:block\">{{ product.costString }}</span>\n <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n </div>\n <div *ngIf=\"!showQuantityControl\" class=\"flex gap-2 max-w-full items-center justify-stretch mt-1\">\n <button tuiButton (click)=\"clickAddToCartEvent.emit(product)\" [showLoader]=\"quantityShowLoader\" [size]=\"size\" class=\"grow\">\n <tui-svg src=\"scIconCart\" class=\"!text-xs !h-4\"> </tui-svg>\n \u0412 \u043A\u043E\u0440\u0437\u0438\u043D\u0443\n </button>\n <div *ngIf=\"cartItem\" class=\"flex justify-center\">\n <tui-svg src=\"tuiIconCheck\" class=\"!h-5 !w-5 bg-tui-primary text-black rounded-md\"></tui-svg>\n </div>\n </div>\n <sc-input-quantity\n #inputQuantity\n *ngIf=\"showQuantityControl\"\n [formControl]=\"quantityControl\"\n [quantityUnit]=\"product.quantityUnit\"\n [size]=\"getQuantitySize\"\n [step]=\"unitsHelper.productMultiplicity(product)\"\n [showLoader]=\"quantityShowLoader\"\n (clickClearEvent)=\"clickClearEvent.emit(cartItem)\"\n class=\"w-full\"\n (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n ></sc-input-quantity>\n</div>\n\n<ng-template #skeleton>\n <div class=\"flex flex-col card-wrapper bg-white rounded-xl overflow-hidden shadow-sc-1\">\n <!-- \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 -->\n <div class=\"w-full h-3/5 rounded-t bg-tui-base-02\"></div>\n <!-- \u041A\u0440\u0430\u0442\u043A\u0430\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F \u043E \u0442\u043E\u0432\u0430\u0440\u0435 -->\n <div class=\"flex flex-col grow gap-2.5 bg-white rounded-b p-5\">\n <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n <div class=\"w-3/5 h-4 rounded bg-tui-base-02\"></div>\n <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n </div>\n </div>\n</ng-template>\n", styles: [":host[data-size=s] .card-wrapper{width:10rem;height:16rem}:host[data-size=s] .card-wrapper .wrapper-info{padding:8px}:host[data-size=s] .card-wrapper .wrapper-info .cost{font-size:.875rem;line-height:1.25rem}:host[data-size=s] .card-wrapper .button-wrapper tui-svg{font-size:.75rem;line-height:1rem;width:1rem}:host[data-size=m] .card-wrapper{width:12.5rem;height:20rem}:host[data-size=m] .card-wrapper .wrapper-info{padding-inline:16px;padding-block:8px}:host[data-size=m] .card-wrapper .name{font-size:.875rem;line-height:1.25rem;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:3rem}:host[data-size=m] .card-wrapper .info{max-height:1rem}:host[data-size=m] .card-wrapper .cost{font-size:1.125rem;line-height:1.75rem}:host[data-size=m] .card-wrapper .button-wrapper{max-height:0px;font-size:.75rem;line-height:1rem}:host[data-size=m] .card-wrapper:hover .name{-webkit-line-clamp:unset;max-height:6rem}:host[data-size=m] .card-wrapper:hover .info{max-height:3rem}:host[data-size=m] .card-wrapper:hover .button-wrapper{max-height:3rem}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i3$1.TuiHintDriverDirective, selector: "[tuiHint]" }, { kind: "directive", type: i3$1.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i3$1.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { kind: "component", type: i3$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: ScFavoriteBtnComponent, selector: "sc-favorite-btn", inputs: ["isFavorite", "showLoader", "disabled"], outputs: ["clickEvent"] }, { kind: "component", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: ["step", "quantityUnit", "showLoader", "showCross", "appearance", "isDisabled", "size"], outputs: ["clickClearEvent"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint", "fromMain"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
914
916
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceCardComponent, decorators: [{
915
917
  type: Component,
916
- args: [{ selector: 'sc-price-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- TODO: \u0440\u0435\u0430\u043B\u0438\u0437\u043E\u0432\u0430\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u0438 \u0434\u043B\u044F \u0434\u0435\u0441\u043A\u0442\u043E\u043F\u0430 \u0438 \u0434\u043B\u044F \u043C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0433\u043E \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u044F. \u0418\u0441\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u0432\u0441\u0435 \u0433\u043B\u043E\u0431\u0430\u043B\u044C\u043D\u044B\u0435 \u0442\u0430\u0439\u0433\u043E\u0432\u0441\u043A\u0438\u0435 \u0441\u0442\u0438\u043B\u0438, \u043F\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u0438\u0445 \u0432 \u043F\u043E\u0440\u044F\u0434\u043E\u043A \u0441\u043E\u0433\u043B\u0430\u0441\u043D\u043E \u0441 \u0434\u0438\u0437\u0430\u0439\u043D\u043E\u043C. -->\n<div *ngIf=\"product; else skeleton\" class=\"min-w-[10rem] shadow-md w-auto rounded-xl p-2 grid h-[19rem] text-xs relative\">\n <div class=\"overflow-hidden\">\n <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" class=\"rounded-xl w-full max-h-full object-cover\" />\n </div>\n <sc-favorite-btn\n *ngIf=\"authStatus$ | async\"\n class=\"top-0 left-0 absolute\"\n (clickEvent)=\"clickFavoriteEvent.emit()\"\n [showLoader]=\"favoriteShowLoader\"\n [isFavorite]=\"product.isFavorite\"\n [disabled]=\"!!product.primaryCategory?.isFavorite\"\n ></sc-favorite-btn>\n <tui-svg *ngIf=\"product.isPreviouslyOrdered\" src=\"scIconStar\" class=\"top-0 right-0 absolute text-red-700\"></tui-svg>\n\n <a class=\"p-0 m-0\" tuiLink iconAlign=\"left\" (click)=\"clickCardEvent.emit()\">\n <p class=\"font-bold text-sm line-clamp-3\" style=\"word-break: break-word;\">{{ product.name }}</p>\n </a>\n <p *ngIf=\"product?.pack\" class=\"text-tui-text-02\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n\n <p class=\"text-tui-text-02\">\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n <p *ngIf=\"(authStatus$ | async) && product?.costDate\" class=\"text-tui-text-02\">\u0414\u0430\u0442\u0430: {{ product.costDate }}</p>\n <div *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"flex flex-col\">\n <span *ngIf=\"product.discount\" class=\"flex items-center text-tui-text-02\">\n <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-xs !h-4\"></tui-svg>\n <ng-template #discountHint>\n <div class=\"font-bold\">{{ product.discount.name }}</div>\n <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n </ng-template>\n </span>\n <span [class.text-tui-text-02]=\"!product.isWarehouseStockExist(warehouseSelect.id)\" class=\"cost font-bold\">{{ product.costRubString }}</span>\n <span *ngIf=\"!product.priceInRub\" class=\"text-xs font-bold text-tui-text-02 hidden group-hover:block\">{{ product.costString }}</span>\n <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n </div>\n <div *ngIf=\"!showQuantityControl\" class=\"flex gap-2 max-w-full items-center justify-stretch mt-1\">\n <button tuiButton (click)=\"clickAddToCartEvent.emit(product)\" [showLoader]=\"quantityShowLoader\" [size]=\"size\" class=\"grow\">\n <tui-svg src=\"scIconCart\" class=\"!text-xs !h-4\"> </tui-svg>\n \u0412 \u043A\u043E\u0440\u0437\u0438\u043D\u0443\n </button>\n <div *ngIf=\"cartItem\" class=\"flex justify-center\">\n <tui-svg src=\"tuiIconCheck\" class=\"!h-5 !w-5 bg-tui-primary text-black rounded-md\"></tui-svg>\n </div>\n </div>\n <sc-input-quantity\n #inputQuantity\n *ngIf=\"showQuantityControl\"\n [formControl]=\"quantityControl\"\n [quantityUnit]=\"product.quantityUnit\"\n [size]=\"getQuantitySize\"\n [step]=\"unitsHelper.productMultiplicity(product)\"\n [showLoader]=\"quantityShowLoader\"\n (clickClearEvent)=\"clickClearEvent.emit(cartItem)\"\n class=\"w-full\"\n (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n ></sc-input-quantity>\n</div>\n\n<ng-template #skeleton>\n <div class=\"flex flex-col card-wrapper bg-white rounded-xl overflow-hidden shadow-sc-1\">\n <!-- \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 -->\n <div class=\"w-full h-3/5 rounded-t bg-tui-base-02\"></div>\n <!-- \u041A\u0440\u0430\u0442\u043A\u0430\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F \u043E \u0442\u043E\u0432\u0430\u0440\u0435 -->\n <div class=\"flex flex-col grow gap-2.5 bg-white rounded-b p-5\">\n <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n <div class=\"w-3/5 h-4 rounded bg-tui-base-02\"></div>\n <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n </div>\n </div>\n</ng-template>\n", styles: [":host[data-size=s] .card-wrapper{width:10rem;height:16rem}:host[data-size=s] .card-wrapper .wrapper-info{padding:8px}:host[data-size=s] .card-wrapper .wrapper-info .cost{font-size:.875rem;line-height:1.25rem}:host[data-size=s] .card-wrapper .button-wrapper tui-svg{font-size:.75rem;line-height:1rem;width:1rem}:host[data-size=m] .card-wrapper{width:12.5rem;height:20rem}:host[data-size=m] .card-wrapper .wrapper-info{padding-inline:16px;padding-block:8px}:host[data-size=m] .card-wrapper .name{font-size:.875rem;line-height:1.25rem;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:3rem}:host[data-size=m] .card-wrapper .info{max-height:1rem}:host[data-size=m] .card-wrapper .cost{font-size:1.125rem;line-height:1.75rem}:host[data-size=m] .card-wrapper .button-wrapper{max-height:0px;font-size:.75rem;line-height:1rem}:host[data-size=m] .card-wrapper:hover .name{-webkit-line-clamp:unset;max-height:6rem}:host[data-size=m] .card-wrapper:hover .info{max-height:3rem}:host[data-size=m] .card-wrapper:hover .button-wrapper{max-height:3rem}\n"] }]
918
+ args: [{ selector: 'sc-price-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- TODO: \u0440\u0435\u0430\u043B\u0438\u0437\u043E\u0432\u0430\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u0438 \u0434\u043B\u044F \u0434\u0435\u0441\u043A\u0442\u043E\u043F\u0430 \u0438 \u0434\u043B\u044F \u043C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0433\u043E \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u044F. \u0418\u0441\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u0432\u0441\u0435 \u0433\u043B\u043E\u0431\u0430\u043B\u044C\u043D\u044B\u0435 \u0442\u0430\u0439\u0433\u043E\u0432\u0441\u043A\u0438\u0435 \u0441\u0442\u0438\u043B\u0438, \u043F\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u0438\u0445 \u0432 \u043F\u043E\u0440\u044F\u0434\u043E\u043A \u0441\u043E\u0433\u043B\u0430\u0441\u043D\u043E \u0441 \u0434\u0438\u0437\u0430\u0439\u043D\u043E\u043C. -->\n<div *ngIf=\"product; else skeleton\" class=\"min-w-[10rem] shadow-md w-auto rounded-xl p-2 grid h-[19rem] text-xs relative\">\n <div class=\"overflow-hidden\">\n <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImagePreview()\" [alt]=\"product.name\" class=\"rounded-xl w-full max-h-full object-cover\" />\n </div>\n <sc-favorite-btn\n *ngIf=\"authStatus$ | async\"\n class=\"top-0 left-0 absolute\"\n (clickEvent)=\"clickFavoriteEvent.emit()\"\n [showLoader]=\"favoriteShowLoader\"\n [isFavorite]=\"product.isFavorite\"\n [disabled]=\"!!product.primaryCategory?.isFavorite\"\n ></sc-favorite-btn>\n <tui-svg *ngIf=\"product.isPreviouslyOrdered\" src=\"scIconStar\" class=\"top-0 right-0 absolute text-red-700\"></tui-svg>\n\n <a class=\"p-0 m-0\" tuiLink iconAlign=\"left\" (click)=\"clickCardEvent.emit()\">\n <p class=\"font-bold text-sm line-clamp-3\" style=\"word-break: break-word;\">{{ product.name }}</p>\n </a>\n <p *ngIf=\"product?.pack\" class=\"text-tui-text-02\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n\n <p class=\"text-tui-text-02\">\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n <p *ngIf=\"(authStatus$ | async) && product?.costDate\" class=\"text-tui-text-02\">\u0414\u0430\u0442\u0430: {{ product.costDate }}</p>\n <div *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"flex flex-col\">\n <span *ngIf=\"product.discount\" class=\"flex items-center text-tui-text-02\">\n <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-xs !h-4\"></tui-svg>\n <ng-template #discountHint>\n <div class=\"font-bold\">{{ product.discount.name }}</div>\n <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n </ng-template>\n </span>\n <span [class.text-tui-text-02]=\"!product.isWarehouseStockExist(warehouseSelect.id)\" class=\"cost font-bold\">{{ product.costRubString }}</span>\n <span *ngIf=\"!product.priceInRub\" class=\"text-xs font-bold text-tui-text-02 hidden group-hover:block\">{{ product.costString }}</span>\n <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n </div>\n <div *ngIf=\"!showQuantityControl\" class=\"flex gap-2 max-w-full items-center justify-stretch mt-1\">\n <button tuiButton (click)=\"clickAddToCartEvent.emit(product)\" [showLoader]=\"quantityShowLoader\" [size]=\"size\" class=\"grow\">\n <tui-svg src=\"scIconCart\" class=\"!text-xs !h-4\"> </tui-svg>\n \u0412 \u043A\u043E\u0440\u0437\u0438\u043D\u0443\n </button>\n <div *ngIf=\"cartItem\" class=\"flex justify-center\">\n <tui-svg src=\"tuiIconCheck\" class=\"!h-5 !w-5 bg-tui-primary text-black rounded-md\"></tui-svg>\n </div>\n </div>\n <sc-input-quantity\n #inputQuantity\n *ngIf=\"showQuantityControl\"\n [formControl]=\"quantityControl\"\n [quantityUnit]=\"product.quantityUnit\"\n [size]=\"getQuantitySize\"\n [step]=\"unitsHelper.productMultiplicity(product)\"\n [showLoader]=\"quantityShowLoader\"\n (clickClearEvent)=\"clickClearEvent.emit(cartItem)\"\n class=\"w-full\"\n (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n ></sc-input-quantity>\n</div>\n\n<ng-template #skeleton>\n <div class=\"flex flex-col card-wrapper bg-white rounded-xl overflow-hidden shadow-sc-1\">\n <!-- \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 -->\n <div class=\"w-full h-3/5 rounded-t bg-tui-base-02\"></div>\n <!-- \u041A\u0440\u0430\u0442\u043A\u0430\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F \u043E \u0442\u043E\u0432\u0430\u0440\u0435 -->\n <div class=\"flex flex-col grow gap-2.5 bg-white rounded-b p-5\">\n <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n <div class=\"w-3/5 h-4 rounded bg-tui-base-02\"></div>\n <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n </div>\n </div>\n</ng-template>\n", styles: [":host[data-size=s] .card-wrapper{width:10rem;height:16rem}:host[data-size=s] .card-wrapper .wrapper-info{padding:8px}:host[data-size=s] .card-wrapper .wrapper-info .cost{font-size:.875rem;line-height:1.25rem}:host[data-size=s] .card-wrapper .button-wrapper tui-svg{font-size:.75rem;line-height:1rem;width:1rem}:host[data-size=m] .card-wrapper{width:12.5rem;height:20rem}:host[data-size=m] .card-wrapper .wrapper-info{padding-inline:16px;padding-block:8px}:host[data-size=m] .card-wrapper .name{font-size:.875rem;line-height:1.25rem;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:3rem}:host[data-size=m] .card-wrapper .info{max-height:1rem}:host[data-size=m] .card-wrapper .cost{font-size:1.125rem;line-height:1.75rem}:host[data-size=m] .card-wrapper .button-wrapper{max-height:0px;font-size:.75rem;line-height:1rem}:host[data-size=m] .card-wrapper:hover .name{-webkit-line-clamp:unset;max-height:6rem}:host[data-size=m] .card-wrapper:hover .info{max-height:3rem}:host[data-size=m] .card-wrapper:hover .button-wrapper{max-height:3rem}\n"] }]
917
919
  }], ctorParameters: function () { return [{ type: UnitsHelper }, { type: i1.ScAuthService }, { type: i1.ScWarehouseService }, { type: undefined, decorators: [{
918
920
  type: Inject,
919
921
  args: [SC_URLS]
920
922
  }] }, { type: undefined, decorators: [{
921
923
  type: Inject,
922
924
  args: [SC_PATH_IMAGE_NOT_FOUND]
923
- }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { showQuantityControl: [{
925
+ }] }, { type: i0.ChangeDetectorRef }, { type: i1.ScImageHelper }]; }, propDecorators: { showQuantityControl: [{
924
926
  type: Input
925
927
  }], cartItem: [{
926
928
  type: Input