@snabcentr/client-ui 0.2.2 → 0.2.3
Sign up to get free protection for your applications and to get access to all the features.
- package/banner/sc-banner.component.d.ts +56 -32
- package/banner/sc-banner.module.d.ts +3 -1
- package/esm2020/banner/sc-banner.component.mjs +100 -65
- package/esm2020/banner/sc-banner.module.mjs +8 -6
- package/fesm2015/snabcentr-client-ui.mjs +120 -82
- package/fesm2015/snabcentr-client-ui.mjs.map +1 -1
- package/fesm2020/snabcentr-client-ui.mjs +116 -82
- package/fesm2020/snabcentr-client-ui.mjs.map +1 -1
- package/package.json +2 -1
- package/styles/tailwind/tailwind.scss +24 -4
|
@@ -1,25 +1,28 @@
|
|
|
1
1
|
import { __decorate } from 'tslib';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { Injectable, EventEmitter, Component, ChangeDetectionStrategy,
|
|
3
|
+
import { Injectable, EventEmitter, ElementRef, Component, ChangeDetectionStrategy, Inject, Input, Output, ContentChildren, ViewChild, HostBinding, HostListener, NgModule, ChangeDetectorRef, Optional, Self, Directive, forwardRef } from '@angular/core';
|
|
4
|
+
import { Subject, map, tap, shareReplay, filter, switchMap, interval, takeUntil, skip } from 'rxjs';
|
|
4
5
|
import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
|
|
5
|
-
import
|
|
6
|
+
import * as i8 from '@ng-web-apis/intersection-observer';
|
|
7
|
+
import { IntersectionObserverService, IntersectionObserverModule } from '@ng-web-apis/intersection-observer';
|
|
8
|
+
import * as i3$1 from '@taiga-ui/core';
|
|
9
|
+
import { tuiFadeIn, TuiButtonModule, TuiModeModule, TuiLoaderModule, tuiFormatNumber, TuiSvgModule, TuiLabelModule, TuiTextfieldControllerModule, TuiHintModule, TuiLinkModule } from '@taiga-ui/core';
|
|
6
10
|
import * as i1 from '@snabcentr/client-core';
|
|
7
11
|
import { SC_URLS, SC_PATH_IMAGE_NOT_FOUND, ScIconTypesEnum } from '@snabcentr/client-core';
|
|
8
12
|
import * as i3 from '@angular/common';
|
|
9
13
|
import { CommonModule, formatDate } from '@angular/common';
|
|
10
|
-
import * as
|
|
11
|
-
import { TuiButtonModule, TuiModeModule, tuiFormatNumber, TuiSvgModule, TuiLabelModule, TuiTextfieldControllerModule, TuiHintModule, TuiLoaderModule, TuiLinkModule } from '@taiga-ui/core';
|
|
12
|
-
import * as i5 from '@taiga-ui/kit';
|
|
13
|
-
import { TuiCarouselModule, TuiPaginationModule, TUI_NUMBER_VALUE_TRANSFORMER, TuiInputNumberComponent, TuiIslandModule, TuiInputNumberModule, TuiFieldErrorPipeModule, TuiElasticContainerModule, TuiTreeService, TuiTreeItemContentComponent, TUI_TREE_START, TUI_TREE_CONTENT, TUI_TREE_LOADING, TUI_TREE_LOADER, TuiTreeModule } from '@taiga-ui/kit';
|
|
14
|
-
import * as i6 from '@taiga-ui/cdk';
|
|
15
|
-
import { tuiCreateToken, AbstractTuiNullableControl } from '@taiga-ui/cdk';
|
|
16
|
-
import { RouterModule } from '@angular/router';
|
|
14
|
+
import * as i5 from '@angular/material/core';
|
|
17
15
|
import { MatRippleModule } from '@angular/material/core';
|
|
16
|
+
import * as i3$2 from '@taiga-ui/kit';
|
|
17
|
+
import { TuiCarouselModule, TUI_NUMBER_VALUE_TRANSFORMER, TuiInputNumberComponent, TuiIslandModule, TuiInputNumberModule, TuiFieldErrorPipeModule, TuiElasticContainerModule, TuiTreeService, TuiTreeItemContentComponent, TUI_TREE_START, TUI_TREE_CONTENT, TUI_TREE_LOADING, TUI_TREE_LOADER, TuiTreeModule } from '@taiga-ui/kit';
|
|
18
|
+
import * as i7 from '@taiga-ui/cdk';
|
|
19
|
+
import { TuiLetModule, tuiCreateToken, AbstractTuiNullableControl } from '@taiga-ui/cdk';
|
|
20
|
+
import { RouterModule } from '@angular/router';
|
|
18
21
|
import * as i4 from '@angular/forms';
|
|
19
22
|
import { NgControl, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
20
|
-
import * as i7 from '@taiga-ui/addon-preview';
|
|
23
|
+
import * as i7$1 from '@taiga-ui/addon-preview';
|
|
21
24
|
import { TuiPreviewDialogService, TuiPreviewModule } from '@taiga-ui/addon-preview';
|
|
22
|
-
import * as i8 from '@tinkoff/ng-polymorpheus';
|
|
25
|
+
import * as i8$1 from '@tinkoff/ng-polymorpheus';
|
|
23
26
|
import { PolymorpheusModule, PolymorpheusComponent } from '@tinkoff/ng-polymorpheus';
|
|
24
27
|
import * as i2 from 'ngx-echarts';
|
|
25
28
|
import { NgxEchartsModule } from 'ngx-echarts';
|
|
@@ -64,9 +67,11 @@ let ScBannerComponent = class ScBannerComponent {
|
|
|
64
67
|
* @param bannerService Сервис для работы с баннерами.
|
|
65
68
|
* @param pxConverter Класс хэлпер для конвертации пикселей.
|
|
66
69
|
*/
|
|
67
|
-
constructor(cdr, bannerService, pxConverter) {
|
|
70
|
+
constructor(cdr, bannerService, entries$, element, pxConverter) {
|
|
68
71
|
this.cdr = cdr;
|
|
69
72
|
this.bannerService = bannerService;
|
|
73
|
+
this.entries$ = entries$;
|
|
74
|
+
this.element = element;
|
|
70
75
|
this.pxConverter = pxConverter;
|
|
71
76
|
/**
|
|
72
77
|
* Признак, что необходимо показывать кнопки навигации.
|
|
@@ -75,7 +80,7 @@ let ScBannerComponent = class ScBannerComponent {
|
|
|
75
80
|
/**
|
|
76
81
|
* Интервал показа слайдов в миллисекундах.
|
|
77
82
|
*/
|
|
78
|
-
this.playerInterval =
|
|
83
|
+
this.playerInterval = 5000;
|
|
79
84
|
/**
|
|
80
85
|
* Признак, что прокрутка выключена.
|
|
81
86
|
*/
|
|
@@ -91,110 +96,133 @@ let ScBannerComponent = class ScBannerComponent {
|
|
|
91
96
|
/**
|
|
92
97
|
* Событие нажатия на изображение баннера.
|
|
93
98
|
*/
|
|
94
|
-
this.
|
|
99
|
+
this.clickBannerEvent = new EventEmitter();
|
|
95
100
|
/**
|
|
96
|
-
*
|
|
101
|
+
* Идентификатор текущего баннера.
|
|
97
102
|
*/
|
|
98
|
-
this.
|
|
103
|
+
this.currentBannerId = 0;
|
|
99
104
|
/**
|
|
100
|
-
*
|
|
105
|
+
* {@link Subject} изменения состояния таймера.
|
|
101
106
|
*/
|
|
102
|
-
this.
|
|
107
|
+
this.toggleTimer$ = new Subject();
|
|
103
108
|
/**
|
|
104
|
-
*
|
|
109
|
+
* Признак, что необходимо показывать кнопки старта видео баннера.
|
|
105
110
|
*/
|
|
106
|
-
this.
|
|
111
|
+
this.showPlayBtn = false;
|
|
107
112
|
/**
|
|
108
|
-
*
|
|
113
|
+
* {@link Observable} Обновления списка баннеров.
|
|
109
114
|
*/
|
|
110
|
-
this.
|
|
115
|
+
this.banners$ = this.bannerService.banners$.pipe(map((banners) => banners.filter((banner) => banner.location === this.bannerLocation).reverse()), tap((banners) => {
|
|
116
|
+
if (banners.length) {
|
|
117
|
+
if (this.resizable) {
|
|
118
|
+
this.width = `100%`;
|
|
119
|
+
}
|
|
120
|
+
else {
|
|
121
|
+
this.height = `${this.pxConverter.pxToRem(banners[0].height)}rem`;
|
|
122
|
+
this.width = `${this.pxConverter.pxToRem(banners[0].width)}rem`;
|
|
123
|
+
}
|
|
124
|
+
this.aspectRatio = `${banners[0].width} / ${banners[0].height}`;
|
|
125
|
+
this.banners = banners;
|
|
126
|
+
this.toggleTimer$.next(true);
|
|
127
|
+
}
|
|
128
|
+
this.loadBannersEvent.emit(banners.length);
|
|
129
|
+
}), shareReplay(1));
|
|
111
130
|
/**
|
|
112
131
|
* Список баннеров.
|
|
113
132
|
*/
|
|
114
133
|
this.banners = [];
|
|
115
134
|
/**
|
|
116
|
-
*
|
|
135
|
+
* Свойство, от которого зависит высота `:host` компонента.
|
|
136
|
+
*/
|
|
137
|
+
this.height = 'auto';
|
|
138
|
+
/**
|
|
139
|
+
* Свойство, от которого зависит ширина `:host` компонента.
|
|
117
140
|
*/
|
|
118
|
-
this.
|
|
141
|
+
this.width = '';
|
|
142
|
+
/**
|
|
143
|
+
* Свойство, от которого зависит соотношение `:host` компонента.
|
|
144
|
+
*/
|
|
145
|
+
this.aspectRatio = '';
|
|
119
146
|
/**
|
|
120
147
|
* Обработчик события mouseenter.
|
|
148
|
+
*
|
|
149
|
+
* @private
|
|
121
150
|
*/
|
|
122
|
-
this.mouseEnterHandler = () =>
|
|
151
|
+
this.mouseEnterHandler = () => this.toggleTimer$.next(false);
|
|
123
152
|
/**
|
|
124
153
|
* Обработчик события mouseleave.
|
|
154
|
+
*
|
|
155
|
+
* @private
|
|
125
156
|
*/
|
|
126
|
-
this.mouseLeaveHandler = () =>
|
|
157
|
+
this.mouseLeaveHandler = () => this.toggleTimer$.next(true);
|
|
127
158
|
}
|
|
128
159
|
/**
|
|
129
160
|
* Свойство, от которого зависит наличие класса `!hidden` у `:host` компонента.
|
|
130
161
|
*/
|
|
131
162
|
get isHidden() {
|
|
132
|
-
return this.bannersListRef.length + this.banners.length === 0;
|
|
163
|
+
return !this.banners || this.bannersListRef.length + this.banners.length === 0;
|
|
133
164
|
}
|
|
134
165
|
/** @inheritDoc */
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
.pipe(filter(() => !this.disabled &&
|
|
166
|
+
ngAfterViewInit() {
|
|
167
|
+
this.toggleTimer$
|
|
168
|
+
.pipe(filter((toggle) => toggle), switchMap(() => interval(this.playerInterval).pipe(takeUntil(this.toggleTimer$))), filter(() => !this.disabled && (this.banners?.[this.currentBannerId]?.mediaType === 'image' || this.showPlayBtn)), untilDestroyed(this))
|
|
138
169
|
.subscribe(() => this.onNextBanner());
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
if (banners.length) {
|
|
145
|
-
if (this.resizable) {
|
|
146
|
-
this.width = `100%`;
|
|
147
|
-
}
|
|
148
|
-
else {
|
|
149
|
-
this.height = `${this.pxConverter.pxToRem(banners[0].height)}rem`;
|
|
150
|
-
this.width = `${this.pxConverter.pxToRem(banners[0].width)}rem`;
|
|
151
|
-
}
|
|
152
|
-
this.aspectRatio = `${banners[0].width} / ${banners[0].height}`;
|
|
153
|
-
}
|
|
154
|
-
this.loadBannersEvent.emit(this.banners.length);
|
|
155
|
-
this.cdr.markForCheck();
|
|
156
|
-
});
|
|
157
|
-
}
|
|
158
|
-
}
|
|
159
|
-
/**
|
|
160
|
-
* Обработчик нажатия на баннер, генерирующий событие {@link clickBannerImgEvent}.
|
|
161
|
-
*
|
|
162
|
-
* @param banner Баннер, по ссылке которого совершён переход.
|
|
163
|
-
*/
|
|
164
|
-
onClick(banner) {
|
|
165
|
-
if (banner.url) {
|
|
166
|
-
this.clickBannerImgEvent.emit(banner);
|
|
167
|
-
}
|
|
170
|
+
// Отслеживание пересечения компонента с экраном пользователя.
|
|
171
|
+
// Если баннера не находится в поле видимости пользователя, то он перестаёт переключатся, а видео останавливается.
|
|
172
|
+
this.entries$.pipe(map((entries) => entries.find((item) => item.target === this.element.nativeElement))).subscribe((entry) => {
|
|
173
|
+
this.toggleTimer$.next(!!entry?.isIntersecting);
|
|
174
|
+
});
|
|
168
175
|
}
|
|
169
176
|
/**
|
|
170
|
-
*
|
|
177
|
+
* Переключает на предыдущий баннер.
|
|
171
178
|
*/
|
|
172
179
|
onPreviousBanner() {
|
|
173
180
|
const previous = this.currentBannerId - 1;
|
|
174
|
-
this.currentBannerId = previous < 0 ? this.bannersListRef.length + this.banners
|
|
181
|
+
this.currentBannerId = previous < 0 ? this.bannersListRef.length + (this.banners?.length ?? 0) - 1 : previous;
|
|
175
182
|
this.cdr.markForCheck();
|
|
176
183
|
}
|
|
177
184
|
/**
|
|
178
|
-
*
|
|
185
|
+
* Переключает на следующий баннер.
|
|
179
186
|
*/
|
|
180
187
|
onNextBanner() {
|
|
181
188
|
const next = this.currentBannerId + 1;
|
|
182
|
-
this.currentBannerId = next === this.bannersListRef.length + this.banners
|
|
189
|
+
this.currentBannerId = next === this.bannersListRef.length + (this.banners?.length ?? 0) ? 0 : next;
|
|
183
190
|
this.cdr.markForCheck();
|
|
184
191
|
}
|
|
192
|
+
/**
|
|
193
|
+
* Переключает на следующий баннер.
|
|
194
|
+
*/
|
|
195
|
+
onEndedVideo() {
|
|
196
|
+
this.onNextBanner();
|
|
197
|
+
this.toggleTimer$.next(true);
|
|
198
|
+
this.showPlayBtn = true;
|
|
199
|
+
}
|
|
200
|
+
/**
|
|
201
|
+
* Обработчик нажатия на баннер, генерирующий событие {@link clickBannerImgEvent}.
|
|
202
|
+
*
|
|
203
|
+
* @param banner Баннер, по ссылке которого совершён переход.
|
|
204
|
+
*/
|
|
205
|
+
onClick(banner) {
|
|
206
|
+
if (banner.url) {
|
|
207
|
+
this.clickBannerEvent.emit(banner);
|
|
208
|
+
}
|
|
209
|
+
}
|
|
185
210
|
};
|
|
186
|
-
ScBannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScBannerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ScBannerService }, { token: ScPxConverter }], target: i0.ɵɵFactoryTarget.Component });
|
|
187
|
-
ScBannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScBannerComponent, selector: "sc-banner", inputs: { navigateButton: "navigateButton", playerInterval: "playerInterval", disabled: "disabled", bannerLocation: "bannerLocation", resizable: "resizable" }, outputs: { loadBannersEvent: "loadBannersEvent",
|
|
211
|
+
ScBannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScBannerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ScBannerService }, { token: IntersectionObserverService }, { token: ElementRef }, { token: ScPxConverter }], target: i0.ɵɵFactoryTarget.Component });
|
|
212
|
+
ScBannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScBannerComponent, selector: "sc-banner", inputs: { navigateButton: "navigateButton", playerInterval: "playerInterval", disabled: "disabled", bannerLocation: "bannerLocation", resizable: "resizable" }, outputs: { loadBannersEvent: "loadBannersEvent", clickBannerEvent: "clickBannerEvent" }, host: { listeners: { "mouseenter": "mouseEnterHandler()", "mouseleave": "mouseLeaveHandler()" }, properties: { "class.!hidden": "this.isHidden", "style.height": "this.height", "style.width": "this.width", "style.aspect-ratio": "this.aspectRatio" } }, providers: [IntersectionObserverService], queries: [{ propertyName: "bannersListRef", predicate: ["banner"] }], viewQueries: [{ propertyName: "videoRef", first: true, predicate: ["videoPlayer"], descendants: true }], ngImport: i0, template: "<ng-container *tuiLet=\"banners$ | async\">\n <tui-carousel class=\"bg-white w-full h-full shadow-sc-2 rounded-xl overflow-hidden\" [(index)]=\"currentBannerId\">\n <ng-container *ngFor=\"let banner of banners; let index = index\">\n <a\n *tuiItem\n (click)=\"onClick(banner)\"\n [style.aspect-ratio]=\"aspectRatio\"\n [attr.href]=\"banner.url ? banner.url : null\"\n target=\"_blank\"\n [title]=\"banner.title\"\n class=\"relative\"\n >\n <ng-container [ngSwitch]=\"banner.mediaType\">\n <ng-container *ngSwitchCase=\"'video'\">\n <video\n #videoPlayer\n (suspend)=\"showPlayBtn = true\"\n (play)=\"showPlayBtn = false\"\n [src]=\"banner.mediaFile\"\n (ended)=\"onEndedVideo()\"\n (mouseover)=\"videoPlayer.pause()\"\n (mouseout)=\"videoPlayer.play()\"\n class=\"object-cover h-full\"\n muted\n autoplay\n ></video>\n <button\n *ngIf=\"showPlayBtn\"\n tuiIconButton\n [@tuiFadeIn]=\"200\"\n matRipple\n (click)=\"$event.preventDefault(); videoPlayer.play()\"\n size=\"s\"\n appearance=\"secondary\"\n class=\"!absolute left-8 bottom-4\"\n >\n <i class=\"icon-refresh text-black\"></i>\n </button>\n </ng-container>\n\n <img *ngSwitchCase=\"'image'\" [src]=\"banner.mediaFile\" alt=\"\u0411\u0430\u043D\u043D\u0435\u0440\" class=\"object-cover h-full\" />\n </ng-container>\n </a>\n </ng-container>\n <ng-container *ngFor=\"let item of bannersListRef\">\n <div *tuiItem [style.height]=\"height\" [style.width]=\"width\" [style.aspect-ratio]=\"aspectRatio\" class=\"overflow-hidden\">\n <ng-container [ngTemplateOutlet]=\"item\"></ng-container>\n </div>\n </ng-container>\n </tui-carousel>\n</ng-container>\n<div *ngIf=\"navigateButton && !disabled && this.banners && (this.bannersListRef.length + this.banners.length) > 1\" tuiMode=\"onLight\" class=\"flex items-center\">\n <button tuiIconButton icon=\"tuiIconChevronLeftLarge\" size=\"m\" shape=\"rounded\" appearance=\"flat\" (click)=\"onPreviousBanner()\" class=\"!absolute left-2\"></button>\n <button tuiIconButton icon=\"tuiIconChevronRightLarge\" size=\"m\" shape=\"rounded\" appearance=\"flat\" (click)=\"onNextBanner()\" class=\"!absolute right-2\"></button>\n</div>\n", styles: [":host{--tui-carousel-padding: 0;display:flex;position:relative}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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: i5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i3$2.TuiCarouselComponent, selector: "tui-carousel", inputs: ["draggable", "itemsCount", "index"], outputs: ["indexChange"] }, { kind: "directive", type: i3$2.TuiCarouselDirective, selector: "tui-carousel", inputs: ["duration", "index"] }, { kind: "directive", type: i7.TuiItemDirective, selector: "[tuiItem]" }, { kind: "directive", type: i3$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { kind: "directive", type: i7.TuiLetDirective, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], animations: [tuiFadeIn], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
188
213
|
ScBannerComponent = __decorate([
|
|
189
214
|
UntilDestroy({ checkProperties: true })
|
|
190
215
|
], ScBannerComponent);
|
|
191
216
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScBannerComponent, decorators: [{
|
|
192
217
|
type: Component,
|
|
193
|
-
args: [{ selector: 'sc-banner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<
|
|
194
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.ScBannerService }, { type:
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
218
|
+
args: [{ selector: 'sc-banner', changeDetection: ChangeDetectionStrategy.OnPush, providers: [IntersectionObserverService], animations: [tuiFadeIn], template: "<ng-container *tuiLet=\"banners$ | async\">\n <tui-carousel class=\"bg-white w-full h-full shadow-sc-2 rounded-xl overflow-hidden\" [(index)]=\"currentBannerId\">\n <ng-container *ngFor=\"let banner of banners; let index = index\">\n <a\n *tuiItem\n (click)=\"onClick(banner)\"\n [style.aspect-ratio]=\"aspectRatio\"\n [attr.href]=\"banner.url ? banner.url : null\"\n target=\"_blank\"\n [title]=\"banner.title\"\n class=\"relative\"\n >\n <ng-container [ngSwitch]=\"banner.mediaType\">\n <ng-container *ngSwitchCase=\"'video'\">\n <video\n #videoPlayer\n (suspend)=\"showPlayBtn = true\"\n (play)=\"showPlayBtn = false\"\n [src]=\"banner.mediaFile\"\n (ended)=\"onEndedVideo()\"\n (mouseover)=\"videoPlayer.pause()\"\n (mouseout)=\"videoPlayer.play()\"\n class=\"object-cover h-full\"\n muted\n autoplay\n ></video>\n <button\n *ngIf=\"showPlayBtn\"\n tuiIconButton\n [@tuiFadeIn]=\"200\"\n matRipple\n (click)=\"$event.preventDefault(); videoPlayer.play()\"\n size=\"s\"\n appearance=\"secondary\"\n class=\"!absolute left-8 bottom-4\"\n >\n <i class=\"icon-refresh text-black\"></i>\n </button>\n </ng-container>\n\n <img *ngSwitchCase=\"'image'\" [src]=\"banner.mediaFile\" alt=\"\u0411\u0430\u043D\u043D\u0435\u0440\" class=\"object-cover h-full\" />\n </ng-container>\n </a>\n </ng-container>\n <ng-container *ngFor=\"let item of bannersListRef\">\n <div *tuiItem [style.height]=\"height\" [style.width]=\"width\" [style.aspect-ratio]=\"aspectRatio\" class=\"overflow-hidden\">\n <ng-container [ngTemplateOutlet]=\"item\"></ng-container>\n </div>\n </ng-container>\n </tui-carousel>\n</ng-container>\n<div *ngIf=\"navigateButton && !disabled && this.banners && (this.bannersListRef.length + this.banners.length) > 1\" tuiMode=\"onLight\" class=\"flex items-center\">\n <button tuiIconButton icon=\"tuiIconChevronLeftLarge\" size=\"m\" shape=\"rounded\" appearance=\"flat\" (click)=\"onPreviousBanner()\" class=\"!absolute left-2\"></button>\n <button tuiIconButton icon=\"tuiIconChevronRightLarge\" size=\"m\" shape=\"rounded\" appearance=\"flat\" (click)=\"onNextBanner()\" class=\"!absolute right-2\"></button>\n</div>\n", styles: [":host{--tui-carousel-padding: 0;display:flex;position:relative}\n"] }]
|
|
219
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.ScBannerService }, { type: i8.IntersectionObserverService, decorators: [{
|
|
220
|
+
type: Inject,
|
|
221
|
+
args: [IntersectionObserverService]
|
|
222
|
+
}] }, { type: i0.ElementRef, decorators: [{
|
|
223
|
+
type: Inject,
|
|
224
|
+
args: [ElementRef]
|
|
225
|
+
}] }, { type: ScPxConverter }]; }, propDecorators: { navigateButton: [{
|
|
198
226
|
type: Input
|
|
199
227
|
}], playerInterval: [{
|
|
200
228
|
type: Input
|
|
@@ -206,8 +234,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
206
234
|
type: Input
|
|
207
235
|
}], loadBannersEvent: [{
|
|
208
236
|
type: Output
|
|
209
|
-
}],
|
|
237
|
+
}], clickBannerEvent: [{
|
|
210
238
|
type: Output
|
|
239
|
+
}], bannersListRef: [{
|
|
240
|
+
type: ContentChildren,
|
|
241
|
+
args: ['banner']
|
|
242
|
+
}], videoRef: [{
|
|
243
|
+
type: ViewChild,
|
|
244
|
+
args: ['videoPlayer']
|
|
211
245
|
}], isHidden: [{
|
|
212
246
|
type: HostBinding,
|
|
213
247
|
args: ['class.!hidden']
|
|
@@ -234,13 +268,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
234
268
|
class ScBannerModule {
|
|
235
269
|
}
|
|
236
270
|
ScBannerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScBannerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
237
|
-
ScBannerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: ScBannerModule, declarations: [ScBannerComponent], imports: [CommonModule, RouterModule, TuiButtonModule, MatRippleModule, TuiCarouselModule,
|
|
238
|
-
ScBannerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScBannerModule, imports: [CommonModule, RouterModule, TuiButtonModule, MatRippleModule, TuiCarouselModule,
|
|
271
|
+
ScBannerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: ScBannerModule, declarations: [ScBannerComponent], imports: [CommonModule, RouterModule, TuiButtonModule, MatRippleModule, TuiCarouselModule, TuiModeModule, TuiLoaderModule, IntersectionObserverModule, TuiLetModule], exports: [ScBannerComponent] });
|
|
272
|
+
ScBannerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScBannerModule, imports: [CommonModule, RouterModule, TuiButtonModule, MatRippleModule, TuiCarouselModule, TuiModeModule, TuiLoaderModule, IntersectionObserverModule, TuiLetModule] });
|
|
239
273
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScBannerModule, decorators: [{
|
|
240
274
|
type: NgModule,
|
|
241
275
|
args: [{
|
|
242
276
|
declarations: [ScBannerComponent],
|
|
243
|
-
imports: [CommonModule, RouterModule, TuiButtonModule, MatRippleModule, TuiCarouselModule,
|
|
277
|
+
imports: [CommonModule, RouterModule, TuiButtonModule, MatRippleModule, TuiCarouselModule, TuiModeModule, TuiLoaderModule, IntersectionObserverModule, TuiLetModule],
|
|
244
278
|
exports: [ScBannerComponent],
|
|
245
279
|
}]
|
|
246
280
|
}] });
|
|
@@ -396,7 +430,7 @@ class ScInputQuantityComponent extends AbstractTuiNullableControl {
|
|
|
396
430
|
}
|
|
397
431
|
}
|
|
398
432
|
ScInputQuantityComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScInputQuantityComponent, deps: [{ token: NgControl, optional: true, self: true }, { token: ChangeDetectorRef }, { token: TUI_NUMBER_VALUE_TRANSFORMER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
399
|
-
ScInputQuantityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: { step: "step", quantityUnit: "quantityUnit", showLoader: "showLoader", showCross: "showCross", appearance: "appearance", isDisabled: "isDisabled", size: "size" }, outputs: { clickClearEvent: "clickClearEvent" }, host: { listeners: { "keydown.arrowDown": "onArrow(-step)", "keydown.arrowUp": "onArrow(step)" }, properties: { "attr.data-appearance": "this.appearance", "attr.data-disabled": "this.isDisabled", "attr.data-size": "this.size" } }, viewQueries: [{ propertyName: "numberInput", first: true, predicate: TuiInputNumberComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<tui-loader *ngIf=\"formControl\" class=\"w-full\" [overlay]=\"true\" [showLoader]=\"showLoader\" [size]=\"size\">\n <div class=\"flex items-center text-center gap-1\">\n <div class=\"field-with-button flex grow rounded-xl\">\n <button\n tuiIconButton\n tuiMode=\"onLight\"\n [appearance]=\"appearance\"\n [disabled]=\"!numberInput.canDecrement\"\n [focusable]=\"false\"\n [size]=\"size\"\n (click.prevent)=\"decrement()\"\n (mousedown.prevent)=\"numberInput.nativeFocusableElement?.focus()\"\n >\n <tui-svg src=\"scIconMinus\"></tui-svg>\n </button>\n <tui-input-number\n #numberInput\n [formControl]=\"formControl\"\n [tuiHint]=\"([] | tuiFieldError | async )?.message\"\n [tuiTextfieldPostfix]=\"quantityUnit || ''\"\n [tuiTextfieldLabelOutside]=\"true\"\n [min]=\"step\"\n [tuiTextfieldSize]=\"size\"\n [required]=\"true\"\n [style.text-align]=\"'center'\"\n [style.font-weight]=\"700\"\n class=\"grow\"\n >\n </tui-input-number>\n <button\n tuiIconButton\n tuiMode=\"onLight\"\n [appearance]=\"appearance\"\n [size]=\"size\"\n [disabled]=\"!numberInput.canIncrement\"\n [focusable]=\"false\"\n (click.prevent)=\"incident()\"\n (mousedown.prevent)=\"numberInput.nativeFocusableElement?.focus()\"\n >\n <tui-svg src=\"scIconPlus\"></tui-svg>\n </button>\n </div>\n <button\n *ngIf=\"showCross\"\n tuiIconButton\n tuiMode=\"onLight\"\n [appearance]=\"appearance\"\n [size]=\"size\"\n [disabled]=\"!numberInput.canIncrement\"\n [focusable]=\"false\"\n (click.prevent)=\"clear()\"\n (mousedown.prevent)=\"numberInput.nativeFocusableElement?.focus()\"\n >\n <tui-svg src=\"scIconCross\"></tui-svg>\n </button>\n </div>\n</tui-loader>\n", styles: [":host [data-size=l]{--tui-height-l: var(--tui-height-m);--tui-font-text-m: bold .875rem/1.25rem var(--tui-font-text);--tui-padding-l: 0}:host [data-size=m]{--tui-height-m: var(--tui-height-s);--tui-font-text-s: bold .75rem/1rem var(--tui-font-text);--tui-padding-m: 0}:host [data-size=m] tui-svg{font-size:12px!important}:host [data-size=s]{--tui-height-s: var(--tui-height-xs);--tui-font-text-s: bold .75rem/1rem var(--tui-font-text);--tui-padding-s: 0}:host [data-size=s] tui-svg{font-size:12px!important}:host[data-disabled=true]{pointer-events:none;opacity:var(--tui-disabled-opacity)}:host[data-appearance=secondary] .field-with-button{background-color:var(--tui-base-01);box-shadow:inset 0 0 0 .0625rem var(--tui-base-03)}:host[data-appearance=primary] .field-with-button{background-color:var(--tui-warning-bg)}:host .field-with-button:has(._invalid){background-color:var(--tui-error-bg)}\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: "component", type:
|
|
433
|
+
ScInputQuantityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: { step: "step", quantityUnit: "quantityUnit", showLoader: "showLoader", showCross: "showCross", appearance: "appearance", isDisabled: "isDisabled", size: "size" }, outputs: { clickClearEvent: "clickClearEvent" }, host: { listeners: { "keydown.arrowDown": "onArrow(-step)", "keydown.arrowUp": "onArrow(step)" }, properties: { "attr.data-appearance": "this.appearance", "attr.data-disabled": "this.isDisabled", "attr.data-size": "this.size" } }, viewQueries: [{ propertyName: "numberInput", first: true, predicate: TuiInputNumberComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<tui-loader *ngIf=\"formControl\" class=\"w-full\" [overlay]=\"true\" [showLoader]=\"showLoader\" [size]=\"size\">\n <div class=\"flex items-center text-center gap-1\">\n <div class=\"field-with-button flex grow rounded-xl\">\n <button\n tuiIconButton\n tuiMode=\"onLight\"\n [appearance]=\"appearance\"\n [disabled]=\"!numberInput.canDecrement\"\n [focusable]=\"false\"\n [size]=\"size\"\n (click.prevent)=\"decrement()\"\n (mousedown.prevent)=\"numberInput.nativeFocusableElement?.focus()\"\n >\n <tui-svg src=\"scIconMinus\"></tui-svg>\n </button>\n <tui-input-number\n #numberInput\n [formControl]=\"formControl\"\n [tuiHint]=\"([] | tuiFieldError | async )?.message\"\n [tuiTextfieldPostfix]=\"quantityUnit || ''\"\n [tuiTextfieldLabelOutside]=\"true\"\n [min]=\"step\"\n [tuiTextfieldSize]=\"size\"\n [required]=\"true\"\n [style.text-align]=\"'center'\"\n [style.font-weight]=\"700\"\n class=\"grow\"\n >\n </tui-input-number>\n <button\n tuiIconButton\n tuiMode=\"onLight\"\n [appearance]=\"appearance\"\n [size]=\"size\"\n [disabled]=\"!numberInput.canIncrement\"\n [focusable]=\"false\"\n (click.prevent)=\"incident()\"\n (mousedown.prevent)=\"numberInput.nativeFocusableElement?.focus()\"\n >\n <tui-svg src=\"scIconPlus\"></tui-svg>\n </button>\n </div>\n <button\n *ngIf=\"showCross\"\n tuiIconButton\n tuiMode=\"onLight\"\n [appearance]=\"appearance\"\n [size]=\"size\"\n [disabled]=\"!numberInput.canIncrement\"\n [focusable]=\"false\"\n (click.prevent)=\"clear()\"\n (mousedown.prevent)=\"numberInput.nativeFocusableElement?.focus()\"\n >\n <tui-svg src=\"scIconCross\"></tui-svg>\n </button>\n </div>\n</tui-loader>\n", styles: [":host [data-size=l]{--tui-height-l: var(--tui-height-m);--tui-font-text-m: bold .875rem/1.25rem var(--tui-font-text);--tui-padding-l: 0}:host [data-size=m]{--tui-height-m: var(--tui-height-s);--tui-font-text-s: bold .75rem/1rem var(--tui-font-text);--tui-padding-m: 0}:host [data-size=m] tui-svg{font-size:12px!important}:host [data-size=s]{--tui-height-s: var(--tui-height-xs);--tui-font-text-s: bold .75rem/1rem var(--tui-font-text);--tui-padding-s: 0}:host [data-size=s] tui-svg{font-size:12px!important}:host[data-disabled=true]{pointer-events:none;opacity:var(--tui-disabled-opacity)}:host[data-appearance=secondary] .field-with-button{background-color:var(--tui-base-01);box-shadow:inset 0 0 0 .0625rem var(--tui-base-03)}:host[data-appearance=primary] .field-with-button{background-color:var(--tui-warning-bg)}:host .field-with-button:has(._invalid){background-color:var(--tui-error-bg)}\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: "component", type: i3$2.TuiInputNumberComponent, selector: "tui-input-number", inputs: ["min", "max", "decimal", "precision", "step", "prefix", "postfix"] }, { kind: "directive", type: i3$2.TuiInputNumberDirective, selector: "tui-input-number" }, { kind: "directive", type: i3$1.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i3$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { kind: "directive", type: i3$1.TuiTextfieldPostfixDirective, selector: "[tuiTextfieldPostfix]", inputs: ["tuiTextfieldPostfix"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: "directive", type: i3$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { kind: "component", type: i3$1.TuiLoaderComponent, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$2.TuiFieldErrorPipe, name: "tuiFieldError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
400
434
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScInputQuantityComponent, decorators: [{
|
|
401
435
|
type: Component,
|
|
402
436
|
args: [{ selector: 'sc-input-quantity', changeDetection: ChangeDetectionStrategy.OnPush, template: "<tui-loader *ngIf=\"formControl\" class=\"w-full\" [overlay]=\"true\" [showLoader]=\"showLoader\" [size]=\"size\">\n <div class=\"flex items-center text-center gap-1\">\n <div class=\"field-with-button flex grow rounded-xl\">\n <button\n tuiIconButton\n tuiMode=\"onLight\"\n [appearance]=\"appearance\"\n [disabled]=\"!numberInput.canDecrement\"\n [focusable]=\"false\"\n [size]=\"size\"\n (click.prevent)=\"decrement()\"\n (mousedown.prevent)=\"numberInput.nativeFocusableElement?.focus()\"\n >\n <tui-svg src=\"scIconMinus\"></tui-svg>\n </button>\n <tui-input-number\n #numberInput\n [formControl]=\"formControl\"\n [tuiHint]=\"([] | tuiFieldError | async )?.message\"\n [tuiTextfieldPostfix]=\"quantityUnit || ''\"\n [tuiTextfieldLabelOutside]=\"true\"\n [min]=\"step\"\n [tuiTextfieldSize]=\"size\"\n [required]=\"true\"\n [style.text-align]=\"'center'\"\n [style.font-weight]=\"700\"\n class=\"grow\"\n >\n </tui-input-number>\n <button\n tuiIconButton\n tuiMode=\"onLight\"\n [appearance]=\"appearance\"\n [size]=\"size\"\n [disabled]=\"!numberInput.canIncrement\"\n [focusable]=\"false\"\n (click.prevent)=\"incident()\"\n (mousedown.prevent)=\"numberInput.nativeFocusableElement?.focus()\"\n >\n <tui-svg src=\"scIconPlus\"></tui-svg>\n </button>\n </div>\n <button\n *ngIf=\"showCross\"\n tuiIconButton\n tuiMode=\"onLight\"\n [appearance]=\"appearance\"\n [size]=\"size\"\n [disabled]=\"!numberInput.canIncrement\"\n [focusable]=\"false\"\n (click.prevent)=\"clear()\"\n (mousedown.prevent)=\"numberInput.nativeFocusableElement?.focus()\"\n >\n <tui-svg src=\"scIconCross\"></tui-svg>\n </button>\n </div>\n</tui-loader>\n", styles: [":host [data-size=l]{--tui-height-l: var(--tui-height-m);--tui-font-text-m: bold .875rem/1.25rem var(--tui-font-text);--tui-padding-l: 0}:host [data-size=m]{--tui-height-m: var(--tui-height-s);--tui-font-text-s: bold .75rem/1rem var(--tui-font-text);--tui-padding-m: 0}:host [data-size=m] tui-svg{font-size:12px!important}:host [data-size=s]{--tui-height-s: var(--tui-height-xs);--tui-font-text-s: bold .75rem/1rem var(--tui-font-text);--tui-padding-s: 0}:host [data-size=s] tui-svg{font-size:12px!important}:host[data-disabled=true]{pointer-events:none;opacity:var(--tui-disabled-opacity)}:host[data-appearance=secondary] .field-with-button{background-color:var(--tui-base-01);box-shadow:inset 0 0 0 .0625rem var(--tui-base-03)}:host[data-appearance=primary] .field-with-button{background-color:var(--tui-warning-bg)}:host .field-with-button:has(._invalid){background-color:var(--tui-error-bg)}\n"] }]
|
|
@@ -410,7 +444,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
410
444
|
}] }, { type: i0.ChangeDetectorRef, decorators: [{
|
|
411
445
|
type: Inject,
|
|
412
446
|
args: [ChangeDetectorRef]
|
|
413
|
-
}] }, { type:
|
|
447
|
+
}] }, { type: i7.AbstractTuiValueTransformer, decorators: [{
|
|
414
448
|
type: Optional
|
|
415
449
|
}, {
|
|
416
450
|
type: Inject,
|
|
@@ -566,11 +600,11 @@ class ScCartItemMobileComponent {
|
|
|
566
600
|
}
|
|
567
601
|
}
|
|
568
602
|
ScCartItemMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCartItemMobileComponent, deps: [{ token: UnitsHelper }, { token: TuiPreviewDialogService }, { token: SC_URLS }, { token: SC_PATH_IMAGE_NOT_FOUND }], target: i0.ɵɵFactoryTarget.Component });
|
|
569
|
-
ScCartItemMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScCartItemMobileComponent, selector: "sc-cart-item-mobile", inputs: { cartItem: "cartItem" }, outputs: { quantityValueChanges: "quantityValueChanges", clickDeleteEvent: "clickDeleteEvent", clickSettingsEvent: "clickSettingsEvent", clickCardEvent: "clickCardEvent" }, viewQueries: [{ propertyName: "specificationPreviewRef", first: true, predicate: ["specificationPreview"], descendants: true }], ngImport: i0, template: "<div class=\"ml-2 mt-2 relative p-4 gap-y-2 gap-x-4 flex flex-wrap bg-white border border-tui-base-04 shadow-sc-2 rounded-xl\">\n <ng-container *ngIf=\"cartItem && product; else skeleton\">\n<!--\nTODO: \u041D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u0430 \u0440\u0435\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u044F \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B\u0430.\n <button tuiIconButton size=\"m\" icon=\"scIconVerticalThreeDots\" appearance=\"float\" tuiMode=\"onLight\" class=\"!absolute right-0 top-0\"></button>\n-->\n <button\n tuiIconButton\n size=\"m\"\n icon=\"scIconBasket\"\n appearance=\"secondary\"\n tuiMode=\"onLight\"\n (click)=\"clickDeleteEvent.emit()\"\n class=\"shadow-sc-2 !absolute -left-2 -top-2\"\n ></button>\n <div class=\"flex gap-2\">\n <div class=\"flex shrink-0 h-20 w-20 justify-center items-center overflow-hidden\">\n <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" [class.p-5]=\"!product.images?.length\" class=\"cursor-pointer\" />\n </div>\n\n <div class=\"flex flex-wrap self-center gap-x-8 gap-y-0.5\">\n <div class=\"w-[13rem]\">\n <a tuiLink (click)=\"clickCardEvent.emit()\">\n <span class=\"font-bold\">{{ product.name }}</span>\n </a>\n <div class=\"text-tui-text-02 text-xs\">\n <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n <p *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n <a tuiLink *ngIf=\"cartItem.specificationImgUrl\" (click)=\"showSpecification()\">\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a>\n <ng-template #specificationPreview let-preview>\n <tui-preview [rotatable]=\"false\" [zoomable]=\"false\">\n <img *polymorpheusOutlet=\"cartItem.specificationImgUrl as src\" alt=\"preview\" alt=\"\" [src]=\"cartItem.specificationImgUrl\" />\n <button icon=\"tuiIconClose\" title=\"Close\" tuiIconButton tuiPreviewAction type=\"button\" (click)=\"preview.complete()\"></button>\n </tui-preview>\n </ng-template>\n </div>\n </div>\n <div class=\"flex flex-col self-center w-[10rem] gap-x-8 gap-y-0.5\">\n <span *ngIf=\"product.discount\" class=\"flex items-center text-xs text-tui-text-02\">\n <span class=\"line-through\">{{ product.discountCostString }}</span> \n <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-xs !h-4\"></tui-svg>\n <ng-template #discountHint>\n <div class=\"font-bold\">{{ product.discount.name }}</div>\n <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n </ng-template>\n </span>\n <p class=\"flex flex-col items-baseline gap-x-2 font-bold\">\n <span>{{ product.costRubString }}</span>\n <span *ngIf=\"!product.priceInRub\" class=\"text-xs text-tui-text-02\">{{ product.costString }}</span>\n </p>\n <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n </div>\n </div>\n </div>\n\n <div class=\"flex gap-2 items-center w-44 text-xs text-tui-text-02\">\n<!--\nTODO: \u041D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u0430 \u0440\u0435\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u044F \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B\u0430. \n <button tuiIconButton (click)=\"clickSettingsEvent.emit()\" size=\"m\" icon=\"scIconSettings\" appearance=\"secondary\" tuiMode=\"onLight\"></button>\n-->\n <div>\n <ng-container *ngIf=\"unitsHelper.productIsMeasurable(product); else notMeasurable\">\n <p>\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} {{ product.unit }}</p>\n </ng-container>\n <ng-template #notMeasurable>\n <p *ngIf=\"cartItem.length && !unitsHelper.productIsMeasurable(product)\">\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} \u043C.</p>\n <p *ngIf=\"cartItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ cartItem.width }} \u043C.</p>\n <p *ngIf=\"cartItem.height\">\u0412\u044B\u0441\u043E\u0442\u0430: {{ cartItem.height }} \u043C.</p>\n </ng-template>\n </div>\n </div>\n <div class=\"flex items-center grow justify-end\">\n <sc-input-quantity\n class=\"w-28\"\n *ngIf=\"quantityControl\"\n [formControl]=\"quantityControl\"\n [quantityUnit]=\"product.quantityUnit\"\n [showCross]=\"false\"\n size=\"s\"\n [step]=\"unitsHelper.productMultiplicity(product)\"\n ></sc-input-quantity>\n </div>\n </ng-container>\n\n <ng-template #skeleton>\n <div class=\"flex gap-2 w-full\">\n <div class=\"h-20 w-20 bg-tui-base-02 rounded-xl \"></div>\n <div class=\"flex flex-col grow gap-2.5 bg-white\">\n <div class=\"w-full h-4 rounded-xl bg-tui-base-02\"></div>\n <div class=\"w-3/5 h-4 rounded-xl bg-tui-base-02\"></div>\n <div class=\"w-4/5 h-4 rounded-xl bg-tui-base-02\"></div>\n </div>\n </div>\n </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: ["step", "quantityUnit", "showLoader", "showCross", "appearance", "isDisabled", "size"], outputs: ["clickClearEvent"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint"] }, { kind: "component", type: i3$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "directive", type: i3$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { kind: "component", type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i3$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i3$1.TuiHintDriverDirective, selector: "[tuiHint]" }, { kind: "directive", type: i3$1.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i3$1.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i7.TuiPreviewComponent, selector: "tui-preview", inputs: ["zoomable", "rotatable"] }, { kind: "directive", type: i7.TuiPreviewActionDirective, selector: "[tuiPreviewAction]" }, { kind: "directive", type: i8.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
603
|
+
ScCartItemMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScCartItemMobileComponent, selector: "sc-cart-item-mobile", inputs: { cartItem: "cartItem" }, outputs: { quantityValueChanges: "quantityValueChanges", clickDeleteEvent: "clickDeleteEvent", clickSettingsEvent: "clickSettingsEvent", clickCardEvent: "clickCardEvent" }, viewQueries: [{ propertyName: "specificationPreviewRef", first: true, predicate: ["specificationPreview"], descendants: true }], ngImport: i0, template: "<div class=\"ml-2 mt-2 relative p-4 gap-y-2 gap-x-4 flex flex-wrap bg-white border border-tui-base-04 shadow-sc-2 rounded-xl\">\n <ng-container *ngIf=\"cartItem && product; else skeleton\">\n<!--\nTODO: \u041D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u0430 \u0440\u0435\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u044F \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B\u0430.\n <button tuiIconButton size=\"m\" icon=\"scIconVerticalThreeDots\" appearance=\"float\" tuiMode=\"onLight\" class=\"!absolute right-0 top-0\"></button>\n-->\n <button\n tuiIconButton\n size=\"m\"\n icon=\"scIconBasket\"\n appearance=\"secondary\"\n tuiMode=\"onLight\"\n (click)=\"clickDeleteEvent.emit()\"\n class=\"shadow-sc-2 !absolute -left-2 -top-2\"\n ></button>\n <div class=\"flex gap-2\">\n <div class=\"flex shrink-0 h-20 w-20 justify-center items-center overflow-hidden\">\n <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" [class.p-5]=\"!product.images?.length\" class=\"cursor-pointer\" />\n </div>\n\n <div class=\"flex flex-wrap self-center gap-x-8 gap-y-0.5\">\n <div class=\"w-[13rem]\">\n <a tuiLink (click)=\"clickCardEvent.emit()\">\n <span class=\"font-bold\">{{ product.name }}</span>\n </a>\n <div class=\"text-tui-text-02 text-xs\">\n <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n <p *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n <a tuiLink *ngIf=\"cartItem.specificationImgUrl\" (click)=\"showSpecification()\">\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a>\n <ng-template #specificationPreview let-preview>\n <tui-preview [rotatable]=\"false\" [zoomable]=\"false\">\n <img *polymorpheusOutlet=\"cartItem.specificationImgUrl as src\" alt=\"preview\" alt=\"\" [src]=\"cartItem.specificationImgUrl\" />\n <button icon=\"tuiIconClose\" title=\"Close\" tuiIconButton tuiPreviewAction type=\"button\" (click)=\"preview.complete()\"></button>\n </tui-preview>\n </ng-template>\n </div>\n </div>\n <div class=\"flex flex-col self-center w-[10rem] gap-x-8 gap-y-0.5\">\n <span *ngIf=\"product.discount\" class=\"flex items-center text-xs text-tui-text-02\">\n <span class=\"line-through\">{{ product.discountCostString }}</span> \n <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-xs !h-4\"></tui-svg>\n <ng-template #discountHint>\n <div class=\"font-bold\">{{ product.discount.name }}</div>\n <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n </ng-template>\n </span>\n <p class=\"flex flex-col items-baseline gap-x-2 font-bold\">\n <span>{{ product.costRubString }}</span>\n <span *ngIf=\"!product.priceInRub\" class=\"text-xs text-tui-text-02\">{{ product.costString }}</span>\n </p>\n <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n </div>\n </div>\n </div>\n\n <div class=\"flex gap-2 items-center w-44 text-xs text-tui-text-02\">\n<!--\nTODO: \u041D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u0430 \u0440\u0435\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u044F \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B\u0430. \n <button tuiIconButton (click)=\"clickSettingsEvent.emit()\" size=\"m\" icon=\"scIconSettings\" appearance=\"secondary\" tuiMode=\"onLight\"></button>\n-->\n <div>\n <ng-container *ngIf=\"unitsHelper.productIsMeasurable(product); else notMeasurable\">\n <p>\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} {{ product.unit }}</p>\n </ng-container>\n <ng-template #notMeasurable>\n <p *ngIf=\"cartItem.length && !unitsHelper.productIsMeasurable(product)\">\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} \u043C.</p>\n <p *ngIf=\"cartItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ cartItem.width }} \u043C.</p>\n <p *ngIf=\"cartItem.height\">\u0412\u044B\u0441\u043E\u0442\u0430: {{ cartItem.height }} \u043C.</p>\n </ng-template>\n </div>\n </div>\n <div class=\"flex items-center grow justify-end\">\n <sc-input-quantity\n class=\"w-28\"\n *ngIf=\"quantityControl\"\n [formControl]=\"quantityControl\"\n [quantityUnit]=\"product.quantityUnit\"\n [showCross]=\"false\"\n size=\"s\"\n [step]=\"unitsHelper.productMultiplicity(product)\"\n ></sc-input-quantity>\n </div>\n </ng-container>\n\n <ng-template #skeleton>\n <div class=\"flex gap-2 w-full\">\n <div class=\"h-20 w-20 bg-tui-base-02 rounded-xl \"></div>\n <div class=\"flex flex-col grow gap-2.5 bg-white\">\n <div class=\"w-full h-4 rounded-xl bg-tui-base-02\"></div>\n <div class=\"w-3/5 h-4 rounded-xl bg-tui-base-02\"></div>\n <div class=\"w-4/5 h-4 rounded-xl bg-tui-base-02\"></div>\n </div>\n </div>\n </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: ["step", "quantityUnit", "showLoader", "showCross", "appearance", "isDisabled", "size"], outputs: ["clickClearEvent"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint"] }, { kind: "component", type: i3$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "directive", type: i3$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { kind: "component", type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i3$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i3$1.TuiHintDriverDirective, selector: "[tuiHint]" }, { kind: "directive", type: i3$1.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i3$1.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i7$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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
570
604
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCartItemMobileComponent, decorators: [{
|
|
571
605
|
type: Component,
|
|
572
606
|
args: [{ selector: 'sc-cart-item-mobile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ml-2 mt-2 relative p-4 gap-y-2 gap-x-4 flex flex-wrap bg-white border border-tui-base-04 shadow-sc-2 rounded-xl\">\n <ng-container *ngIf=\"cartItem && product; else skeleton\">\n<!--\nTODO: \u041D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u0430 \u0440\u0435\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u044F \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B\u0430.\n <button tuiIconButton size=\"m\" icon=\"scIconVerticalThreeDots\" appearance=\"float\" tuiMode=\"onLight\" class=\"!absolute right-0 top-0\"></button>\n-->\n <button\n tuiIconButton\n size=\"m\"\n icon=\"scIconBasket\"\n appearance=\"secondary\"\n tuiMode=\"onLight\"\n (click)=\"clickDeleteEvent.emit()\"\n class=\"shadow-sc-2 !absolute -left-2 -top-2\"\n ></button>\n <div class=\"flex gap-2\">\n <div class=\"flex shrink-0 h-20 w-20 justify-center items-center overflow-hidden\">\n <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" [class.p-5]=\"!product.images?.length\" class=\"cursor-pointer\" />\n </div>\n\n <div class=\"flex flex-wrap self-center gap-x-8 gap-y-0.5\">\n <div class=\"w-[13rem]\">\n <a tuiLink (click)=\"clickCardEvent.emit()\">\n <span class=\"font-bold\">{{ product.name }}</span>\n </a>\n <div class=\"text-tui-text-02 text-xs\">\n <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n <p *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n <a tuiLink *ngIf=\"cartItem.specificationImgUrl\" (click)=\"showSpecification()\">\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a>\n <ng-template #specificationPreview let-preview>\n <tui-preview [rotatable]=\"false\" [zoomable]=\"false\">\n <img *polymorpheusOutlet=\"cartItem.specificationImgUrl as src\" alt=\"preview\" alt=\"\" [src]=\"cartItem.specificationImgUrl\" />\n <button icon=\"tuiIconClose\" title=\"Close\" tuiIconButton tuiPreviewAction type=\"button\" (click)=\"preview.complete()\"></button>\n </tui-preview>\n </ng-template>\n </div>\n </div>\n <div class=\"flex flex-col self-center w-[10rem] gap-x-8 gap-y-0.5\">\n <span *ngIf=\"product.discount\" class=\"flex items-center text-xs text-tui-text-02\">\n <span class=\"line-through\">{{ product.discountCostString }}</span> \n <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-xs !h-4\"></tui-svg>\n <ng-template #discountHint>\n <div class=\"font-bold\">{{ product.discount.name }}</div>\n <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n </ng-template>\n </span>\n <p class=\"flex flex-col items-baseline gap-x-2 font-bold\">\n <span>{{ product.costRubString }}</span>\n <span *ngIf=\"!product.priceInRub\" class=\"text-xs text-tui-text-02\">{{ product.costString }}</span>\n </p>\n <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n </div>\n </div>\n </div>\n\n <div class=\"flex gap-2 items-center w-44 text-xs text-tui-text-02\">\n<!--\nTODO: \u041D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u0430 \u0440\u0435\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u044F \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B\u0430. \n <button tuiIconButton (click)=\"clickSettingsEvent.emit()\" size=\"m\" icon=\"scIconSettings\" appearance=\"secondary\" tuiMode=\"onLight\"></button>\n-->\n <div>\n <ng-container *ngIf=\"unitsHelper.productIsMeasurable(product); else notMeasurable\">\n <p>\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} {{ product.unit }}</p>\n </ng-container>\n <ng-template #notMeasurable>\n <p *ngIf=\"cartItem.length && !unitsHelper.productIsMeasurable(product)\">\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} \u043C.</p>\n <p *ngIf=\"cartItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ cartItem.width }} \u043C.</p>\n <p *ngIf=\"cartItem.height\">\u0412\u044B\u0441\u043E\u0442\u0430: {{ cartItem.height }} \u043C.</p>\n </ng-template>\n </div>\n </div>\n <div class=\"flex items-center grow justify-end\">\n <sc-input-quantity\n class=\"w-28\"\n *ngIf=\"quantityControl\"\n [formControl]=\"quantityControl\"\n [quantityUnit]=\"product.quantityUnit\"\n [showCross]=\"false\"\n size=\"s\"\n [step]=\"unitsHelper.productMultiplicity(product)\"\n ></sc-input-quantity>\n </div>\n </ng-container>\n\n <ng-template #skeleton>\n <div class=\"flex gap-2 w-full\">\n <div class=\"h-20 w-20 bg-tui-base-02 rounded-xl \"></div>\n <div class=\"flex flex-col grow gap-2.5 bg-white\">\n <div class=\"w-full h-4 rounded-xl bg-tui-base-02\"></div>\n <div class=\"w-3/5 h-4 rounded-xl bg-tui-base-02\"></div>\n <div class=\"w-4/5 h-4 rounded-xl bg-tui-base-02\"></div>\n </div>\n </div>\n </ng-template>\n</div>\n" }]
|
|
573
|
-
}], ctorParameters: function () { return [{ type: UnitsHelper }, { type: i7.TuiPreviewDialogService, decorators: [{
|
|
607
|
+
}], ctorParameters: function () { return [{ type: UnitsHelper }, { type: i7$1.TuiPreviewDialogService, decorators: [{
|
|
574
608
|
type: Inject,
|
|
575
609
|
args: [TuiPreviewDialogService]
|
|
576
610
|
}] }, { type: undefined, decorators: [{
|
|
@@ -1399,7 +1433,7 @@ class TreeDirective {
|
|
|
1399
1433
|
this.service.loadChildren(node);
|
|
1400
1434
|
}
|
|
1401
1435
|
}
|
|
1402
|
-
TreeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeDirective, deps: [{ token:
|
|
1436
|
+
TreeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeDirective, deps: [{ token: i3$2.TuiTreeService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1403
1437
|
TreeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: TreeDirective, selector: "[scTree]", providers: [TuiTreeService], exportAs: ["scTree"], ngImport: i0 });
|
|
1404
1438
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeDirective, decorators: [{
|
|
1405
1439
|
type: Directive,
|
|
@@ -1408,7 +1442,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1408
1442
|
exportAs: 'scTree',
|
|
1409
1443
|
providers: [TuiTreeService],
|
|
1410
1444
|
}]
|
|
1411
|
-
}], ctorParameters: function () { return [{ type:
|
|
1445
|
+
}], ctorParameters: function () { return [{ type: i3$2.TuiTreeService }]; } });
|
|
1412
1446
|
|
|
1413
1447
|
/**
|
|
1414
1448
|
* Компонент для удаления стандартного значка элемента дерева.
|
|
@@ -1516,7 +1550,7 @@ FilesAndDocumentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
|
|
|
1516
1550
|
provide: TUI_TREE_LOADER,
|
|
1517
1551
|
useClass: TreeLoaderService,
|
|
1518
1552
|
},
|
|
1519
|
-
], ngImport: i0, template: "<ng-container *ngIf=\"data$ | async as data; else skeleton\">\n <tui-tree\n *ngFor=\"let node of data\"\n #tree=\"scTree\"\n scTree\n [scTopNodeText]=\"node.text\"\n [scTopNodeIcon]=\"node.icon\"\n [scTopNodeLink]=\"node.link\"\n [scTopNodeChilds]=\"node.hasChildren\"\n [scTopNodeParent]=\"node.id\"\n [scTopNodeDate]=\"node.createdAt\"\n [childrenHandler]=\"tree.childrenHandler\"\n [content]=\"content\"\n [map]=\"tree.map\"\n [tuiTreeController]=\"false\"\n [value]=\"tree.service.data$ | async\"\n (toggled)=\"tree.onToggled($event)\"\n class=\"overflow-hidden\"\n ></tui-tree>\n</ng-container>\n\n<ng-template #content let-item>\n <tui-loader *ngIf=\"item === loading; else text\" class=\"w-8 my-4\"></tui-loader>\n <ng-template #text>\n <tui-svg [src]=\"item.icon\" class=\"tui-space_right-2\"></tui-svg>\n <a tuiLink [pseudo]=\"true\" *ngIf=\"item.link\" href=\"{{ item.link }}\" class=\"grow\">{{ item.text }}</a>\n <p *ngIf=\"!item.link\" class=\"grow\">{{ item.text }}</p>\n <p>{{ item.createdAt }}</p>\n </ng-template>\n</ng-template>\n\n<ng-template #skeleton>\n <div class=\"flex flex-col gap-2\">\n <div *ngFor=\"let _ of [].constructor(7)\" class=\"flex items-center gap-2\">\n <div class=\"tui-skeleton h-6 w-6\"></div>\n <div class=\"tui-skeleton h-4 w-40\"></div>\n </div>\n </div>\n</ng-template>\n", dependencies: [{ 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:
|
|
1553
|
+
], ngImport: i0, template: "<ng-container *ngIf=\"data$ | async as data; else skeleton\">\n <tui-tree\n *ngFor=\"let node of data\"\n #tree=\"scTree\"\n scTree\n [scTopNodeText]=\"node.text\"\n [scTopNodeIcon]=\"node.icon\"\n [scTopNodeLink]=\"node.link\"\n [scTopNodeChilds]=\"node.hasChildren\"\n [scTopNodeParent]=\"node.id\"\n [scTopNodeDate]=\"node.createdAt\"\n [childrenHandler]=\"tree.childrenHandler\"\n [content]=\"content\"\n [map]=\"tree.map\"\n [tuiTreeController]=\"false\"\n [value]=\"tree.service.data$ | async\"\n (toggled)=\"tree.onToggled($event)\"\n class=\"overflow-hidden\"\n ></tui-tree>\n</ng-container>\n\n<ng-template #content let-item>\n <tui-loader *ngIf=\"item === loading; else text\" class=\"w-8 my-4\"></tui-loader>\n <ng-template #text>\n <tui-svg [src]=\"item.icon\" class=\"tui-space_right-2\"></tui-svg>\n <a tuiLink [pseudo]=\"true\" *ngIf=\"item.link\" href=\"{{ item.link }}\" class=\"grow\">{{ item.text }}</a>\n <p *ngIf=\"!item.link\" class=\"grow\">{{ item.text }}</p>\n <p>{{ item.createdAt }}</p>\n </ng-template>\n</ng-template>\n\n<ng-template #skeleton>\n <div class=\"flex flex-col gap-2\">\n <div *ngFor=\"let _ of [].constructor(7)\" class=\"flex items-center gap-2\">\n <div class=\"tui-skeleton h-6 w-6\"></div>\n <div class=\"tui-skeleton h-4 w-40\"></div>\n </div>\n </div>\n</ng-template>\n", dependencies: [{ 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$2.TuiTreeComponent, selector: "tui-tree[value]", inputs: ["value", "trackBy", "content"] }, { kind: "directive", type: i3$2.TuiTreeChildrenDirective, selector: "tui-tree[childrenHandler]", inputs: ["childrenHandler"] }, { kind: "directive", type: i3$2.TuiTreeControllerDirective, selector: "[tuiTreeController][map]", inputs: ["tuiTreeController", "map"], outputs: ["toggled"], exportAs: ["tuiTreeController"] }, { kind: "component", type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "component", type: i3$1.TuiLoaderComponent, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { kind: "component", type: i3$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "directive", type: TreeDirective, selector: "[scTree]", exportAs: ["scTree"] }, { kind: "directive", type: TreeTopDirective, selector: "[scTopNodeText]", inputs: ["scTopNodeText", "scTopNodeIcon", "scTopNodeLink", "scTopNodeChilds", "scTopNodeParent", "scTopNodeDate"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1520
1554
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FilesAndDocumentsComponent, decorators: [{
|
|
1521
1555
|
type: Component,
|
|
1522
1556
|
args: [{ selector: 'sc-files-and-documents', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
@@ -1818,7 +1852,7 @@ ScOrderItemMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
|
|
|
1818
1852
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScOrderItemMobileComponent, decorators: [{
|
|
1819
1853
|
type: Component,
|
|
1820
1854
|
args: [{ selector: 'sc-order-item-mobile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"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=\"orderItem && product; else skeleton\">\n <button\n tuiIconButton\n (click)=\"clickActionsEvent.emit()\"\n size=\"m\"\n icon=\"scIconVerticalThreeDots\"\n appearance=\"float\"\n tuiMode=\"onLight\"\n class=\"!hidden !absolute right-0 top-0\"\n ></button>\n <div class=\"flex gap-2 grow\">\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 grow\">\n <div class=\"basis-min-content flex flex-col grow\">\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 flex flex-col gap-y-0.5\">\n <div class=\"flex flex-wrap gap-y-0.5\">\n <p class=\"w-40\">\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n <p class=\"w-40\" *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n </div>\n <a tuiLink *ngIf=\"orderItem.specificationImgUrl\" (click)=\"showSpecification()\">\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a>\n </div>\n </div>\n <div class=\"flex flex-wrap content-center\">\n <div class=\"flex flex-col w-40 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 <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\n <div class=\"w-40 text-xs text-tui-text-02\">\n <ng-container *ngIf=\"unitsHelper.productIsMeasurable(product); else notMeasurable\">\n <p>\u0414\u043B\u0438\u043D\u0430: {{ orderItem.length }} {{ product.unit }}</p>\n </ng-container>\n <ng-template #notMeasurable>\n <p *ngIf=\"orderItem.length && !unitsHelper.productIsMeasurable(product)\">\u0414\u043B\u0438\u043D\u0430: {{ orderItem.length }} \u043C.</p>\n <p *ngIf=\"orderItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ orderItem.width }} \u043C.</p>\n <p *ngIf=\"orderItem.height\">\u0412\u044B\u0441\u043E\u0442\u0430: {{ orderItem.height }} \u043C.</p>\n </ng-template>\n <p class=\"text-tui-base-09 text-sm\">\n \u0421\u0443\u043C\u043C\u0430: <span class=\"font-bold whitespace-nowrap\"> {{ orderItem.getCostRubStr() }} </span>\n </p>\n </div>\n </div>\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</div>\n" }]
|
|
1821
|
-
}], ctorParameters: function () { return [{ type: UnitsHelper }, { type: i7.TuiPreviewDialogService, decorators: [{
|
|
1855
|
+
}], ctorParameters: function () { return [{ type: UnitsHelper }, { type: i7$1.TuiPreviewDialogService, decorators: [{
|
|
1822
1856
|
type: Inject,
|
|
1823
1857
|
args: [TuiPreviewDialogService]
|
|
1824
1858
|
}] }, { type: undefined, decorators: [{
|