@snabcentr/client-ui 2.6.1 → 3.1.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cart/cart-item-mobile/sc-cart-item-mobile.component.d.ts +0 -2
- package/catalog/category-card/sc-category-card.component.d.ts +20 -26
- package/catalog/hover-image-carousel/hover-image-carousel.component.d.ts +24 -0
- package/catalog/price-card/sc-price-card.component.d.ts +1 -5
- package/catalog/sc-catalog.module.d.ts +2 -1
- package/directives/abstract-price-card/abstract-sc-price-card.directive.d.ts +6 -0
- package/esm2022/cart/cart-item-mobile/sc-cart-item-mobile.component.mjs +1 -3
- package/esm2022/catalog/category-card/sc-category-card.component.mjs +32 -51
- package/esm2022/catalog/hover-image-carousel/hover-image-carousel.component.mjs +45 -0
- package/esm2022/catalog/price-card/sc-price-card.component.mjs +7 -18
- package/esm2022/catalog/sc-catalog.module.mjs +19 -5
- package/esm2022/directives/abstract-price-card/abstract-sc-price-card.directive.mjs +10 -1
- package/fesm2022/snabcentr-client-ui.mjs +94 -65
- package/fesm2022/snabcentr-client-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/release_notes.tmp +10 -2
- package/styles/tailwind/tailwind.scss +35 -68
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, Component, ChangeDetectionStrategy, Inject, Input, Output, inject, DestroyRef, SkipSelf, Directive, HostBinding, ContentChild, ViewChild, NgModule, ContentChildren, HostListener, Renderer2, ElementRef, Pipe, Optional, Injectable, forwardRef, InjectionToken } from '@angular/core';
|
|
2
|
+
import { EventEmitter, Component, ChangeDetectionStrategy, Inject, Input, Output, inject, DestroyRef, SkipSelf, Directive, HostBinding, ContentChild, ViewChild, NgModule, ContentChildren, HostListener, Renderer2, ElementRef, Pipe, Optional, Injectable, signal, forwardRef, InjectionToken } from '@angular/core';
|
|
3
3
|
import * as i1 from '@snabcentr/client-core';
|
|
4
4
|
import { ScUserMetrikaGoalsEnum, ScISuggestionType, SC_MIN_LENGTH_SEARCH_TERM, ScOpfList, ScWarehouseService, ScAuthService, SEARCH_TERM, ScUnitsHelper, ScImageHelper, SC_PATH_IMAGE_NOT_FOUND, ScPhoneService, IS_RUNNING_ON_TERMINAL, SC_URLS, TERMINAL_PROVIDERS, SEARCH_TERM_PROVIDERS, ScPaginationService, SC_NEXT_PAGE_PAGINATION_CLICK, SC_PRODUCT_PAGINATION_OPTIONS, ScIconTypesEnum, ScDocumentInfoTypesEnum, ScSamplesService, ScUserService } from '@snabcentr/client-core';
|
|
5
5
|
import * as i6$1 from 'rxjs';
|
|
@@ -19,7 +19,7 @@ import { AbstractTuiControl, TuiInputModule, TuiTextfieldControllerModule, TuiCo
|
|
|
19
19
|
import * as i8 from '@maskito/angular';
|
|
20
20
|
import { MaskitoDirective } from '@maskito/angular';
|
|
21
21
|
import * as i2$1 from '@taiga-ui/kit';
|
|
22
|
-
import { TuiAccordionItem, TuiElasticContainer, TuiAccordion, TuiPreview, TuiFieldErrorPipe, TuiFilterByInputPipe, TuiStringifyContentPipe, TuiDataListWrapper, TuiButtonLoading, TuiCarousel, TuiCheckbox, TuiStepper, TuiHighlight, TuiPreviewDialogService, TuiTreeService, TuiTreeItemContent, TUI_TREE_START, TUI_TREE_CONTENT, TUI_TREE_LOADING, TUI_TREE_LOADER, TuiTree
|
|
22
|
+
import { TuiAccordionItem, TuiElasticContainer, TuiAccordion, TuiPreview, TuiFieldErrorPipe, TuiFilterByInputPipe, TuiStringifyContentPipe, TuiDataListWrapper, TuiButtonLoading, TuiCarousel, TuiCheckbox, TuiStepper, TuiPagination, TuiHighlight, TuiAvatar, TuiBadge, TuiLineClamp, TuiPreviewDialogService, TuiTreeService, TuiTreeItemContent, TUI_TREE_START, TUI_TREE_CONTENT, TUI_TREE_LOADING, TUI_TREE_LOADER, TuiTree } from '@taiga-ui/kit';
|
|
23
23
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
24
24
|
import * as i2$2 from '@taiga-ui/polymorpheus';
|
|
25
25
|
import { injectContext, PolymorpheusTemplate, PolymorpheusOutlet, POLYMORPHEUS_CONTEXT, PolymorpheusComponent } from '@taiga-ui/polymorpheus';
|
|
@@ -1637,6 +1637,15 @@ class AbstractScPriceCard {
|
|
|
1637
1637
|
getCardImagePreview() {
|
|
1638
1638
|
return this.product ? this.imageHelper.getImagePreview(this.product) : this.pathImageNotFound;
|
|
1639
1639
|
}
|
|
1640
|
+
/**
|
|
1641
|
+
* Возвращает массив превью-изображений товара.
|
|
1642
|
+
*
|
|
1643
|
+
* @param product Объект товара.
|
|
1644
|
+
*/
|
|
1645
|
+
getCardImagePreviewList(product) {
|
|
1646
|
+
const images = this.imageHelper.getProductImagePreviewList(product);
|
|
1647
|
+
return images.length > 0 ? images : [this.pathImageNotFound];
|
|
1648
|
+
}
|
|
1640
1649
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AbstractScPriceCard, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1641
1650
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: AbstractScPriceCard, inputs: { cartItem: "cartItem", product: "product", showQuantityControl: "showQuantityControl" }, outputs: { clickFavoriteEvent: "clickFavoriteEvent", clickAddToCartEvent: "clickAddToCartEvent", clickClearEvent: "clickClearEvent", clickCardEvent: "clickCardEvent", clickPriceHistoryEvent: "clickPriceHistoryEvent", quantityValueChanges: "quantityValueChanges" }, ngImport: i0 }); }
|
|
1642
1651
|
}
|
|
@@ -3171,23 +3180,17 @@ class ScCategoryCardComponent {
|
|
|
3171
3180
|
* Инициализирует экземпляр класса {@link CategoryCardComponent}.
|
|
3172
3181
|
*
|
|
3173
3182
|
* @param urls Список ссылок на разделы backend'a.
|
|
3174
|
-
* @param renderer Экземпляр базового класса для реализации пользовательского рендеринга.
|
|
3175
3183
|
* @param pathImageNotFound Путь до изображения 'Товар не найден'.
|
|
3184
|
+
* @param cdr Объект для работы с обнаружением изменений.
|
|
3176
3185
|
*/
|
|
3177
|
-
constructor(urls,
|
|
3186
|
+
constructor(urls, pathImageNotFound, cdr) {
|
|
3178
3187
|
this.urls = urls;
|
|
3179
|
-
this.renderer = renderer;
|
|
3180
3188
|
this.pathImageNotFound = pathImageNotFound;
|
|
3181
|
-
this.authService = authService;
|
|
3182
3189
|
this.cdr = cdr;
|
|
3183
3190
|
/**
|
|
3184
3191
|
* Размер карточки категории.
|
|
3185
3192
|
*/
|
|
3186
3193
|
this.size = 'm';
|
|
3187
|
-
/**
|
|
3188
|
-
* Признак, что карточка является скелетоном.
|
|
3189
|
-
*/
|
|
3190
|
-
this.isSkeleton = false;
|
|
3191
3194
|
/**
|
|
3192
3195
|
* Признак, что необходимо отобразить лоадер для кнопки избранных товаров и категорий.
|
|
3193
3196
|
*/
|
|
@@ -3195,11 +3198,15 @@ class ScCategoryCardComponent {
|
|
|
3195
3198
|
/**
|
|
3196
3199
|
* {@link Observable} изменения статуса авторизации.
|
|
3197
3200
|
*/
|
|
3198
|
-
this.authStatus$ =
|
|
3201
|
+
this.authStatus$ = inject(ScAuthService).getAuthChange();
|
|
3199
3202
|
/**
|
|
3200
|
-
* Признак
|
|
3203
|
+
* Признак наведения на карточку.
|
|
3201
3204
|
*/
|
|
3202
3205
|
this.isHovered = false;
|
|
3206
|
+
/**
|
|
3207
|
+
* Признак того, отображается этот компонент на мобильном устройстве или нет.
|
|
3208
|
+
*/
|
|
3209
|
+
this.isMobile = inject(TUI_IS_MOBILE);
|
|
3203
3210
|
/**
|
|
3204
3211
|
* Событие нажатия на карточку категории.
|
|
3205
3212
|
*/
|
|
@@ -3210,71 +3217,52 @@ class ScCategoryCardComponent {
|
|
|
3210
3217
|
this.clickOnFavoriteEvent = new EventEmitter();
|
|
3211
3218
|
}
|
|
3212
3219
|
/**
|
|
3213
|
-
*
|
|
3220
|
+
* Обработчик события наведения.
|
|
3214
3221
|
*
|
|
3215
|
-
* @param
|
|
3222
|
+
* @param isHovered Признак наведения на карточку.
|
|
3216
3223
|
*/
|
|
3217
|
-
|
|
3218
|
-
|
|
3224
|
+
onHovered(isHovered) {
|
|
3225
|
+
this.isHovered = isHovered;
|
|
3219
3226
|
}
|
|
3220
3227
|
/**
|
|
3221
|
-
*
|
|
3222
|
-
|
|
3223
|
-
|
|
3224
|
-
if (this.isHovered) {
|
|
3225
|
-
this.name.nativeElement.style.maxHeight = `${this.name.nativeElement.scrollHeight / 16}rem`;
|
|
3226
|
-
}
|
|
3227
|
-
}
|
|
3228
|
-
/**
|
|
3229
|
-
* Обработчик события mouseleave.
|
|
3228
|
+
* Возвращает путь к изображению категории. Если путь отсутствует, то вернёт изображение по-умолчанию ("product_not_found").
|
|
3229
|
+
*
|
|
3230
|
+
* @param category Информация о категории.
|
|
3230
3231
|
*/
|
|
3231
|
-
|
|
3232
|
-
|
|
3233
|
-
this.renderer.setStyle(this.name.nativeElement, 'maxHeight', null);
|
|
3234
|
-
}
|
|
3232
|
+
getCategoryImgURL(category) {
|
|
3233
|
+
return category.properties?.image ? `${this.urls.imgServerUrl}/${category.properties.image}` : this.pathImageNotFound;
|
|
3235
3234
|
}
|
|
3236
3235
|
/**
|
|
3237
3236
|
* Устанавливает компонент в очередь на обновление.
|
|
3237
|
+
*
|
|
3238
|
+
* @deprecated
|
|
3238
3239
|
*/
|
|
3239
3240
|
markForCheck() {
|
|
3240
3241
|
this.cdr.markForCheck();
|
|
3241
3242
|
}
|
|
3242
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ScCategoryCardComponent, deps: [{ token: SC_URLS }, { token:
|
|
3243
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: ScCategoryCardComponent, selector: "sc-category-card", inputs: { category: "category", size: "size"
|
|
3243
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ScCategoryCardComponent, deps: [{ token: SC_URLS }, { token: SC_PATH_IMAGE_NOT_FOUND }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3244
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: ScCategoryCardComponent, selector: "sc-category-card", inputs: { category: "category", size: "size" }, outputs: { clickOnCardEvent: "clickOnCardEvent", clickOnFavoriteEvent: "clickOnFavoriteEvent" }, host: { properties: { "attr.data-size": "this.size" } }, ngImport: i0, template: "<div class=\"relative\">\n <button\n (click)=\"clickOnCardEvent.emit(category)\"\n (tuiHoveredChange)=\"onHovered($event)\"\n class=\"category-btn rounded-tui-radius-m border-tui-base-04 flex flex-col overflow-hidden border\"\n >\n <div class=\"img-wrapper w-full grow overflow-hidden\">\n <img\n *ngIf=\"category && category.properties?.image\"\n [src]=\"getCategoryImgURL(category)\"\n [alt]=\"category.name\"\n class=\"size-full object-cover\"\n />\n\n <div\n *ngIf=\"!category\"\n class=\"img-wrapper bg-tui-base-02 size-full\"\n ></div>\n\n <img\n *ngIf=\"category && !category.properties?.image\"\n [src]=\"getCategoryImgURL(category)\"\n [alt]=\"category.name\"\n class=\"size-full rounded-xl object-contain p-2\"\n />\n </div>\n\n <div class=\"name flex w-full items-center justify-center\">\n <tui-line-clamp\n *ngIf=\"category; else skeletonName\"\n [content]=\"category.name\"\n class=\"pointer-events-none !h-auto\"\n [linesLimit]=\"isHovered || isMobile ? 4 : 2\"\n />\n </div>\n <ng-template #skeletonName>\n <div class=\"skeleton-name bg-tui-base-02 rounded-tui-radius-s\"></div>\n </ng-template>\n </button>\n <sc-favorite-btn\n *ngIf=\"category && (authStatus$ | async)\"\n [showLoader]=\"favoriteShowLoader\"\n [isFavorite]=\"category.isFavorite\"\n (clickEvent)=\"clickOnFavoriteEvent.emit()\"\n class=\"absolute left-1 top-1\"\n ></sc-favorite-btn>\n</div>\n", styles: [":host{--tui-duration: .15s}: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{padding:.25rem 1rem;margin-block:auto;font-size:.9375rem;line-height:1.5rem;font-weight:800}: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:7rem}:host[data-size=s] button.category-btn .name{padding:.25rem .5rem;margin-block:auto;font-size:.8125rem;line-height:1.25rem;font-weight:800}:host[data-size=s] button.category-btn .name .skeleton-name{width:7rem;height:.75rem}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.TuiLineClamp, selector: "tui-line-clamp", inputs: ["lineHeight", "content", "linesLimit"], outputs: ["overflownChange"] }, { kind: "directive", type: i6.TuiHovered, selector: "[tuiHoveredChange]", outputs: ["tuiHoveredChange"] }, { kind: "component", type: ScFavoriteBtnComponent, selector: "sc-favorite-btn", inputs: ["isFavorite", "showLoader", "disabled"], outputs: ["clickEvent"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3244
3245
|
}
|
|
3245
3246
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ScCategoryCardComponent, decorators: [{
|
|
3246
3247
|
type: Component,
|
|
3247
|
-
args: [{ selector: 'sc-category-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative
|
|
3248
|
+
args: [{ selector: 'sc-category-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative\">\n <button\n (click)=\"clickOnCardEvent.emit(category)\"\n (tuiHoveredChange)=\"onHovered($event)\"\n class=\"category-btn rounded-tui-radius-m border-tui-base-04 flex flex-col overflow-hidden border\"\n >\n <div class=\"img-wrapper w-full grow overflow-hidden\">\n <img\n *ngIf=\"category && category.properties?.image\"\n [src]=\"getCategoryImgURL(category)\"\n [alt]=\"category.name\"\n class=\"size-full object-cover\"\n />\n\n <div\n *ngIf=\"!category\"\n class=\"img-wrapper bg-tui-base-02 size-full\"\n ></div>\n\n <img\n *ngIf=\"category && !category.properties?.image\"\n [src]=\"getCategoryImgURL(category)\"\n [alt]=\"category.name\"\n class=\"size-full rounded-xl object-contain p-2\"\n />\n </div>\n\n <div class=\"name flex w-full items-center justify-center\">\n <tui-line-clamp\n *ngIf=\"category; else skeletonName\"\n [content]=\"category.name\"\n class=\"pointer-events-none !h-auto\"\n [linesLimit]=\"isHovered || isMobile ? 4 : 2\"\n />\n </div>\n <ng-template #skeletonName>\n <div class=\"skeleton-name bg-tui-base-02 rounded-tui-radius-s\"></div>\n </ng-template>\n </button>\n <sc-favorite-btn\n *ngIf=\"category && (authStatus$ | async)\"\n [showLoader]=\"favoriteShowLoader\"\n [isFavorite]=\"category.isFavorite\"\n (clickEvent)=\"clickOnFavoriteEvent.emit()\"\n class=\"absolute left-1 top-1\"\n ></sc-favorite-btn>\n</div>\n", styles: [":host{--tui-duration: .15s}: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{padding:.25rem 1rem;margin-block:auto;font-size:.9375rem;line-height:1.5rem;font-weight:800}: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:7rem}:host[data-size=s] button.category-btn .name{padding:.25rem .5rem;margin-block:auto;font-size:.8125rem;line-height:1.25rem;font-weight:800}:host[data-size=s] button.category-btn .name .skeleton-name{width:7rem;height:.75rem}\n"] }]
|
|
3248
3249
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
3249
3250
|
type: Inject,
|
|
3250
3251
|
args: [SC_URLS]
|
|
3251
|
-
}] }, { type:
|
|
3252
|
+
}] }, { type: undefined, decorators: [{
|
|
3252
3253
|
type: Inject,
|
|
3253
3254
|
args: [SC_PATH_IMAGE_NOT_FOUND]
|
|
3254
|
-
}] }, { type:
|
|
3255
|
+
}] }, { type: i0.ChangeDetectorRef }], propDecorators: { category: [{
|
|
3255
3256
|
type: Input
|
|
3256
|
-
}], name: [{
|
|
3257
|
-
type: ViewChild,
|
|
3258
|
-
args: ['name']
|
|
3259
3257
|
}], size: [{
|
|
3260
3258
|
type: Input
|
|
3261
3259
|
}, {
|
|
3262
3260
|
type: HostBinding,
|
|
3263
3261
|
args: ['attr.data-size']
|
|
3264
|
-
}], isSkeleton: [{
|
|
3265
|
-
type: Input
|
|
3266
|
-
}], isHovered: [{
|
|
3267
|
-
type: Input
|
|
3268
3262
|
}], clickOnCardEvent: [{
|
|
3269
3263
|
type: Output
|
|
3270
3264
|
}], clickOnFavoriteEvent: [{
|
|
3271
3265
|
type: Output
|
|
3272
|
-
}], moveEnterHandler: [{
|
|
3273
|
-
type: HostListener,
|
|
3274
|
-
args: ['mousemove']
|
|
3275
|
-
}], mouseLeaveHandler: [{
|
|
3276
|
-
type: HostListener,
|
|
3277
|
-
args: ['mouseleave']
|
|
3278
3266
|
}] } });
|
|
3279
3267
|
|
|
3280
3268
|
/* eslint-disable @typescript-eslint/dot-notation */
|
|
@@ -3428,6 +3416,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
3428
3416
|
args: ['keydown.arrowUp', ['step']]
|
|
3429
3417
|
}] } });
|
|
3430
3418
|
|
|
3419
|
+
/**
|
|
3420
|
+
* Компонент просмотра изображений через событие наведения.
|
|
3421
|
+
*/
|
|
3422
|
+
class HoverImageCarouselComponent {
|
|
3423
|
+
constructor() {
|
|
3424
|
+
/**
|
|
3425
|
+
* Массив изображений.
|
|
3426
|
+
*/
|
|
3427
|
+
this.images = [];
|
|
3428
|
+
/**
|
|
3429
|
+
* {@link WritableSignal} для отслеживания текущего индекса изображения.
|
|
3430
|
+
*/
|
|
3431
|
+
this.currentIndex = signal(0);
|
|
3432
|
+
}
|
|
3433
|
+
/**
|
|
3434
|
+
* Обработчик события mousemove.
|
|
3435
|
+
*
|
|
3436
|
+
* @param offsetX Отступ курсора мыши по оси X от края {@link HTMLElement}.
|
|
3437
|
+
* @param target Объект {@link HTMLElement} в котором лежат изображения
|
|
3438
|
+
*/
|
|
3439
|
+
onHover(offsetX, target) {
|
|
3440
|
+
if (this.images.length <= 1 || offsetX < 0) {
|
|
3441
|
+
return;
|
|
3442
|
+
}
|
|
3443
|
+
const elementWidth = target.offsetWidth;
|
|
3444
|
+
const hoverPercentage = offsetX / elementWidth;
|
|
3445
|
+
const newIndex = Math.floor(hoverPercentage * this.images.length);
|
|
3446
|
+
this.currentIndex.set(newIndex);
|
|
3447
|
+
}
|
|
3448
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HoverImageCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3449
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: HoverImageCarouselComponent, isStandalone: true, selector: "sc-hover-image-carousel", inputs: { images: "images" }, host: { listeners: { "mousemove.silent": "onHover($event.offsetX,$event.target)" } }, ngImport: i0, template: "<div\n class=\"overflow-hidden rounded-xl\"\n [class.mb-2]=\"images.length <= 1\"\n [style.aspect-ratio]=\"'20/19'\"\n>\n <img\n [src]=\"images[currentIndex()]\"\n class=\"size-full rounded-xl object-contain\"\n />\n</div>\n\n@if (images.length > 1) {\n <tui-pagination\n size=\"s\"\n [length]=\"images.length\"\n [index]=\"currentIndex()\"\n />\n}\n", dependencies: [{ kind: "component", type: TuiPagination, selector: "tui-pagination", inputs: ["length", "focusable", "size", "disabled", "activePadding", "sidePadding", "content", "index"], outputs: ["indexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3450
|
+
}
|
|
3451
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HoverImageCarouselComponent, decorators: [{
|
|
3452
|
+
type: Component,
|
|
3453
|
+
args: [{ selector: 'sc-hover-image-carousel', standalone: true, imports: [TuiPagination], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"overflow-hidden rounded-xl\"\n [class.mb-2]=\"images.length <= 1\"\n [style.aspect-ratio]=\"'20/19'\"\n>\n <img\n [src]=\"images[currentIndex()]\"\n class=\"size-full rounded-xl object-contain\"\n />\n</div>\n\n@if (images.length > 1) {\n <tui-pagination\n size=\"s\"\n [length]=\"images.length\"\n [index]=\"currentIndex()\"\n />\n}\n" }]
|
|
3454
|
+
}], propDecorators: { images: [{
|
|
3455
|
+
type: Input
|
|
3456
|
+
}], onHover: [{
|
|
3457
|
+
type: HostListener,
|
|
3458
|
+
args: ['mousemove.silent', ['$event.offsetX', '$event.target']]
|
|
3459
|
+
}] } });
|
|
3460
|
+
|
|
3431
3461
|
/**
|
|
3432
3462
|
* Компонент информации о наличии товара на складе.
|
|
3433
3463
|
*/
|
|
@@ -3490,12 +3520,6 @@ class ScPriceCardComponent extends AbstractScPriceCard {
|
|
|
3490
3520
|
*/
|
|
3491
3521
|
this.isMobile = inject(TUI_IS_MOBILE);
|
|
3492
3522
|
}
|
|
3493
|
-
/**
|
|
3494
|
-
* Признак того, что компонент находится в корзине.
|
|
3495
|
-
*/
|
|
3496
|
-
get isInCart() {
|
|
3497
|
-
return Boolean(this.cartItem);
|
|
3498
|
-
}
|
|
3499
3523
|
/**
|
|
3500
3524
|
* Устанавливает компонент в очередь на обновление.
|
|
3501
3525
|
*/
|
|
@@ -3503,22 +3527,16 @@ class ScPriceCardComponent extends AbstractScPriceCard {
|
|
|
3503
3527
|
this.cdr.markForCheck();
|
|
3504
3528
|
}
|
|
3505
3529
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ScPriceCardComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3506
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: ScPriceCardComponent, selector: "sc-price-card", inputs: { size: "size" }, host: { properties: { "attr.data-size": "this.size", "attr.is_mobile": "this.isMobile", "attr.is_in_cart": "this.isInCart" } }, providers: [SEARCH_TERM_PROVIDERS], usesInheritance: true, ngImport: i0, template: "<div\n *ngIf=\"product; else skeleton\"\n class=\"card-wrapper relative flex w-auto min-w-40 flex-col rounded-xl shadow-md\"\n>\n <div class=\"flex grow flex-col justify-center overflow-hidden rounded-xl p-2\">\n <img\n (click)=\"clickCardEvent.emit()\"\n [src]=\"getCardImagePreview()\"\n [alt]=\"product.name\"\n class=\"max-h-full w-full rounded-xl object-cover\"\n />\n <sc-favorite-btn\n *ngIf=\"authStatus$ | async\"\n class=\"absolute left-2 top-2\"\n (clickEvent)=\"clickFavoriteEvent.emit()\"\n [showLoader]=\"favoriteShowLoader\"\n [isFavorite]=\"product.isFavorite\"\n [disabled]=\"!!product.primaryCategory?.isFavorite\"\n ></sc-favorite-btn>\n <div class=\"absolute right-2 top-2 m-1 flex gap-2\">\n <tui-icon\n *ngIf=\"product.isPreviouslyOrdered\"\n icon=\"@tui.star\"\n class=\"!size-6 rounded-lg !fill-white text-tui-negative\"\n ></tui-icon>\n <tui-icon\n *ngIf=\"product.cartItem\"\n icon=\"@tui.check\"\n class=\"!size-6 rounded-lg bg-tui-primary text-white\"\n ></tui-icon>\n </div>\n </div>\n <div class=\"p-2\">\n <tui-elastic-container class=\"shrink-0\">\n <a\n tuiLink\n class=\"name\"\n [tuiHighlight]=\"(search$ | async) ?? ''\"\n (click)=\"clickCardEvent.emit()\"\n >\n {{ product.name }}\n </a>\n </tui-elastic-container>\n <tui-elastic-container class=\"shrink-0\">\n <p\n *ngIf=\"product?.pack\"\n class=\"flex items-center gap-1 text-tui-text-02\"\n >\n \u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}\n <tui-icon\n *ngIf=\"product.ignoreMinCountCheck\"\n icon=\"@tui.package\"\n [tuiHint]=\"minCountHint\"\n [tuiHintShowDelay]=\"100\"\n tuiHintDirection=\"top\"\n class=\"text-xl\"\n ></tui-icon>\n <ng-template #minCountHint>\n \u0414\u043E\u0441\u0442\u0443\u043F\u0435\u043D \u0437\u0430\u043A\u0430\u0437 <br />\n \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u043B\u044C\u043D\u043E\u0433\u043E <br />\n \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u0430\n </ng-template>\n </p>\n <p\n [tuiHighlight]=\"(search$ | async) ?? ''\"\n class=\"code text-tui-text-02\"\n >\n \u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}\n </p>\n\n <a\n tuiLink\n *ngIf=\"!isMobile && (authStatus$ | async) && product?.costDate\"\n aria-disabled=\"true\"\n class=\"history\"\n (click)=\"clickPriceHistoryEvent.emit()\"\n >\n \u0414\u0430\u0442\u0430: {{ product.costDate }}\n </a>\n </tui-elastic-container>\n <div\n *ngIf=\"warehouseSelect$ | async as warehouseSelect\"\n class=\"flex flex-col\"\n >\n <span\n *ngIf=\"product.discount && !isMobile\"\n class=\"flex items-center text-tui-text-02\"\n >\n <span class=\"line-through\">{{ product.discountCostString }}</span> \n <span class=\"font-bold text-tui-success-fill\"> -{{ product.discount.percent }}% </span>\n <tui-icon\n icon=\"@tui.info\"\n [tuiHint]=\"discountHint\"\n [tuiHintShowDelay]=\"100\"\n tuiHintDirection=\"top\"\n class=\"!h-4 text-black\"\n ></tui-icon>\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\n [class.text-tui-text-02]=\"!product.isWarehouseStockExist(warehouseSelect.id)\"\n class=\"cost font-bold\"\n >{{ product.costRubString }}</span\n >\n <span\n *ngIf=\"!product.priceInRub\"\n class=\"hidden font-bold text-tui-text-02 group-hover:block\"\n >{{ product.costString }}</span\n >\n <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n </div>\n <div class=\"cart-actions flex shrink-0 overflow-hidden\">\n <button\n *ngIf=\"!showQuantityControl\"\n tuiButton\n (click)=\"clickAddToCartEvent.emit(product)\"\n [loading]=\"quantityShowLoader\"\n [size]=\"size === 's' ? 'xs' : 's'\"\n class=\"mt-2 grow\"\n iconStart=\"@tui.shopping-cart\"\n >\n \u0412 \u043A\u043E\u0440\u0437\u0438\u043D\u0443\n </button>\n <sc-input-quantity\n #inputQuantity\n *ngIf=\"showQuantityControl\"\n [formControl]=\"quantityControl\"\n [size]=\"size\"\n [step]=\"unitsHelper.productMultiplicity(product)\"\n [ignoreStepValidators]=\"product.ignoreMinCountCheck\"\n [showLoader]=\"quantityShowLoader\"\n (clickClearEvent)=\"clickClearEvent.emit(cartItem)\"\n class=\"mt-2 w-full\"\n (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n ></sc-input-quantity>\n </div>\n </div>\n</div>\n\n<ng-template #skeleton>\n <div class=\"card-wrapper flex flex-col overflow-hidden rounded-xl bg-white shadow-sc-1\">\n <!-- \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 -->\n <div class=\"h-3/5 w-full 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 grow flex-col gap-2.5 rounded-b bg-white p-5\">\n <div class=\"h-4 w-full rounded bg-tui-base-02\"></div>\n <div class=\"h-4 w-3/5 rounded bg-tui-base-02\"></div>\n <div class=\"h-4 w-full rounded bg-tui-base-02\"></div>\n </div>\n </div>\n</ng-template>\n", styles: [":host .name{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}:host[data-size=s] .card-wrapper{height:16rem;font:var(--tui-font-text-xs)}:host[data-size=s] .card-wrapper .name,:host[data-size=s] .card-wrapper .cost{font:var(--tui-font-text-s);font-weight:800}:host[data-size=m] .card-wrapper{height:20rem;font:var(--tui-font-text-s)}:host[data-size=m] .card-wrapper .name,:host[data-size=m] .card-wrapper .cost{font:var(--tui-font-text-m);font-weight:800}:host[is_mobile=false][is_in_cart=false] .name{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}:host[is_mobile=false][is_in_cart=false] .code,:host[is_mobile=false][is_in_cart=false] .history{display:none}:host[is_mobile=false][is_in_cart=false] .cart-actions{max-height:0;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out}:host[is_mobile=false][is_in_cart=false]:hover .code,:host[is_mobile=false][is_in_cart=false]:hover .history,:host[is_mobile=false][is_in_cart=false]:hover .name{display:-webkit-box;-webkit-line-clamp:4}:host[is_mobile=false][is_in_cart=false]:hover .cart-actions{max-height:3rem}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: i1$1.TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintContext", "tuiHintAppearance", "tuiHint"] }, { kind: "directive", type: i1$1.TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "component", type: i2$1.TuiElasticContainer, selector: "tui-elastic-container" }, { kind: "directive", type: i2$1.TuiHighlight, selector: "[tuiHighlight]", inputs: ["tuiHighlight", "tuiHighlightColor"] }, { kind: "component", type: i2$1.TuiButtonLoading, selector: "[tuiButton][loading],[tuiIconButton][loading]", inputs: ["size", "loading"] }, { kind: "component", type: ScFavoriteBtnComponent, selector: "sc-favorite-btn", inputs: ["isFavorite", "showLoader", "disabled"], outputs: ["clickEvent"] }, { kind: "component", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: ["step", "showLoader", "showCross", "ignoreStepValidators", "appearance", "isDisabled", "size"], outputs: ["clickClearEvent"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint", "fromMain"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3530
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: ScPriceCardComponent, selector: "sc-price-card", inputs: { size: "size" }, host: { properties: { "attr.data-size": "this.size" } }, providers: [SEARCH_TERM_PROVIDERS], usesInheritance: true, ngImport: i0, template: "<div\n *ngIf=\"product; else skeleton\"\n class=\"card-wrapper relative flex h-full w-auto flex-col rounded-xl p-1\"\n>\n <div class=\"flex items-center justify-between\">\n <span\n [tuiHighlight]=\"(search$ | async) ?? ''\"\n class=\"code text-tui-text-02\"\n >\n \u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}\n </span>\n\n <div class=\"flex gap-2\">\n <sc-favorite-btn\n (clickEvent)=\"clickFavoriteEvent.emit()\"\n [showLoader]=\"favoriteShowLoader\"\n [isFavorite]=\"product.isFavorite\"\n [disabled]=\"!!product.primaryCategory?.isFavorite\"\n ></sc-favorite-btn>\n <tui-avatar\n *ngIf=\"product.isPreviouslyOrdered\"\n src=\"@tui.star-filled\"\n size=\"s\"\n [style.background]=\"'var(--tui-status-negative-pale-hover)'\"\n [style.color]=\"'var(--tui-text-negative)'\"\n ></tui-avatar>\n </div>\n </div>\n\n <sc-hover-image-carousel\n (click)=\"clickCardEvent.emit()\"\n [images]=\"!isMobile ? getCardImagePreviewList(product) : [getCardImagePreview()]\"\n class=\"cursor-pointer\"\n ></sc-hover-image-carousel>\n <div class=\"flex grow flex-col justify-between gap-1\">\n <div class=\"flex flex-col gap-1\">\n <a\n tuiLink\n class=\"name\"\n [tuiHighlight]=\"(search$ | async) ?? ''\"\n (click)=\"clickCardEvent.emit()\"\n >\n {{ product.name }}\n </a>\n <div\n *ngIf=\"product?.pack\"\n class=\"flex items-center gap-1 text-tui-text-02\"\n >\n \u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}\n <tui-icon\n *ngIf=\"product.ignoreMinCountCheck\"\n icon=\"@tui.package\"\n [tuiHint]=\"minCountHint\"\n [tuiHintShowDelay]=\"100\"\n class=\"text-body-xl text-tui-text-01 opacity-90\"\n tuiHintDirection=\"top\"\n class=\"text-xl\"\n ></tui-icon>\n <ng-template #minCountHint>\n \u0414\u043E\u0441\u0442\u0443\u043F\u0435\u043D \u0437\u0430\u043A\u0430\u0437 <br />\n \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u043B\u044C\u043D\u043E\u0433\u043E <br />\n \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u0430\n </ng-template>\n </div>\n <span *ngIf=\"!isMobile && (authStatus$ | async) && product?.costDate\">\n \u0414\u0430\u0442\u0430:\n <a\n tuiLink\n [pseudo]=\"true\"\n class=\"text-tui-text-02\"\n (click)=\"clickPriceHistoryEvent.emit()\"\n >\n {{ product.costDate }}\n </a>\n </span>\n <div\n *ngIf=\"warehouseSelect$ | async as warehouseSelect\"\n class=\"flex flex-wrap items-center gap-x-2 gap-y-1\"\n >\n <div class=\"flex flex-wrap items-center gap-x-2 gap-y-1\">\n <span\n [class.text-tui-text-02]=\"!product.isWarehouseStockExist(warehouseSelect.id)\"\n class=\"cost\"\n >{{ product.costRubString }}</span\n >\n <tui-badge\n *ngIf=\"product.discount as discount\"\n size=\"m\"\n class=\"text-body-xs\"\n [style.background]=\"'var(--tui-status-positive)'\"\n [tuiHint]=\"discountHint\"\n [tuiHintShowDelay]=\"100\"\n tuiHintDirection=\"top\"\n >\n <tui-badge\n *ngIf=\"product.discount as discount\"\n size=\"s\"\n [style.background]=\"'var(--tui-background-base)'\"\n class=\"text-tui-text-02 text-body-xs-bold\"\n >\n {{ discount.percent }}%\n </tui-badge>\n <span class=\"line-through\">{{ product.discountCostString }}</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 </tui-badge>\n </div>\n <span\n *ngIf=\"!product.priceInRub\"\n class=\"text-body-xs-bold text-tui-text-02\"\n >{{ product.costString }}</span\n >\n </div>\n <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n </div>\n <div class=\"mt-1 flex gap-2\">\n <button\n *ngIf=\"!showQuantityControl\"\n tuiButton\n (click)=\"clickAddToCartEvent.emit(product)\"\n [loading]=\"quantityShowLoader\"\n [size]=\"size === 's' ? 'xs' : 's'\"\n class=\"grow !font-extrabold\"\n iconStart=\"@tui.shopping-cart\"\n >\n \u0412 \u043A\u043E\u0440\u0437\u0438\u043D\u0443\n </button>\n <sc-input-quantity\n #inputQuantity\n *ngIf=\"showQuantityControl\"\n [formControl]=\"quantityControl\"\n [size]=\"size\"\n [step]=\"unitsHelper.productMultiplicity(product)\"\n [ignoreStepValidators]=\"product.ignoreMinCountCheck\"\n [showLoader]=\"quantityShowLoader\"\n (clickClearEvent)=\"clickClearEvent.emit(cartItem)\"\n class=\"w-full\"\n (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n ></sc-input-quantity>\n <tui-avatar\n *ngIf=\"product.cartItem && !showQuantityControl\"\n src=\"@tui.check\"\n size=\"s\"\n [style.background]=\"'var(--tui-status-warning-pale)'\"\n [style.color]=\"'var(--tui-background-accent-1)'\"\n ></tui-avatar>\n </div>\n </div>\n</div>\n\n<ng-template #skeleton>\n <div class=\"card-wrapper relative flex h-full w-auto flex-col rounded-xl p-1\"></div>\n</ng-template>\n", styles: [":host tui-badge{--t-padding: .25rem !important}:host .name{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}:host[data-size=s] .card-wrapper{font-size:.6875rem;line-height:1rem;font-weight:500}:host[data-size=s] .card-wrapper .name,:host[data-size=s] .card-wrapper .cost{font-size:.8125rem;line-height:1.25rem;font-weight:800}:host[data-size=m] .card-wrapper{font-size:.8125rem;line-height:1.25rem;font-weight:500}:host[data-size=m] .card-wrapper .name,:host[data-size=m] .card-wrapper .cost{font-size:.9375rem;line-height:1.5rem;font-weight:800}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: i1$1.TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintContext", "tuiHintAppearance", "tuiHint"] }, { kind: "directive", type: i1$1.TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "directive", type: i2$1.TuiHighlight, selector: "[tuiHighlight]", inputs: ["tuiHighlight", "tuiHighlightColor"] }, { kind: "component", type: i2$1.TuiButtonLoading, selector: "[tuiButton][loading],[tuiIconButton][loading]", inputs: ["size", "loading"] }, { kind: "component", type: i2$1.TuiAvatar, selector: "tui-avatar,button[tuiAvatar],a[tuiAvatar]", inputs: ["size", "round", "src"] }, { kind: "directive", type: i2$1.TuiBadge, selector: "tui-badge,[tuiBadge]", inputs: ["size"] }, { kind: "component", type: HoverImageCarouselComponent, selector: "sc-hover-image-carousel", inputs: ["images"] }, { kind: "component", type: ScFavoriteBtnComponent, selector: "sc-favorite-btn", inputs: ["isFavorite", "showLoader", "disabled"], outputs: ["clickEvent"] }, { kind: "component", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: ["step", "showLoader", "showCross", "ignoreStepValidators", "appearance", "isDisabled", "size"], outputs: ["clickClearEvent"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint", "fromMain"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3507
3531
|
}
|
|
3508
3532
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ScPriceCardComponent, decorators: [{
|
|
3509
3533
|
type: Component,
|
|
3510
|
-
args: [{ selector: 'sc-price-card', providers: [SEARCH_TERM_PROVIDERS], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"product; else skeleton\"\n class=\"card-wrapper relative flex
|
|
3534
|
+
args: [{ selector: 'sc-price-card', providers: [SEARCH_TERM_PROVIDERS], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"product; else skeleton\"\n class=\"card-wrapper relative flex h-full w-auto flex-col rounded-xl p-1\"\n>\n <div class=\"flex items-center justify-between\">\n <span\n [tuiHighlight]=\"(search$ | async) ?? ''\"\n class=\"code text-tui-text-02\"\n >\n \u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}\n </span>\n\n <div class=\"flex gap-2\">\n <sc-favorite-btn\n (clickEvent)=\"clickFavoriteEvent.emit()\"\n [showLoader]=\"favoriteShowLoader\"\n [isFavorite]=\"product.isFavorite\"\n [disabled]=\"!!product.primaryCategory?.isFavorite\"\n ></sc-favorite-btn>\n <tui-avatar\n *ngIf=\"product.isPreviouslyOrdered\"\n src=\"@tui.star-filled\"\n size=\"s\"\n [style.background]=\"'var(--tui-status-negative-pale-hover)'\"\n [style.color]=\"'var(--tui-text-negative)'\"\n ></tui-avatar>\n </div>\n </div>\n\n <sc-hover-image-carousel\n (click)=\"clickCardEvent.emit()\"\n [images]=\"!isMobile ? getCardImagePreviewList(product) : [getCardImagePreview()]\"\n class=\"cursor-pointer\"\n ></sc-hover-image-carousel>\n <div class=\"flex grow flex-col justify-between gap-1\">\n <div class=\"flex flex-col gap-1\">\n <a\n tuiLink\n class=\"name\"\n [tuiHighlight]=\"(search$ | async) ?? ''\"\n (click)=\"clickCardEvent.emit()\"\n >\n {{ product.name }}\n </a>\n <div\n *ngIf=\"product?.pack\"\n class=\"flex items-center gap-1 text-tui-text-02\"\n >\n \u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}\n <tui-icon\n *ngIf=\"product.ignoreMinCountCheck\"\n icon=\"@tui.package\"\n [tuiHint]=\"minCountHint\"\n [tuiHintShowDelay]=\"100\"\n class=\"text-body-xl text-tui-text-01 opacity-90\"\n tuiHintDirection=\"top\"\n class=\"text-xl\"\n ></tui-icon>\n <ng-template #minCountHint>\n \u0414\u043E\u0441\u0442\u0443\u043F\u0435\u043D \u0437\u0430\u043A\u0430\u0437 <br />\n \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u043B\u044C\u043D\u043E\u0433\u043E <br />\n \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u0430\n </ng-template>\n </div>\n <span *ngIf=\"!isMobile && (authStatus$ | async) && product?.costDate\">\n \u0414\u0430\u0442\u0430:\n <a\n tuiLink\n [pseudo]=\"true\"\n class=\"text-tui-text-02\"\n (click)=\"clickPriceHistoryEvent.emit()\"\n >\n {{ product.costDate }}\n </a>\n </span>\n <div\n *ngIf=\"warehouseSelect$ | async as warehouseSelect\"\n class=\"flex flex-wrap items-center gap-x-2 gap-y-1\"\n >\n <div class=\"flex flex-wrap items-center gap-x-2 gap-y-1\">\n <span\n [class.text-tui-text-02]=\"!product.isWarehouseStockExist(warehouseSelect.id)\"\n class=\"cost\"\n >{{ product.costRubString }}</span\n >\n <tui-badge\n *ngIf=\"product.discount as discount\"\n size=\"m\"\n class=\"text-body-xs\"\n [style.background]=\"'var(--tui-status-positive)'\"\n [tuiHint]=\"discountHint\"\n [tuiHintShowDelay]=\"100\"\n tuiHintDirection=\"top\"\n >\n <tui-badge\n *ngIf=\"product.discount as discount\"\n size=\"s\"\n [style.background]=\"'var(--tui-background-base)'\"\n class=\"text-tui-text-02 text-body-xs-bold\"\n >\n {{ discount.percent }}%\n </tui-badge>\n <span class=\"line-through\">{{ product.discountCostString }}</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 </tui-badge>\n </div>\n <span\n *ngIf=\"!product.priceInRub\"\n class=\"text-body-xs-bold text-tui-text-02\"\n >{{ product.costString }}</span\n >\n </div>\n <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n </div>\n <div class=\"mt-1 flex gap-2\">\n <button\n *ngIf=\"!showQuantityControl\"\n tuiButton\n (click)=\"clickAddToCartEvent.emit(product)\"\n [loading]=\"quantityShowLoader\"\n [size]=\"size === 's' ? 'xs' : 's'\"\n class=\"grow !font-extrabold\"\n iconStart=\"@tui.shopping-cart\"\n >\n \u0412 \u043A\u043E\u0440\u0437\u0438\u043D\u0443\n </button>\n <sc-input-quantity\n #inputQuantity\n *ngIf=\"showQuantityControl\"\n [formControl]=\"quantityControl\"\n [size]=\"size\"\n [step]=\"unitsHelper.productMultiplicity(product)\"\n [ignoreStepValidators]=\"product.ignoreMinCountCheck\"\n [showLoader]=\"quantityShowLoader\"\n (clickClearEvent)=\"clickClearEvent.emit(cartItem)\"\n class=\"w-full\"\n (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n ></sc-input-quantity>\n <tui-avatar\n *ngIf=\"product.cartItem && !showQuantityControl\"\n src=\"@tui.check\"\n size=\"s\"\n [style.background]=\"'var(--tui-status-warning-pale)'\"\n [style.color]=\"'var(--tui-background-accent-1)'\"\n ></tui-avatar>\n </div>\n </div>\n</div>\n\n<ng-template #skeleton>\n <div class=\"card-wrapper relative flex h-full w-auto flex-col rounded-xl p-1\"></div>\n</ng-template>\n", styles: [":host tui-badge{--t-padding: .25rem !important}:host .name{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}:host[data-size=s] .card-wrapper{font-size:.6875rem;line-height:1rem;font-weight:500}:host[data-size=s] .card-wrapper .name,:host[data-size=s] .card-wrapper .cost{font-size:.8125rem;line-height:1.25rem;font-weight:800}:host[data-size=m] .card-wrapper{font-size:.8125rem;line-height:1.25rem;font-weight:500}:host[data-size=m] .card-wrapper .name,:host[data-size=m] .card-wrapper .cost{font-size:.9375rem;line-height:1.5rem;font-weight:800}\n"] }]
|
|
3511
3535
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { size: [{
|
|
3512
3536
|
type: Input
|
|
3513
3537
|
}, {
|
|
3514
3538
|
type: HostBinding,
|
|
3515
3539
|
args: ['attr.data-size']
|
|
3516
|
-
}], isMobile: [{
|
|
3517
|
-
type: HostBinding,
|
|
3518
|
-
args: ['attr.is_mobile']
|
|
3519
|
-
}], isInCart: [{
|
|
3520
|
-
type: HostBinding,
|
|
3521
|
-
args: ['attr.is_in_cart']
|
|
3522
3540
|
}] } });
|
|
3523
3541
|
|
|
3524
3542
|
/**
|
|
@@ -3719,7 +3737,12 @@ class ScCatalogModule {
|
|
|
3719
3737
|
TuiLineDaysChart,
|
|
3720
3738
|
TuiLineDaysChartHint,
|
|
3721
3739
|
TuiAxes,
|
|
3722
|
-
TuiButtonLoading
|
|
3740
|
+
TuiButtonLoading,
|
|
3741
|
+
TuiAvatar,
|
|
3742
|
+
TuiBadge,
|
|
3743
|
+
HoverImageCarouselComponent,
|
|
3744
|
+
TuiLineClamp,
|
|
3745
|
+
TuiHovered], exports: [ScPriceListPaginationComponent,
|
|
3723
3746
|
ScCategoryCardComponent,
|
|
3724
3747
|
ScFavoriteBtnComponent,
|
|
3725
3748
|
ScInputQuantityComponent,
|
|
@@ -3737,7 +3760,10 @@ class ScCatalogModule {
|
|
|
3737
3760
|
TuiElasticContainer,
|
|
3738
3761
|
TuiLineDaysChart,
|
|
3739
3762
|
TuiAxes,
|
|
3740
|
-
TuiButtonLoading
|
|
3763
|
+
TuiButtonLoading,
|
|
3764
|
+
TuiAvatar,
|
|
3765
|
+
HoverImageCarouselComponent,
|
|
3766
|
+
TuiLineClamp] }); }
|
|
3741
3767
|
}
|
|
3742
3768
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ScCatalogModule, decorators: [{
|
|
3743
3769
|
type: NgModule,
|
|
@@ -3785,6 +3811,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
3785
3811
|
TuiLineDaysChartHint,
|
|
3786
3812
|
TuiAxes,
|
|
3787
3813
|
TuiButtonLoading,
|
|
3814
|
+
TuiAvatar,
|
|
3815
|
+
TuiBadge,
|
|
3816
|
+
HoverImageCarouselComponent,
|
|
3817
|
+
TuiLineClamp,
|
|
3818
|
+
TuiHovered,
|
|
3788
3819
|
],
|
|
3789
3820
|
}]
|
|
3790
3821
|
}] });
|
|
@@ -3814,8 +3845,6 @@ class ScCartItemMobileComponent {
|
|
|
3814
3845
|
*
|
|
3815
3846
|
* @param unitsHelper Экземпляр класса-помощника для работы со значениями единиц измерения товара.
|
|
3816
3847
|
* @param previewDialogService Сервис диалогового окна предварительного просмотра.
|
|
3817
|
-
* @param urls Список ссылок на разделы backend'a.
|
|
3818
|
-
* @param pathImageNotFound Путь до изображения 'Товар не найден'.
|
|
3819
3848
|
*/
|
|
3820
3849
|
constructor(unitsHelper, previewDialogService) {
|
|
3821
3850
|
this.unitsHelper = unitsHelper;
|