@ngu/carousel
Version:
Angular Universal carousel
262 lines (255 loc) • 10.5 kB
TypeScript
import * as i0 from '@angular/core';
import { NgIterable, OnDestroy, ElementRef, TrackByFunction, TemplateRef, ViewContainerRef } from '@angular/core';
declare class NguCarouselStore {
touch: Touch;
vertical: Vertical;
interval?: CarouselInterval | undefined;
transform: Transfrom;
button?: NguButton | undefined;
visibleItems?: ItemsControl | undefined;
deviceType?: DeviceType | undefined;
type: string;
token: string;
items: number;
load: number;
deviceWidth: number;
carouselWidth: number;
itemWidth: number;
slideItems: number;
itemWidthPer: number;
itemLength: number;
currentSlide: number;
easing: string;
speed: number;
loop: boolean;
dexVal: number;
touchTransform: number;
isEnd: boolean;
readonly isFirst: i0.WritableSignal<boolean>;
readonly isLast: i0.WritableSignal<boolean>;
RTL: boolean;
point: boolean;
velocity: number;
constructor(touch?: Touch, vertical?: Vertical, interval?: CarouselInterval | undefined, transform?: Transfrom, button?: NguButton | undefined, visibleItems?: ItemsControl | undefined, deviceType?: DeviceType | undefined, type?: string, token?: string, items?: number, load?: number, deviceWidth?: number, carouselWidth?: number, itemWidth?: number, slideItems?: number, itemWidthPer?: number, itemLength?: number, currentSlide?: number, easing?: string, speed?: number, loop?: boolean, dexVal?: number, touchTransform?: number, isEnd?: boolean, isFirst?: i0.WritableSignal<boolean>, isLast?: i0.WritableSignal<boolean>, RTL?: boolean, point?: boolean, velocity?: number);
}
type DeviceType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'all';
type ButtonVisible = 'disabled' | 'hide';
declare class ItemsControl {
start: number;
end: number;
}
declare class Vertical {
enabled: boolean;
height: number;
}
declare class NguButton {
visibility?: ButtonVisible;
elastic?: number;
}
declare class Touch {
active?: boolean;
swipe: string;
velocity: number;
}
declare interface TransformInterface {
xs: number;
sm: number;
md: number;
lg: number;
xl?: number;
all: number;
}
declare class Transfrom implements TransformInterface {
xs: number;
sm: number;
md: number;
lg: number;
all: number;
xl?: number | undefined;
constructor(xs?: number, sm?: number, md?: number, lg?: number, all?: number);
}
declare interface BreakpointsInterface {
sm: number;
md: number;
lg: number;
xl: number;
}
/**
* Default values
* {sm: 768, md: 992, lg: 1200, xl: 1200}
*
* Bootstrap values:
* {sm: 576, md: 768, lg: 992, xl: 1200}
*/
declare class Breakpoints implements BreakpointsInterface {
sm: number;
md: number;
lg: number;
xl: number;
constructor(sm?: number, md?: number, lg?: number, xl?: number);
}
declare class NguCarouselConfig {
grid: Transfrom;
gridBreakpoints?: Breakpoints;
slide?: number;
speed?: number;
interval?: CarouselInterval;
animation?: Animate;
point?: Point;
type?: string;
load?: number;
custom?: Custom;
loop?: boolean;
touch?: boolean;
easing?: string;
RTL?: boolean;
button?: NguButton;
vertical?: Vertical;
velocity?: number;
}
type Custom = 'banner';
type Animate = 'lazy';
interface Point {
visible: boolean;
hideOnSingleSlide?: boolean;
}
interface CarouselInterval {
timing: number;
initialDelay?: number;
}
type NguCarouselDataSource<T, U> = (U & NgIterable<T>) | null | undefined;
declare class NguCarousel<T, U extends NgIterable<T> = NgIterable<T>> extends NguCarouselStore implements OnDestroy {
private _host;
private _renderer;
private _differs;
private _isBrowser;
private _ngZone;
private _nguWindowScrollListener;
private _nguCarouselHammerManager;
private _cdr;
/** Public property that may be accessed outside of the component. */
readonly activePoint: i0.WritableSignal<number>;
readonly pointNumbers: i0.WritableSignal<number[]>;
readonly inputs: i0.InputSignal<NguCarouselConfig>;
readonly carouselLoad: i0.OutputEmitterRef<number>;
readonly onMove: i0.OutputEmitterRef<this>;
private _defDirectives;
private _nodeOutlet;
readonly nextButton: i0.Signal<ElementRef<any> | undefined>;
readonly prevButton: i0.Signal<ElementRef<any> | undefined>;
readonly carouselMain1: i0.Signal<ElementRef<any>>;
readonly _nguItemsContainer: i0.Signal<ElementRef<any>>;
readonly _touchContainer: i0.Signal<ElementRef<any>>;
private _arrayChanges;
readonly dataSource: i0.InputSignalWithTransform<U & NgIterable<T>, NguCarouselDataSource<T, U>>;
private _intervalController$;
private _hammer;
private _withAnimation;
private _directionSymbol;
private _carouselCssNode;
private _dataDiffer;
private _styleid;
private _pointIndex;
private _destroy$;
/**
* Tracking function that will be used to check the differences in data changes. Used similarly
* to `ngFor` `trackBy` function. Optimize Items operations by identifying a Items based on its data
* relative to the function to know if a Items should be added/removed/moved.
* Accepts a function that takes two parameters, `index` and `item`.
*/
readonly trackBy: i0.InputSignal<TrackByFunction<T> | undefined>;
readonly _trackByFn: i0.Signal<TrackByFunction<T>>;
constructor();
private _checkChanges;
private renderNodeChanges;
/**
* Updates the index-related context for each row to reflect any changes in the index of the rows,
* e.g. first/last/even/odd.
*/
private _updateItemIndexContext;
private _getNodeDef;
private _inputValidation;
ngOnDestroy(): void;
/** Get Touch input */
private _setupHammer;
/** handle touch input */
private _touchHandling;
private _setTouchTransfrom;
private _setTransformFromTouch;
/** this fn used to disable the interval when it is not on the viewport */
private _onWindowScrolling;
/** store data based on width of the screen for the carousel */
private _storeCarouselData;
/** Used to reset the carousel */
reset(withoutAnimation?: boolean): void;
/** Init carousel point */
private _carouselPoint;
/** change the active point in carousel */
private _carouselPointActiver;
/** this function is used to scoll the carousel when point is clicked */
moveTo(slide: number, withoutAnimation?: boolean): void;
/** set the style of the carousel based the inputs data */
private _carouselSize;
/** logic to scroll the carousel step 1 */
private _carouselScrollOne;
/** logic to scroll the carousel step 2 */
private _carouselScrollTwo;
/** boolean function for making isFirst and isLast */
private _btnBoolean;
private _transformString;
/** set the transform style to scroll the carousel */
private _transformStyle;
/** this will trigger the carousel to load the items */
private _carouselLoadTrigger;
/** generate Class for each carousel to set specific style */
private _generateID;
/** handle the auto slide */
private _carouselInterval;
/** animate the carousel items */
private _carouselAnimator;
private _removeAnimations;
/** Short form for setElementStyle */
private _setStyle;
/** For generating style tag */
private _createStyleElem;
private _setupWindowResizeListener;
static ngAcceptInputType_dataSource: NguCarouselDataSource<any, any>;
static ɵfac: i0.ɵɵFactoryDeclaration<NguCarousel<any, any>, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<NguCarousel<any, any>, "ngu-carousel", never, { "inputs": { "alias": "inputs"; "required": true; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": true; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": false; "isSignal": true; }; }, { "carouselLoad": "carouselLoad"; "onMove": "onMove"; }, ["_defDirectives", "nextButton", "prevButton"], ["[NguCarouselPrev]", "[NguCarouselNext]", "[NguCarouselPoint]"], true, never>;
}
declare class NguItemComponent {
static ɵfac: i0.ɵɵFactoryDeclaration<NguItemComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<NguItemComponent, "ngu-item", never, {}, {}, never, ["*"], true, never>;
}
declare class NguTileComponent {
static ɵfac: i0.ɵɵFactoryDeclaration<NguTileComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<NguTileComponent, "ngu-tile", never, {}, {}, never, ["*"], true, never>;
}
declare class NguCarouselItemDirective {
static ɵfac: i0.ɵɵFactoryDeclaration<NguCarouselItemDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<NguCarouselItemDirective, "[NguCarouselItem]", never, {}, {}, never, never, true, never>;
}
declare class NguCarouselNextDirective {
static ɵfac: i0.ɵɵFactoryDeclaration<NguCarouselNextDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<NguCarouselNextDirective, "[NguCarouselNext]", never, {}, {}, never, never, true, never>;
}
declare class NguCarouselPrevDirective {
static ɵfac: i0.ɵɵFactoryDeclaration<NguCarouselPrevDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<NguCarouselPrevDirective, "[NguCarouselPrev]", never, {}, {}, never, never, true, never>;
}
declare class NguCarouselPointDirective {
static ɵfac: i0.ɵɵFactoryDeclaration<NguCarouselPointDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<NguCarouselPointDirective, "[NguCarouselPoint]", never, {}, {}, never, never, true, never>;
}
declare class NguCarouselDefDirective<T> {
template: TemplateRef<any>;
when?: (index: number, nodeData: T) => boolean;
static ɵfac: i0.ɵɵFactoryDeclaration<NguCarouselDefDirective<any>, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<NguCarouselDefDirective<any>, "[nguCarouselDef]", never, {}, {}, never, never, true, never>;
}
declare class NguCarouselOutlet {
viewContainer: ViewContainerRef;
static ɵfac: i0.ɵɵFactoryDeclaration<NguCarouselOutlet, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<NguCarouselOutlet, "[nguCarouselOutlet]", never, {}, {}, never, never, true, never>;
}
export { NguCarousel, NguCarouselConfig, NguCarouselDefDirective, NguCarouselItemDirective, NguCarouselNextDirective, NguCarouselOutlet, NguCarouselPointDirective, NguCarouselPrevDirective, NguCarouselStore, NguItemComponent, NguTileComponent };