@snabcentr/client-ui 0.2.9 → 0.2.11
Sign up to get free protection for your applications and to get access to all the features.
- package/catalog/category-card/sc-category-card.component.d.ts +17 -6
- package/catalog/price-card/sc-price-card.component.d.ts +11 -2
- package/catalog/sc-favorite-btn/sc-favorite-btn.component.d.ts +13 -1
- package/esm2020/catalog/category-card/sc-category-card.component.mjs +24 -13
- package/esm2020/catalog/price-card/sc-price-card.component.mjs +17 -6
- package/esm2020/catalog/sc-favorite-btn/sc-favorite-btn.component.mjs +22 -5
- package/fesm2015/snabcentr-client-ui.mjs +55 -17
- package/fesm2015/snabcentr-client-ui.mjs.map +1 -1
- package/fesm2020/snabcentr-client-ui.mjs +55 -17
- package/fesm2020/snabcentr-client-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/tailwind/tailwind.scss +2 -6
|
@@ -642,7 +642,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
642
642
|
type: Output
|
|
643
643
|
}] } });
|
|
644
644
|
|
|
645
|
-
// TODO: TASK[#6771]: Реализовать кнопку избранных товаров.
|
|
646
645
|
/**
|
|
647
646
|
* Компонент кнопки избранных товаров и категорий.
|
|
648
647
|
*/
|
|
@@ -652,15 +651,33 @@ class ScFavoriteBtnComponent {
|
|
|
652
651
|
* Событие нажатия на кнопку.
|
|
653
652
|
*/
|
|
654
653
|
this.clickEvent = new EventEmitter();
|
|
654
|
+
/**
|
|
655
|
+
* Признак наличия товара или категории в избранных.
|
|
656
|
+
*/
|
|
657
|
+
this.isFavorite = false;
|
|
658
|
+
/**
|
|
659
|
+
* Признак, что необходимо отобразить загрузку на кнопке.
|
|
660
|
+
*/
|
|
661
|
+
this.showLoader = false;
|
|
662
|
+
/**
|
|
663
|
+
* Признак, что кнопка деактивирована.
|
|
664
|
+
*/
|
|
665
|
+
this.disabled = false;
|
|
655
666
|
}
|
|
656
667
|
}
|
|
657
668
|
ScFavoriteBtnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScFavoriteBtnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
658
|
-
ScFavoriteBtnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScFavoriteBtnComponent, selector: "sc-favorite-btn", outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<button tuiIconButton (click)=\"clickEvent.emit()\" appearance=\"flat\" size=\"s\">\n <tui-svg class=\"text-tui-primary\" src=\"
|
|
669
|
+
ScFavoriteBtnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScFavoriteBtnComponent, selector: "sc-favorite-btn", inputs: { isFavorite: "isFavorite", showLoader: "showLoader", disabled: "disabled" }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<button tuiIconButton (click)=\"clickEvent.emit()\" [disabled]=\"disabled\" [showLoader]=\"showLoader\" appearance=\"flat\" size=\"s\">\n <tui-svg class=\"text-tui-primary\" [src]=\"isFavorite ? 'scIconFavoriteFill' : 'scIconFavorite'\"></tui-svg>\n</button>\n", dependencies: [{ kind: "component", type: i3$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
659
670
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScFavoriteBtnComponent, decorators: [{
|
|
660
671
|
type: Component,
|
|
661
|
-
args: [{ selector: 'sc-favorite-btn', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button tuiIconButton (click)=\"clickEvent.emit()\" appearance=\"flat\" size=\"s\">\n <tui-svg class=\"text-tui-primary\" src=\"
|
|
672
|
+
args: [{ selector: 'sc-favorite-btn', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button tuiIconButton (click)=\"clickEvent.emit()\" [disabled]=\"disabled\" [showLoader]=\"showLoader\" appearance=\"flat\" size=\"s\">\n <tui-svg class=\"text-tui-primary\" [src]=\"isFavorite ? 'scIconFavoriteFill' : 'scIconFavorite'\"></tui-svg>\n</button>\n" }]
|
|
662
673
|
}], propDecorators: { clickEvent: [{
|
|
663
674
|
type: Output
|
|
675
|
+
}], isFavorite: [{
|
|
676
|
+
type: Input
|
|
677
|
+
}], showLoader: [{
|
|
678
|
+
type: Input
|
|
679
|
+
}], disabled: [{
|
|
680
|
+
type: Input
|
|
664
681
|
}] } });
|
|
665
682
|
|
|
666
683
|
/**
|
|
@@ -674,10 +691,12 @@ class ScCategoryCardComponent {
|
|
|
674
691
|
* @param renderer Экземпляр базового класса для реализации пользовательского рендеринга.
|
|
675
692
|
* @param pathImageNotFound Путь до изображения 'Товар не найден'.
|
|
676
693
|
*/
|
|
677
|
-
constructor(urls, renderer, pathImageNotFound) {
|
|
694
|
+
constructor(urls, renderer, pathImageNotFound, authService, cdr) {
|
|
678
695
|
this.urls = urls;
|
|
679
696
|
this.renderer = renderer;
|
|
680
697
|
this.pathImageNotFound = pathImageNotFound;
|
|
698
|
+
this.authService = authService;
|
|
699
|
+
this.cdr = cdr;
|
|
681
700
|
/**
|
|
682
701
|
* Размер карточки категории.
|
|
683
702
|
*/
|
|
@@ -687,9 +706,13 @@ class ScCategoryCardComponent {
|
|
|
687
706
|
*/
|
|
688
707
|
this.isSkeleton = false;
|
|
689
708
|
/**
|
|
690
|
-
*
|
|
709
|
+
* Признак, что необходимо отобразить лоадер для кнопки избранных товаров и категорий.
|
|
691
710
|
*/
|
|
692
|
-
this.
|
|
711
|
+
this.favoriteShowLoader = false;
|
|
712
|
+
/**
|
|
713
|
+
* {@link Observable} изменения статуса авторизации.
|
|
714
|
+
*/
|
|
715
|
+
this.authStatus$ = this.authService.getAuthChange();
|
|
693
716
|
/**
|
|
694
717
|
* Признак что категория имеет поведение наведения и скрытия названия.
|
|
695
718
|
*/
|
|
@@ -728,12 +751,18 @@ class ScCategoryCardComponent {
|
|
|
728
751
|
this.renderer.setStyle(this.name.nativeElement, 'maxHeight', null);
|
|
729
752
|
}
|
|
730
753
|
}
|
|
754
|
+
/**
|
|
755
|
+
* Устанавливает компонент в очередь на обновление.
|
|
756
|
+
*/
|
|
757
|
+
markForCheck() {
|
|
758
|
+
this.cdr.markForCheck();
|
|
759
|
+
}
|
|
731
760
|
}
|
|
732
|
-
ScCategoryCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCategoryCardComponent, deps: [{ token: SC_URLS }, { token: i0.Renderer2 }, { token: SC_PATH_IMAGE_NOT_FOUND }], target: i0.ɵɵFactoryTarget.Component });
|
|
733
|
-
ScCategoryCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScCategoryCardComponent, selector: "sc-category-card", inputs: { category: "category", size: "size", isSkeleton: "isSkeleton",
|
|
761
|
+
ScCategoryCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCategoryCardComponent, deps: [{ token: SC_URLS }, { token: i0.Renderer2 }, { token: SC_PATH_IMAGE_NOT_FOUND }, { token: i1.ScAuthService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
762
|
+
ScCategoryCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScCategoryCardComponent, selector: "sc-category-card", inputs: { category: "category", size: "size", isSkeleton: "isSkeleton", isHovered: "isHovered" }, outputs: { clickOnCardEvent: "clickOnCardEvent", clickOnFavoriteEvent: "clickOnFavoriteEvent" }, host: { listeners: { "mousemove": "moveEnterHandler()", "mouseleave": "mouseLeaveHandler()" }, properties: { "attr.data-size": "this.size" } }, viewQueries: [{ propertyName: "name", first: true, predicate: ["name"], descendants: true }], ngImport: i0, template: "<div class=\"relative group\">\n <button\n (click)=\"clickOnCardEvent.emit(category)\"\n [class.pointer-events-none]=\"!category || isSkeleton\"\n class=\"category-btn flex flex-col relative rounded-tui-radius-m overflow-hidden shadow-sc-2\"\n >\n <div class=\"img-wrapper w-full grow bg-tui-base-02 overflow-hidden\">\n <img *ngIf=\"category && !isSkeleton\" [src]=\"getCategoryImgURL(category)\" [alt]=\"category.name\" class=\"w-full\" />\n </div>\n <div #name [attr.data-is-hovered]=\"!isHovered\" class=\"name grid items-center justify-center font-bold bg-white w-full overflow-hidden shrink-0 duration-300\">\n <span *ngIf=\"category && !isSkeleton; else skeletonName\">{{ category.name }}</span>\n <ng-template #skeletonName>\n <div class=\"skeleton-name bg-tui-base-02 rounded-tui-radius-s\"></div>\n </ng-template>\n </div>\n </button>\n <sc-favorite-btn\n *ngIf=\"category && !isSkeleton && (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[data-size=m] button.category-btn{width:100%;height:12.5rem}:host[data-size=m] button.category-btn .img-wrapper{max-height:8.75rem}:host[data-size=m] button.category-btn .name{min-height:2.5rem;padding-inline:.75rem;margin-block:.75rem}:host[data-size=m] button.category-btn .name:not([data-is-hovered=true]){max-height:2.5rem}:host[data-size=m] button.category-btn .name .skeleton-name{width:10rem;height:1rem}:host[data-size=s] button.category-btn{width:100%;height:10rem}:host[data-size=s] button.category-btn .img-wrapper{max-height:8.75rem}:host[data-size=s] button.category-btn .name{min-height:2rem;font-size:.75rem;line-height:1rem;padding-inline:.5rem;margin-block:.5rem}:host[data-size=s] button.category-btn .name:not([data-is-hovered=true]){max-height:2rem}:host[data-size=s] button.category-btn .name .skeleton-name{width:7rem;height:.75rem}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ScFavoriteBtnComponent, selector: "sc-favorite-btn", inputs: ["isFavorite", "showLoader", "disabled"], outputs: ["clickEvent"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
734
763
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCategoryCardComponent, decorators: [{
|
|
735
764
|
type: Component,
|
|
736
|
-
args: [{ selector: 'sc-category-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative group\">\n <button\n (click)=\"clickOnCardEvent.emit(category)\"\n [class.pointer-events-none]=\"!category || isSkeleton\"\n class=\"category-btn flex flex-col relative rounded-tui-radius-m overflow-hidden shadow-sc-2\"\n >\n <div class=\"img-wrapper w-full grow bg-tui-base-02 overflow-hidden\">\n <img *ngIf=\"category && !isSkeleton\" [src]=\"getCategoryImgURL(category)\" [alt]=\"category.name\" class=\"w-full\" />\n </div>\n <div #name [attr.data-is-hovered]=\"!isHovered\" class=\"name grid items-center justify-center font-bold bg-white w-full overflow-hidden shrink-0 duration-300\">\n <span *ngIf=\"category && !isSkeleton; else skeletonName\">{{ category.name }}</span>\n <ng-template #skeletonName>\n <div class=\"skeleton-name bg-tui-base-02 rounded-tui-radius-s\"></div>\n </ng-template>\n </div>\n </button>\n <sc-favorite-btn
|
|
765
|
+
args: [{ selector: 'sc-category-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative group\">\n <button\n (click)=\"clickOnCardEvent.emit(category)\"\n [class.pointer-events-none]=\"!category || isSkeleton\"\n class=\"category-btn flex flex-col relative rounded-tui-radius-m overflow-hidden shadow-sc-2\"\n >\n <div class=\"img-wrapper w-full grow bg-tui-base-02 overflow-hidden\">\n <img *ngIf=\"category && !isSkeleton\" [src]=\"getCategoryImgURL(category)\" [alt]=\"category.name\" class=\"w-full\" />\n </div>\n <div #name [attr.data-is-hovered]=\"!isHovered\" class=\"name grid items-center justify-center font-bold bg-white w-full overflow-hidden shrink-0 duration-300\">\n <span *ngIf=\"category && !isSkeleton; else skeletonName\">{{ category.name }}</span>\n <ng-template #skeletonName>\n <div class=\"skeleton-name bg-tui-base-02 rounded-tui-radius-s\"></div>\n </ng-template>\n </div>\n </button>\n <sc-favorite-btn\n *ngIf=\"category && !isSkeleton && (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[data-size=m] button.category-btn{width:100%;height:12.5rem}:host[data-size=m] button.category-btn .img-wrapper{max-height:8.75rem}:host[data-size=m] button.category-btn .name{min-height:2.5rem;padding-inline:.75rem;margin-block:.75rem}:host[data-size=m] button.category-btn .name:not([data-is-hovered=true]){max-height:2.5rem}:host[data-size=m] button.category-btn .name .skeleton-name{width:10rem;height:1rem}:host[data-size=s] button.category-btn{width:100%;height:10rem}:host[data-size=s] button.category-btn .img-wrapper{max-height:8.75rem}:host[data-size=s] button.category-btn .name{min-height:2rem;font-size:.75rem;line-height:1rem;padding-inline:.5rem;margin-block:.5rem}:host[data-size=s] button.category-btn .name:not([data-is-hovered=true]){max-height:2rem}:host[data-size=s] button.category-btn .name .skeleton-name{width:7rem;height:.75rem}\n"] }]
|
|
737
766
|
}], ctorParameters: function () {
|
|
738
767
|
return [{ type: undefined, decorators: [{
|
|
739
768
|
type: Inject,
|
|
@@ -741,7 +770,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
741
770
|
}] }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
|
|
742
771
|
type: Inject,
|
|
743
772
|
args: [SC_PATH_IMAGE_NOT_FOUND]
|
|
744
|
-
}] }];
|
|
773
|
+
}] }, { type: i1.ScAuthService }, { type: i0.ChangeDetectorRef }];
|
|
745
774
|
}, propDecorators: { category: [{
|
|
746
775
|
type: Input
|
|
747
776
|
}], name: [{
|
|
@@ -754,8 +783,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
754
783
|
args: ['attr.data-size']
|
|
755
784
|
}], isSkeleton: [{
|
|
756
785
|
type: Input
|
|
757
|
-
}], showFavoriteBtn: [{
|
|
758
|
-
type: Input
|
|
759
786
|
}], isHovered: [{
|
|
760
787
|
type: Input
|
|
761
788
|
}], clickOnCardEvent: [{
|
|
@@ -783,16 +810,21 @@ class ScPriceCardComponent {
|
|
|
783
810
|
* @param urls Список ссылок на разделы backend'a.
|
|
784
811
|
* @param pathImageNotFound Путь до изображения 'Товар не найден'.
|
|
785
812
|
*/
|
|
786
|
-
constructor(unitsHelper, authService, warehouseService, urls, pathImageNotFound) {
|
|
813
|
+
constructor(unitsHelper, authService, warehouseService, urls, pathImageNotFound, cdr) {
|
|
787
814
|
this.unitsHelper = unitsHelper;
|
|
788
815
|
this.authService = authService;
|
|
789
816
|
this.warehouseService = warehouseService;
|
|
790
817
|
this.urls = urls;
|
|
791
818
|
this.pathImageNotFound = pathImageNotFound;
|
|
819
|
+
this.cdr = cdr;
|
|
792
820
|
/**
|
|
793
821
|
* Признак, что необходимо отобразить лоадер для поля ввода количества товара.
|
|
794
822
|
*/
|
|
795
823
|
this.quantityShowLoader = false;
|
|
824
|
+
/**
|
|
825
|
+
* Признак, что необходимо отобразить лоадер для кнопки избранных товаров и категорий.
|
|
826
|
+
*/
|
|
827
|
+
this.favoriteShowLoader = false;
|
|
796
828
|
/**
|
|
797
829
|
* Признак, что необходимо отобразить поле ввода количества товара.
|
|
798
830
|
*/
|
|
@@ -873,12 +905,18 @@ class ScPriceCardComponent {
|
|
|
873
905
|
var _a, _b;
|
|
874
906
|
return (_b = (_a = this.product) === null || _a === void 0 ? void 0 : _a.getImage(this.urls.imgServerUrl)) !== null && _b !== void 0 ? _b : this.pathImageNotFound;
|
|
875
907
|
}
|
|
908
|
+
/**
|
|
909
|
+
* Устанавливает компонент в очередь на обновление.
|
|
910
|
+
*/
|
|
911
|
+
markForCheck() {
|
|
912
|
+
this.cdr.markForCheck();
|
|
913
|
+
}
|
|
876
914
|
}
|
|
877
|
-
ScPriceCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceCardComponent, deps: [{ token: UnitsHelper }, { token: i1.ScAuthService }, { token: i1.ScWarehouseService }, { token: SC_URLS }, { token: SC_PATH_IMAGE_NOT_FOUND }], target: i0.ɵɵFactoryTarget.Component });
|
|
878
|
-
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-[
|
|
915
|
+
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 });
|
|
916
|
+
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> \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 *ngIf=\"showQuantityControl\"\n [formControl]=\"quantityControl\"\n [quantityUnit]=\"product.quantityUnit\"\n [size]=\"getQuantitySize\"\n [step]=\"unitsHelper.productMultiplicity(product)\"\n [showLoader]=\"quantityShowLoader\"\n (clickClearEvent)=\"clickClearEvent.emit(cartItem)\"\n class=\"w-full\"\n ></sc-input-quantity>\n</div>\n\n<ng-template #skeleton>\n <div class=\"flex flex-col card-wrapper bg-white rounded-xl overflow-hidden shadow-sc-1\">\n <!-- \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 -->\n <div class=\"w-full h-3/5 rounded-t bg-tui-base-02\"></div>\n <!-- \u041A\u0440\u0430\u0442\u043A\u0430\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F \u043E \u0442\u043E\u0432\u0430\u0440\u0435 -->\n <div class=\"flex flex-col grow gap-2.5 bg-white rounded-b p-5\">\n <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n <div class=\"w-3/5 h-4 rounded bg-tui-base-02\"></div>\n <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n </div>\n </div>\n</ng-template>\n", styles: [":host[data-size=s] .card-wrapper{width:10rem;height:16rem}:host[data-size=s] .card-wrapper .wrapper-info{padding:8px}:host[data-size=s] .card-wrapper .wrapper-info .cost{font-size:.875rem;line-height:1.25rem}:host[data-size=s] .card-wrapper .button-wrapper tui-svg{font-size:.75rem;line-height:1rem;width:1rem}:host[data-size=m] .card-wrapper{width:12.5rem;height:20rem}:host[data-size=m] .card-wrapper .wrapper-info{padding-inline:16px;padding-block:8px}:host[data-size=m] .card-wrapper .name{font-size:.875rem;line-height:1.25rem;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:3rem}:host[data-size=m] .card-wrapper .info{max-height:1rem}:host[data-size=m] .card-wrapper .cost{font-size:1.125rem;line-height:1.75rem}:host[data-size=m] .card-wrapper .button-wrapper{max-height:0px;font-size:.75rem;line-height:1rem}:host[data-size=m] .card-wrapper:hover .name{-webkit-line-clamp:unset;max-height:6rem}:host[data-size=m] .card-wrapper:hover .info{max-height:3rem}:host[data-size=m] .card-wrapper:hover .button-wrapper{max-height:3rem}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i3$1.TuiHintDriverDirective, selector: "[tuiHint]" }, { kind: "directive", type: i3$1.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i3$1.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { kind: "component", type: i3$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: ScFavoriteBtnComponent, selector: "sc-favorite-btn", 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"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
879
917
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceCardComponent, decorators: [{
|
|
880
918
|
type: Component,
|
|
881
|
-
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-[
|
|
919
|
+
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> \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 *ngIf=\"showQuantityControl\"\n [formControl]=\"quantityControl\"\n [quantityUnit]=\"product.quantityUnit\"\n [size]=\"getQuantitySize\"\n [step]=\"unitsHelper.productMultiplicity(product)\"\n [showLoader]=\"quantityShowLoader\"\n (clickClearEvent)=\"clickClearEvent.emit(cartItem)\"\n class=\"w-full\"\n ></sc-input-quantity>\n</div>\n\n<ng-template #skeleton>\n <div class=\"flex flex-col card-wrapper bg-white rounded-xl overflow-hidden shadow-sc-1\">\n <!-- \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 -->\n <div class=\"w-full h-3/5 rounded-t bg-tui-base-02\"></div>\n <!-- \u041A\u0440\u0430\u0442\u043A\u0430\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F \u043E \u0442\u043E\u0432\u0430\u0440\u0435 -->\n <div class=\"flex flex-col grow gap-2.5 bg-white rounded-b p-5\">\n <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n <div class=\"w-3/5 h-4 rounded bg-tui-base-02\"></div>\n <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n </div>\n </div>\n</ng-template>\n", styles: [":host[data-size=s] .card-wrapper{width:10rem;height:16rem}:host[data-size=s] .card-wrapper .wrapper-info{padding:8px}:host[data-size=s] .card-wrapper .wrapper-info .cost{font-size:.875rem;line-height:1.25rem}:host[data-size=s] .card-wrapper .button-wrapper tui-svg{font-size:.75rem;line-height:1rem;width:1rem}:host[data-size=m] .card-wrapper{width:12.5rem;height:20rem}:host[data-size=m] .card-wrapper .wrapper-info{padding-inline:16px;padding-block:8px}:host[data-size=m] .card-wrapper .name{font-size:.875rem;line-height:1.25rem;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:3rem}:host[data-size=m] .card-wrapper .info{max-height:1rem}:host[data-size=m] .card-wrapper .cost{font-size:1.125rem;line-height:1.75rem}:host[data-size=m] .card-wrapper .button-wrapper{max-height:0px;font-size:.75rem;line-height:1rem}:host[data-size=m] .card-wrapper:hover .name{-webkit-line-clamp:unset;max-height:6rem}:host[data-size=m] .card-wrapper:hover .info{max-height:3rem}:host[data-size=m] .card-wrapper:hover .button-wrapper{max-height:3rem}\n"] }]
|
|
882
920
|
}], ctorParameters: function () {
|
|
883
921
|
return [{ type: UnitsHelper }, { type: i1.ScAuthService }, { type: i1.ScWarehouseService }, { type: undefined, decorators: [{
|
|
884
922
|
type: Inject,
|
|
@@ -886,7 +924,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
886
924
|
}] }, { type: undefined, decorators: [{
|
|
887
925
|
type: Inject,
|
|
888
926
|
args: [SC_PATH_IMAGE_NOT_FOUND]
|
|
889
|
-
}] }];
|
|
927
|
+
}] }, { type: i0.ChangeDetectorRef }];
|
|
890
928
|
}, propDecorators: { showQuantityControl: [{
|
|
891
929
|
type: Input
|
|
892
930
|
}], cartItem: [{
|