@snabcentr/client-ui 3.6.0 → 3.6.1
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/banner/sc-banner.component.d.ts +5 -51
- package/esm2022/banner/sc-banner.component.mjs +11 -104
- package/fesm2022/snabcentr-client-ui.mjs +10 -101
- package/fesm2022/snabcentr-client-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/release_notes.tmp +2 -7
- package/styles/tailwind/tailwind.scss +4 -13
@@ -3,11 +3,11 @@ import { EventEmitter, Component, ChangeDetectionStrategy, Inject, Input, Output
|
|
3
3
|
import * as i1 from '@snabcentr/client-core';
|
4
4
|
import { ScUserMetrikaGoalsEnum, ScISuggestionType, SC_MIN_LENGTH_SEARCH_TERM, ScOpfList, ScAuthService, SEARCH_TERM, ScUnitsHelper, ScImageHelper, SC_PATH_IMAGE_NOT_FOUND, ScPhoneService, IS_RUNNING_ON_TERMINAL, SC_URLS, ScWarehouseService, SEARCH_TERM_PROVIDERS, ScPaginationService, SC_NEXT_PAGE_PAGINATION_CLICK, SC_PRODUCT_PAGINATION_OPTIONS, ScIconTypesEnum, ScDocumentInfoTypesEnum, ScSamplesService, ScUserService } from '@snabcentr/client-core';
|
5
5
|
import * as i6$1 from 'rxjs';
|
6
|
-
import { Subject, map, filter, switchMap, tap, catchError, of, finalize, startWith, share, timer, scan, takeWhile, endWith, distinctUntilChanged, combineLatest, debounceTime, throwError, shareReplay,
|
6
|
+
import { Subject, map, filter, switchMap, tap, catchError, of, finalize, startWith, share, timer, scan, takeWhile, endWith, distinctUntilChanged, combineLatest, debounceTime, throwError, shareReplay, skip, interval } from 'rxjs';
|
7
7
|
import * as i2 from '@angular/common';
|
8
8
|
import { CommonModule } from '@angular/common';
|
9
9
|
import * as i1$1 from '@taiga-ui/core';
|
10
|
-
import { TUI_DATA_LIST_HOST, tuiDropdownOptionsProvider, TuiButton, TuiDialog, TuiDialogService, TuiLabel, TuiError, TuiLoader, TuiDataList, TuiNotification, TuiLink,
|
10
|
+
import { TUI_DATA_LIST_HOST, tuiDropdownOptionsProvider, TuiButton, TuiDialog, TuiDialogService, TuiLabel, TuiError, TuiLoader, TuiDataList, TuiNotification, TuiLink, TuiHint, TUI_MONTHS, TuiIcon, TuiFormatNumberPipe, tuiFadeIn } from '@taiga-ui/core';
|
11
11
|
import { HttpErrorResponse } from '@angular/common/http';
|
12
12
|
import * as i3 from '@angular/forms';
|
13
13
|
import { FormGroupDirective, FormGroup, FormControl, Validators, NgControl, FormArray, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
@@ -2892,17 +2892,13 @@ class ScBannerComponent {
|
|
2892
2892
|
*/
|
2893
2893
|
this.navigateButton = true;
|
2894
2894
|
/**
|
2895
|
-
* Интервал
|
2895
|
+
* Интервал автоматической смены слайдов в миллисекундах (используйте 0, чтобы отключить автоматическую смену слайда).
|
2896
2896
|
*/
|
2897
|
-
this.
|
2898
|
-
/**
|
2899
|
-
* Признак, что прокрутка выключена.
|
2900
|
-
*/
|
2901
|
-
this.disabled = false;
|
2897
|
+
this.duration = 5000;
|
2902
2898
|
/**
|
2903
2899
|
* Признак, что компонент должен растягиваться.
|
2904
2900
|
*/
|
2905
|
-
this.resizable =
|
2901
|
+
this.resizable = false;
|
2906
2902
|
/**
|
2907
2903
|
* Событие загрузки баннеров с количеством полученных баннеров.
|
2908
2904
|
*/
|
@@ -2911,10 +2907,6 @@ class ScBannerComponent {
|
|
2911
2907
|
* Событие нажатия на изображение баннера.
|
2912
2908
|
*/
|
2913
2909
|
this.clickBannerEvent = new EventEmitter();
|
2914
|
-
/**
|
2915
|
-
* Ссылка для автоматического управления уничтожением зависимостей.
|
2916
|
-
*/
|
2917
|
-
this.destroyRef = inject(DestroyRef);
|
2918
2910
|
/**
|
2919
2911
|
* Идентификатор текущего баннера.
|
2920
2912
|
*/
|
@@ -2923,23 +2915,14 @@ class ScBannerComponent {
|
|
2923
2915
|
* {@link Subject} изменения состояния таймера.
|
2924
2916
|
*/
|
2925
2917
|
this.toggleTimer$ = new Subject();
|
2926
|
-
/**
|
2927
|
-
* Признак, что необходимо показывать кнопки старта видео баннера.
|
2928
|
-
*/
|
2929
|
-
this.showPlayBtn = false;
|
2930
2918
|
/**
|
2931
2919
|
* {@link Observable} обновления списка баннеров.
|
2932
2920
|
*/
|
2933
2921
|
this.banners$ = this.bannerService.banners$.pipe(map((banners) => banners.filter((banner) => banner.location === this.bannerLocation).reverse()), tap((banners) => {
|
2934
2922
|
if (banners.length > 0) {
|
2935
|
-
if (this.resizable) {
|
2936
|
-
this.
|
2937
|
-
}
|
2938
|
-
else {
|
2939
|
-
this.height = `${this.pxConverter.pxToRem(banners[0].height)}rem`;
|
2940
|
-
this.width = `${this.pxConverter.pxToRem(banners[0].width)}rem`;
|
2923
|
+
if (!this.resizable) {
|
2924
|
+
this.aspectRatio = `${banners[0].width} / ${banners[0].height}`;
|
2941
2925
|
}
|
2942
|
-
this.aspectRatio = `${banners[0].width} / ${banners[0].height}`;
|
2943
2926
|
this.banners = banners;
|
2944
2927
|
this.toggleTimer$.next(true);
|
2945
2928
|
}
|
@@ -2951,30 +2934,10 @@ class ScBannerComponent {
|
|
2951
2934
|
* Список баннеров.
|
2952
2935
|
*/
|
2953
2936
|
this.banners = [];
|
2954
|
-
/**
|
2955
|
-
* Свойство, от которого зависит высота `:host` компонента.
|
2956
|
-
*/
|
2957
|
-
this.height = 'auto';
|
2958
|
-
/**
|
2959
|
-
* Свойство, от которого зависит ширина `:host` компонента.
|
2960
|
-
*/
|
2961
|
-
this.width = '';
|
2962
2937
|
/**
|
2963
2938
|
* Свойство, от которого зависит соотношение `:host` компонента.
|
2964
2939
|
*/
|
2965
2940
|
this.aspectRatio = '';
|
2966
|
-
/**
|
2967
|
-
* Обработчик события mouseenter.
|
2968
|
-
*/
|
2969
|
-
this.mouseEnterHandler = () => {
|
2970
|
-
this.toggleTimer$.next(false);
|
2971
|
-
};
|
2972
|
-
/**
|
2973
|
-
* Обработчик события mouseleave.
|
2974
|
-
*/
|
2975
|
-
this.mouseLeaveHandler = () => {
|
2976
|
-
this.toggleTimer$.next(true);
|
2977
|
-
};
|
2978
2941
|
}
|
2979
2942
|
/**
|
2980
2943
|
* Свойство, от которого зависит наличие класса `!hidden` у `:host` компонента.
|
@@ -2982,43 +2945,6 @@ class ScBannerComponent {
|
|
2982
2945
|
get isHidden() {
|
2983
2946
|
return !this.banners || this.bannersListRef.length + this.banners.length === 0;
|
2984
2947
|
}
|
2985
|
-
/** @inheritDoc */
|
2986
|
-
ngAfterViewInit() {
|
2987
|
-
this.toggleTimer$
|
2988
|
-
.pipe(filter((toggle) => toggle), switchMap(() => interval(this.playerInterval).pipe(takeUntil(this.toggleTimer$))), filter(() => !this.disabled && (this.banners?.[this.currentBannerId]?.mediaType === 'image' || this.showPlayBtn)), takeUntilDestroyed(this.destroyRef))
|
2989
|
-
.subscribe(() => {
|
2990
|
-
this.onNextBanner();
|
2991
|
-
});
|
2992
|
-
// Отслеживание пересечения компонента с экраном пользователя.
|
2993
|
-
// Если баннера не находится в поле видимости пользователя, то он перестаёт переключаться, а видео останавливается.
|
2994
|
-
this.entries$.pipe(map((entries) => entries.find((item) => item.target === this.element.nativeElement))).subscribe((entry) => {
|
2995
|
-
this.toggleTimer$.next(!!entry?.isIntersecting);
|
2996
|
-
});
|
2997
|
-
}
|
2998
|
-
/**
|
2999
|
-
* Переключает на предыдущий баннер.
|
3000
|
-
*/
|
3001
|
-
onPreviousBanner() {
|
3002
|
-
const previous = this.currentBannerId - 1;
|
3003
|
-
this.currentBannerId = previous < 0 ? this.bannersListRef.length + (this.banners?.length ?? 0) - 1 : previous;
|
3004
|
-
this.cdr.markForCheck();
|
3005
|
-
}
|
3006
|
-
/**
|
3007
|
-
* Переключает на следующий баннер.
|
3008
|
-
*/
|
3009
|
-
onNextBanner() {
|
3010
|
-
const next = this.currentBannerId + 1;
|
3011
|
-
this.currentBannerId = next === this.bannersListRef.length + (this.banners?.length ?? 0) ? 0 : next;
|
3012
|
-
this.cdr.markForCheck();
|
3013
|
-
}
|
3014
|
-
/**
|
3015
|
-
* Переключает на следующий баннер.
|
3016
|
-
*/
|
3017
|
-
onEndedVideo() {
|
3018
|
-
this.onNextBanner();
|
3019
|
-
this.toggleTimer$.next(true);
|
3020
|
-
this.showPlayBtn = true;
|
3021
|
-
}
|
3022
2948
|
/**
|
3023
2949
|
* Обработчик нажатия на баннер, генерирующий событие {@link clickBannerImgEvent}.
|
3024
2950
|
*
|
@@ -3036,11 +2962,11 @@ class ScBannerComponent {
|
|
3036
2962
|
}
|
3037
2963
|
}
|
3038
2964
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ScBannerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ScBannerService }, { token: IntersectionObserverService }, { token: ElementRef }, { token: ScPxConverter }, { token: i1.ScUserMetrikaService }], target: i0.ɵɵFactoryTarget.Component }); }
|
3039
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: ScBannerComponent, selector: "sc-banner", inputs: { navigateButton: "navigateButton",
|
2965
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: ScBannerComponent, selector: "sc-banner", inputs: { navigateButton: "navigateButton", duration: "duration", bannerLocation: "bannerLocation", resizable: "resizable" }, outputs: { loadBannersEvent: "loadBannersEvent", clickBannerEvent: "clickBannerEvent" }, host: { properties: { "style.aspect-ratio": "this.aspectRatio", "class.!hidden": "this.isHidden" } }, providers: [IntersectionObserverService], queries: [{ propertyName: "bannersListRef", predicate: ["banner"] }], ngImport: i0, template: "<ng-container *tuiLet=\"banners$ | async\">\n <tui-carousel\n [duration]=\"duration\"\n #carousel\n [attr.resizable]=\"resizable\"\n class=\"size-full overflow-hidden rounded-xl bg-white\"\n [(index)]=\"currentBannerId\"\n >\n <ng-container *ngFor=\"let banner of banners; let index = index\">\n <ng-container [ngSwitch]=\"banner.mediaType\">\n <ng-container *ngSwitchCase=\"'image'\">\n <a\n *tuiItem\n (click)=\"onClick(banner)\"\n target=\"_blank\"\n [title]=\"banner.title\"\n [style.aspect-ratio]=\"aspectRatio\"\n [attr.href]=\"banner.url ? banner.url : null\"\n [style.background-image]=\"'url(' + banner.mediaFile + ')'\"\n class=\"size-full bg-[length:100%_100%]\"\n >\n </a>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngFor=\"let item of bannersListRef\">\n <div\n *tuiItem\n [style.aspect-ratio]=\"aspectRatio\"\n class=\"size-full overflow-hidden\"\n >\n <ng-container [ngTemplateOutlet]=\"item\"></ng-container>\n </div>\n </ng-container>\n </tui-carousel>\n\n <div\n *ngIf=\"navigateButton && duration && this.banners && this.bannersListRef.length + this.banners.length > 1\"\n tuiTheme=\"light\"\n class=\"flex items-center\"\n >\n <button\n tuiIconButton\n iconStart=\"@tui.chevron-left\"\n size=\"m\"\n [style.border-radius.%]=\"100\"\n appearance=\"flat\"\n (click)=\"carousel.prev()\"\n class=\"!absolute left-2\"\n ></button>\n <button\n tuiIconButton\n iconStart=\"@tui.chevron-right\"\n size=\"m\"\n [style.border-radius.%]=\"100\"\n appearance=\"flat\"\n (click)=\"carousel.next()\"\n class=\"!absolute right-2\"\n ></button>\n </div>\n</ng-container>\n", styles: [":host{--tui-carousel-padding: 0;display:flex;position:relative}::ng-deep tui-carousel[resizable=true] .t-scroller,::ng-deep tui-carousel[resizable=true] .t-items{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: i1$2.TuiItem, selector: "[tuiItem]" }, { kind: "component", type: i2$1.TuiCarouselComponent, selector: "tui-carousel", inputs: ["draggable", "itemsCount", "index"], outputs: ["indexChange"] }, { kind: "directive", type: i6.TuiLet, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
3040
2966
|
}
|
3041
2967
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ScBannerComponent, decorators: [{
|
3042
2968
|
type: Component,
|
3043
|
-
args: [{ selector: 'sc-banner', changeDetection: ChangeDetectionStrategy.OnPush, providers: [IntersectionObserverService],
|
2969
|
+
args: [{ selector: 'sc-banner', changeDetection: ChangeDetectionStrategy.OnPush, providers: [IntersectionObserverService], template: "<ng-container *tuiLet=\"banners$ | async\">\n <tui-carousel\n [duration]=\"duration\"\n #carousel\n [attr.resizable]=\"resizable\"\n class=\"size-full overflow-hidden rounded-xl bg-white\"\n [(index)]=\"currentBannerId\"\n >\n <ng-container *ngFor=\"let banner of banners; let index = index\">\n <ng-container [ngSwitch]=\"banner.mediaType\">\n <ng-container *ngSwitchCase=\"'image'\">\n <a\n *tuiItem\n (click)=\"onClick(banner)\"\n target=\"_blank\"\n [title]=\"banner.title\"\n [style.aspect-ratio]=\"aspectRatio\"\n [attr.href]=\"banner.url ? banner.url : null\"\n [style.background-image]=\"'url(' + banner.mediaFile + ')'\"\n class=\"size-full bg-[length:100%_100%]\"\n >\n </a>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngFor=\"let item of bannersListRef\">\n <div\n *tuiItem\n [style.aspect-ratio]=\"aspectRatio\"\n class=\"size-full overflow-hidden\"\n >\n <ng-container [ngTemplateOutlet]=\"item\"></ng-container>\n </div>\n </ng-container>\n </tui-carousel>\n\n <div\n *ngIf=\"navigateButton && duration && this.banners && this.bannersListRef.length + this.banners.length > 1\"\n tuiTheme=\"light\"\n class=\"flex items-center\"\n >\n <button\n tuiIconButton\n iconStart=\"@tui.chevron-left\"\n size=\"m\"\n [style.border-radius.%]=\"100\"\n appearance=\"flat\"\n (click)=\"carousel.prev()\"\n class=\"!absolute left-2\"\n ></button>\n <button\n tuiIconButton\n iconStart=\"@tui.chevron-right\"\n size=\"m\"\n [style.border-radius.%]=\"100\"\n appearance=\"flat\"\n (click)=\"carousel.next()\"\n class=\"!absolute right-2\"\n ></button>\n </div>\n</ng-container>\n", styles: [":host{--tui-carousel-padding: 0;display:flex;position:relative}::ng-deep tui-carousel[resizable=true] .t-scroller,::ng-deep tui-carousel[resizable=true] .t-items{width:100%;height:100%}\n"] }]
|
3044
2970
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.ScBannerService }, { type: i3$2.IntersectionObserverService, decorators: [{
|
3045
2971
|
type: Inject,
|
3046
2972
|
args: [IntersectionObserverService]
|
@@ -3049,9 +2975,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
|
|
3049
2975
|
args: [ElementRef]
|
3050
2976
|
}] }, { type: ScPxConverter }, { type: i1.ScUserMetrikaService }], propDecorators: { navigateButton: [{
|
3051
2977
|
type: Input
|
3052
|
-
}],
|
3053
|
-
type: Input
|
3054
|
-
}], disabled: [{
|
2978
|
+
}], duration: [{
|
3055
2979
|
type: Input
|
3056
2980
|
}], bannerLocation: [{
|
3057
2981
|
type: Input
|
@@ -3064,24 +2988,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
|
|
3064
2988
|
}], bannersListRef: [{
|
3065
2989
|
type: ContentChildren,
|
3066
2990
|
args: ['banner']
|
3067
|
-
}], videoRef: [{
|
3068
|
-
type: ViewChild,
|
3069
|
-
args: ['videoPlayer']
|
3070
|
-
}], height: [{
|
3071
|
-
type: HostBinding,
|
3072
|
-
args: ['style.height']
|
3073
|
-
}], width: [{
|
3074
|
-
type: HostBinding,
|
3075
|
-
args: ['style.width']
|
3076
2991
|
}], aspectRatio: [{
|
3077
2992
|
type: HostBinding,
|
3078
2993
|
args: ['style.aspect-ratio']
|
3079
|
-
}], mouseEnterHandler: [{
|
3080
|
-
type: HostListener,
|
3081
|
-
args: ['mouseenter']
|
3082
|
-
}], mouseLeaveHandler: [{
|
3083
|
-
type: HostListener,
|
3084
|
-
args: ['mouseleave']
|
3085
2994
|
}], isHidden: [{
|
3086
2995
|
type: HostBinding,
|
3087
2996
|
args: ['class.!hidden']
|