ember-bootstrap

import CarouselSlide, { type CarouselSlideSignature, type DirectionalClassName, type OrderClassName } from './bs-carousel/slide'; import Component from '@glimmer/component'; import { type Task } from 'ember-concurrency'; import type { ComponentLike } from '@glint/template'; export type PresentationState = 'didTransition' | 'willTransit'; export type TransitionType = 'slide' | 'fade'; interface CarouselSignature { Args: { autoPlay?: boolean; index?: number; interval?: number; keyboard?: boolean; ltr?: boolean; nextControlLabel?: string; pauseOnMouseEnter?: boolean; onSlideChanged?: (index: number) => void; prevControlLabel?: string; showControls?: boolean; showIndicators?: boolean; slideComponent?: ComponentLike<CarouselSlideSignature>; transitionDuration?: number; transition?: TransitionType; wrap?: boolean; }; Blocks: { default: [ { slide: ComponentLike<CarouselSlideSignature>; } ]; }; Element: HTMLDivElement; } /** Ember implementation of Bootstrap's Carousel. Supports all original features but API is partially different: | Description | Original | Component | | ------ | ------ | ------ | | Autoplays after first user event or on page load. | ride='carousel'\|false | autoPlay=false\|true | | Disable automatic cycle. | interval=false | interval=0 | | If first slide should follow last slide on "previous" event, the opposite will also be true for "next" event. | wrap=false\|true | wrap=false\|true | | Jumps into specific slide index | data-slide-to=n | index=n | | Keyboard events. | keyboard=false\|true | keyboard=false\|true | | Left-to-right or right-to-left sliding. | N/A | ltr=false\|true | | Pause current cycle on mouse enter. | pause='hover'\|null | pauseOnMouseEnter=false\|true | | Show or hide controls | Tag manipulation. | showControls=false\|true | | Show or hide indicators | Tag manipulation. | showIndicators=false\|true | | Waiting time of slides in an automatic cycle. | interval=n | interval=n | Default settings are the same as the original, so you don't have to worry about changing parameters. ```hbs <BsCarousel as |car|> <car.slide> <img alt="First slide" src="slide1.jpg"> </car.slide> <car.slide> <img alt="Second slide" src="slide2.jpg"> </car.slide> <car.slide> <img alt="Third slide" src="slide3.jpg"> </car.slide> </BsCarousel> ``` To better understand the whole documentation, you should be aware of the following operations: | Operation | Description | | ------ | ------ | | Transition | Swaps two slides. | | Interval | Waiting time after a transition. | | Presentation | Represents a single transition, or a single interval, or the union of both. | | Cycle | Presents all slides until it reaches first or last slide. | | Wrap | wrap slides, cycles without stopping at first or last slide. | *Note that only invoking the component in a template as shown above is considered part of its public API. Extending from it (subclassing) is generally not supported, and may break at any time.* @class Carousel @namespace Components @extends Component @public */ export default class Carousel extends Component<CarouselSignature> { tabindex: string; /** * @property slideComponent * @type {String} * @private */ /** * If a slide can turn to left, including corners. * * @private * @property canTurnToLeft */ get canTurnToLeft(): boolean; /** * If a slide can turn to right, including corners. * * @private * @property canTurnToRight */ get canTurnToRight(): boolean; children: Component[]; /** * All `CarouselSlide` child components. * * @private * @property childSlides * @readonly * @type array */ get childSlides(): CarouselSlide[]; /** * This observer is the entry point for real time insertion and removing of slides. * * @private * @property childSlidesObserver */ childSlidesObserver(): void; /** * Indicates the current index of the current slide. * * @property currentIndex * @private */ currentIndex: number; /** * The current slide object that is going to be used by the nested slides components. * * @property currentSlide * @private * */ get currentSlide(): CarouselSlide | undefined; /** * Bootstrap style to indicate that a given slide should be moving to left/right. * * @property directionalClassName * @private * @type { 'left' | 'right' | null } */ directionalClassName: DirectionalClassName | null; /** * Indicates the next slide index to move into. * * @property followingIndex * @private * @type number | null */ followingIndex: number | null; /** * The following slide object that is going to be used by the nested slides components. * * @property followingIndex * @private */ get followingSlide(): CarouselSlide | undefined; /** * @private * @property hasInterval * @type boolean */ get hasInterval(): boolean; /** * This observer is the entry point for programmatically slide changing. * * @property indexObserver * @private */ indexObserver(): void; /** * @property indicators * @private */ get indicators(): any[]; /** * If user is hovering its cursor on component. * This property is only manipulated when 'pauseOnMouseEnter' is true. * * @property isMouseHovering * @private * @type boolean */ isMouseHovering: boolean; /** * The class name to append to the next control link element. * * @property nextControlClassName * @type string * @private */ /** * Bootstrap style to indicate the next/previous slide. * * @property orderClassName * @private * @type string */ orderClassName: OrderClassName | null; /** * The current state of the current presentation, can be either "didTransition" * or "willTransit". * * @private * @property presentationState * @type { 'didTransition' | 'willTransit' | null } */ presentationState: PresentationState | null; /** * The class name to append to the previous control link element. * * @property prevControlClassName * @type string * @private */ /** * @private * @property shouldNotDoPresentation * @type boolean */ get shouldNotDoPresentation(): boolean; /** * @private * @property shouldRunAutomatically * @type boolean */ get shouldRunAutomatically(): boolean; /** * Starts automatic sliding on page load. * This parameter has no effect if interval is less than or equal to zero. * * @default false * @property autoPlay * @public * @type boolean */ get autoPlay(): boolean; /** * If false will hard stop on corners, i.e., first slide won't make a transition to the * last slide and vice versa. * * @default true * @property wrap * @public * @type boolean */ get wrap(): boolean; /** * Index of starting slide. * * @default 0 * @property index * @public * @type number */ get index(): number; /** * Waiting time before automatically show another slide. * Automatic sliding is canceled if interval is less than or equal to zero. * * @default 5000 * @property interval * @public * @type number */ get interval(): number; /** * Should bind keyboard events into sliding. * * @default true * @property keyboard * @public * @type boolean */ get keyboard(): boolean; /** * If automatic sliding should be left-to-right or right-to-left. * This parameter has no effect if interval is less than or equal to zero. * * @default true * @property ltr * @public * @type boolean */ get ltr(): boolean; /** * The next control icon to be displayed. * * @default null * @property nextControlIcon * @type string * @public */ /** * Label for screen readers, defaults to 'Next'. * * @default 'Next' * @property nextControlLabel * @type string * @public */ get nextControlLabel(): string; /** * Pauses automatic sliding if mouse cursor is hovering the component. * This parameter has no effect if interval is less than or equal to zero. * * @default true * @property pauseOnMouseEnter * @public * @type boolean */ get pauseOnMouseEnter(): boolean; /** * The previous control icon to be displayed. * * @default null * @property prevControlIcon * @type string * @public */ /** * Label for screen readers, defaults to 'Previous'. * * @default 'Previous' * @property prevControlLabel * @type string * @public */ get prevControlLabel(): string; /** * Show or hide controls. * * @default true * @property showControls * @public * @type boolean */ get showControls(): boolean; /** * Show or hide indicators. * * @default true * @property showIndicators * @public * @type boolean */ get showIndicators(): boolean; /** * The duration of the slide transition. * You should also change this parameter in Bootstrap CSS file. * * @default 600 * @property transitionDuration * @public * @type number */ get transitionDuration(): number; /** * The type slide transition to perform. * Options are 'fade' or 'slide'. Note: BS4 only * * @default 'slide' * @property transition * @public * @type string */ get transition(): TransitionType; get carouselFade(): boolean; /** * Action called after the slide has changed. * * @event onSlideChanged * @param toIndex * @public */ /** * Do a presentation and calls itself to perform a cycle. * * @method cycle * @this Carousel * @private */ cycle: Task<unknown, unknown[]>; /** * @method transitioner * @this Carousel * @private */ transitioner: Task<unknown, unknown[]>; /** * Waits an interval time to start a cycle. * * @method waitIntervalToInitCycle * @this Carousel * @private */ waitIntervalToInitCycle: Task<unknown, unknown[]>; toSlide(toIndex: number): void; toNextSlide(): void; toPrevSlide(): void; /** * Indicates what class names should be applicable to the current transition slides. * * @method assignClassNameControls * @private */ assignClassNameControls(toIndex: number): void; handleMouseEnter(): void; handleMouseLeave(): void; handleKeyDown(e: KeyboardEvent): void; /** * Sets the following slide index within the lower and upper bounds. * * @method setFollowingIndex * @private */ setFollowingIndex(toIndex: number): void; /** * Coordinates the correct slide movement direction. * * @method toAppropriateSlide * @private */ toAppropriateSlide(): void; registerChild(element: Component<any>): void; unregisterChild(element: Component<any>): void; } export {};