@snabcentr/client-ui 3.6.0 → 3.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.


This version of @snabcentr/client-ui might be problematic. Click here for more details.

@@ -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, interval, takeUntil, skip } from 'rxjs';
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, tuiFadeIn, TuiHint, TUI_MONTHS, TuiIcon, TuiFormatNumberPipe } from '@taiga-ui/core';
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.playerInterval = 5000;
2898
- /**
2899
- * Признак, что прокрутка выключена.
2900
- */
2901
- this.disabled = false;
2897
+ this.duration = 5000;
2902
2898
  /**
2903
2899
  * Признак, что компонент должен растягиваться.
2904
2900
  */
2905
- this.resizable = true;
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.width = '100%';
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", playerInterval: "playerInterval", disabled: "disabled", bannerLocation: "bannerLocation", resizable: "resizable" }, outputs: { loadBannersEvent: "loadBannersEvent", clickBannerEvent: "clickBannerEvent" }, host: { listeners: { "mouseenter": "mouseEnterHandler()", "mouseleave": "mouseLeaveHandler()" }, properties: { "style.height": "this.height", "style.width": "this.width", "style.aspect-ratio": "this.aspectRatio", "class.!hidden": "this.isHidden" } }, 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\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 <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=\"h-full object-cover\"\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 bottom-4 left-8\"\n >\n <i class=\"icon-refresh text-black\"></i>\n </button>\n </ng-container>\n\n <img\n *ngSwitchCase=\"'image'\"\n [src]=\"banner.mediaFile\"\n alt=\"\u0411\u0430\u043D\u043D\u0435\u0440\"\n class=\"h-full object-cover\"\n />\n </ng-container>\n </a>\n </ng-container>\n <ng-container *ngFor=\"let item of bannersListRef\">\n <div\n *tuiItem\n [style.height]=\"height\"\n [style.width]=\"width\"\n [style.aspect-ratio]=\"aspectRatio\"\n class=\"overflow-hidden\"\n >\n <ng-container [ngTemplateOutlet]=\"item\"></ng-container>\n </div>\n </ng-container>\n </tui-carousel>\n</ng-container>\n<div\n *ngIf=\"navigateButton && !disabled && 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)=\"onPreviousBanner()\"\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)=\"onNextBanner()\"\n class=\"!absolute right-2\"\n ></button>\n</div>\n", styles: [":host{--tui-carousel-padding: 0;display:flex;position:relative}\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" }], animations: [tuiFadeIn], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
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], animations: [tuiFadeIn], template: "<ng-container *tuiLet=\"banners$ | async\">\n <tui-carousel\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 <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=\"h-full object-cover\"\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 bottom-4 left-8\"\n >\n <i class=\"icon-refresh text-black\"></i>\n </button>\n </ng-container>\n\n <img\n *ngSwitchCase=\"'image'\"\n [src]=\"banner.mediaFile\"\n alt=\"\u0411\u0430\u043D\u043D\u0435\u0440\"\n class=\"h-full object-cover\"\n />\n </ng-container>\n </a>\n </ng-container>\n <ng-container *ngFor=\"let item of bannersListRef\">\n <div\n *tuiItem\n [style.height]=\"height\"\n [style.width]=\"width\"\n [style.aspect-ratio]=\"aspectRatio\"\n class=\"overflow-hidden\"\n >\n <ng-container [ngTemplateOutlet]=\"item\"></ng-container>\n </div>\n </ng-container>\n </tui-carousel>\n</ng-container>\n<div\n *ngIf=\"navigateButton && !disabled && 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)=\"onPreviousBanner()\"\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)=\"onNextBanner()\"\n class=\"!absolute right-2\"\n ></button>\n</div>\n", styles: [":host{--tui-carousel-padding: 0;display:flex;position:relative}\n"] }]
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
- }], playerInterval: [{
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']
@@ -3407,7 +3316,7 @@ class HoverImageCarouselComponent {
3407
3316
  this.currentIndex = signal(0);
3408
3317
  }
3409
3318
  /**
3410
- * Обработчик события mousemove.
3319
+ * Обработчик события `mousemove.silent`.
3411
3320
  *
3412
3321
  * @param offsetX Отступ курсора мыши по оси X от края {@link HTMLElement}.
3413
3322
  * @param target Объект {@link HTMLElement} в котором лежат изображения
@@ -3416,17 +3325,27 @@ class HoverImageCarouselComponent {
3416
3325
  if (this.images.length <= 1 || offsetX < 0) {
3417
3326
  return;
3418
3327
  }
3328
+ // new Event().preventDefault
3419
3329
  const elementWidth = target.offsetWidth;
3420
3330
  const hoverPercentage = offsetX / elementWidth;
3421
3331
  const newIndex = Math.floor(hoverPercentage * this.images.length);
3422
3332
  this.currentIndex.set(newIndex);
3423
3333
  }
3334
+ /**
3335
+ * Обработчик события `mouseleave.silent`.
3336
+ */
3337
+ onLeave() {
3338
+ if (this.images.length <= 1) {
3339
+ return;
3340
+ }
3341
+ this.currentIndex.set(0);
3342
+ }
3424
3343
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: HoverImageCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3425
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: HoverImageCarouselComponent, isStandalone: true, selector: "sc-hover-image-carousel", inputs: { images: "images", isShowActions: "isShowActions" }, host: { listeners: { "mousemove.silent": "onHover($event.offsetX,$event.target)" } }, ngImport: i0, template: "<div\n class=\"overflow-hidden rounded-xl\"\n [class.mb-2]=\"images.length <= 1 && isShowActions\"\n [style.aspect-ratio]=\"'20/19'\"\n>\n <img\n [src]=\"images[currentIndex()]\"\n class=\"size-full rounded-xl object-contain\"\n />\n</div>\n\n@if (images.length > 1 && isShowActions) {\n <tui-pagination\n size=\"s\"\n [length]=\"images.length\"\n [index]=\"currentIndex()\"\n />\n}\n", dependencies: [{ kind: "component", type: TuiPagination, selector: "tui-pagination", inputs: ["length", "focusable", "size", "disabled", "activePadding", "sidePadding", "content", "index"], outputs: ["indexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3344
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: HoverImageCarouselComponent, isStandalone: true, selector: "sc-hover-image-carousel", inputs: { images: "images", isShowActions: "isShowActions" }, host: { listeners: { "mousemove.silent": "onHover($event.offsetX,$event.target)", "mouseleave.silent": "onLeave()" } }, ngImport: i0, template: "<div\n class=\"overflow-hidden rounded-xl\"\n [class.mb-2]=\"images.length <= 1 && isShowActions\"\n [style.aspect-ratio]=\"'20/19'\"\n>\n <img\n [src]=\"images[currentIndex()]\"\n class=\"size-full rounded-xl object-contain\"\n />\n</div>\n\n@if (images.length > 1 && isShowActions) {\n <tui-pagination\n size=\"s\"\n [length]=\"images.length\"\n [index]=\"currentIndex()\"\n (indexChange)=\"currentIndex.set($event)\"\n (mousemove.silent)=\"$event.stopPropagation()\"\n />\n}\n", dependencies: [{ kind: "component", type: TuiPagination, selector: "tui-pagination", inputs: ["length", "focusable", "size", "disabled", "activePadding", "sidePadding", "content", "index"], outputs: ["indexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3426
3345
  }
3427
3346
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: HoverImageCarouselComponent, decorators: [{
3428
3347
  type: Component,
3429
- args: [{ selector: 'sc-hover-image-carousel', standalone: true, imports: [TuiPagination], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"overflow-hidden rounded-xl\"\n [class.mb-2]=\"images.length <= 1 && isShowActions\"\n [style.aspect-ratio]=\"'20/19'\"\n>\n <img\n [src]=\"images[currentIndex()]\"\n class=\"size-full rounded-xl object-contain\"\n />\n</div>\n\n@if (images.length > 1 && isShowActions) {\n <tui-pagination\n size=\"s\"\n [length]=\"images.length\"\n [index]=\"currentIndex()\"\n />\n}\n" }]
3348
+ args: [{ standalone: true, selector: 'sc-hover-image-carousel', imports: [TuiPagination], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"overflow-hidden rounded-xl\"\n [class.mb-2]=\"images.length <= 1 && isShowActions\"\n [style.aspect-ratio]=\"'20/19'\"\n>\n <img\n [src]=\"images[currentIndex()]\"\n class=\"size-full rounded-xl object-contain\"\n />\n</div>\n\n@if (images.length > 1 && isShowActions) {\n <tui-pagination\n size=\"s\"\n [length]=\"images.length\"\n [index]=\"currentIndex()\"\n (indexChange)=\"currentIndex.set($event)\"\n (mousemove.silent)=\"$event.stopPropagation()\"\n />\n}\n" }]
3430
3349
  }], propDecorators: { images: [{
3431
3350
  type: Input
3432
3351
  }], isShowActions: [{
@@ -3434,6 +3353,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
3434
3353
  }], onHover: [{
3435
3354
  type: HostListener,
3436
3355
  args: ['mousemove.silent', ['$event.offsetX', '$event.target']]
3356
+ }], onLeave: [{
3357
+ type: HostListener,
3358
+ args: ['mouseleave.silent']
3437
3359
  }] } });
3438
3360
 
3439
3361
  /**