p-slides/components/deck.d.ts

Presentations made simple with Web Components

/**
 * The class corresponding to the `<p-deck>` element wrapper. You'll mostly have to interact with this to manage the
 * presentation.
 * @tag p-deck
 * @slot - Expected to contain `<p-slide>` elements only
 * @attribute {PresentationMode} mode - Presentation mode
 * @fires {PresentationFinishEvent} p-slides.finish - When reaching the end of the presentation
 * @fires {PresentationSlideChangeEvent} p-slides.slidechange - When the current slide changes
 * @fires {PresentationClockStartEvent} p-slides.clockstart - When the timer starts
 * @fires {PresentationClockStopEvent} p-slides.clockstop - When the timer stops
 * @fires {PresentationClockSetEvent} p-slides.clockset - When the timer has been explicitly set
 * @cssprop {<time>} [--fragment-duration=300ms] - Time for a fragment's transition
 * @cssprop {<integer>} [--grid-columns=4] - Number of columns in grid mode
 * @cssprop {<length>} [--grid-gap=0.25em] - Gap and external padding in grid mode
 * @cssprop [--grid-highlight-color=color-mix(in srgb, LinkText, transparent)] - Color for the outline of the highlighted slide in grid mode
 * @cssprop {<number>} [--slide-aspect-ratio=calc(16 / 9)] - Aspect ratio of the slides
 * @cssprop [--slide-font-size=5] - Size of the base presentation font in virtual units. Slides will be 100/(this value) `em`s large
 * @cssprop {<time>} [--sliding-duration=0s/0.5s] - Time for the transition between two slides: 0.5s if the user doesn't prefer reduced motion
 * @cssprop {<number>} [--speaker-next-scale=calc(2 / 3)] - Scale for the next slide compared to the whole area in speaker mode.
 * @csspart {<aside>} sidebar - Spearker mode's sidebar
 * @csspart {<header>} toolbar - Spearker mode's toolbar inside the sidenav
 * @csspart {<ul>} notelist - Container for the speaker notes
 * @csspart {<button>} control-button - Play, pause and clock reset button
 */
export class PresentationDeckElement extends HTMLElement {
    /**
     * Allows to define the location of one or more stylesheet, either as an URL (absolute or relative), or as raw CSS
     * code. You can mix URLs and CSS code as you wish. The logic for telling them apart is simple: if the
     * [`CSSStyleSheet`](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet) generated by the given string has
     * at least one rule, or if the string contains a newline character, it's considered a valid stylesheet; otherwise, it
     * attempts to load the stylesheet treating the given string as a URL.
     *
     * Set this property _before defining or instantiating_ a `<p-deck>` element.
     * @type {string | string[] | null}
     */
    static styles: string | string[] | null;
    /**
     * Deck commands mapped to their key bindings.
     * @type {Record<import('../declarations.js').KeyCommand, Array<Partial<KeyboardEvent>>>}
     */
    keyCommands: Record<import("../declarations.js").KeyCommand, Array<Partial<KeyboardEvent>>>;
    /**
     * Labels used in speaker mode for accessibility.
     * @type {Record<import('../declarations.js').PresentationDeckLabelName, import('../declarations.js').PresentationLabel<PresentationDeckElement>>}
     */
    labels: Record<import("../declarations.js").PresentationDeckLabelName, import("../declarations.js").PresentationLabel<PresentationDeckElement>>;
    set clock(value: number);
    /**
     * The amount of milliseconds on the timer.
     */
    get clock(): number;
    set currentIndex(index: number);
    /**
     * Getter/setter of index of the current slide.
     */
    get currentIndex(): number;
    set mode(mode: PresentationMode);
    /**
     * Getter/setter of current deck mode. It reflects the same named attribute value _if_ it's either `'presentation'` or
     * `'speaker'` (defaults to the former). Also sets it when assigning.
     *
     * Operatively speaking, changing the deck mode does _nothing_. Its only purpose is to apply a different style to the
     * presentation, i.e. either the 'normal' or the 'speaker' mode. If you provide your own stylesheet without a specific
     * style for the speaker mode then eh, you're on your own.
     * @type {PresentationMode}
     */
    get mode(): PresentationMode;
    set state(state: import("../declarations.js").PresentationState);
    /**
     * An object that represents the presentation's state. Although exposed, handle it with caution, as changes may not be
     * reflected on the view or a second window. Use the method `broadcastState()` to send an updated state to a second
     * view.
     * @type {import('../declarations.js').PresentationState}
     */
    get state(): import("../declarations.js").PresentationState;
    /** @internal */
    connectedCallback(): void;
    /** @internal */
    disconnectedCallback(): void;
    set currentSlide(nextSlide: import("./slide.js").PresentationSlideElement | null);
    /**
     * Getter/setter for the slide element marked as 'current'. When setting, it _must_ be a `<p-slide>` elements descendant
     * of the deck.
     */
    get currentSlide(): import("./slide.js").PresentationSlideElement | null;
    get slideSizes(): {
        width: number;
        height: number;
    };
    /**
     * At the moment, it's just a `querySelectorAll('p-slide')` executed on the deck's host element.
     */
    get slides(): NodeListOf<import("./slide.js").PresentationSlideElement>;
    /**
     * It's `true` if and only if the presentation is at the start.
     */
    get atStart(): boolean;
    /**
     * It's `true` if and only if the presentation is at the end.
     */
    get atEnd(): boolean;
    /**
     * Advances the presentation, either by showing a new fragment on the current slide, or switching to the next slide.
     */
    next(): void;
    /**
     * Brings the presentation back, either by hiding the last shown fragment on the current slide, or switching to the
     * previous slide.
     */
    previous(): void;
    /**
     * Advances the presentation to the next slide, if possible.
     */
    nextSlide(): void;
    /**
     * Brings the presentation back to the previous slide, if possible.
     */
    previousSlide(): void;
    /**
     * Starts the timer.
     */
    startClock(): void;
    /**
     * Stops the timer.
     */
    stopClock(): void;
    /**
     * Toggles the timer.
     */
    toggleClock(): void;
    /**
     * It's `true` if and only if the timer is not paused.
     */
    get isClockRunning(): boolean;
    /**
     * Sends the current presentation's state to other windows/tabs open on the presentation.
     */
    broadcastState(): void;
    /**
     * Retrieves the presentation's state from other windows/tabs open on the presentation.
     */
    requestState(): void;
    #private;
}
export type PresentationSlideElement = import("./slide.js").PresentationSlideElement;
export type PresentationSlideChangeEvent = import("../declarations.js").PresentationSlideChangeEvent;
export type PresentationFinishEvent = import("../declarations.js").PresentationFinishEvent;
export type PresentationClockStartEvent = import("../declarations.js").PresentationClockStartEvent;
export type PresentationClockStopEvent = import("../declarations.js").PresentationClockStopEvent;
export type PresentationClockSetEvent = import("../declarations.js").PresentationClockSetEvent;
export type PresentationMode = (typeof MODES)[number];
/** @typedef {import('./slide.js').PresentationSlideElement} PresentationSlideElement */
/** @typedef {import('../declarations.js').PresentationSlideChangeEvent} PresentationSlideChangeEvent */
/** @typedef {import('../declarations.js').PresentationFinishEvent} PresentationFinishEvent */
/** @typedef {import('../declarations.js').PresentationClockStartEvent} PresentationClockStartEvent */
/** @typedef {import('../declarations.js').PresentationClockStopEvent} PresentationClockStopEvent */
/** @typedef {import('../declarations.js').PresentationClockSetEvent} PresentationClockSetEvent */
declare const MODES: readonly ["presentation", "speaker", "grid"];
export {};