import * as _angular_core from '@angular/core';
import { AfterViewInit } from '@angular/core';
import { TWorkspaceWidth } from '@talenra/ngx-base/app-layout';

/**
 * Progress Step represents a single step within a Progress Stepper Body context. It acts as a wrapper for the step's
 * content and provides a set of properties to control its state and role (e.g. `isDisabled`, `isRequired` or
 * `isValid`).
 *
 * ```html
 * <talenra-progress-stepper-body>
 *   <talenra-progress-step>...</talenra-progress-step>
 *   <talenra-progress-step>...</talenra-progress-step>
 *   <talenra-progress-step>...</talenra-progress-step>
 * </talenra-progress-stepper-body>
 * ```
 *
 * ### Import
 *
 * ```typescript
 * import { ProgressStepComponent } from '@talenra/ngx-base/progress-stepper';
 * ```
 *
 * @see {@link ProgressStepperBodyComponent}
 * @see {@link ProgressStepState}
 *
 * @experimental
 */
declare class ProgressStepComponent {
    /**
     * Title displayed in step header
     *
     * ```html
     * <talenra-progress-step title="My step's title">...</talenra-progress-step>
     * ```
     */
    readonly title: _angular_core.ModelSignal<string>;
    /**
     * Determines whether the step is considered valid. Defaults to `true`. If a step is required and invalid, it cannot
     * be skipped.
     *
     * ```html
     * <talenra-progress-step [isValid]="myCondition">...</talenra-progress-step>
     * ```
     */
    readonly isValid: _angular_core.ModelSignal<boolean>;
    /**
     * Determines whether the step is required. Defaults to `true`. Required steps cannot be skipped.
     *
     * ```html
     * <talenra-progress-step [isRequired]="myCondition">...</talenra-progress-step>
     * ```
     */
    readonly isRequired: _angular_core.ModelSignal<boolean>;
    /**
     * Determines whether the step is disabled. Defaults to `false`. Disabled steps cannot be selected.
     *
     * ```html
     * <talenra-progress-step [isDisabled]="myCondition">...</talenra-progress-step>
     * ```
     */
    readonly isDisabled: _angular_core.ModelSignal<boolean>;
    /**
     * Index of this ProgressStep. Steps appear in the order of their indexes within Progress Stepper.
     *
     * @internal
     */
    readonly index: _angular_core.WritableSignal<number | undefined>;
    /** Whether this step is currently selected */
    protected readonly isSelected: _angular_core.Signal<boolean>;
    private readonly service;
    /** Reference to the div element containing the step content. Used to track content height. */
    private readonly stepContainer;
    /** Resize observer to track content height. Updates height property whenever dimension of step container changes */
    private observer;
    /**
     * Height of the step's content in px. For performance reasons only updated while selected. Hidden from API docs as
     * step height should be accessed via `ProgressStepperService` which exposes the height of the selected step.
     *
     * @internal
     */
    readonly height: _angular_core.WritableSignal<number>;
    /** @internal */
    constructor();
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ProgressStepComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ProgressStepComponent, "talenra-progress-step", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "isValid": { "alias": "isValid"; "required": false; "isSignal": true; }; "isRequired": { "alias": "isRequired"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; }, { "title": "titleChange"; "isValid": "isValidChange"; "isRequired": "isRequiredChange"; "isDisabled": "isDisabledChange"; }, never, ["*"], true, never>;
}

/**
 * ProgressStepperService allows to control ProgressStepper programmatically. It provides logic to navigate between
 * steps, get ProgressStepper's current state and can be used to access its steps.
 *
 * ### Usage
 *
 * In your app, provide a service instance for each ProgressStepper instance.
 *
 * ```typescript
 * @Component({
 *   selector: 'app-my-component',
 *   providers: [{ provide: ProgressStepperService, useClass: ProgressStepperService }],
 * })
 * ```
 *
 * To control ProgressStepper, consume the service in your app.
 *
 * ```typescript
 * private service: ProgressStepperService = inject(ProgressStepperService);
 * console.log(`Currently selected step is at index ${this.service.selectedIndex()}.`);
 * ```
 *
 * ### Import
 *
 * ```typescript
 * import { ProgressStepperService } from '@talenra/ngx-base/progress-stepper';
 * ```
 *
 * @see {@link ProgressStepperBodyComponent}
 *
 * @experimental
 */
declare class ProgressStepperService {
    /** Index fo the currently selected step, internal use only */
    private readonly _selectedIndex;
    /**
     * Index of the currently selected step
     *
     * ```typescript
     * private service: ProgressStepperService = inject(ProgressStepperService);
     * console.log(`Currently selected step is at index ${this.service.selectedIndex()}.`);
     * ```
     */
    readonly selectedIndex: _angular_core.Signal<number>;
    /** Array holding references of all ProgressSteps in order of appearance, internal use only */
    private readonly _steps;
    /**
     * Array holding references of all ProgressSteps in order of appearance
     *
     * ```typescript
     * private service: ProgressStepperService = inject(ProgressStepperService);
     * console.log(`ProgressStepper contains ${this.service.steps().length} steps.`);
     * ```
     */
    readonly steps: _angular_core.Signal<ProgressStepComponent[]>;
    /**
     * Set references to ProgressSteps. Hidden from API docs as this is handled by ProgressStepperBodyComponent exclusively.
     *
     * @internal
     */
    setSteps(steps: ProgressStepComponent[]): void;
    /** Reference to the currently selected step */
    private readonly currentStep;
    /**
     * Retruns the step at the given index or null.
     *
     * ```typescript
     * private service: ProgressStepperService = inject(ProgressStepperService);
     * console.log(`Step at index 2 is ${this.service.getStep(2)?.title()}.`);
     * ```
     */
    getStepAt(index: number): ProgressStepComponent | null;
    /**
     * Cache the most recent step-height received so we can return it instead of `0` in case the current step is not
     * ready yet.
     */
    private cachedContentHeight;
    /**
     * The content height of the currently selected step in px. Returns initially and only initially `null` to prevent
     * unwanted reflows/transitions.
     *
     * ```typescript
     * private service: ProgressStepperService = inject(ProgressStepperService);
     * console.log(`Content height of the current step is ${this.service.contentHeight}px.`);
     * ```
     */
    readonly contentHeight: _angular_core.Signal<number | null>;
    /**
     * Check whether we can proceed to a given step index. Returns `true` if the given index is whithin boundaries and
     * all previous steps are valid or optional.
     *
     * ```typescript
     * private service: ProgressStepperService = inject(ProgressStepperService);
     * console.log(`We ${this.service.canSkipTo(2) ? 'can' : 'cannot'} skip to step at index 2.`);
     * ```
     */
    canSkipTo(index: number): boolean;
    /**
     * Skip to the step at the given index. Returns the index of the selected step after navigation.
     *
     * ```typescript
     * private service: ProgressStepperService = inject(ProgressStepperService);
     * console.log(`Switched to step at index ${this.service.skipTo(2)}.`);
     * ```
     */
    skipTo(index: number): number;
    /**
     * Switch to the previous step if available. Returns the index of the selected step after navigation.
     *
     * ```typescript
     * private service: ProgressStepperService = inject(ProgressStepperService);
     * console.log(`Switched to step at index ${this.service.previous()}.`);
     * ```
     */
    previous(): number;
    /**
     * Switch to the next step if available. Returns the index of the selected step after navigation.
     *
     * ```typescript
     * private service: ProgressStepperService = inject(ProgressStepperService);
     * console.log(`Switched to step at index ${this.service.next()}.`);
     * ```
     */
    next(): number;
    /**
     * Determines whether step numbers are displayed in Progress Stepper's header.
     *
     * ```typescript
     * private service: ProgressStepperService = inject(ProgressStepperService);
     * private toggleStepNumbers(): void {
     *   this.service.showStepNumbers.update((value: boolean) => !value);
     * }
     * ```
     */
    readonly showStepNumbers: _angular_core.WritableSignal<boolean>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ProgressStepperService, never>;
    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ProgressStepperService>;
}

/**
 * ProgressStep state
 *
 * ### Import
 *
 * ```typescript
 * import { ProgressStepState } from '@talenra/ngx-base/progress-stepper';
 * ```
 *
 * @see {@link ProgressStepComponent}
 */
declare const ProgressStepState: {
    readonly Completed: "completed";
    readonly Disabled: "disabled";
    readonly Pending: "pending";
    readonly Selected: "selected";
};
/**
 * Type of ProgressStep state
 *
 * ### Import
 *
 * ```typescript
 * import { TProgressStepState } from '@talenra/ngx-base/progress-stepper';
 * ```
 *
 * @see {@link ProgressStepComponent}
 */
type TProgressStepState = (typeof ProgressStepState)[keyof typeof ProgressStepState];

/**
 * Progress Stepper Header displays the current progress and allows users to navigate through the steps.
 *
 * @see {@link ProgressStepperBodyComponent}
 *
 * @experimental
 */
declare class ProgressStepperHeaderComponent implements AfterViewInit {
    /** Reference to element used as scroll mask in header. Use to scroll horizontally using buttons. */
    private readonly headerScroll;
    /** Reference to element wrapping items in header (full scroll width). Used to determine scroll distance. */
    private readonly headerItems;
    /** Determines whether left stepper is enabled */
    protected readonly canScrollLeft: _angular_core.WritableSignal<boolean>;
    /** Determines wheter right stepper is enabled */
    protected readonly canScrollRight: _angular_core.WritableSignal<boolean>;
    /** Progress Stepper Service reference */
    protected readonly service: ProgressStepperService;
    /** Destroy reference */
    private readonly destroyRef;
    /**
     * Returns the state of the step at a given index based on `selectedIndex` and step's disabled state.
     *
     * - Disabled steps are considered disabled, regardless of other states
     * - Steps < index are considered completed
     * - Step at index is considered selected
     * - Steps > index are considered pending
     */
    protected getStateOf(index: number): TProgressStepState;
    /** @internal */
    constructor();
    /** @internal */
    ngAfterViewInit(): void;
    /** Scroll header by one item in given direction */
    protected scrollHeader(direction: 'left' | 'right'): void;
    /**
     * Calculate whether scroll buttons are enabled. Invoke if you need to update stepper state manually (e.g. when
     * changing the containers width).
     */
    updateScrollButtonsState(): void;
    /** Updates the header's scroll position to keep the selected step in visible area. */
    private keepSelectedStepInView;
    /** Calculates whether the selected StepHeader is considered fully visible */
    private isChildFullyVisible;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ProgressStepperHeaderComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ProgressStepperHeaderComponent, "talenra-progress-stepper-header", never, {}, {}, never, never, true, never>;
}

/**
 * Progress Stepper Page Layout is a pre-built layout component that provides a full-page layout for Progress Stepper.
 * It is typically used in an Overlay context. It implements Workspace Simple (horizontal layout) and Content Layout
 * (vertical layout) with projection slots for a Workspace Header and a sticky Progress Stepper Footer Additionally it
 * provides a sticky Progress Stepper Header.
 *
 * ## Layout
 *
 * This layout component acts as a wrapper for Progress Stepper's sections. Here's a breakdown of the layout structure.
 *
 * ```html
 * <talenra-progress-stepper-page-layout>
 *   <talenra-workspace-header />
 *   <talenra-progress-stepper-body>
 *     <talenra-progress-stepper-banner>...</talenra-progress-stepper-banner>
 *     <talenra-progress-step>...</talenra-progress-step>
 *     <talenra-progress-step>...</talenra-progress-step>
 *     <talenra-progress-step>...</talenra-progress-step>
 *   </talenra-progress-stepper-body>
 *  <talenra-progress-stepper-footer>...</talenra-progress-stepper-footer>
 * </talenra-progress-stepper-page-layout>
 * ```
 *
 * @see {@link ProgressStepperBodyComponent}
 * @see {@link OverlayService}
 *
 * @experimental
 */
declare class ProgressStepperPageLayoutComponent {
    /**
     * Determines the width of the layout. Defaults to `WorkspaceWidth.L`.
     *
     * ```html
     * <talenra-progress-stepper-layout workspaceWidth="M">
     * ```
     *
     * @see {@link WorkspaceWidth}
     */
    readonly workspaceWidth: _angular_core.InputSignal<TWorkspaceWidth>;
    /** Reference to ProgressStepperHeader instance */
    protected readonly stepperHeader: _angular_core.Signal<ProgressStepperHeaderComponent | undefined>;
    /** Content Layout Service reference */
    private contentLayoutService;
    /** Progress Stepper Service reference */
    private progressStepperService;
    /** Destroy reference */
    private destroyRef;
    /** @internal */
    constructor();
    /** Scroll stepper content to top when navigating through steps */
    private scrollToTop;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ProgressStepperPageLayoutComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ProgressStepperPageLayoutComponent, "talenra-progress-stepper-page-layout", never, { "workspaceWidth": { "alias": "workspaceWidth"; "required": false; "isSignal": true; }; }, {}, never, ["talenra-workspace-header", "*", "talenra-progress-stepper-footer"], true, never>;
}

/**
 * Progress Stepper leads the user through a multi-step process. Each step is represented by a Progress Step. It is
 * controlled programmatically by `ProgressStepperService`.
 *
 * ## Layout
 *
 * The Progress Stepper's layout can be defined by the consuming app. Common layouts are provided by the library to
 * speed up development and to ensure consistency accross different apps. Currently the library provides a full-page
 * layout (`ProgressStepperPageLayoutComponent`) which is typically used in an Overlay context.
 *
 * The full-featured Progress Stepper is composed of the three main sections: header, body, and footer.
 *
 * ### Header
 *
 * The header, placed at the top, lists all steps. Beside displaying the current progress, it allows the user to
 * navigate to any step. User navigation is limited by validation which prevents skipping steps which are required but
 * not yet completed (valid). Navigation to disabled steps is also prevented.
 *
 * ### Body
 *
 * The body section wraps the different steps, which represent the stepper's content. Optionally the app can display a
 * banner which is displayed persistently accross all steps. The banner's content is provided by the app and wrapped by
 * a Progress Stepper Banner component. It might contain dynamic content.
 *
 * A single step's content is wrapped with a Progress Step component which offers input properties to control state
 * (`isValid`, `isRequired`, `isDisabled`).These properties are updated by the consuming app. Required steps cannot be
 * skipped by the user unless they are completed (valid). By default Progress Steps are considered required and valid.
 * This means the user can navigate through the steps in any order unless the app sets steps invalid.
 *
 * ### Footer
 *
 * The footer is a fixed section at the bottom. It typically contains action buttons to navigate to the next or previous
 * step. Navigation is typically based on Progress Stepper Service logic.
 *
 * ```html
 * <talenra-progress-stepper-header />
 * <talenra-progress-stepper-body>
 *   <talenra-progress-steper-banner>...</talenra-progress-stepper-banner>
 *   <talenra-progress-step>...</talenra-progress-step>
 *   <talenra-progress-step>...</talenra-progress-step>
 *   <talenra-progress-step>...</talenra-progress-step>
 * </talenra-progress-stepper-body>
 * <talenra-progress-stepper-footer>...</talenra-progress-stepper-footer>
 * ```
 *
 * ## Progress Stepper Service
 *
 * Progress Stepper Service is used to control the Progress Stepper (e.g. to navigate to the next or previous step or to
 * set the state (enabled/disabled) of the navigation buttons in the footer).
 *
 * ```typescript
 * // Component class:
 * // Provide a ProgressStepperService instance
 * @Component({
 *   providers: [{ provide: ProgressStepperService, useClass: ProgressStepperService }],
 * })
 * // Consume the service instance in your component class
 * private service: ProgressStepperService = inject(ProgressStepperService);
 * // Use the service to control Progress Stepper
 * service.next();
 * ```
 *
 * ### Import
 *
 * ```typescript
 * import { ProgressStepperBodyComponent } from '@talenra/ngx-base/progress-stepper';
 * ```
 *
 * @see {@link ProgressStepperService}
 * @see {@link ProgressStepperHeaderComponent}
 * @see {@link ProgressStepperBannerComponent}
 * @see {@link ProgressStepComponent}
 * @see {@link ProgressStepperFooterComponent}
 * @see {@link ProgressStepperPageLayoutComponent}
 * @see {@link ProgressStepState}
 *
 * @experimental
 */
declare class ProgressStepperBodyComponent {
    /** Progress steps */
    private readonly steps;
    /** ProgressStepperService reference */
    protected readonly service: ProgressStepperService;
    /** @internal */
    constructor();
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ProgressStepperBodyComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ProgressStepperBodyComponent, "talenra-progress-stepper-body", never, {}, {}, ["steps"], ["talenra-progress-stepper-banner", "*", "talenra-progress-stepper-footer"], true, never>;
}

/**
 * Progress Stepper Banner is a wrapper for a Progress Stepper's optional banner which is rendered below the stepper's
 * header and above the steps. It is typically used to display consistent information across all steps.
 *
 * ```html
 * <talenra-progress-stepper-body>
 *   <talenra-progress-stepper-banner><!-- Banner content --></talenra-progress-stepper-banner>
 *   <talenra-progress-step>...</talenra-progress-step>
 *   <talenra-progress-step>...</talenra-progress-step>
 *   <talenra-progress-step>...</talenra-progress-step>
 * </talenra-progress-stepper-body>
 * ```
 *
 * ### Import
 *
 * ```typescript
 * import { ProgressStepperBannerComponent } from '@talenra/ngx-base/progress-stepper';
 * ```
 *
 * @see {@link ProgressStepperBodyComponent}
 *
 * @experimental
 */
declare class ProgressStepperBannerComponent {
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ProgressStepperBannerComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ProgressStepperBannerComponent, "talenra-progress-stepper-banner", never, {}, {}, never, ["*"], true, never>;
}

/**
 * Progress Stepper Footer is a wrapper for a Progress Stepper's optional footer. It is typically used to render
 * navigation buttons like "Next Step".
 *
 * Navigation logic is typically implemented base on `ProgressStepperService`.
 *
 * ```html
 * <!-- Template -->
 * <talenra-progress-stepper-body>
 *   <talenra-progress-step>...</talenra-progress-step>
 *   <talenra-progress-step>...</talenra-progress-step>
 *   <talenra-progress-step>...</talenra-progress-step>
 *   <talenra-progress-stepper-footer><!-- Footer content --></talenra-progress-stepper-footer>
 * </talenra-progress-stepper-body>
 * ```
 *
 * ### Import
 *
 * ```typescript
 * import { ProgressStepperFooterComponent } from '@talenra/ngx-base/progress-stepper';
 * ```
 *
 * @see {@link ProgressStepperBodyComponent}
 * @see {@link ProgressStepperService}
 *
 * @experimental
 */
declare class ProgressStepperFooterComponent {
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ProgressStepperFooterComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ProgressStepperFooterComponent, "talenra-progress-stepper-footer", never, {}, {}, never, ["*"], true, never>;
}

export { ProgressStepComponent, ProgressStepState, ProgressStepperBannerComponent, ProgressStepperBodyComponent, ProgressStepperFooterComponent, ProgressStepperHeaderComponent, ProgressStepperPageLayoutComponent, ProgressStepperService };
export type { TProgressStepState };