@edugouvfr/ngx-dsfr-ext
Version:
NgxDsfrExt est une extension au package @edugouvfr/ngx-dsfr (portage Angular des éléments DSFR)
107 lines (106 loc) • 4.97 kB
TypeScript
import { AfterViewInit, ElementRef, EventEmitter, OnDestroy, OnInit, TemplateRef } from '@angular/core';
import { DsfrSlide } from './carousel.model';
import * as i0 from "@angular/core";
export declare const DEFAULT_INTERVAL: number;
export declare class DsfrCarouselComponent implements OnInit, OnDestroy, AfterViewInit {
/** @internal */
slidesContainer: ElementRef;
/** @internal */
templateSlide: TemplateRef<any>;
/** Identifiant du champ, généré automatiquement par défaut. */
carouselId: string | undefined;
/** Attribut aria-label du composant */
ariaLabel: string | undefined;
/** Défilement automatique, faux par défaut */
autoplay: boolean;
/** Indique si le carrousel boucle ou non, vrai par défaut. */
circular: boolean;
interval: number;
/** Indique si le carrousel doit réagir aux événements du clavier, vrai par défaut. */
keyboard: boolean;
/** Tableau de slides. */
slides: DsfrSlide[];
/** Taille maximale du container de slides (optionnel) */
maxWidth: string;
/** Indique si le carrousel doit prendre en charge les interactions par balayage gauche/droite sur les appareils à écran tactile, vrai par défaut. */
touch: boolean;
/** Avec les contrôles de chaque côté des slides. */
withControls: boolean;
/** Avec des indicateurs d'avancement. */
withIndicators: boolean;
/** Avec des indicateurs d'avancement. */
inverse: boolean;
/** Afficher les indicateur et contrôles à l'intérieur de l'image */
withControlsInside: boolean;
/** Dans le cas de controlsInside à l'interieur, place les indicateur sur un fond noir en couleurs inversées */
reverseColorsIndicators: boolean;
/** Avec des labels. */
withCaptions: boolean;
/** Désactiver l'animation de transition */
disableTransition: boolean;
/** Au changement de slide, emission de l'index du slide actif */
carouselChange: EventEmitter<number>;
/** @internal Le carousel est en pause et ne restart que si l'utilisateur clique explicitement sur play */
onPause: boolean;
/** @internal */
transition: boolean;
private i18n;
/** Slide courant. */
private _current;
/** Id du timer */
private timeoutId;
/** Evénements touch */
private startPoint;
private renderer;
private transitionListener;
constructor();
/**
* @internal
* Duplique le premier et dernier slide pour l'effet de transition circulaire
*/
get visibleSlides(): DsfrSlide[];
get current(): number;
private set current(value);
ngOnInit(): void;
ngOnDestroy(): void;
ngAfterViewInit(): void;
/**
* Spécifique mobile
* @internal */
onTouchStart(event: TouchEvent): void;
/**
* Spécifique mobile
* @internal */
onTouchEnd(event: TouchEvent): void;
/** @internal */
onKeydown(event: KeyboardEvent): void;
/**
* Transition vers le slide précédent
* @internal */
previous(origin?: 'user' | 'timer'): void;
/**
* Transition vers le slide suivant
* @internal */
next(origin?: 'user' | 'timer'): void;
/** @internal */
togglePlayPause(): void;
/**
* @internal
* Lance le carousel si en autoplay et non explicitement sur pause
*/
startSlideshow(): void;
/**
* @internal
* Stoppe le carousel
*/
stopSlideshow(): void;
/** Effet de transition des slides */
private getTransform;
private toggleSlideshow;
/**
* Gestion de l'affichage avant le premier et apres le dernier slide en mode circulaire
*/
private handleFirstLastTransition;
static ɵfac: i0.ɵɵFactoryDeclaration<DsfrCarouselComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<DsfrCarouselComponent, "dsfrx-carousel, dsfr-ext-carousel", never, { "carouselId": { "alias": "carouselId"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "autoplay": { "alias": "autoplay"; "required": false; }; "circular": { "alias": "circular"; "required": false; }; "interval": { "alias": "interval"; "required": false; }; "keyboard": { "alias": "keyboard"; "required": false; }; "slides": { "alias": "slides"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "touch": { "alias": "touch"; "required": false; }; "withControls": { "alias": "withControls"; "required": false; }; "withIndicators": { "alias": "withIndicators"; "required": false; }; "inverse": { "alias": "inverse"; "required": false; }; "withControlsInside": { "alias": "withControlsInside"; "required": false; }; "reverseColorsIndicators": { "alias": "reverseColorsIndicators"; "required": false; }; "withCaptions": { "alias": "withCaptions"; "required": false; }; "disableTransition": { "alias": "disableTransition"; "required": false; }; }, { "carouselChange": "carouselChange"; }, ["templateSlide"], never, true, never>;
}