ngx-hm-carousel
Version:
A light carousel for Angular, support mobile touch by hammerJs with SSR
153 lines (152 loc) • 8.4 kB
TypeScript
import { ElementRef, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import { Observable } from 'rxjs';
import { NgxHmCarouselBreakPointUp } from './ngx-hm-carousel.model';
import * as i0 from "@angular/core";
export declare class NgxHmCarouselComponent implements ControlValueAccessor, OnDestroy {
private platformId;
private _document;
private _destroyRef;
private _renderer;
private _zone;
private _cd;
container: import("@angular/core").Signal<ElementRef<any>>;
btnPrev: import("@angular/core").Signal<ElementRef<any> | undefined>;
btnNext: import("@angular/core").Signal<ElementRef<any> | undefined>;
progressContainerElm: import("@angular/core").Signal<ElementRef<any> | undefined>;
itemElms: import("@angular/core").Signal<readonly ElementRef<any>[]>;
contentPrev: import("@angular/core").Signal<TemplateRef<any> | undefined>;
contentNext: import("@angular/core").Signal<TemplateRef<any> | undefined>;
dotElm: import("@angular/core").Signal<TemplateRef<any> | undefined>;
progressElm: import("@angular/core").Signal<TemplateRef<any> | undefined>;
infiniteContainer: import("@angular/core").Signal<ViewContainerRef | undefined>;
contentContent: import("@angular/core").Signal<TemplateRef<any>>;
/** the data you using with *ngFor, it need when infinite mode or autoplay mode */
data: import("@angular/core").InputSignal<any[]>;
/** when infinite is true, the animation time with item, default is 400. */
aniTime: import("@angular/core").InputSignal<number>;
/** this class will add in #containerElm when model change */
aniClass: import("@angular/core").InputSignal<string>;
/**
* this class will add when carousel auto play,
* this default autoplay animation is same as aniClass
*/
aniClassAuto: import("@angular/core").InputSignal<string>;
/**
* user move picture with the container width rate,
* when more than that rate, it will go to next or prev,
* set false will never move with distance rate,
* default is `0.15`
*/
panBoundary: import("@angular/core").InputSignal<number | false>;
/** when `show-num` is bigger than 1, the first item align, default is `center` */
align: import("@angular/core").InputSignal<"left" | "center" | "right">;
/**
* disable when drag occur the child element will follow touch point.
* default is `false`
*/
notDrag: import("@angular/core").InputSignal<boolean>;
/**
* the event binding state for stop auto play when mouse move over
*/
mouseEnable: import("@angular/core").InputSignal<boolean>;
/** each auto play between time */
delay: import("@angular/core").InputSignal<number>;
/** auto play direction, default is `right`. */
direction: import("@angular/core").InputSignal<"left" | "right">;
/** how many number with each scroll, default is `1`. */
scrollNum: import("@angular/core").InputSignal<number>;
/** Could user scroll many item once, simulate with scrollbar, default is `false` */
isDragMany: import("@angular/core").InputSignal<boolean>;
/** Minimal velocity required before recognizing, unit is in px per ms, default `0.3` */
swipeVelocity: import("@angular/core").InputSignal<number>;
/**
* switch show number with custom logic like css
* @media (min-width: `number`px)
*/
breakpoint: import("@angular/core").InputSignal<NgxHmCarouselBreakPointUp[]>;
/** disable drag event with touch and mouse pan moving, default is `false` */
disableDrag: import("@angular/core").InputSignalWithTransform<boolean | undefined, boolean>;
/** is the carousel can move infinite */
infinite: import("@angular/core").InputSignal<boolean>;
/** auto play speed */
speed: import("@angular/core").InputSignalWithTransform<number | undefined, number>;
/** PinchRecognizer that you want to add to hammer event */
recognizers: import("@angular/core").InputSignal<Recognizer[]>;
/** PinchRecognizer that you want to add to hammer event */
stopPanListener: import("@angular/core").InputSignal<boolean>;
private _showNum;
/**
* how many number items to show once, default is `1`
* set `auto` to using `[breakpoint]` set value.
*/
showNum: import("@angular/core").InputSignalWithTransform<number, number | "auto">;
/** is that carousel auto play */
autoplay: import("@angular/core").InputSignalWithTransform<boolean | undefined, boolean>;
get currentIndex(): number;
set currentIndex(value: number);
get progressWidth(): number;
set progressWidth(value: number);
get grabbing(): boolean;
set grabbing(value: boolean);
leaveObs$: Observable<Event>;
hammer: HammerManager | null;
private set left(value);
private get maxRightIndex();
runLoop: import("@angular/core").Signal<boolean>;
private get lengthOne();
private get rootElmWidth();
private set containerElmWidth(value);
private isFromAuto;
private isAutoNum;
private mouseOnContainer;
private alignDistance;
private elmWidth;
private rootElm;
private containerElm;
private elms;
private infiniteElmRefs;
private saveTimeOut$?;
private doNextSub$?;
private doNext$?;
private restart;
private speedChange;
private stopEvent;
private _progressWidth;
private _currentIndex;
private _grabbing;
private panCount;
private hasInitWriteValue;
protected readonly itemElmsChanges: Observable<readonly ElementRef<any>[]>;
constructor();
ngOnDestroy(): void;
writeValue(value: any): void;
registerOnChange(fn: (value: any) => any): void;
registerOnTouched(fn: () => any): void;
private onChange;
private onTouched;
private init;
private destroy;
private destroyHammer;
private addInfiniteElm;
private removeInfiniteElm;
private containerResize;
private initVariable;
private reSetAlignDistance;
private setViewWidth;
private bindHammer;
private goPrev;
private goNext;
private bindClick;
private callRestart;
private drawView;
private removeContainerTransition;
private infiniteHandler;
private outOfBound;
private runProgress;
private getAutoNum;
private addStyle;
private setStyle;
static ɵfac: i0.ɵɵFactoryDeclaration<NgxHmCarouselComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<NgxHmCarouselComponent, "ngx-hm-carousel", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "aniTime": { "alias": "aniTime"; "required": false; "isSignal": true; }; "aniClass": { "alias": "aniClass"; "required": false; "isSignal": true; }; "aniClassAuto": { "alias": "aniClassAuto"; "required": false; "isSignal": true; }; "panBoundary": { "alias": "pan-boundary"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "notDrag": { "alias": "not-follow-pan"; "required": false; "isSignal": true; }; "mouseEnable": { "alias": "mouse-enable"; "required": false; "isSignal": true; }; "delay": { "alias": "between-delay"; "required": false; "isSignal": true; }; "direction": { "alias": "autoplay-direction"; "required": false; "isSignal": true; }; "scrollNum": { "alias": "scroll-num"; "required": false; "isSignal": true; }; "isDragMany": { "alias": "drag-many"; "required": false; "isSignal": true; }; "swipeVelocity": { "alias": "swipe-velocity"; "required": false; "isSignal": true; }; "breakpoint": { "alias": "breakpoint"; "required": false; "isSignal": true; }; "disableDrag": { "alias": "disable-drag"; "required": false; "isSignal": true; }; "infinite": { "alias": "infinite"; "required": false; "isSignal": true; }; "speed": { "alias": "autoplay-speed"; "required": false; "isSignal": true; }; "recognizers": { "alias": "recognizers"; "required": false; "isSignal": true; }; "stopPanListener": { "alias": "stopPanListener"; "required": false; "isSignal": true; }; "showNum": { "alias": "show-num"; "required": false; "isSignal": true; }; "autoplay": { "alias": "autoplay"; "required": false; "isSignal": true; }; }, {}, ["itemElms", "contentPrev", "contentNext", "dotElm", "progressElm", "infiniteContainer", "contentContent"], ["[ngx-hm-carousel-container]"], true, never>;
}