@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
84 lines (83 loc) • 3 kB
TypeScript
import { WizardService, WizardStepStatus } from '../services/wizard.service';
import * as i0 from "@angular/core";
/**
* Visual indicator component for individual wizard steps with status-dependent styling and animations.
*
* @remarks
* Displays step progress through dynamic border and background colors. Supports three states:
* - Completed (checkmark icon)
* - In progress (highlighted border)
* - Pending (dimmed appearance)
*
* Uses Angular signals for optimized change detection and smooth transitions.
*
* @example
* ```html
* <!-- Completed step with custom icon -->
* <st-wizard-step
* [stepIndex]="1"
* [status]="'completed'"
* icon="user-profile"
* ></st-wizard-step>
*
* <!-- Current active step -->
* <st-wizard-step
* [stepIndex]="2"
* [status]="'in progress'"
* ></st-wizard-step>
* ```
*/
export declare class WizardStepComponent {
/** @internal Injected wizard state service */
wizardService: WizardService;
/**
* Optional custom icon name for completed state
* @default undefined (uses checkmark)
*/
icon: import("@angular/core").InputSignal<string | undefined>;
/**
* Current progress status of the step
* @remarks Determines visual state and transitions
*/
status: import("@angular/core").InputSignal<WizardStepStatus>;
/**
* Position in wizard sequence (0-based index)
* @remarks Used for current step comparison
*/
stepIndex: import("@angular/core").InputSignal<number>;
/** @internal Predefined checkmark icon */
iconCheck: string;
/**
* Computed CSS classes for step containers
* @returns {Object} Classes for outer/inner elements
* @remarks Applies:
* - 300ms color transitions
* - 300ms delay for pending states
* - Primary colors for active/completed states
* @internal
*/
stepClasses: import("@angular/core").Signal<{
outerClasses: string;
innerClasses: string;
}>;
/**
* Step number visibility classes
* @returns {string} Tailwind classes with fade animation
* @remarks
* - Hidden when completed
* - 350ms fade-in delay for smooth transitions
* @internal
*/
stepNumberClasses: import("@angular/core").Signal<string>;
/**
* Completion icon visibility classes
* @returns {string} Tailwind classes with fade animation
* @remarks
* - Only visible when completed
* - 350ms fade-in delay for smooth transition
* @internal
*/
stepIconClasses: import("@angular/core").Signal<string>;
static ɵfac: i0.ɵɵFactoryDeclaration<WizardStepComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<WizardStepComponent, "st-wizard-step", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": true; "isSignal": true; }; "stepIndex": { "alias": "stepIndex"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
}