import { type IEventDetail, type IEventEmitter } from '@breadstone/mosaik-elements'; import { OverlayElement } from '../Abstracts/OverlayElement'; import type { ITourElementProps } from './ITourElementProps'; import type { ITourStep } from './ITourStep'; import type { ITourStepChangedEventDetail } from './ITourStepChangedEventDetail'; declare const TourElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & typeof OverlayElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * Tour - Guides users through a sequence of steps anchored to UI elements. * * @description * Manages an ordered collection of tour steps and overlays step tooltips onto * the corresponding `mosaik-tour-anchor` elements. The `tour-id` must match * the `tour-id` used on the associated `mosaik-tour-anchor` elements. * The `steps` array must be set via JavaScript. * * @name Tour * @element mosaik-tour * @category Overlays * * @csspart backdrop - The backdrop part. * @csspart tooltip - The tooltip part. * * @cssprop {String} --tour-font-family - The font family CSS custom property. * @cssprop {String} --tour-font-letter-spacing - The font letter spacing CSS custom property. * @cssprop {String} --tour-font-line-height - The font line height CSS custom property. * @cssprop {String} --tour-font-size - The font size CSS custom property. * @cssprop {String} --tour-font-text-decoration - The font text decoration CSS custom property. * @cssprop {String} --tour-font-text-transform - The font text transform CSS custom property. * @cssprop {String} --tour-font-weight - The font weight CSS custom property. * @cssprop {String} --tour-gap - The gap CSS custom property. * @cssprop {String} --tour-overlay-zindex - The overlay zindex CSS custom property. * @cssprop {String} --tour-padding-bottom - The padding bottom CSS custom property. * @cssprop {String} --tour-padding-left - The padding left CSS custom property. * @cssprop {String} --tour-padding-right - The padding right CSS custom property. * @cssprop {String} --tour-padding-top - The padding top CSS custom property. * @cssprop {String} --tour-shadow - The shadow CSS custom property. * @cssprop {String} --tour-shadow-blur - The shadow blur CSS custom property. * @cssprop {String} --tour-shadow-color - The shadow color CSS custom property. * @cssprop {String} --tour-shadow-offset-x - The shadow offset x CSS custom property. * @cssprop {String} --tour-shadow-offset-y - The shadow offset y CSS custom property. * @cssprop {String} --tour-shadow-spread - The shadow spread CSS custom property. * @cssprop {String} --tour-tooltip-max-width - The tooltip max width CSS custom property. * @cssprop {String} --tour-transition-duration - The transition duration CSS custom property. * @cssprop {String} --tour-transition-mode - The transition mode CSS custom property. * @cssprop {String} --tour-transition-property - The transition property CSS custom property. * @cssprop {String} --tour-translate - The translate CSS custom property. * * @dependency mosaik-backdrop - The Backdrop element. * @dependency mosaik-tour-step - The Tour Step element. * * @example * Basic tour identified by tour-id: * ```html * * ``` * * @public */ export declare class TourElement extends TourElement_base implements ITourElementProps { private static readonly POSITION_OFFSET; private static readonly VIEWPORT_PADDING; private readonly _registryController; private readonly _started; private readonly _ended; private readonly _stepChanged; private readonly _boundHandleViewportChange; private _steps; private _currentStepIndex; private _tourId; private _tooltipStyles; private _positionFrameId; /** * @public */ constructor(); /** * Returns the `is` property. * * @public * @static * @readonly */ static get is(): string; /** * Gets or sets the `tourId` property. * * @public * @attr */ get tourId(): string; set tourId(value: string); /** * Gets or sets the tour steps. * * @public */ get steps(): Array; set steps(value: Array); /** * Gets the current step. * * @public * @readonly */ get currentStep(): ITourStep | null; /** * Indicates whether the current step is the first step. * * @public * @readonly */ get isFirstStep(): boolean; /** * Indicates whether the current step is the last step. * * @public * @readonly */ get isLastStep(): boolean; /** * Gets the tooltip styles used for positioning. * * @public * @readonly */ get tooltipStyles(): Record; /** * Fired when the tour is started. * * @public * @readonly * @eventProperty */ get started(): IEventEmitter; /** * Fired when the tour is ended. * * @public * @readonly * @eventProperty */ get ended(): IEventEmitter; /** * Fired when the tour step changes. * * @public * @readonly * @eventProperty */ get stepChanged(): IEventEmitter; /** * Starts the tour from the first step. * * @public */ start(): void; /** * Moves to the next step in the tour. * * @public */ next(): void; /** * Moves to the previous step in the tour. * * @public */ previous(): void; /** * Ends the tour and closes the overlay. * * @public */ finish(): void; /** * Skips the current tour. * * @public */ skip(): void; /** * Shows the specified step by its identifier. * * @public */ showStep(stepId: string): void; /** * @public * @override */ disconnectedCallback(): void; /** * Handles backdrop clicks. * * @public */ onBackdropClicked(event: MouseEvent): void; /** * @protected * @override */ protected onIsOpenChanged(previousValue: boolean, newValue: boolean): void; /** * @private */ private readonly _tooltipElement; /** * Updates the current step index and emits events. * * @private */ private setCurrentStepIndex; /** * Emits the step changed event. * * @private */ private emitStepChanged; /** * Adds listeners needed to keep the tooltip positioned. * * @private */ private addViewportListeners; /** * Removes listeners used for tooltip positioning. * * @private */ private removeViewportListeners; /** * Schedules a tooltip position update. * * @private */ private schedulePositionUpdate; /** * Updates the tooltip position based on the current step. * * @private */ private updateTooltipPosition; /** * Resolves the tooltip position for a given placement. * * @private */ private resolveTooltipPosition; } /** * @public */ export declare namespace TourElement { type Props = ITourElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-tour': TourElement; } } export {}; //# sourceMappingURL=TourElement.d.ts.map