@snabcentr/client-ui 0.3.3-clients → 0.3.3
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/input-quantity/sc-input-quantity.component.d.ts +4 -0
- package/catalog/price-warehouse-stock/sc-price-warehouse-stock.component.d.ts +5 -2
- package/esm2020/cart/cart-item-mobile/sc-cart-item-mobile.component.mjs +3 -3
- package/esm2020/catalog/input-quantity/sc-input-quantity.component.mjs +7 -1
- package/esm2020/catalog/price-card/sc-price-card.component.mjs +3 -3
- package/esm2020/catalog/price-warehouse-stock/sc-price-warehouse-stock.component.mjs +5 -5
- package/esm2020/validators/stepValidator.mjs +4 -1
- package/fesm2015/snabcentr-client-ui.mjs +17 -8
- package/fesm2015/snabcentr-client-ui.mjs.map +1 -1
- package/fesm2020/snabcentr-client-ui.mjs +17 -8
- package/fesm2020/snabcentr-client-ui.mjs.map +1 -1
- package/package.json +2 -2
- package/release_notes.tmp +1 -0
- package/styles/tailwind/tailwind.scss +0 -12
@@ -6,10 +6,13 @@
|
|
6
6
|
*/
|
7
7
|
export function stepValidator(step, precision = 3) {
|
8
8
|
return ({ value }) => {
|
9
|
+
if (!step) {
|
10
|
+
return null;
|
11
|
+
}
|
9
12
|
if (value) {
|
10
13
|
return Number((value / step).toFixed(precision)) % 1 !== 0 ? { error: `Число не кратно ${step}` } : null;
|
11
14
|
}
|
12
15
|
return null;
|
13
16
|
};
|
14
17
|
}
|
15
|
-
//# sourceMappingURL=data:application/json;base64,
|
18
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RlcFZhbGlkYXRvci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2NsaWVudC11aS92YWxpZGF0b3JzL3N0ZXBWYWxpZGF0b3IudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUE7Ozs7O0dBS0c7QUFDSCxNQUFNLFVBQVUsYUFBYSxDQUFDLElBQVksRUFBRSxZQUFvQixDQUFDO0lBQzdELE9BQU8sQ0FBQyxFQUFFLEtBQUssRUFBa0MsRUFBMkIsRUFBRTtRQUMxRSxJQUFJLENBQUMsSUFBSSxFQUFFO1lBQ1AsT0FBTyxJQUFJLENBQUM7U0FDZjtRQUVELElBQUksS0FBSyxFQUFFO1lBQ1AsT0FBTyxNQUFNLENBQUMsQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBRSxLQUFLLEVBQUUsbUJBQW1CLElBQUksRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztTQUM1RztRQUVELE9BQU8sSUFBSSxDQUFDO0lBQ2hCLENBQUMsQ0FBQztBQUNOLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBYnN0cmFjdENvbnRyb2wsIFZhbGlkYXRvckZuLCBWYWxpZGF0aW9uRXJyb3JzIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG4vKipcbiAqINCf0YDQvtCy0LXRgNGP0LXRgiDQutGA0LDRgtC90L7RgdGC0Ywg0LfQvdCw0YfQtdC90LjRjy5cbiAqXG4gKiBAcGFyYW0gc3RlcCDQqNCw0LMg0LrRgNCw0YLQvdC+0YHRgtC4LlxuICogQHBhcmFtIHByZWNpc2lvbiDQotC+0YfQvdC+0YHRgtGMLCDQutC+0LvQuNGH0LXRgdGC0LLQviDRh9C40YHQtdC7INC/0L7RgdC70LUg0LfQsNC/0Y/RgtC+0LkuXG4gKi9cbmV4cG9ydCBmdW5jdGlvbiBzdGVwVmFsaWRhdG9yKHN0ZXA6IG51bWJlciwgcHJlY2lzaW9uOiBudW1iZXIgPSAzKTogVmFsaWRhdG9yRm4ge1xuICAgIHJldHVybiAoeyB2YWx1ZSB9OiBBYnN0cmFjdENvbnRyb2w8bnVtYmVyIHwgbnVsbD4pOiBWYWxpZGF0aW9uRXJyb3JzIHwgbnVsbCA9PiB7XG4gICAgICAgIGlmICghc3RlcCkge1xuICAgICAgICAgICAgcmV0dXJuIG51bGw7XG4gICAgICAgIH1cblxuICAgICAgICBpZiAodmFsdWUpIHtcbiAgICAgICAgICAgIHJldHVybiBOdW1iZXIoKHZhbHVlIC8gc3RlcCkudG9GaXhlZChwcmVjaXNpb24pKSAlIDEgIT09IDAgPyB7IGVycm9yOiBg0KfQuNGB0LvQviDQvdC1INC60YDQsNGC0L3QviAke3N0ZXB9YCB9IDogbnVsbDtcbiAgICAgICAgfVxuXG4gICAgICAgIHJldHVybiBudWxsO1xuICAgIH07XG59XG4iXX0=
|
@@ -345,6 +345,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
345
345
|
*/
|
346
346
|
function stepValidator(step, precision = 3) {
|
347
347
|
return ({ value }) => {
|
348
|
+
if (!step) {
|
349
|
+
return null;
|
350
|
+
}
|
348
351
|
if (value) {
|
349
352
|
return Number((value / step).toFixed(precision)) % 1 !== 0 ? { error: `Число не кратно ${step}` } : null;
|
350
353
|
}
|
@@ -391,6 +394,12 @@ class ScInputQuantityComponent extends AbstractTuiNullableControl {
|
|
391
394
|
*/
|
392
395
|
this.clickClearEvent = new EventEmitter();
|
393
396
|
}
|
397
|
+
/**
|
398
|
+
* Возвращает элемент, который может быть сфокусирован.
|
399
|
+
*/
|
400
|
+
get nativeFocusableElement() {
|
401
|
+
return this.numberInput.nativeFocusableElement;
|
402
|
+
}
|
394
403
|
get focused() {
|
395
404
|
var _a;
|
396
405
|
return !!((_a = this.numberInput) === null || _a === void 0 ? void 0 : _a.focused);
|
@@ -517,18 +526,18 @@ class ScPriceWarehouseStockComponent {
|
|
517
526
|
/**
|
518
527
|
* {@link Observable} изменения выбранного склада.
|
519
528
|
*/
|
520
|
-
this.
|
529
|
+
this.selectedWarehouse$ = this.warehouseService.getWarehouseSelectChange$();
|
521
530
|
/**
|
522
531
|
* {@link Observable} изменения списка складов.
|
523
532
|
*/
|
524
|
-
this.
|
533
|
+
this.warehousesList$ = this.selectedWarehouse$.pipe(switchMap((warehouse) => this.warehouseService.getWarehouses$().pipe(map((warehouses) => { var _a; return (_a = this.product.stockCount) === null || _a === void 0 ? void 0 : _a.map((sc) => ({ w: warehouses.find((w) => w.id === sc.warehouseId), sc: sc })); }), map((items) => items === null || items === void 0 ? void 0 : items.sort((item) => { var _a; return (((_a = item.w) === null || _a === void 0 ? void 0 : _a.id) === (warehouse === null || warehouse === void 0 ? void 0 : warehouse.id) ? -1 : 1); })))));
|
525
534
|
}
|
526
535
|
}
|
527
536
|
ScPriceWarehouseStockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceWarehouseStockComponent, deps: [{ token: i1.ScWarehouseService }], target: i0.ɵɵFactoryTarget.Component });
|
528
|
-
ScPriceWarehouseStockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: { classList: "classList", product: "product", withStockHint: "withStockHint" }, ngImport: i0, template: "<ng-container *ngIf=\"product\">\n <ng-container>\n <div *ngIf=\"
|
537
|
+
ScPriceWarehouseStockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: { classList: "classList", product: "product", withStockHint: "withStockHint" }, ngImport: i0, template: "<ng-container *ngIf=\"product\">\n <ng-container>\n <div *ngIf=\"selectedWarehouse$ | async as warehouseSelect\" class=\"flex items-center gap-1\">\n <span *ngIf=\"product.getNotStockMessage(warehouseSelect) as message\" class=\"text-xs min-w-2/5 text-tui-error-fill\" [ngClass]=\"classList\"> {{ message }} </span>\n <span *ngIf=\"product.isWarehouseStockExist(warehouseSelect.id)\" class=\"text-xs min-w-2/5 text-tui-success-fill\" [ngClass]=\"classList\">\n \u0412 \u043D\u0430\u043B\u0438\u0447\u0438\u0438<ng-container *ngIf=\"product.getWarehouseStockCount(warehouseSelect.id) as count\"\n >:\n <span class=\"whitespace-nowrap\">{{ count }} {{ product.quantityUnit }}</span>\n </ng-container>\n </span>\n <span *ngIf=\"product.onOrder\" class=\"text-xs min-w-2/5 text-sc-yellow\" [ngClass]=\"classList\">\u041F\u043E\u0434 \u0437\u0430\u043A\u0430\u0437</span>\n\n <tui-svg\n *ngIf=\"withStockHint && (warehousesList$ | async)?.length\"\n src=\"tuiIconInfoLarge\"\n [tuiHint]=\"stockHint\"\n [tuiHintShowDelay]=\"100\"\n tuiHintDirection=\"top\"\n class=\"!text-xs !h-3\"\n ></tui-svg>\n </div>\n </ng-container>\n</ng-container>\n\n<ng-template #stockHint>\n <table *ngIf=\"selectedWarehouse$ | async as warehouseSelect\" class=\"text-xs table-auto\" [ngClass]=\"classList\">\n <tbody>\n <tr *ngFor=\"let item of warehousesList$ | async\" class=\"border-b\">\n <ng-container>\n <td class=\"px-1\">{{ item.w?.name }}:</td>\n <td class=\"px-1\">{{ item.sc.count ? item.sc.count + ' ' + product.quantityUnit : '\u0412 \u043D\u0430\u043B\u0438\u0447\u0438\u0438' }}</td>\n </ng-container>\n </tr>\n </tbody>\n </table>\n</ng-template>\n", styles: ["[tuiIconButton]{--tui-radius-m: .75rem;--tui-height-xs: 1.25rem}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
529
538
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceWarehouseStockComponent, decorators: [{
|
530
539
|
type: Component,
|
531
|
-
args: [{ selector: 'sc-price-warehouse-stock', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"product\">\n <ng-container>\n <div *ngIf=\"
|
540
|
+
args: [{ selector: 'sc-price-warehouse-stock', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"product\">\n <ng-container>\n <div *ngIf=\"selectedWarehouse$ | async as warehouseSelect\" class=\"flex items-center gap-1\">\n <span *ngIf=\"product.getNotStockMessage(warehouseSelect) as message\" class=\"text-xs min-w-2/5 text-tui-error-fill\" [ngClass]=\"classList\"> {{ message }} </span>\n <span *ngIf=\"product.isWarehouseStockExist(warehouseSelect.id)\" class=\"text-xs min-w-2/5 text-tui-success-fill\" [ngClass]=\"classList\">\n \u0412 \u043D\u0430\u043B\u0438\u0447\u0438\u0438<ng-container *ngIf=\"product.getWarehouseStockCount(warehouseSelect.id) as count\"\n >:\n <span class=\"whitespace-nowrap\">{{ count }} {{ product.quantityUnit }}</span>\n </ng-container>\n </span>\n <span *ngIf=\"product.onOrder\" class=\"text-xs min-w-2/5 text-sc-yellow\" [ngClass]=\"classList\">\u041F\u043E\u0434 \u0437\u0430\u043A\u0430\u0437</span>\n\n <tui-svg\n *ngIf=\"withStockHint && (warehousesList$ | async)?.length\"\n src=\"tuiIconInfoLarge\"\n [tuiHint]=\"stockHint\"\n [tuiHintShowDelay]=\"100\"\n tuiHintDirection=\"top\"\n class=\"!text-xs !h-3\"\n ></tui-svg>\n </div>\n </ng-container>\n</ng-container>\n\n<ng-template #stockHint>\n <table *ngIf=\"selectedWarehouse$ | async as warehouseSelect\" class=\"text-xs table-auto\" [ngClass]=\"classList\">\n <tbody>\n <tr *ngFor=\"let item of warehousesList$ | async\" class=\"border-b\">\n <ng-container>\n <td class=\"px-1\">{{ item.w?.name }}:</td>\n <td class=\"px-1\">{{ item.sc.count ? item.sc.count + ' ' + product.quantityUnit : '\u0412 \u043D\u0430\u043B\u0438\u0447\u0438\u0438' }}</td>\n </ng-container>\n </tr>\n </tbody>\n </table>\n</ng-template>\n", styles: ["[tuiIconButton]{--tui-radius-m: .75rem;--tui-height-xs: 1.25rem}\n"] }]
|
532
541
|
}], ctorParameters: function () { return [{ type: i1.ScWarehouseService }]; }, propDecorators: { classList: [{
|
533
542
|
type: Input
|
534
543
|
}], product: [{
|
@@ -616,10 +625,10 @@ class ScCartItemMobileComponent {
|
|
616
625
|
}
|
617
626
|
}
|
618
627
|
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 });
|
619
|
-
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 <!--\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 -->\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 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\" [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-tui-text-01 !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 <!--\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 (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 <p class=\"font-bold text-tui-text-01\">\u0418\u0442\u043E\u0433\u043E: {{ cartItem.costRub | tuiFormatNumber }} {{ 'RUB' | tuiCurrency }}</p>\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]=\"unitsHelper.productIsMeasurable(product) ? '\u0448\u0442' : 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$1.TuiPreviewComponent, selector: "tui-preview", inputs: ["zoomable", "rotatable"] }, { kind: "directive", type: i7$1.TuiPreviewActionDirective, selector: "[tuiPreviewAction]" }, { kind: "directive", type: i8$1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "pipe", type: i9.TuiCurrencyPipe, name: "tuiCurrency" }, { kind: "pipe", type: i3$1.TuiFormatNumberPipe, name: "tuiFormatNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
628
|
+
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 <!--\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 -->\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 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\" [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-tui-text-01 !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 <!--\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 (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 <p class=\"font-bold text-tui-text-01\">\u0418\u0442\u043E\u0433\u043E: {{ cartItem.costRub | tuiFormatNumber }} {{ 'RUB' | tuiCurrency }}</p>\n </div>\n </div>\n <div class=\"flex items-center grow justify-end\">\n <sc-input-quantity\n #inputQuantity\n class=\"w-28\"\n *ngIf=\"quantityControl\"\n [formControl]=\"quantityControl\"\n [quantityUnit]=\"unitsHelper.productIsMeasurable(product) ? '\u0448\u0442' : product.quantityUnit\"\n [showCross]=\"false\"\n size=\"s\"\n [step]=\"unitsHelper.productMultiplicity(product)\"\n (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\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$1.TuiPreviewComponent, selector: "tui-preview", inputs: ["zoomable", "rotatable"] }, { kind: "directive", type: i7$1.TuiPreviewActionDirective, selector: "[tuiPreviewAction]" }, { kind: "directive", type: i8$1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "pipe", type: i9.TuiCurrencyPipe, name: "tuiCurrency" }, { kind: "pipe", type: i3$1.TuiFormatNumberPipe, name: "tuiFormatNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
620
629
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCartItemMobileComponent, decorators: [{
|
621
630
|
type: Component,
|
622
|
-
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 <!--\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 -->\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 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\" [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-tui-text-01 !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 <!--\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 (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 <p class=\"font-bold text-tui-text-01\">\u0418\u0442\u043E\u0433\u043E: {{ cartItem.costRub | tuiFormatNumber }} {{ 'RUB' | tuiCurrency }}</p>\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]=\"unitsHelper.productIsMeasurable(product) ? '\u0448\u0442' : 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" }]
|
631
|
+
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 <!--\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 -->\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 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\" [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-tui-text-01 !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 <!--\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 (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 <p class=\"font-bold text-tui-text-01\">\u0418\u0442\u043E\u0433\u043E: {{ cartItem.costRub | tuiFormatNumber }} {{ 'RUB' | tuiCurrency }}</p>\n </div>\n </div>\n <div class=\"flex items-center grow justify-end\">\n <sc-input-quantity\n #inputQuantity\n class=\"w-28\"\n *ngIf=\"quantityControl\"\n [formControl]=\"quantityControl\"\n [quantityUnit]=\"unitsHelper.productIsMeasurable(product) ? '\u0448\u0442' : product.quantityUnit\"\n [showCross]=\"false\"\n size=\"s\"\n [step]=\"unitsHelper.productMultiplicity(product)\"\n (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\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" }]
|
623
632
|
}], ctorParameters: function () {
|
624
633
|
return [{ type: UnitsHelper }, { type: i7$1.TuiPreviewDialogService, decorators: [{
|
625
634
|
type: Inject,
|
@@ -917,10 +926,10 @@ class ScPriceCardComponent {
|
|
917
926
|
}
|
918
927
|
}
|
919
928
|
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 });
|
920
|
-
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 });
|
929
|
+
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 #inputQuantity\n *ngIf=\"showQuantityControl\"\n [formControl]=\"quantityControl\"\n [quantityUnit]=\"product.quantityUnit\"\n [size]=\"getQuantitySize\"\n [step]=\"unitsHelper.productMultiplicity(product)\"\n [showLoader]=\"quantityShowLoader\"\n (clickClearEvent)=\"clickClearEvent.emit(cartItem)\"\n class=\"w-full\"\n (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n ></sc-input-quantity>\n</div>\n\n<ng-template #skeleton>\n <div class=\"flex flex-col card-wrapper bg-white rounded-xl overflow-hidden shadow-sc-1\">\n <!-- \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 -->\n <div class=\"w-full h-3/5 rounded-t bg-tui-base-02\"></div>\n <!-- \u041A\u0440\u0430\u0442\u043A\u0430\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F \u043E \u0442\u043E\u0432\u0430\u0440\u0435 -->\n <div class=\"flex flex-col grow gap-2.5 bg-white rounded-b p-5\">\n <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n <div class=\"w-3/5 h-4 rounded bg-tui-base-02\"></div>\n <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n </div>\n </div>\n</ng-template>\n", styles: [":host[data-size=s] .card-wrapper{width:10rem;height:16rem}:host[data-size=s] .card-wrapper .wrapper-info{padding:8px}:host[data-size=s] .card-wrapper .wrapper-info .cost{font-size:.875rem;line-height:1.25rem}:host[data-size=s] .card-wrapper .button-wrapper tui-svg{font-size:.75rem;line-height:1rem;width:1rem}:host[data-size=m] .card-wrapper{width:12.5rem;height:20rem}:host[data-size=m] .card-wrapper .wrapper-info{padding-inline:16px;padding-block:8px}:host[data-size=m] .card-wrapper .name{font-size:.875rem;line-height:1.25rem;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:3rem}:host[data-size=m] .card-wrapper .info{max-height:1rem}:host[data-size=m] .card-wrapper .cost{font-size:1.125rem;line-height:1.75rem}:host[data-size=m] .card-wrapper .button-wrapper{max-height:0px;font-size:.75rem;line-height:1rem}:host[data-size=m] .card-wrapper:hover .name{-webkit-line-clamp:unset;max-height:6rem}:host[data-size=m] .card-wrapper:hover .info{max-height:3rem}:host[data-size=m] .card-wrapper:hover .button-wrapper{max-height:3rem}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i3$1.TuiHintDriverDirective, selector: "[tuiHint]" }, { kind: "directive", type: i3$1.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i3$1.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { kind: "component", type: i3$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: ScFavoriteBtnComponent, selector: "sc-favorite-btn", inputs: ["isFavorite", "showLoader", "disabled"], outputs: ["clickEvent"] }, { kind: "component", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: ["step", "quantityUnit", "showLoader", "showCross", "appearance", "isDisabled", "size"], outputs: ["clickClearEvent"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
921
930
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceCardComponent, decorators: [{
|
922
931
|
type: Component,
|
923
|
-
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"] }]
|
932
|
+
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 #inputQuantity\n *ngIf=\"showQuantityControl\"\n [formControl]=\"quantityControl\"\n [quantityUnit]=\"product.quantityUnit\"\n [size]=\"getQuantitySize\"\n [step]=\"unitsHelper.productMultiplicity(product)\"\n [showLoader]=\"quantityShowLoader\"\n (clickClearEvent)=\"clickClearEvent.emit(cartItem)\"\n class=\"w-full\"\n (keydown.enter)=\"inputQuantity.nativeFocusableElement?.blur()\"\n ></sc-input-quantity>\n</div>\n\n<ng-template #skeleton>\n <div class=\"flex flex-col card-wrapper bg-white rounded-xl overflow-hidden shadow-sc-1\">\n <!-- \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 -->\n <div class=\"w-full h-3/5 rounded-t bg-tui-base-02\"></div>\n <!-- \u041A\u0440\u0430\u0442\u043A\u0430\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F \u043E \u0442\u043E\u0432\u0430\u0440\u0435 -->\n <div class=\"flex flex-col grow gap-2.5 bg-white rounded-b p-5\">\n <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n <div class=\"w-3/5 h-4 rounded bg-tui-base-02\"></div>\n <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n </div>\n </div>\n</ng-template>\n", styles: [":host[data-size=s] .card-wrapper{width:10rem;height:16rem}:host[data-size=s] .card-wrapper .wrapper-info{padding:8px}:host[data-size=s] .card-wrapper .wrapper-info .cost{font-size:.875rem;line-height:1.25rem}:host[data-size=s] .card-wrapper .button-wrapper tui-svg{font-size:.75rem;line-height:1rem;width:1rem}:host[data-size=m] .card-wrapper{width:12.5rem;height:20rem}:host[data-size=m] .card-wrapper .wrapper-info{padding-inline:16px;padding-block:8px}:host[data-size=m] .card-wrapper .name{font-size:.875rem;line-height:1.25rem;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:3rem}:host[data-size=m] .card-wrapper .info{max-height:1rem}:host[data-size=m] .card-wrapper .cost{font-size:1.125rem;line-height:1.75rem}:host[data-size=m] .card-wrapper .button-wrapper{max-height:0px;font-size:.75rem;line-height:1rem}:host[data-size=m] .card-wrapper:hover .name{-webkit-line-clamp:unset;max-height:6rem}:host[data-size=m] .card-wrapper:hover .info{max-height:3rem}:host[data-size=m] .card-wrapper:hover .button-wrapper{max-height:3rem}\n"] }]
|
924
933
|
}], ctorParameters: function () {
|
925
934
|
return [{ type: UnitsHelper }, { type: i1.ScAuthService }, { type: i1.ScWarehouseService }, { type: undefined, decorators: [{
|
926
935
|
type: Inject,
|