@salla.sa/twilight-components/dist/types/components/salla-slider/salla-slider.d.ts

Salla Web Component

import { EventEmitter } from '../../stencil-public-runtime';
import { Swiper as SwiperType } from 'swiper/types';
/**
 * @slot items - Slider items.
 * @slot thumbs - Thumbs slider items.
 */
export declare class SallaSlider {
    host: HTMLElement;
    constructor();
    /**
     * Show/hide slider block title
     */
    blockTitle: string;
    /**
     * Enable call a specific slide by index from thumbnails or color option in `salla-slider-options` component, works only if `data-img-id` and `data-slid-index` attributes are set on each slide
     */
    listenToThumbnailsOption: boolean;
    /**
     * Show/hide slider block sub title
     */
    blockSubtitle: string;
    /**
     * Show/hide display all button beside arrows
     */
    displayAllUrl: string;
    /**
     * Show/hide display all button beside arrows
     */
    arrowsCentered: boolean;
    /**
     * Vertical or Horizontal thumbs slider
     */
    verticalThumbs: boolean;
    /**
     * Disable thumbs slider and show it as a grid
     */
    gridThumbs: boolean;
    /**
     * Vertical or Horizontal main slider
     */
    vertical: boolean;
    /**
     * Auto Height slider
     */
    autoHeight: boolean;
    /**
     * Show/hide arrows
     */
    showControls: boolean;
    /**
     * Show/hide arrows
     */
    controlsOuter: boolean;
    /**
     * Show/hide thumbs slider arrows
     */
    showThumbsControls: boolean;
    /**
     * When enabled and there is exactly one slide in the `items` slot,
     * render without initializing Swiper (single slide mode).
     */
    staticWhenSingle: boolean;
    /**
     * Enable autoplay  - working with `type="carousel" only`
     */
    autoPlay: boolean;
    /**
     * slidesPerView
     */
    slidesPerView: string;
    /**
     * Enable pagination
     */
    pagination: boolean;
    /**
     * Enable center mode  - working with `type="carousel" only`
     */
    centered: boolean;
    /**
     * Run slider in loop, Don't use it for slides with custom components inside it, because it may cause re-render issue
     */
    loop: boolean;
    /**
     * Slider direction. Default: document.documentElement.dir
     */
    direction: string;
    /**
     * Set the type of the slider
     * Default: ''
     */
    type: 'carousel' | 'fullscreen' | 'thumbs' | 'default' | 'hero' | 'testimonials' | 'blog' | 'fullwidth' | '';
    /**
     * Slider Configs refer to https://swiperjs.com/swiper-api#parameters and pass the entire config object
     * @example
     * let slider = document.querySelector('salla-slider');
     *  slider.sliderConfig = {
     *  slidesPerView: 1,
     *  spaceBetween : 30,
     *  lazy: true,
     * }
     *
     */
    sliderConfig: any;
    /**
     * Thumbs Slider Configs refer to https://swiperjs.com/swiper-api#parameters and pass the entire config object
     * @example
     * let slider = document.querySelector('salla-slider');
     *  slider.thumbsConfig = {
     *  slidesPerView: 1,
     *  spaceBetween : 30,
     *  lazy: true,
     * }
     *
     */
    thumbsConfig: any;
    /**
     * Event will fired right after initialization.
     */
    afterInit: EventEmitter<any>;
    /**
     * Event will be fired when currently active slide is changed
     */
    slideChange: EventEmitter<any>;
    /**
     * Event will be fired when Swiper reach its beginning (initial position)
     */
    reachBeginning: EventEmitter<any>;
    /**
     * Event will be fired when Swiper reach last slide
     */
    reachEnd: EventEmitter<any>;
    /**
     * Event will be fired after animation to other slide (next or previous).
     */
    slideChangeTransitionEnd: EventEmitter<any>;
    /**
     * Event will be fired in the beginning of animation to other slide (next or previous).
     */
    slideChangeTransitionStart: EventEmitter<any>;
    /**
     * Same as "slideChangeTransitionEnd" but for "forward" direction only
     */
    slideNextTransitionEnd: EventEmitter<any>;
    /**
     * Same as "slideChangeTransitionStart" but for "forward" direction only
     */
    slideNextTransitionStart: EventEmitter<any>;
    /**
     * Same as "slideChangeTransitionEnd" but for "backward" direction only
     */
    slidePrevTransitionEnd: EventEmitter<any>;
    /**
     * Same as "slideChangeTransitionStart" but for "backward" direction only
     */
    slidePrevTransitionStart: EventEmitter<any>;
    /**
     * Event will be fired when user touch and move finger over Swiper and move it.
     * Receives touchmove event as an arguments.
     */
    sliderMove: EventEmitter<any>;
    /**
     * Event will be fired when user release Swiper. Receives touchend event as an arguments.
     */
    touchSliderEnd: EventEmitter<any>;
    /**
     * Event will be fired when user touch and move finger over Swiper.
     * Receives touchmove event as an arguments.
     */
    touchSliderMove: EventEmitter<any>;
    /**
     * Event will be fired when user touch Swiper. Receives touchstart event as an arguments.
     */
    touchSliderStart: EventEmitter<any>;
    /**
     * Event will be fired after transition.
     */
    sliderTransitionEnd: EventEmitter<any>;
    /**
     * Event will be fired in the beginning of transition.
     */
    sliderTransitionStart: EventEmitter<any>;
    /**
     * Returns the Swiper instance to allow direct manipulation
     * @returns The Swiper slider instance
     */
    sliderInstance(): Promise<any>;
    /**
     * Run transition to the slide with index number equal to 'index' parameter for the duration equal to 'speed' parameter.
     *
     * @param {number} index - Index number of slide.
     * @param {number} speed - Transition duration (in ms).
     * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
     * **/
    slideTo(index: number, speed?: number, runCallbacks?: boolean): Promise<any>;
    /**
     * Run transition to the next slide.
     *
     * @param {number} speed - Transition duration (in ms).
     * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
     * **/
    slideNext(speed?: number, runCallbacks?: boolean): Promise<void>;
    /**
     * Run transition to the previous slide.
     *
     * @param {number} speed - Transition duration (in ms).
     * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
     * **/
    slidePrev(speed?: number, runCallbacks?: boolean): Promise<void>;
    /**
     * Does the same as .slideTo but for the case when used with enabled loop. So this method will slide to slides with realIndex matching to passed index
     *
     * @param {number} speed - Transition duration (in ms).
     * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
     * **/
    slideToLoop(index: number, speed?: number, runCallbacks?: boolean): Promise<void>;
    /**
     * Does the same as .slideNext but for the case when used with enabled loop. So this method will slide to next slide with realIndex matching to next index
     *
     * @param {number} speed - Transition duration (in ms).
     * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
     * **/
    slideNextLoop(speed?: number, runCallbacks?: boolean): Promise<void>;
    /**
     * Does the same as .slidePrev but for the case when used with enabled loop. So this method will slide to previous slide with realIndex matching to previous index
     *
     * @param {number} speed - Transition duration (in ms).
     * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
     * **/
    slidePrevLoop(speed?: number, runCallbacks?: boolean): Promise<void>;
    /**
     * Reset slider position to currently active slide for the duration equal to 'speed' parameter.
     *
     * @param {number} speed - Transition duration (in ms).
     * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
     * **/
    slideReset(speed?: number, runCallbacks?: boolean): Promise<void>;
    /**
     * Reset slider position to closest slide/snap point for the duration equal to 'speed' parameter.
     * @param {number} speed - Transition duration (in ms).
     * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
     * **/
    slideToClosest(speed?: number, runCallbacks?: boolean): Promise<void>;
    /**
     *  You should call it after you add/remove slides manually, or after you hide/show it, or do any custom DOM modifications with Swiper This method also includes subcall of the following methods which you can use separately:
     * **/
    update(): Promise<void>;
    /**
     * Force slider to update its height (when autoHeight enabled) for the duration equal to 'speed' parameter
     * @param {number} speed - Transition duration (in ms).
     * **/
    updateAutoHeight(speed?: number): Promise<void>;
    /**
     * recalculate number of slides and their offsets. Useful after you add/remove slides with JavaScript
     * **/
    updateSlides(): Promise<void>;
    /**
     * recalculate slider progress
     * **/
    updateProgress(): Promise<void>;
    /**
     * update active/prev/next classes on slides and bullets
     * **/
    updateSlidesClasses(): Promise<void>;
    /**
     * Get slider slides
     * **/
    getSlides(): Promise<any>;
    /**
     * Get slider slides
     * **/
    updateSize(): Promise<any>;
    /**
     * Get thumbs slider update
     * **/
    sliderInit(): Promise<any>;
    /**
     * Get thumbs slider slides
     * **/
    thumbsSliderInstance(): Promise<any>;
    /**
     * Get thumbs slider update
     * **/
    thumbsSliderInit(): Promise<any>;
    /**
     * Get thumbs slider update
     * **/
    thumbsSliderUpdate(): Promise<any>;
    /**
     * Get thumbs slider updateSlides
     * **/
    thumbsSliderUpdateSlides(): Promise<any>;
    /**
   * Get thumbs slider updateSize
   * **/
    getThumbsUpdateSize(): Promise<any>;
    /**
     * Does the same as .slideTo but for the case when used with enabled loop. So this method will slide to slides with realIndex matching to passed index
     *
     * @param {number} speed - Transition duration (in ms).
     * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
     * **/
    thumbsSlideTo(index: number, speed?: number, runCallbacks?: boolean): Promise<any>;
    /**
   * Get thumbs slider slides
   * **/
    getThumbsSlides(): Promise<any>;
    currentIndex: number | undefined;
    isEnd: boolean;
    isBeginning: boolean;
    displayAllTitle: string;
    /** Use matchMedia instead of window.innerWidth to avoid forced reflow (Lighthouse recommended) */
    isDesktopViewport: boolean;
    private _rafId;
    private viewportMediaQuery;
    private sliderContainer?;
    private sliderWrapper?;
    private thumbsSliderContainer?;
    private thumbsSliderWrapper?;
    private slider;
    private thumbsSlider;
    private hasThumbSlot;
    private pre_defined_config;
    isStaticWhenSingle(): boolean;
    componentWillLoad(): Promise<void>;
    getSwiperConfig(): {
        loop: boolean;
        autoplay: boolean | Object;
        centeredSlides: boolean;
        slidesPerView: string;
        autoHeight: boolean;
        on: {
            afterInit: (slider: SwiperType) => void;
        };
        pagination: boolean | {
            el: string;
            clickable: boolean;
        };
        navigation: boolean | {
            nextEl: string;
            prevEl: string;
        };
        breakpoints: {
            768: {
                direction: string;
            };
        };
    };
    getThumbsDirection(): string;
    initSlider(): void;
    render(): any;
    private lazyImageObserver?;
    /** Observe all .swiper-lazy images and add swiper-lazy-loaded when they enter viewport. */
    private observeLazyImages;
    /** Lazy load data-background for active slide and adjacent slides (backward compat for Swiper v9+). */
    private loadLazyBackgrounds;
    private lazyObserver?;
    /** Load background only when element is in viewport. */
    private loadBackgroundIfVisible;
    componentDidLoad(): void;
    private onViewportChange;
    disconnectedCallback(): void;
}
/** @State() and internal property names – excluded from SallaSliderProps so sliderProps cannot override internal state. */
type SallaSliderInternalKey = 'currentIndex' | 'isEnd' | 'isBeginning' | 'displayAllTitle' | 'isDesktopViewport' | 'viewportMediaQuery' | 'hasThumbSlot';
/** Keys of SallaSlider that are @Prop() only (excludes methods, host, EventEmitters, @State(), and private fields). */
type SallaSliderPropKey = Exclude<{
    [K in keyof SallaSlider]: SallaSlider[K] extends (...args: any[]) => any ? never : SallaSlider[K] extends EventEmitter ? never : SallaSlider[K] extends HTMLElement ? never : K;
}[keyof SallaSlider], SallaSliderInternalKey>;
/**
 * Props that can be passed to salla-slider (e.g. when used via sliderProps in salla-products-slider).
 * Excludes @State() so internal state (currentIndex, isEnd, etc.) cannot be overridden.
 */
export type SallaSliderProps = Partial<Pick<SallaSlider, SallaSliderPropKey>>;
export {};