@snabcentr/client-ui 3.6.0 → 3.6.2
Sign up to get free protection for your applications and to get access to all the features.
- package/banner/sc-banner.component.d.ts +5 -51
- package/catalog/hover-image-carousel/hover-image-carousel.component.d.ts +5 -1
- package/esm2022/banner/sc-banner.component.mjs +11 -104
- package/esm2022/catalog/hover-image-carousel/hover-image-carousel.component.mjs +17 -4
- package/fesm2022/snabcentr-client-ui.mjs +26 -104
- 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']
|
|
@@ -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',
|
|
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
|
/**
|