import * as i0 from '@angular/core';
import { AfterViewInit, OnDestroy, ElementRef, Type, OnInit, EventEmitter, WritableSignal, Provider } from '@angular/core';
import { Observable, OperatorFunction } from 'rxjs';
import { NavigationExtras } from '@angular/router';

/**
 * A directive to mark elements in the DOM to be highlighted during a tour
 */
declare class NgxTourItemDirective implements AfterViewInit, OnDestroy {
    readonly elementRef: ElementRef<HTMLElement>;
    private readonly tourService;
    private readonly cdRef;
    /**
     * A class added to the currently active item
     */
    isActive: boolean;
    /**
     * The id of the item that corresponds with the step
     */
    tourItem: string;
    /**
     * Mark an element as active or inactive
     *
     * @param isActive - Whether or not the element should be active
     */
    setActive(isActive: boolean): void;
    /**
     * Returns the id of the element. Uses for the `aria-details` on the tour-item component
     */
    get elementId(): string;
    ngAfterViewInit(): void;
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<NgxTourItemDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxTourItemDirective, "[tourItem]", never, { "tourItem": { "alias": "tourItem"; "required": false; }; }, {}, never, never, true, never>;
}

type NgxTourDirection = 'next' | 'back';
type NgxTourInteraction = NgxTourDirection | 'close';
type NgxTourStepPosition = 'above' | 'below' | 'right' | 'left';
type NgxTourRegistrationEvent = {
    tourItem: string;
    element?: NgxTourItemDirective;
    type: 'register' | 'unregister';
};
interface NgxTourRouteOptions {
    route: string[];
    extras: NavigationExtras;
}
interface NgxTourBackdropClipEvent {
    backdrop: HTMLElement;
    cutoutMargin: number;
    item?: HTMLElement;
}
type NgxTourAction = (step: NgxTourStep, index: number) => void | Observable<unknown>;
interface NgxTourStep<DataType = any> {
    /**
     * The title we wish to display on the step.
     */
    title: string;
    /**
     * The content we wish to display on the step.
     */
    content: string;
    /**
     * Optional corresponding id of the element we wish to highlight. This is the string we pass to the `tourItem` directive.
     */
    tourItem?: string;
    /**
     * Optional position where we wish to render the tour step.
     *
     * By default, this is `below`.
     */
    position?: NgxTourStepPosition;
    /**
     * Optional extra data we wish to provide to the step
     */
    data?: DataType;
    /**
     * An optional amount of time we want to wait before showing the next step.
     *
     * By default this is 100 ms.
     */
    delay?: number;
    /**
     * An optional function that will be run right before a step becomes visible.
     */
    beforeVisible?: NgxTourAction;
    /**
     * An optional function that will be run right when a step becomes visible.
     */
    onVisible?: NgxTourAction;
    /**
     * An optional function that will be run when a step is no longer visible
     */
    afterVisible?: NgxTourAction;
    /**
     * An optional component to replace the default provided component within the tour step configuration.
     */
    component?: Type<NgxTourStepComponent>;
    /**
     * Whether we want to disable the backdrop
     */
    disableBackDrop?: boolean;
    /**
     * An optional padding we can set for the cutout around an element. By default, this is set to 5px.
     * This will add some additional whitespace **within** the cutout.
     *
     * This is not the same as the `offset`, which is the whitespace **around** the highlighted element.
     */
    cutoutMargin?: number;
    /**
     * An optional class we can attach to the step
     */
    stepClass?: string;
    /**
     * Allow the highlighted element to have additional whitespace **around** the cutout on the y-axis.
     * This is useful when the highlighted element is under a header or a footer.
     *
     * Even though it is possible to provide both a `top` and `bottom` offset, only one will be taken into
     * account. If the vertical center of the cutout is closer to the top, the `top` offset will be used. If
     * the vertical center of the cutout is closer to the bottom, the `bottom` offset will be used.
     *
     * Negative values are allowed. The step(card) will always be displayed within the viewport, even if
     * the offset makes the cutout go out of the viewport.
     *
     * This is not the same as the `cutoutMargin`, which is the whitespace **within** the highlighted element.
     */
    offset?: NgxTourStepOffset;
}
type NgxTourStepOffset = {
    top?: number;
    bottom?: number;
};

/**
 * The token type for the tour provider
 */
type NgxTourTokenType = Type<NgxTourStepComponent> | NgxTourTokenConfiguration;
/**
 * The configuration object to be passed as token to the tour provider
 */
interface NgxTourTokenConfiguration {
    /**
     * The component to be used as the tour step.
     */
    component: Type<NgxTourStepComponent>;
    /**
     * Allow the highlighted element to have additional whitespace **around** the cutout on the y-axis.
     * This is useful when the highlighted element is under a header or a footer.
     *
     * Even though it is possible to provide both a `top` and `bottom` offset, only one will be taken into
     * account. If the vertical center of the cutout is closer to the top, the `top` offset will be used. If
     * the vertical center of the cutout is closer to the bottom, the `bottom` offset will be used.
     *
     * Negative values are allowed. The step(card) will always be displayed within the viewport, even if
     * the offset makes the cutout go out of the viewport.
     *
     * This is not the same as the `cutoutMargin`, which is the whitespace **within** the highlighted element.
     *
     * @inheritdoc NgxTourStep.offset
     */
    offset: NgxTourStepOffset;
}

/**
 * A singleton service used to run help tours through an application.
 */
declare class NgxTourService implements OnDestroy {
    private readonly cdkOverlayService;
    private readonly windowService;
    private readonly configuration;
    /**
     * A subject to hold the destroyed event
     */
    private readonly destroyedSubject;
    /**
     * A subject to hold the window resize event
     */
    private readonly windowResizeSubject;
    /**
     * A subject to hold the backdrop clip event
     */
    private readonly backdropClipEventSubject;
    /**
     * A record of registered step elements we wish to highlight
     */
    private elements;
    /**
     * Property to hold the current body overflow behavior
     */
    private bodyOverflow;
    /**
     * A record of positions to place the
     */
    private readonly positionMap;
    /**
     * The currently active overlay
     */
    private overlayRef;
    /**
     * The amount of steps of the current tour
     */
    private amountOfSteps;
    /**
     * The current direction we're moving the tour in
     */
    private currentDirection;
    /**
     * The currently active step in the tour as a subject
     */
    private readonly currentStepSubject;
    /**
     * The previously active step in the tour as a subject
     */
    private readonly previousStepSubject;
    /**
     * The index of the current step of the tour as a subject
     */
    private readonly currentIndexSubject;
    /**
     * Whether the tour has started as a subject
     */
    private readonly tourStartedSubject;
    /**
     * Whether the tour has ended as a subject
     */
    private readonly tourEndedSubject;
    /**
     * The currently active tour as a subject
     */
    private readonly currentTourSubject;
    /**
     * A subject to hold the registration events
     */
    private readonly registerElementSubject;
    /**
     * The start scroll position of the page
     */
    private startingScrollPosition;
    /**
     * The currently active tour
     */
    readonly currentTour$: Observable<NgxTourStep[]>;
    /**
     * The currently active step
     */
    readonly currentStep$: Observable<NgxTourStep>;
    /**
     * The currently active index
     */
    readonly currentIndex$: Observable<number>;
    /**
     * The previously active step
     */
    readonly previousStep$: Observable<NgxTourStep>;
    /**
     * Whether the tour has ended
     */
    readonly tourEnded$: Observable<void>;
    /**
     * Whether the tour has started
     */
    readonly tourStarted$: Observable<void>;
    /**
     * Whether the tour is active
     */
    readonly tourActive$: Observable<boolean>;
    constructor();
    /**
     * Start a provided tour
     *
     * @param tour - The tour we wish to start
     * @param onClose - An optional on close function we wish to run
     * @param startIndex - An optional index we wish to start the tour from , default this is 0
     */
    startTour(tour: NgxTourStep[], onClose?: NgxTourAction, startIndex?: number): Observable<void>;
    /**
     * Registers a template element so it can be highlighted
     *
     * @param element - The highlighted element
     */
    registerElement(element: NgxTourItemDirective): void;
    /**
     * Removes an element from the record
     *
     * @param tourItem - The id of the element
     */
    unregisterElement(tourItem: string): void;
    /**
     * Closes the currently running tour
     */
    closeTour(): Observable<NgxTourInteraction>;
    ngOnDestroy(): void;
    /**
     * Sets a provided step in the tour
     *
     * @param currentStep - The provided step we want to set
     */
    private setStep;
    /**
     * Handles the next action in the tour
     *
     * @param direction - The direction we wish to move in
     */
    private handleNext;
    /**
     * Visualizes the current step
     *
     * @private
     * @param currentStep - The step we wish to visualize
     * @param item - The item we wish to highlight
     */
    private visualizeStep;
    /**
     * Handles the interactions with a step
     *
     * @param  currentStep - The provided step
     * @param  item - An optional item
     */
    private handleStepInteractions;
    /**
     * Returns an observable based on whether a step function was provided
     *
     * @param stepFunction - The provided step function
     */
    private runStepFunction;
    /**
     * Surrounds the provided item with a cutout in the backdrop
     *
     * @private
     * @param event.backdrop - The provided backdrop
     * @param event.item - The item we wish to surround
     * @param event.cutoutMargin - The amount of margin we want around the item
     */
    private setClipPath;
    /**
     * Handles the registration event
     *
     * @param event - The registration event we wish to handle
     */
    private handleRegistrationEvent;
    /**
     * Returns the provided cutoutMargin of a step, or 5px if none is provided
     *
     * @param step - The current step
     */
    private getCutoutMargin;
    /**
     * Sets or removes the body class to indicate the tour is active
     */
    private handleBodyClass;
    static ɵfac: i0.ɵɵFactoryDeclaration<NgxTourService, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<NgxTourService>;
}

/**
 * An abstract class that defines the minimum properties needed for the step component to be rendered
 */
declare abstract class NgxTourStepComponent<DataType = any> implements OnInit, AfterViewInit {
    private readonly tourService;
    /**
     * Close the tour on escape pressed
     */
    protected onEscape(): void;
    /**
     * The ngx-tour-step class of the component
     */
    protected rootClass: string;
    /**
     * The id of the element that the tour-step describes
     */
    elementId: string;
    /**
     * The element of the tour-step that is seen as the title
     */
    titleElement: ElementRef<HTMLElement>;
    /**
     * The position of the step
     */
    position: NgxTourStepPosition | undefined;
    /**
     * The title of the step
     */
    title: string;
    /**
     * The content of the step
     */
    content: string;
    /**
     * The index of the step
     */
    currentStep: number;
    /**
     * The total amount of steps
     */
    amountOfSteps: number;
    /**
     * Optional data we wish to use in a step
     */
    data: DataType;
    /**
     * A custom step class we can set
     */
    stepClass: string;
    /**
     * Emits the possible interactions with a step
     */
    handleInteraction: EventEmitter<NgxTourInteraction>;
    /**
     * The aria-labelledby id of the title element
     */
    protected titleId: WritableSignal<string>;
    ngOnInit(): void;
    ngAfterViewInit(): void;
    constructor(tourService: NgxTourService);
    static ɵfac: i0.ɵɵFactoryDeclaration<NgxTourStepComponent<any>, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxTourStepComponent<any>, never, never, { "elementId": { "alias": "elementId"; "required": true; }; "position": { "alias": "position"; "required": true; }; "title": { "alias": "title"; "required": true; }; "content": { "alias": "content"; "required": true; }; "currentStep": { "alias": "currentStep"; "required": true; }; "amountOfSteps": { "alias": "amountOfSteps"; "required": true; }; "data": { "alias": "data"; "required": false; }; "stepClass": { "alias": "stepClass"; "required": false; }; }, { "handleInteraction": "handleInteraction"; }, never, never, false, never>;
}

/**
 * Provides the configuration for the NgxDisplayContent directive. This can be either just
 * the component or the component and the offset. More information can be found in the
 * documentation of the `NgxTourStep`.
 *
 * @param configuration - The required configuration
 */
declare const provideNgxTourConfiguration: (configuration: NgxTourTokenType) => Provider;

/**
 * An operator to map the data of an Observable to mock data when the NgxTourService has an active tour.
 *
 * *Important*: This operator only works within an injection context
 *
 * @param mockData - The mock data we wish to use when the tour is active
 */
declare const useMockDataDuringTour: <ValueType>(mockData: ValueType) => OperatorFunction<ValueType, ValueType>;

export { NgxTourItemDirective, NgxTourService, NgxTourStepComponent, provideNgxTourConfiguration, useMockDataDuringTour };
export type { NgxTourAction, NgxTourBackdropClipEvent, NgxTourDirection, NgxTourInteraction, NgxTourRegistrationEvent, NgxTourRouteOptions, NgxTourStep, NgxTourStepOffset, NgxTourStepPosition, NgxTourTokenConfiguration, NgxTourTokenType };