@snabcentr/client-ui 0.2.0 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Potentially problematic release.
This version of @snabcentr/client-ui might be problematic. Click here for more details.
- package/catalog/price-card/sc-price-card.component.d.ts +12 -3
- package/esm2020/cart/cart-item-mobile/sc-cart-item-mobile.component.mjs +3 -3
- package/esm2020/catalog/price-card/sc-price-card.component.mjs +20 -5
- package/fesm2015/snabcentr-client-ui.mjs +17 -4
- package/fesm2015/snabcentr-client-ui.mjs.map +1 -1
- package/fesm2020/snabcentr-client-ui.mjs +17 -4
- package/fesm2020/snabcentr-client-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/tailwind/tailwind.scss +4 -0
|
@@ -566,10 +566,10 @@ class ScCartItemMobileComponent {
|
|
|
566
566
|
}
|
|
567
567
|
}
|
|
568
568
|
ScCartItemMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCartItemMobileComponent, deps: [{ token: UnitsHelper }, { token: TuiPreviewDialogService }, { token: SC_URLS }, { token: SC_PATH_IMAGE_NOT_FOUND }], target: i0.ɵɵFactoryTarget.Component });
|
|
569
|
-
ScCartItemMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScCartItemMobileComponent, selector: "sc-cart-item-mobile", inputs: { cartItem: "cartItem" }, outputs: { quantityValueChanges: "quantityValueChanges", clickDeleteEvent: "clickDeleteEvent", clickSettingsEvent: "clickSettingsEvent", clickCardEvent: "clickCardEvent" }, viewQueries: [{ propertyName: "specificationPreviewRef", first: true, predicate: ["specificationPreview"], descendants: true }], ngImport: i0, template: "<div class=\"ml-2 mt-2 relative p-4 gap-y-2 gap-x-4 flex flex-wrap bg-white border border-tui-base-04 shadow-sc-2 rounded-xl\">\n <ng-container *ngIf=\"cartItem && product; else skeleton\">\n <button tuiIconButton size=\"m\" icon=\"scIconVerticalThreeDots\" appearance=\"float\" tuiMode=\"onLight\" class=\"!absolute right-0 top-0\"></button>\n <button\n tuiIconButton\n size=\"m\"\n icon=\"scIconBasket\"\n appearance=\"secondary\"\n tuiMode=\"onLight\"\n (click)=\"clickDeleteEvent.emit()\"\n class=\"shadow-sc-2 !absolute -left-2 -top-2\"\n ></button>\n <div class=\"flex gap-2\">\n <div class=\"flex shrink-0 h-20 w-20 justify-center items-center overflow-hidden\">\n <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" [class.p-5]=\"!product.images?.length\" class=\"cursor-pointer\" />\n </div>\n\n <div class=\"flex flex-wrap self-center gap-x-8 gap-y-0.5\">\n <div class=\"w-[13rem]\">\n <a tuiLink (click)=\"clickCardEvent.emit()\">\n <span class=\"font-bold\">{{ product.name }}</span>\n </a>\n <div class=\"text-tui-text-02 text-xs\">\n <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n <p *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n <a tuiLink *ngIf=\"cartItem.specificationImgUrl\" (click)=\"showSpecification()\">\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a>\n <ng-template #specificationPreview let-preview>\n <tui-preview [rotatable]=\"false\" [zoomable]=\"false\">\n <img *polymorpheusOutlet=\"cartItem.specificationImgUrl as src\" alt=\"preview\" alt=\"\" [src]=\"cartItem.specificationImgUrl\" />\n <button icon=\"tuiIconClose\" title=\"Close\" tuiIconButton tuiPreviewAction type=\"button\" (click)=\"preview.complete()\"></button>\n </tui-preview>\n </ng-template>\n </div>\n </div>\n <div class=\"flex flex-col self-center w-[10rem] gap-x-8 gap-y-0.5\">\n <span *ngIf=\"product.discount\" class=\"flex items-center text-xs text-tui-text-02\">\n <span class=\"line-through\">{{ product.discountCostString }}</span> \n <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-xs !h-4\"></tui-svg>\n <ng-template #discountHint>\n <div class=\"font-bold\">{{ product.discount.name }}</div>\n <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n </ng-template>\n </span>\n <p class=\"flex flex-col items-baseline gap-x-2 font-bold\">\n <span>{{ product.costRubString }}</span>\n <span *ngIf=\"!product.priceInRub\" class=\"text-xs text-tui-text-02\">{{ product.costString }}</span>\n </p>\n <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n </div>\n </div>\n </div>\n\n <div class=\"flex gap-2 items-center w-44 text-xs text-tui-text-02\">\n <button tuiIconButton (click)=\"clickSettingsEvent.emit()\" size=\"m\" icon=\"scIconSettings\" appearance=\"secondary\" tuiMode=\"onLight\"></button>\n <div>\n <ng-container *ngIf=\"unitsHelper.productIsMeasurable(product); else notMeasurable\">\n <p>\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} {{ product.unit }}</p>\n </ng-container>\n <ng-template #notMeasurable>\n <p *ngIf=\"cartItem.length && !unitsHelper.productIsMeasurable(product)\">\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} \u043C.</p>\n <p *ngIf=\"cartItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ cartItem.width }} \u043C.</p>\n <p *ngIf=\"cartItem.height\">\u0412\u044B\u0441\u043E\u0442\u0430: {{ cartItem.height }} \u043C.</p>\n </ng-template>\n </div>\n </div>\n <div class=\"flex items-center grow justify-end\">\n <sc-input-quantity\n class=\"w-28\"\n *ngIf=\"quantityControl\"\n [formControl]=\"quantityControl\"\n [quantityUnit]=\"product.quantityUnit\"\n [showCross]=\"false\"\n size=\"s\"\n [step]=\"unitsHelper.productMultiplicity(product)\"\n ></sc-input-quantity>\n </div>\n </ng-container>\n\n <ng-template #skeleton>\n <div class=\"flex gap-2 w-full\">\n <div class=\"h-20 w-20 bg-tui-base-02 rounded-xl \"></div>\n <div class=\"flex flex-col grow gap-2.5 bg-white\">\n <div class=\"w-full h-4 rounded-xl bg-tui-base-02\"></div>\n <div class=\"w-3/5 h-4 rounded-xl bg-tui-base-02\"></div>\n <div class=\"w-4/5 h-4 rounded-xl bg-tui-base-02\"></div>\n </div>\n </div>\n </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: ["step", "quantityUnit", "showLoader", "showCross", "appearance", "isDisabled", "size"], outputs: ["clickClearEvent"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint"] }, { kind: "component", type: i3$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "directive", type: i3$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { kind: "component", type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i3$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i3$1.TuiHintDriverDirective, selector: "[tuiHint]" }, { kind: "directive", type: i3$1.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i3$1.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i7.TuiPreviewComponent, selector: "tui-preview", inputs: ["zoomable", "rotatable"] }, { kind: "directive", type: i7.TuiPreviewActionDirective, selector: "[tuiPreviewAction]" }, { kind: "directive", type: i8.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
569
|
+
ScCartItemMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScCartItemMobileComponent, selector: "sc-cart-item-mobile", inputs: { cartItem: "cartItem" }, outputs: { quantityValueChanges: "quantityValueChanges", clickDeleteEvent: "clickDeleteEvent", clickSettingsEvent: "clickSettingsEvent", clickCardEvent: "clickCardEvent" }, viewQueries: [{ propertyName: "specificationPreviewRef", first: true, predicate: ["specificationPreview"], descendants: true }], ngImport: i0, template: "<div class=\"ml-2 mt-2 relative p-4 gap-y-2 gap-x-4 flex flex-wrap bg-white border border-tui-base-04 shadow-sc-2 rounded-xl\">\n <ng-container *ngIf=\"cartItem && product; else skeleton\">\n<!--\nTODO: \u041D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u0430 \u0440\u0435\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u044F \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B\u0430.\n <button tuiIconButton size=\"m\" icon=\"scIconVerticalThreeDots\" appearance=\"float\" tuiMode=\"onLight\" class=\"!absolute right-0 top-0\"></button>\n-->\n <button\n tuiIconButton\n size=\"m\"\n icon=\"scIconBasket\"\n appearance=\"secondary\"\n tuiMode=\"onLight\"\n (click)=\"clickDeleteEvent.emit()\"\n class=\"shadow-sc-2 !absolute -left-2 -top-2\"\n ></button>\n <div class=\"flex gap-2\">\n <div class=\"flex shrink-0 h-20 w-20 justify-center items-center overflow-hidden\">\n <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" [class.p-5]=\"!product.images?.length\" class=\"cursor-pointer\" />\n </div>\n\n <div class=\"flex flex-wrap self-center gap-x-8 gap-y-0.5\">\n <div class=\"w-[13rem]\">\n <a tuiLink (click)=\"clickCardEvent.emit()\">\n <span class=\"font-bold\">{{ product.name }}</span>\n </a>\n <div class=\"text-tui-text-02 text-xs\">\n <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n <p *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n <a tuiLink *ngIf=\"cartItem.specificationImgUrl\" (click)=\"showSpecification()\">\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a>\n <ng-template #specificationPreview let-preview>\n <tui-preview [rotatable]=\"false\" [zoomable]=\"false\">\n <img *polymorpheusOutlet=\"cartItem.specificationImgUrl as src\" alt=\"preview\" alt=\"\" [src]=\"cartItem.specificationImgUrl\" />\n <button icon=\"tuiIconClose\" title=\"Close\" tuiIconButton tuiPreviewAction type=\"button\" (click)=\"preview.complete()\"></button>\n </tui-preview>\n </ng-template>\n </div>\n </div>\n <div class=\"flex flex-col self-center w-[10rem] gap-x-8 gap-y-0.5\">\n <span *ngIf=\"product.discount\" class=\"flex items-center text-xs text-tui-text-02\">\n <span class=\"line-through\">{{ product.discountCostString }}</span> \n <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-xs !h-4\"></tui-svg>\n <ng-template #discountHint>\n <div class=\"font-bold\">{{ product.discount.name }}</div>\n <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n </ng-template>\n </span>\n <p class=\"flex flex-col items-baseline gap-x-2 font-bold\">\n <span>{{ product.costRubString }}</span>\n <span *ngIf=\"!product.priceInRub\" class=\"text-xs text-tui-text-02\">{{ product.costString }}</span>\n </p>\n <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n </div>\n </div>\n </div>\n\n <div class=\"flex gap-2 items-center w-44 text-xs text-tui-text-02\">\n<!--\nTODO: \u041D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u0430 \u0440\u0435\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u044F \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B\u0430. \n <button tuiIconButton (click)=\"clickSettingsEvent.emit()\" size=\"m\" icon=\"scIconSettings\" appearance=\"secondary\" tuiMode=\"onLight\"></button>\n-->\n <div>\n <ng-container *ngIf=\"unitsHelper.productIsMeasurable(product); else notMeasurable\">\n <p>\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} {{ product.unit }}</p>\n </ng-container>\n <ng-template #notMeasurable>\n <p *ngIf=\"cartItem.length && !unitsHelper.productIsMeasurable(product)\">\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} \u043C.</p>\n <p *ngIf=\"cartItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ cartItem.width }} \u043C.</p>\n <p *ngIf=\"cartItem.height\">\u0412\u044B\u0441\u043E\u0442\u0430: {{ cartItem.height }} \u043C.</p>\n </ng-template>\n </div>\n </div>\n <div class=\"flex items-center grow justify-end\">\n <sc-input-quantity\n class=\"w-28\"\n *ngIf=\"quantityControl\"\n [formControl]=\"quantityControl\"\n [quantityUnit]=\"product.quantityUnit\"\n [showCross]=\"false\"\n size=\"s\"\n [step]=\"unitsHelper.productMultiplicity(product)\"\n ></sc-input-quantity>\n </div>\n </ng-container>\n\n <ng-template #skeleton>\n <div class=\"flex gap-2 w-full\">\n <div class=\"h-20 w-20 bg-tui-base-02 rounded-xl \"></div>\n <div class=\"flex flex-col grow gap-2.5 bg-white\">\n <div class=\"w-full h-4 rounded-xl bg-tui-base-02\"></div>\n <div class=\"w-3/5 h-4 rounded-xl bg-tui-base-02\"></div>\n <div class=\"w-4/5 h-4 rounded-xl bg-tui-base-02\"></div>\n </div>\n </div>\n </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: ["step", "quantityUnit", "showLoader", "showCross", "appearance", "isDisabled", "size"], outputs: ["clickClearEvent"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint"] }, { kind: "component", type: i3$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "directive", type: i3$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { kind: "component", type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i3$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i3$1.TuiHintDriverDirective, selector: "[tuiHint]" }, { kind: "directive", type: i3$1.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i3$1.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i7.TuiPreviewComponent, selector: "tui-preview", inputs: ["zoomable", "rotatable"] }, { kind: "directive", type: i7.TuiPreviewActionDirective, selector: "[tuiPreviewAction]" }, { kind: "directive", type: i8.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
570
570
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCartItemMobileComponent, decorators: [{
|
|
571
571
|
type: Component,
|
|
572
|
-
args: [{ selector: 'sc-cart-item-mobile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ml-2 mt-2 relative p-4 gap-y-2 gap-x-4 flex flex-wrap bg-white border border-tui-base-04 shadow-sc-2 rounded-xl\">\n <ng-container *ngIf=\"cartItem && product; else skeleton\">\n <button tuiIconButton size=\"m\" icon=\"scIconVerticalThreeDots\" appearance=\"float\" tuiMode=\"onLight\" class=\"!absolute right-0 top-0\"></button>\n <button\n tuiIconButton\n size=\"m\"\n icon=\"scIconBasket\"\n appearance=\"secondary\"\n tuiMode=\"onLight\"\n (click)=\"clickDeleteEvent.emit()\"\n class=\"shadow-sc-2 !absolute -left-2 -top-2\"\n ></button>\n <div class=\"flex gap-2\">\n <div class=\"flex shrink-0 h-20 w-20 justify-center items-center overflow-hidden\">\n <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" [class.p-5]=\"!product.images?.length\" class=\"cursor-pointer\" />\n </div>\n\n <div class=\"flex flex-wrap self-center gap-x-8 gap-y-0.5\">\n <div class=\"w-[13rem]\">\n <a tuiLink (click)=\"clickCardEvent.emit()\">\n <span class=\"font-bold\">{{ product.name }}</span>\n </a>\n <div class=\"text-tui-text-02 text-xs\">\n <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n <p *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n <a tuiLink *ngIf=\"cartItem.specificationImgUrl\" (click)=\"showSpecification()\">\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a>\n <ng-template #specificationPreview let-preview>\n <tui-preview [rotatable]=\"false\" [zoomable]=\"false\">\n <img *polymorpheusOutlet=\"cartItem.specificationImgUrl as src\" alt=\"preview\" alt=\"\" [src]=\"cartItem.specificationImgUrl\" />\n <button icon=\"tuiIconClose\" title=\"Close\" tuiIconButton tuiPreviewAction type=\"button\" (click)=\"preview.complete()\"></button>\n </tui-preview>\n </ng-template>\n </div>\n </div>\n <div class=\"flex flex-col self-center w-[10rem] gap-x-8 gap-y-0.5\">\n <span *ngIf=\"product.discount\" class=\"flex items-center text-xs text-tui-text-02\">\n <span class=\"line-through\">{{ product.discountCostString }}</span> \n <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-xs !h-4\"></tui-svg>\n <ng-template #discountHint>\n <div class=\"font-bold\">{{ product.discount.name }}</div>\n <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n </ng-template>\n </span>\n <p class=\"flex flex-col items-baseline gap-x-2 font-bold\">\n <span>{{ product.costRubString }}</span>\n <span *ngIf=\"!product.priceInRub\" class=\"text-xs text-tui-text-02\">{{ product.costString }}</span>\n </p>\n <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n </div>\n </div>\n </div>\n\n <div class=\"flex gap-2 items-center w-44 text-xs text-tui-text-02\">\n <button tuiIconButton (click)=\"clickSettingsEvent.emit()\" size=\"m\" icon=\"scIconSettings\" appearance=\"secondary\" tuiMode=\"onLight\"></button>\n <div>\n <ng-container *ngIf=\"unitsHelper.productIsMeasurable(product); else notMeasurable\">\n <p>\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} {{ product.unit }}</p>\n </ng-container>\n <ng-template #notMeasurable>\n <p *ngIf=\"cartItem.length && !unitsHelper.productIsMeasurable(product)\">\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} \u043C.</p>\n <p *ngIf=\"cartItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ cartItem.width }} \u043C.</p>\n <p *ngIf=\"cartItem.height\">\u0412\u044B\u0441\u043E\u0442\u0430: {{ cartItem.height }} \u043C.</p>\n </ng-template>\n </div>\n </div>\n <div class=\"flex items-center grow justify-end\">\n <sc-input-quantity\n class=\"w-28\"\n *ngIf=\"quantityControl\"\n [formControl]=\"quantityControl\"\n [quantityUnit]=\"product.quantityUnit\"\n [showCross]=\"false\"\n size=\"s\"\n [step]=\"unitsHelper.productMultiplicity(product)\"\n ></sc-input-quantity>\n </div>\n </ng-container>\n\n <ng-template #skeleton>\n <div class=\"flex gap-2 w-full\">\n <div class=\"h-20 w-20 bg-tui-base-02 rounded-xl \"></div>\n <div class=\"flex flex-col grow gap-2.5 bg-white\">\n <div class=\"w-full h-4 rounded-xl bg-tui-base-02\"></div>\n <div class=\"w-3/5 h-4 rounded-xl bg-tui-base-02\"></div>\n <div class=\"w-4/5 h-4 rounded-xl bg-tui-base-02\"></div>\n </div>\n </div>\n </ng-template>\n</div>\n" }]
|
|
572
|
+
args: [{ selector: 'sc-cart-item-mobile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ml-2 mt-2 relative p-4 gap-y-2 gap-x-4 flex flex-wrap bg-white border border-tui-base-04 shadow-sc-2 rounded-xl\">\n <ng-container *ngIf=\"cartItem && product; else skeleton\">\n<!--\nTODO: \u041D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u0430 \u0440\u0435\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u044F \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B\u0430.\n <button tuiIconButton size=\"m\" icon=\"scIconVerticalThreeDots\" appearance=\"float\" tuiMode=\"onLight\" class=\"!absolute right-0 top-0\"></button>\n-->\n <button\n tuiIconButton\n size=\"m\"\n icon=\"scIconBasket\"\n appearance=\"secondary\"\n tuiMode=\"onLight\"\n (click)=\"clickDeleteEvent.emit()\"\n class=\"shadow-sc-2 !absolute -left-2 -top-2\"\n ></button>\n <div class=\"flex gap-2\">\n <div class=\"flex shrink-0 h-20 w-20 justify-center items-center overflow-hidden\">\n <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" [class.p-5]=\"!product.images?.length\" class=\"cursor-pointer\" />\n </div>\n\n <div class=\"flex flex-wrap self-center gap-x-8 gap-y-0.5\">\n <div class=\"w-[13rem]\">\n <a tuiLink (click)=\"clickCardEvent.emit()\">\n <span class=\"font-bold\">{{ product.name }}</span>\n </a>\n <div class=\"text-tui-text-02 text-xs\">\n <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n <p *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n <a tuiLink *ngIf=\"cartItem.specificationImgUrl\" (click)=\"showSpecification()\">\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a>\n <ng-template #specificationPreview let-preview>\n <tui-preview [rotatable]=\"false\" [zoomable]=\"false\">\n <img *polymorpheusOutlet=\"cartItem.specificationImgUrl as src\" alt=\"preview\" alt=\"\" [src]=\"cartItem.specificationImgUrl\" />\n <button icon=\"tuiIconClose\" title=\"Close\" tuiIconButton tuiPreviewAction type=\"button\" (click)=\"preview.complete()\"></button>\n </tui-preview>\n </ng-template>\n </div>\n </div>\n <div class=\"flex flex-col self-center w-[10rem] gap-x-8 gap-y-0.5\">\n <span *ngIf=\"product.discount\" class=\"flex items-center text-xs text-tui-text-02\">\n <span class=\"line-through\">{{ product.discountCostString }}</span> \n <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-xs !h-4\"></tui-svg>\n <ng-template #discountHint>\n <div class=\"font-bold\">{{ product.discount.name }}</div>\n <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n </ng-template>\n </span>\n <p class=\"flex flex-col items-baseline gap-x-2 font-bold\">\n <span>{{ product.costRubString }}</span>\n <span *ngIf=\"!product.priceInRub\" class=\"text-xs text-tui-text-02\">{{ product.costString }}</span>\n </p>\n <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n </div>\n </div>\n </div>\n\n <div class=\"flex gap-2 items-center w-44 text-xs text-tui-text-02\">\n<!--\nTODO: \u041D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u0430 \u0440\u0435\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u044F \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B\u0430. \n <button tuiIconButton (click)=\"clickSettingsEvent.emit()\" size=\"m\" icon=\"scIconSettings\" appearance=\"secondary\" tuiMode=\"onLight\"></button>\n-->\n <div>\n <ng-container *ngIf=\"unitsHelper.productIsMeasurable(product); else notMeasurable\">\n <p>\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} {{ product.unit }}</p>\n </ng-container>\n <ng-template #notMeasurable>\n <p *ngIf=\"cartItem.length && !unitsHelper.productIsMeasurable(product)\">\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} \u043C.</p>\n <p *ngIf=\"cartItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ cartItem.width }} \u043C.</p>\n <p *ngIf=\"cartItem.height\">\u0412\u044B\u0441\u043E\u0442\u0430: {{ cartItem.height }} \u043C.</p>\n </ng-template>\n </div>\n </div>\n <div class=\"flex items-center grow justify-end\">\n <sc-input-quantity\n class=\"w-28\"\n *ngIf=\"quantityControl\"\n [formControl]=\"quantityControl\"\n [quantityUnit]=\"product.quantityUnit\"\n [showCross]=\"false\"\n size=\"s\"\n [step]=\"unitsHelper.productMultiplicity(product)\"\n ></sc-input-quantity>\n </div>\n </ng-container>\n\n <ng-template #skeleton>\n <div class=\"flex gap-2 w-full\">\n <div class=\"h-20 w-20 bg-tui-base-02 rounded-xl \"></div>\n <div class=\"flex flex-col grow gap-2.5 bg-white\">\n <div class=\"w-full h-4 rounded-xl bg-tui-base-02\"></div>\n <div class=\"w-3/5 h-4 rounded-xl bg-tui-base-02\"></div>\n <div class=\"w-4/5 h-4 rounded-xl bg-tui-base-02\"></div>\n </div>\n </div>\n </ng-template>\n</div>\n" }]
|
|
573
573
|
}], ctorParameters: function () { return [{ type: UnitsHelper }, { type: i7.TuiPreviewDialogService, decorators: [{
|
|
574
574
|
type: Inject,
|
|
575
575
|
args: [TuiPreviewDialogService]
|
|
@@ -782,6 +782,10 @@ class ScPriceCardComponent {
|
|
|
782
782
|
* Размер компонента.
|
|
783
783
|
*/
|
|
784
784
|
this.size = 'm';
|
|
785
|
+
/**
|
|
786
|
+
* Признак того, нужно ли компонент растягивать на всю ширину свободного пространства.
|
|
787
|
+
*/
|
|
788
|
+
this.isWidthFull = false;
|
|
785
789
|
}
|
|
786
790
|
/**
|
|
787
791
|
* Позиция товара в корзине.
|
|
@@ -801,6 +805,13 @@ class ScPriceCardComponent {
|
|
|
801
805
|
this.quantityControl.patchValue(this._cartItem?.quantity ?? null, { emitEvent: false });
|
|
802
806
|
this.quantityShowLoader = false;
|
|
803
807
|
}
|
|
808
|
+
/**
|
|
809
|
+
* Конвертация размера для компонента sc-input-quantity.
|
|
810
|
+
* TODO: Решить проблему с функционалом size для разных платформ.
|
|
811
|
+
*/
|
|
812
|
+
get getQuantitySize() {
|
|
813
|
+
return this.size === 'xs' ? 's' : this.size;
|
|
814
|
+
}
|
|
804
815
|
/**
|
|
805
816
|
* Признак, что нужно показать скелетон.
|
|
806
817
|
*/
|
|
@@ -815,10 +826,10 @@ class ScPriceCardComponent {
|
|
|
815
826
|
}
|
|
816
827
|
}
|
|
817
828
|
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 });
|
|
818
|
-
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
|
|
829
|
+
ScPriceCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScPriceCardComponent, selector: "sc-price-card", inputs: { showQuantityControl: "showQuantityControl", cartItem: "cartItem", product: "product", size: "size", isWidthFull: "isWidthFull" }, outputs: { clickFavoriteEvent: "clickFavoriteEvent", clickAddToCartEvent: "clickAddToCartEvent", clickClearEvent: "clickClearEvent", clickCardEvent: "clickCardEvent", quantityValueChanges: "quantityValueChanges" }, host: { properties: { "attr.data-size": "this.size" } }, ngImport: i0, template: "<!-- TODO: \u0440\u0435\u0430\u043B\u0438\u0437\u043E\u0432\u0430\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u0438 \u0434\u043B\u044F \u0434\u0435\u0441\u043A\u0442\u043E\u043F\u0430 \u0438 \u0434\u043B\u044F \u043C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0433\u043E \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u044F. \u0418\u0441\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u0432\u0441\u0435 \u0433\u043B\u043E\u0431\u0430\u043B\u044C\u043D\u044B\u0435 \u0442\u0430\u0439\u0433\u043E\u0432\u0441\u043A\u0438\u0435 \u0441\u0442\u0438\u043B\u0438, \u043F\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u0438\u0445 \u0432 \u043F\u043E\u0440\u044F\u0434\u043E\u043A \u0441\u043E\u0433\u043B\u0430\u0441\u043D\u043E \u0441 \u0434\u0438\u0437\u0430\u0439\u043D\u043E\u043C. -->\n<div\n *ngIf=\"product; else skeleton\"\n class=\"h-[17rem] min-w-[10rem] shadow-md w-auto rounded-xl p-2 grid max-h-[17rem] text-[0.75rem] text-left text-tui-text-02\"\n [style.width]=\"isWidthFull\"\n>\n <div class=\"overflow-hidden relative\">\n <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" class=\"rounded-xl w-full max-h-full object-cover\" />\n <sc-favorite-btn *ngIf=\"authStatus$ | async\" [class.!block]=\"product.isFavorite\" class=\"top-0 left-0 absolute hidden\"></sc-favorite-btn>\n <tui-svg *ngIf=\"product.isPreviouslyOrdered\" src=\"scIconStar\" class=\"top-0 right-0 absolute hidden text-red-700\"></tui-svg>\n </div>\n <a class=\"p-0 m-0\" tuiLink iconAlign=\"left\" (click)=\"clickCardEvent.emit()\">\n <p class=\"font-bold text-[0.875rem] text-[#526ED3]\">{{ product.name }}</p>\n </a>\n <p *ngIf=\"product?.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n\n <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n <p *ngIf=\"(authStatus$ | async) && product?.costDate\">\u0414\u0430\u0442\u0430: {{ product.costDate }}</p>\n <div *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"flex flex-col\">\n <span *ngIf=\"product.discount\" class=\"flex items-center text-tui-text-02\">\n <span class=\"line-through\">{{ product.discountCostString }}</span> \n <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-[0.75rem] !h-4\"></tui-svg>\n <ng-template #discountHint>\n <div class=\"font-bold\">{{ product.discount.name }}</div>\n <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n </ng-template>\n </span>\n <span [class.text-tui-text-02]=\"!product.isWarehouseStockExist(warehouseSelect.id)\" class=\"cost font-bold\">{{ product.costRubString }}</span>\n <span *ngIf=\"!product.priceInRub\" class=\"text-xs font-bold text-tui-text-02 hidden group-hover:block\">{{ product.costString }}</span>\n <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n </div>\n <div *ngIf=\"!showQuantityControl\" class=\"flex gap-2 max-w-full items-center justify-stretch mt-1\">\n <button tuiButton (click)=\"clickAddToCartEvent.emit(product)\" [showLoader]=\"quantityShowLoader\" [size]=\"size\" class=\"grow\">\n <tui-svg src=\"scIconCart\" class=\"!text-xs !h-4\"> </tui-svg>\n \u0412 \u043A\u043E\u0440\u0437\u0438\u043D\u0443\n </button>\n <div *ngIf=\"cartItem\" class=\"flex justify-center\">\n <tui-svg src=\"tuiIconCheck\" class=\"!h-5 !w-5 bg-tui-primary text-black rounded-md\"></tui-svg>\n </div>\n </div>\n <sc-input-quantity\n *ngIf=\"showQuantityControl\"\n [formControl]=\"quantityControl\"\n [quantityUnit]=\"product.quantityUnit\"\n [size]=\"getQuantitySize\"\n [step]=\"unitsHelper.productMultiplicity(product)\"\n [showLoader]=\"quantityShowLoader\"\n (clickClearEvent)=\"clickClearEvent.emit(cartItem)\"\n class=\"w-full\"\n ></sc-input-quantity>\n</div>\n\n<ng-template #skeleton>\n <div class=\"flex flex-col card-wrapper bg-white rounded-xl overflow-hidden shadow-sc-1\">\n <!-- \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 -->\n <div class=\"w-full h-3/5 rounded-t bg-tui-base-02\"></div>\n <!-- \u041A\u0440\u0430\u0442\u043A\u0430\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F \u043E \u0442\u043E\u0432\u0430\u0440\u0435 -->\n <div class=\"flex flex-col grow gap-2.5 bg-white rounded-b p-5\">\n <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n <div class=\"w-3/5 h-4 rounded bg-tui-base-02\"></div>\n <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n </div>\n </div>\n</ng-template>\n", styles: [":host[data-size=s] .card-wrapper{width:10rem;height:16rem}:host[data-size=s] .card-wrapper .wrapper-info{padding:8px}:host[data-size=s] .card-wrapper .wrapper-info .cost{font-size:.875rem;line-height:1.25rem}:host[data-size=s] .card-wrapper .button-wrapper tui-svg{font-size:.75rem;line-height:1rem;width:1rem}:host[data-size=m] .card-wrapper{width:12.5rem;height:20rem}:host[data-size=m] .card-wrapper .wrapper-info{padding-inline:16px;padding-block:8px}:host[data-size=m] .card-wrapper .name{font-size:.875rem;line-height:1.25rem;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:3rem}:host[data-size=m] .card-wrapper .info{max-height:1rem}:host[data-size=m] .card-wrapper .cost{font-size:1.125rem;line-height:1.75rem}:host[data-size=m] .card-wrapper .button-wrapper{max-height:0px;font-size:.75rem;line-height:1rem}:host[data-size=m] .card-wrapper:hover .name{-webkit-line-clamp:unset;max-height:6rem}:host[data-size=m] .card-wrapper:hover .info{max-height:3rem}:host[data-size=m] .card-wrapper:hover .button-wrapper{max-height:3rem}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i3$1.TuiHintDriverDirective, selector: "[tuiHint]" }, { kind: "directive", type: i3$1.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i3$1.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { kind: "component", type: i3$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: ScFavoriteBtnComponent, selector: "sc-favorite-btn", outputs: ["clickEvent"] }, { kind: "component", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: ["step", "quantityUnit", "showLoader", "showCross", "appearance", "isDisabled", "size"], outputs: ["clickClearEvent"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
819
830
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceCardComponent, decorators: [{
|
|
820
831
|
type: Component,
|
|
821
|
-
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
|
|
832
|
+
args: [{ selector: 'sc-price-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- TODO: \u0440\u0435\u0430\u043B\u0438\u0437\u043E\u0432\u0430\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u0438 \u0434\u043B\u044F \u0434\u0435\u0441\u043A\u0442\u043E\u043F\u0430 \u0438 \u0434\u043B\u044F \u043C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0433\u043E \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u044F. \u0418\u0441\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u0432\u0441\u0435 \u0433\u043B\u043E\u0431\u0430\u043B\u044C\u043D\u044B\u0435 \u0442\u0430\u0439\u0433\u043E\u0432\u0441\u043A\u0438\u0435 \u0441\u0442\u0438\u043B\u0438, \u043F\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u0438\u0445 \u0432 \u043F\u043E\u0440\u044F\u0434\u043E\u043A \u0441\u043E\u0433\u043B\u0430\u0441\u043D\u043E \u0441 \u0434\u0438\u0437\u0430\u0439\u043D\u043E\u043C. -->\n<div\n *ngIf=\"product; else skeleton\"\n class=\"h-[17rem] min-w-[10rem] shadow-md w-auto rounded-xl p-2 grid max-h-[17rem] text-[0.75rem] text-left text-tui-text-02\"\n [style.width]=\"isWidthFull\"\n>\n <div class=\"overflow-hidden relative\">\n <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" class=\"rounded-xl w-full max-h-full object-cover\" />\n <sc-favorite-btn *ngIf=\"authStatus$ | async\" [class.!block]=\"product.isFavorite\" class=\"top-0 left-0 absolute hidden\"></sc-favorite-btn>\n <tui-svg *ngIf=\"product.isPreviouslyOrdered\" src=\"scIconStar\" class=\"top-0 right-0 absolute hidden text-red-700\"></tui-svg>\n </div>\n <a class=\"p-0 m-0\" tuiLink iconAlign=\"left\" (click)=\"clickCardEvent.emit()\">\n <p class=\"font-bold text-[0.875rem] text-[#526ED3]\">{{ product.name }}</p>\n </a>\n <p *ngIf=\"product?.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n\n <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n <p *ngIf=\"(authStatus$ | async) && product?.costDate\">\u0414\u0430\u0442\u0430: {{ product.costDate }}</p>\n <div *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"flex flex-col\">\n <span *ngIf=\"product.discount\" class=\"flex items-center text-tui-text-02\">\n <span class=\"line-through\">{{ product.discountCostString }}</span> \n <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-[0.75rem] !h-4\"></tui-svg>\n <ng-template #discountHint>\n <div class=\"font-bold\">{{ product.discount.name }}</div>\n <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n </ng-template>\n </span>\n <span [class.text-tui-text-02]=\"!product.isWarehouseStockExist(warehouseSelect.id)\" class=\"cost font-bold\">{{ product.costRubString }}</span>\n <span *ngIf=\"!product.priceInRub\" class=\"text-xs font-bold text-tui-text-02 hidden group-hover:block\">{{ product.costString }}</span>\n <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n </div>\n <div *ngIf=\"!showQuantityControl\" class=\"flex gap-2 max-w-full items-center justify-stretch mt-1\">\n <button tuiButton (click)=\"clickAddToCartEvent.emit(product)\" [showLoader]=\"quantityShowLoader\" [size]=\"size\" class=\"grow\">\n <tui-svg src=\"scIconCart\" class=\"!text-xs !h-4\"> </tui-svg>\n \u0412 \u043A\u043E\u0440\u0437\u0438\u043D\u0443\n </button>\n <div *ngIf=\"cartItem\" class=\"flex justify-center\">\n <tui-svg src=\"tuiIconCheck\" class=\"!h-5 !w-5 bg-tui-primary text-black rounded-md\"></tui-svg>\n </div>\n </div>\n <sc-input-quantity\n *ngIf=\"showQuantityControl\"\n [formControl]=\"quantityControl\"\n [quantityUnit]=\"product.quantityUnit\"\n [size]=\"getQuantitySize\"\n [step]=\"unitsHelper.productMultiplicity(product)\"\n [showLoader]=\"quantityShowLoader\"\n (clickClearEvent)=\"clickClearEvent.emit(cartItem)\"\n class=\"w-full\"\n ></sc-input-quantity>\n</div>\n\n<ng-template #skeleton>\n <div class=\"flex flex-col card-wrapper bg-white rounded-xl overflow-hidden shadow-sc-1\">\n <!-- \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 -->\n <div class=\"w-full h-3/5 rounded-t bg-tui-base-02\"></div>\n <!-- \u041A\u0440\u0430\u0442\u043A\u0430\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F \u043E \u0442\u043E\u0432\u0430\u0440\u0435 -->\n <div class=\"flex flex-col grow gap-2.5 bg-white rounded-b p-5\">\n <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n <div class=\"w-3/5 h-4 rounded bg-tui-base-02\"></div>\n <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n </div>\n </div>\n</ng-template>\n", styles: [":host[data-size=s] .card-wrapper{width:10rem;height:16rem}:host[data-size=s] .card-wrapper .wrapper-info{padding:8px}:host[data-size=s] .card-wrapper .wrapper-info .cost{font-size:.875rem;line-height:1.25rem}:host[data-size=s] .card-wrapper .button-wrapper tui-svg{font-size:.75rem;line-height:1rem;width:1rem}:host[data-size=m] .card-wrapper{width:12.5rem;height:20rem}:host[data-size=m] .card-wrapper .wrapper-info{padding-inline:16px;padding-block:8px}:host[data-size=m] .card-wrapper .name{font-size:.875rem;line-height:1.25rem;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:3rem}:host[data-size=m] .card-wrapper .info{max-height:1rem}:host[data-size=m] .card-wrapper .cost{font-size:1.125rem;line-height:1.75rem}:host[data-size=m] .card-wrapper .button-wrapper{max-height:0px;font-size:.75rem;line-height:1rem}:host[data-size=m] .card-wrapper:hover .name{-webkit-line-clamp:unset;max-height:6rem}:host[data-size=m] .card-wrapper:hover .info{max-height:3rem}:host[data-size=m] .card-wrapper:hover .button-wrapper{max-height:3rem}\n"] }]
|
|
822
833
|
}], ctorParameters: function () { return [{ type: UnitsHelper }, { type: i1.ScAuthService }, { type: i1.ScWarehouseService }, { type: undefined, decorators: [{
|
|
823
834
|
type: Inject,
|
|
824
835
|
args: [SC_URLS]
|
|
@@ -846,6 +857,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
846
857
|
}, {
|
|
847
858
|
type: HostBinding,
|
|
848
859
|
args: ['attr.data-size']
|
|
860
|
+
}], isWidthFull: [{
|
|
861
|
+
type: Input
|
|
849
862
|
}] } });
|
|
850
863
|
|
|
851
864
|
/**
|