@snabcentr/client-ui 0.14.0 → 0.14.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/categories-list/sc-categories-list.component.d.ts +6 -0
- package/esm2020/cart/cart-item-mobile/sc-cart-item-mobile.component.mjs +3 -3
- package/esm2020/catalog/categories-list/sc-categories-list.component.mjs +18 -5
- package/fesm2015/snabcentr-client-ui.mjs +18 -6
- package/fesm2015/snabcentr-client-ui.mjs.map +1 -1
- package/fesm2020/snabcentr-client-ui.mjs +18 -6
- package/fesm2020/snabcentr-client-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/tailwind/tailwind.scss +8 -0
@@ -11,7 +11,7 @@ import { TuiTextfieldControllerModule, TuiLinkModule, TuiButtonModule, TuiLabelM
|
|
11
11
|
import * as i3 from '@angular/forms';
|
12
12
|
import { FormGroupDirective, FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule, NgControl } from '@angular/forms';
|
13
13
|
import * as i5 from '@taiga-ui/cdk';
|
14
|
-
import { tuiControlValue, tuiIsFalsy, TuiLetModule, tuiCreateToken, AbstractTuiNullableControl, TUI_IS_MOBILE, tuiIsPresent, TuiDestroyService, TuiRepeatTimesModule, tuiMarkControlAsTouchedAndValidate, ALWAYS_TRUE_HANDLER
|
14
|
+
import { tuiControlValue, tuiIsFalsy, TuiLetModule, tuiCreateToken, AbstractTuiNullableControl, TUI_IS_MOBILE, tuiPure, tuiIsPresent, TuiDestroyService, TuiRepeatTimesModule, tuiMarkControlAsTouchedAndValidate, ALWAYS_TRUE_HANDLER } from '@taiga-ui/cdk';
|
15
15
|
import * as i6 from '@taiga-ui/kit';
|
16
16
|
import { TuiInputPasswordModule, TuiInputModule, TuiFieldErrorPipeModule, TuiInputPhoneModule, TuiAccordionModule, TuiElasticContainerModule, TuiCarouselModule, TUI_NUMBER_VALUE_TRANSFORMER, TuiInputNumberComponent, TuiIslandModule, TuiInputNumberModule, TuiComboBoxModule, TuiDataListWrapperModule, TuiFilterByInputPipeModule, TuiStringifyContentPipeModule, TuiSelectModule, TuiTreeService, TuiTreeItemContentComponent, TUI_TREE_START, TUI_TREE_CONTENT, TUI_TREE_LOADING, TUI_TREE_LOADER, TuiTreeModule, TuiCheckboxModule, TuiCheckboxLabeledModule } from '@taiga-ui/kit';
|
17
17
|
import * as i7 from '@maskito/angular';
|
@@ -1261,10 +1261,10 @@ class ScCartItemMobileComponent {
|
|
1261
1261
|
}
|
1262
1262
|
}
|
1263
1263
|
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 });
|
1264
|
-
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: "<ng-container *ngIf=\"cartItem && product; else skeleton\">\n <!-- TODO: \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 <div class=\"flex bg-white border border-tui-base-04 shadow-sc-2 rounded-xl min-w-72 p-4\">\n <div class=\"flex mr-5 max-h-52 min-w-[30%] items-center\">\n <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" class=\"rounded-xl w-full max-h-full object-cover\" />\n </div>\n <div class=\"flex flex-col items-start w-full\">\n <a tuiLink (click)=\"clickCardEvent.emit()\" class=\"mb-1\">\n <span class=\"font-bold\">{{ product.name }}</span>\n </a>\n <div class=\"text-tui-text-02 text-xs\">\n <p *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n <div class=\"flex flex-col self-center gap-y-0.5\">\n <p class=\"flex flex-col items-baseline gap-x-2 font-bold\">\n <span>{{ product.costRubString }}</span>\n <span *ngIf=\"!product.priceInRub\">{{ product.costString }}</span>\n </p>\n <span *ngIf=\"product.discount\" class=\"flex items-center\">\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-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 <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n </div>\n\n <div *ngIf=\"cartItem.height || cartItem.length || cartItem.width\" class=\"flex my-0.5 items-center\">\n <button\n tuiIconButton\n icon=\"tuiIconSettings\"\n (click)=\"clickSettingsEvent.emit()\"\n size=\"s\"\n appearance=\"secondary\"\n tuiMode=\"onLight\"\n class=\"mr-2 !self-center\"\n ></button>\n <div>\n <ng-container *ngIf=\"cartItem.height; else length\">\n <p>\u0412\u044B\u0441\u043E\u0442\u0430: {{ cartItem.height }} \u043C.</p>\n </ng-container>\n <ng-template #length>\n <p *ngIf=\"cartItem.length\">\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} \u043C.</p>\n </ng-template>\n <p *ngIf=\"cartItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ cartItem.width }} \u043C.</p>\n </div>\n </div>\n\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\" [src]=\"cartItem.specificationImgUrl\" />\n <button icon=\"tuiIconClose\" title=\"Close\" tuiIconButton tuiPreviewAction type=\"button\" (click)=\"preview.complete()\"></button>\n </tui-preview>\n </ng-template>\n <p class=\"font-bold text-tui-text-01 text-sm\">\u0418\u0442\u043E\u0433\u043E: {{ cartItem.costRub | tuiFormatNumber }} {{ 'RUB' | tuiCurrency }}</p>\n </div>\n <sc-input-quantity\n #inputQuantity\n *ngIf=\"quantityControl\"\n [formControl]=\"quantityControl\"\n size=\"s\"\n [step]=\"unitsHelper.productMultiplicity(product)\"\n (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n class=\"w-full mt-2\"\n ></sc-input-quantity>\n </div>\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", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: ["step", "showLoader", "showCross", "appearance", "isDisabled", "size"], outputs: ["clickClearEvent"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint", "fromMain"] }, { kind: "component", type: i4.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "directive", type: i4.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { kind: "component", type: i4.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i4.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i4.TuiHintDriverDirective, selector: "[tuiHint]" }, { kind: "directive", type: i4.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i4.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { 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: "component", type: i7$1.TuiPreviewComponent, selector: "tui-preview", inputs: ["zoomable", "rotatable"] }, { kind: "directive", type: i7$1.TuiPreviewActionDirective, selector: "[tuiPreviewAction]" }, { kind: "directive", type: i2$1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "pipe", type: i9.TuiCurrencyPipe, name: "tuiCurrency" }, { kind: "pipe", type: i4.TuiFormatNumberPipe, name: "tuiFormatNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
1264
|
+
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: "<ng-container *ngIf=\"cartItem && product; else skeleton\">\n <!-- TODO: \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 <div class=\"flex relative bg-white border border-tui-base-04 shadow-sc-2 rounded-xl min-w-72 p-4\">\n <button\n tuiIconButton\n size=\"m\"\n icon=\"tuiIconTrash2Large\"\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 mr-5 max-h-52 min-w-[30%] items-center\">\n <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" class=\"rounded-xl w-full max-h-full object-cover\" />\n </div>\n <div class=\"flex flex-col items-start w-full\">\n <a tuiLink (click)=\"clickCardEvent.emit()\" class=\"mb-1\">\n <span class=\"font-bold\">{{ product.name }}</span>\n </a>\n <div class=\"text-tui-text-02 text-xs\">\n <p *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n <div class=\"flex flex-col self-center gap-y-0.5\">\n <p class=\"flex flex-col items-baseline gap-x-2 font-bold\">\n <span>{{ product.costRubString }}</span>\n <span *ngIf=\"!product.priceInRub\">{{ product.costString }}</span>\n </p>\n <span *ngIf=\"product.discount\" class=\"flex items-center\">\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-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 <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n </div>\n\n <div *ngIf=\"cartItem.height || cartItem.length || cartItem.width\" class=\"flex my-0.5 items-center\">\n <button\n tuiIconButton\n icon=\"tuiIconSettings\"\n (click)=\"clickSettingsEvent.emit()\"\n size=\"s\"\n appearance=\"secondary\"\n tuiMode=\"onLight\"\n class=\"mr-2 !self-center\"\n ></button>\n <div>\n <ng-container *ngIf=\"cartItem.height; else length\">\n <p>\u0412\u044B\u0441\u043E\u0442\u0430: {{ cartItem.height }} \u043C.</p>\n </ng-container>\n <ng-template #length>\n <p *ngIf=\"cartItem.length\">\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} \u043C.</p>\n </ng-template>\n <p *ngIf=\"cartItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ cartItem.width }} \u043C.</p>\n </div>\n </div>\n\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\" [src]=\"cartItem.specificationImgUrl\" />\n <button icon=\"tuiIconClose\" title=\"Close\" tuiIconButton tuiPreviewAction type=\"button\" (click)=\"preview.complete()\"></button>\n </tui-preview>\n </ng-template>\n <p class=\"font-bold text-tui-text-01 text-sm\">\u0418\u0442\u043E\u0433\u043E: {{ cartItem.costRub | tuiFormatNumber }} {{ 'RUB' | tuiCurrency }}</p>\n </div>\n <sc-input-quantity\n #inputQuantity\n *ngIf=\"quantityControl\"\n [formControl]=\"quantityControl\"\n size=\"s\"\n [step]=\"unitsHelper.productMultiplicity(product)\"\n (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n class=\"w-full mt-2\"\n ></sc-input-quantity>\n </div>\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", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: ["step", "showLoader", "showCross", "appearance", "isDisabled", "size"], outputs: ["clickClearEvent"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint", "fromMain"] }, { kind: "component", type: i4.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "directive", type: i4.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { kind: "component", type: i4.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i4.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i4.TuiHintDriverDirective, selector: "[tuiHint]" }, { kind: "directive", type: i4.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i4.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { 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: "component", type: i7$1.TuiPreviewComponent, selector: "tui-preview", inputs: ["zoomable", "rotatable"] }, { kind: "directive", type: i7$1.TuiPreviewActionDirective, selector: "[tuiPreviewAction]" }, { kind: "directive", type: i2$1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "pipe", type: i9.TuiCurrencyPipe, name: "tuiCurrency" }, { kind: "pipe", type: i4.TuiFormatNumberPipe, name: "tuiFormatNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
1265
1265
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCartItemMobileComponent, decorators: [{
|
1266
1266
|
type: Component,
|
1267
|
-
args: [{ selector: 'sc-cart-item-mobile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"cartItem && product; else skeleton\">\n <!-- TODO: \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 <div class=\"flex bg-white border border-tui-base-04 shadow-sc-2 rounded-xl min-w-72 p-4\">\n <div class=\"flex mr-5 max-h-52 min-w-[30%] items-center\">\n <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" class=\"rounded-xl w-full max-h-full object-cover\" />\n </div>\n <div class=\"flex flex-col items-start w-full\">\n <a tuiLink (click)=\"clickCardEvent.emit()\" class=\"mb-1\">\n <span class=\"font-bold\">{{ product.name }}</span>\n </a>\n <div class=\"text-tui-text-02 text-xs\">\n <p *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n <div class=\"flex flex-col self-center gap-y-0.5\">\n <p class=\"flex flex-col items-baseline gap-x-2 font-bold\">\n <span>{{ product.costRubString }}</span>\n <span *ngIf=\"!product.priceInRub\">{{ product.costString }}</span>\n </p>\n <span *ngIf=\"product.discount\" class=\"flex items-center\">\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-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 <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n </div>\n\n <div *ngIf=\"cartItem.height || cartItem.length || cartItem.width\" class=\"flex my-0.5 items-center\">\n <button\n tuiIconButton\n icon=\"tuiIconSettings\"\n (click)=\"clickSettingsEvent.emit()\"\n size=\"s\"\n appearance=\"secondary\"\n tuiMode=\"onLight\"\n class=\"mr-2 !self-center\"\n ></button>\n <div>\n <ng-container *ngIf=\"cartItem.height; else length\">\n <p>\u0412\u044B\u0441\u043E\u0442\u0430: {{ cartItem.height }} \u043C.</p>\n </ng-container>\n <ng-template #length>\n <p *ngIf=\"cartItem.length\">\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} \u043C.</p>\n </ng-template>\n <p *ngIf=\"cartItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ cartItem.width }} \u043C.</p>\n </div>\n </div>\n\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\" [src]=\"cartItem.specificationImgUrl\" />\n <button icon=\"tuiIconClose\" title=\"Close\" tuiIconButton tuiPreviewAction type=\"button\" (click)=\"preview.complete()\"></button>\n </tui-preview>\n </ng-template>\n <p class=\"font-bold text-tui-text-01 text-sm\">\u0418\u0442\u043E\u0433\u043E: {{ cartItem.costRub | tuiFormatNumber }} {{ 'RUB' | tuiCurrency }}</p>\n </div>\n <sc-input-quantity\n #inputQuantity\n *ngIf=\"quantityControl\"\n [formControl]=\"quantityControl\"\n size=\"s\"\n [step]=\"unitsHelper.productMultiplicity(product)\"\n (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n class=\"w-full mt-2\"\n ></sc-input-quantity>\n </div>\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" }]
|
1267
|
+
args: [{ selector: 'sc-cart-item-mobile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"cartItem && product; else skeleton\">\n <!-- TODO: \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 <div class=\"flex relative bg-white border border-tui-base-04 shadow-sc-2 rounded-xl min-w-72 p-4\">\n <button\n tuiIconButton\n size=\"m\"\n icon=\"tuiIconTrash2Large\"\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 mr-5 max-h-52 min-w-[30%] items-center\">\n <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" class=\"rounded-xl w-full max-h-full object-cover\" />\n </div>\n <div class=\"flex flex-col items-start w-full\">\n <a tuiLink (click)=\"clickCardEvent.emit()\" class=\"mb-1\">\n <span class=\"font-bold\">{{ product.name }}</span>\n </a>\n <div class=\"text-tui-text-02 text-xs\">\n <p *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n <div class=\"flex flex-col self-center gap-y-0.5\">\n <p class=\"flex flex-col items-baseline gap-x-2 font-bold\">\n <span>{{ product.costRubString }}</span>\n <span *ngIf=\"!product.priceInRub\">{{ product.costString }}</span>\n </p>\n <span *ngIf=\"product.discount\" class=\"flex items-center\">\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-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 <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n </div>\n\n <div *ngIf=\"cartItem.height || cartItem.length || cartItem.width\" class=\"flex my-0.5 items-center\">\n <button\n tuiIconButton\n icon=\"tuiIconSettings\"\n (click)=\"clickSettingsEvent.emit()\"\n size=\"s\"\n appearance=\"secondary\"\n tuiMode=\"onLight\"\n class=\"mr-2 !self-center\"\n ></button>\n <div>\n <ng-container *ngIf=\"cartItem.height; else length\">\n <p>\u0412\u044B\u0441\u043E\u0442\u0430: {{ cartItem.height }} \u043C.</p>\n </ng-container>\n <ng-template #length>\n <p *ngIf=\"cartItem.length\">\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} \u043C.</p>\n </ng-template>\n <p *ngIf=\"cartItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ cartItem.width }} \u043C.</p>\n </div>\n </div>\n\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\" [src]=\"cartItem.specificationImgUrl\" />\n <button icon=\"tuiIconClose\" title=\"Close\" tuiIconButton tuiPreviewAction type=\"button\" (click)=\"preview.complete()\"></button>\n </tui-preview>\n </ng-template>\n <p class=\"font-bold text-tui-text-01 text-sm\">\u0418\u0442\u043E\u0433\u043E: {{ cartItem.costRub | tuiFormatNumber }} {{ 'RUB' | tuiCurrency }}</p>\n </div>\n <sc-input-quantity\n #inputQuantity\n *ngIf=\"quantityControl\"\n [formControl]=\"quantityControl\"\n size=\"s\"\n [step]=\"unitsHelper.productMultiplicity(product)\"\n (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n class=\"w-full mt-2\"\n ></sc-input-quantity>\n </div>\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" }]
|
1268
1268
|
}], ctorParameters: function () { return [{ type: UnitsHelper }, { type: i7$1.TuiPreviewDialogService, decorators: [{
|
1269
1269
|
type: Inject,
|
1270
1270
|
args: [TuiPreviewDialogService]
|
@@ -1317,12 +1317,24 @@ class ScCategoriesListComponent {
|
|
1317
1317
|
getCategoryImage(imgPath) {
|
1318
1318
|
return this.urls.imgServerUrl + '/' + imgPath;
|
1319
1319
|
}
|
1320
|
+
/**
|
1321
|
+
* Проверяет наличие хотя бы одного изображения.
|
1322
|
+
*
|
1323
|
+
* @param categories Список категорий.
|
1324
|
+
*/
|
1325
|
+
checkImagesExists(categories) {
|
1326
|
+
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
1327
|
+
return categories.some(item => item.properties?.image);
|
1328
|
+
}
|
1320
1329
|
}
|
1321
1330
|
ScCategoriesListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCategoriesListComponent, deps: [{ token: SC_URLS }], target: i0.ɵɵFactoryTarget.Component });
|
1322
|
-
ScCategoriesListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScCategoriesListComponent, selector: "sc-categories-list", inputs: { categories: "categories" }, outputs: { clickCategoryEvent: "clickCategoryEvent" }, ngImport: i0, template: "<div class=\"grid grid-cols-[repeat(auto-fill,minmax(21rem,1fr))] gap-x-8 gap-y-2\">\n <ng-container *ngIf=\"categories; else categoriesSkeleton\">\n <button\n *ngFor=\"let item of $any(categories)\"\n class=\"group flex gap-2 py-1.5 px-3 bg-tui-base-02 rounded-xl h-11 items-center text-left hover-hover:hover:ring-2 hover-none:active:ring-2 ring-tui-primary duration-150\"\n (click)=\"clickCategoryEvent.emit(item)\"\n >\n <img *ngIf=\"item.properties?.image\" [src]=\"getCategoryImage(
|
1331
|
+
ScCategoriesListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScCategoriesListComponent, selector: "sc-categories-list", inputs: { categories: "categories" }, outputs: { clickCategoryEvent: "clickCategoryEvent" }, ngImport: i0, template: "<div class=\"grid grid-cols-[repeat(auto-fill,minmax(21rem,1fr))] gap-x-8 gap-y-2\">\n <ng-container *ngIf=\"categories; else categoriesSkeleton\">\n <button\n *ngFor=\"let item of $any(categories)\"\n class=\"group flex gap-2 py-1.5 px-3 bg-tui-base-02 rounded-xl h-11 items-center text-left hover-hover:hover:ring-2 hover-none:active:ring-2 ring-tui-primary duration-150\"\n (click)=\"clickCategoryEvent.emit(item)\"\n >\n <img *ngIf=\"item.properties?.image as image\" [src]=\"getCategoryImage(image)\" [alt]=\"item.name\" class=\"w-8 h-8 object-cover rounded bg-tui-base-03\" />\n <tui-svg *ngIf=\"!item.properties?.image && checkImagesExists(categories)\" src=\"tuiIconCameraOffLarge\" class=\"bg-tui-base-03 !w-8 !h-8 rounded text-tui-base-05\"></tui-svg>\n <div class=\"flex grow truncate\">\n <p class=\"text-base font-bold truncate\">{{ item.name }}</p>\n <tui-svg *ngIf=\"item.isFavorite\" src=\"scIconFavoriteFill\" class=\"text-tui-primary !text-sm mr-auto\"></tui-svg>\n </div>\n <tui-svg src=\"tuiIconChevronRightLarge\" class=\"hover-hover:group-hover:text-tui-primary hover-none:group-active:text-tui-primary duration-150\"></tui-svg>\n </button>\n </ng-container>\n</div>\n\n<ng-template #categoriesSkeleton>\n <button\n *tuiRepeatTimes=\"let index of isMobile ? 3 : 6\"\n class=\"group flex gap-2 py-1.5 px-3 bg-tui-base-02 rounded-xl h-11 items-center text-left hover-hover:hover:ring-2 hover-none:active:ring-2 ring-tui-base-05 duration-150\"\n >\n <div class=\"w-8 h-8 tui-skeleton\"></div>\n <div class=\"h-4 grow tui-skeleton\"></div>\n <tui-svg src=\"tuiIconChevronRightLarge\" class=\"hover-hover:group-hover:text-tui-primary hover-none:group-active:text-tui-primary duration-150 tui-skeleton\"></tui-svg>\n </button>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i5.TuiRepeatTimesDirective, selector: "[tuiRepeatTimes][tuiRepeatTimesOf]", inputs: ["tuiRepeatTimesOf"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
1332
|
+
__decorate([
|
1333
|
+
tuiPure
|
1334
|
+
], ScCategoriesListComponent.prototype, "checkImagesExists", null);
|
1323
1335
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCategoriesListComponent, decorators: [{
|
1324
1336
|
type: Component,
|
1325
|
-
args: [{ selector: 'sc-categories-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"grid grid-cols-[repeat(auto-fill,minmax(21rem,1fr))] gap-x-8 gap-y-2\">\n <ng-container *ngIf=\"categories; else categoriesSkeleton\">\n <button\n *ngFor=\"let item of $any(categories)\"\n class=\"group flex gap-2 py-1.5 px-3 bg-tui-base-02 rounded-xl h-11 items-center text-left hover-hover:hover:ring-2 hover-none:active:ring-2 ring-tui-primary duration-150\"\n (click)=\"clickCategoryEvent.emit(item)\"\n >\n <img *ngIf=\"item.properties?.image\" [src]=\"getCategoryImage(
|
1337
|
+
args: [{ selector: 'sc-categories-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"grid grid-cols-[repeat(auto-fill,minmax(21rem,1fr))] gap-x-8 gap-y-2\">\n <ng-container *ngIf=\"categories; else categoriesSkeleton\">\n <button\n *ngFor=\"let item of $any(categories)\"\n class=\"group flex gap-2 py-1.5 px-3 bg-tui-base-02 rounded-xl h-11 items-center text-left hover-hover:hover:ring-2 hover-none:active:ring-2 ring-tui-primary duration-150\"\n (click)=\"clickCategoryEvent.emit(item)\"\n >\n <img *ngIf=\"item.properties?.image as image\" [src]=\"getCategoryImage(image)\" [alt]=\"item.name\" class=\"w-8 h-8 object-cover rounded bg-tui-base-03\" />\n <tui-svg *ngIf=\"!item.properties?.image && checkImagesExists(categories)\" src=\"tuiIconCameraOffLarge\" class=\"bg-tui-base-03 !w-8 !h-8 rounded text-tui-base-05\"></tui-svg>\n <div class=\"flex grow truncate\">\n <p class=\"text-base font-bold truncate\">{{ item.name }}</p>\n <tui-svg *ngIf=\"item.isFavorite\" src=\"scIconFavoriteFill\" class=\"text-tui-primary !text-sm mr-auto\"></tui-svg>\n </div>\n <tui-svg src=\"tuiIconChevronRightLarge\" class=\"hover-hover:group-hover:text-tui-primary hover-none:group-active:text-tui-primary duration-150\"></tui-svg>\n </button>\n </ng-container>\n</div>\n\n<ng-template #categoriesSkeleton>\n <button\n *tuiRepeatTimes=\"let index of isMobile ? 3 : 6\"\n class=\"group flex gap-2 py-1.5 px-3 bg-tui-base-02 rounded-xl h-11 items-center text-left hover-hover:hover:ring-2 hover-none:active:ring-2 ring-tui-base-05 duration-150\"\n >\n <div class=\"w-8 h-8 tui-skeleton\"></div>\n <div class=\"h-4 grow tui-skeleton\"></div>\n <tui-svg src=\"tuiIconChevronRightLarge\" class=\"hover-hover:group-hover:text-tui-primary hover-none:group-active:text-tui-primary duration-150 tui-skeleton\"></tui-svg>\n </button>\n</ng-template>\n" }]
|
1326
1338
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
1327
1339
|
type: Inject,
|
1328
1340
|
args: [SC_URLS]
|
@@ -1330,7 +1342,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
1330
1342
|
type: Input
|
1331
1343
|
}], clickCategoryEvent: [{
|
1332
1344
|
type: Output
|
1333
|
-
}] } });
|
1345
|
+
}], checkImagesExists: [] } });
|
1334
1346
|
|
1335
1347
|
/**
|
1336
1348
|
* Компонент кнопки избранных товаров и категорий.
|