@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.
- 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
|
/**
|