@sixbell-telco/sdk/components/wizard/wizard-wrapper/wizard-wrapper.component.d.ts

A collection of reusable components designed for use in Sixbell Telco Angular projects

import { WizardService } from '../services/wizard.service';
import { WizardContentComponent } from '../wizard-content/wizard-content.component';
import * as i0 from "@angular/core";
/**
 * Layout direction variants for the wizard component
 * @typedef {'vertical' | 'horizontal'} WizardVariantProps
 */
export type WizardVariantProps = 'vertical' | 'horizontal';
/**
 * A container component for multi-step workflows with navigation controls and layout management.
 *
 * @remarks
 * Integrates with WizardService for state management and provides template structure for wizard steps.
 * Supports both horizontal and vertical layouts with customizable navigation controls.
 *
 * @example
 * ```html
 * <!-- Basic horizontal wizard -->
 * <st-wizard>
 *   <st-wizard-content [stepIndex]="0" name="Step 1" [isValid]="true">
 *     <!-- Step content -->
 *   </st-wizard-content>
 *   <st-wizard-content [stepIndex]="1" name="Step 2">
 *     <!-- Step content -->
 *   </st-wizard-content>
 * </st-wizard>
 *
 * <!-- Vertical wizard with external controls -->
 * <st-wizard variant="vertical" [showControls]="false">
 *   <!-- Step contents -->
 * </st-wizard>
 * <div class="controls">
 *   <st-button (click)="handlePrevious()">Previous</st-button>
 *   <st-button (click)="handleNext()">Next</st-button>
 * </div>
 * ```
 */
export declare class WizardWrapperComponent {
    /**
     * Injected wizard state management service instance
     * @internal
     */
    wizardService: WizardService;
    /**
     * Controls the layout direction of the wizard steps
     * @default 'horizontal'
     * @example
     * <st-wizard variant="vertical">...</st-wizard>
     */
    variant: import("@angular/core").InputSignal<WizardVariantProps>;
    /**
     * Add a card style to the wizard
     * @default false
     * @example
     * <st-wizard [card]="true">...</st-wizard>
     */
    card: import("@angular/core").InputSignal<boolean>;
    /**
     * Query list of contained wizard content components
     * @internal
     */
    contents: import("@angular/core").Signal<readonly WizardContentComponent[]>;
    /**
     * Controls visibility of built-in navigation controls
     * @default true
     * @example
     * <st-wizard [showControls]="false">...</st-wizard>
     */
    showControls: import("@angular/core").InputSignal<boolean>;
    /**
     * Event emitted when the back button is clicked
     * @example
     * <st-wizard (back)="handleCancel()">...</st-wizard>
     */
    back: import("@angular/core").OutputEmitterRef<void>;
    /**
     * Event emitted when navigating to the previous step
     * @example
     * <st-wizard (previous)="logStepChange('previous')">...</st-wizard>
     */
    previous: import("@angular/core").OutputEmitterRef<void>;
    /**
     * Event emitted when navigating to the next valid step
     * @example
     * <st-wizard (next)="logStepChange('next')">...</st-wizard>
     */
    next: import("@angular/core").OutputEmitterRef<void>;
    /**
     * Event emitted when all steps are completed
     * @example
     * <st-wizard (complete)="showCompletionModal()">...</st-wizard>
     */
    complete: import("@angular/core").OutputEmitterRef<void>;
    /**
     * Controls visibility of the loading spinner for completition button
     * @default false
     * @example
     * <st-wizard [loading]="true">...</st-wizard>
     */
    loading: import("@angular/core").InputSignal<boolean>;
    /** @internal Material design chevron left icon */
    iconChevronLeft: string;
    /** @internal Material design chevron right icon */
    iconChevronRight: string;
    /** @internal Material design return arrow icon */
    iconReturn: string;
    /** @internal Material design save/floppy disk icon */
    iconSave: string;
    /**
     * Handles back navigation and emits onBack event
     * @emits back
     * @example
     * // Template
     * <button (click)="handleBack()">Cancel</button>
     *
     * // Component
     * handleBack() {
     *   this.back.emit();
     * }
     */
    handleBack(): void;
    /**
     * Navigates to previous step and emits previous event
     * @emits previous
     * @example
     * // Manually trigger previous step
     * previousStep() {
     *   this.wizardService.previousStep();
     *   this.previous.emit();
     * }
     */
    handlePrevious(): void;
    /**
     * Navigates to next valid step and emits next event
     * @emits next
     * @example
     * // Custom next step handler
     * handleNext() {
     *   if (form.valid) {
     *     this.wizardService.nextStep();
     *     this.next.emit();
     *   }
     * }
     */
    handleNext(): void;
    /**
     * Completes wizard flow and emits complete event
     * @emits complete
     * @example
     * // Final step handler
     * handleComplete() {
     *   if (allStepsValid) {
     *     this.complete.emit();
     *   }
     * }
     */
    handleComplete(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<WizardWrapperComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<WizardWrapperComponent, "st-wizard", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "card": { "alias": "card"; "required": false; "isSignal": true; }; "showControls": { "alias": "showControls"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, { "back": "back"; "previous": "previous"; "next": "next"; "complete": "complete"; }, ["contents"], ["*", "st-wizard-actions"], true, never>;
}