@sixbell-telco/sdk

Version:

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

1 lines • 62.8 kB

Source Map (JSON)

{"version":3,"file":"sixbell-telco-sdk-components-wizard.mjs","sources":["../../../projects/sdk/components/wizard/services/wizard.service.ts","../../../projects/sdk/components/wizard/wizard-actions/wizard-actions.component.ts","../../../projects/sdk/components/wizard/wizard-actions/wizard-actions.component.html","../../../projects/sdk/components/wizard/wizard-content/wizard-content.component.ts","../../../projects/sdk/components/wizard/wizard-content/wizard-content.component.html","../../../projects/sdk/components/wizard/wizard-marker/wizard-marker.component.ts","../../../projects/sdk/components/wizard/wizard-marker/wizard-marker.component.html","../../../projects/sdk/components/wizard/wizard-step/wizard-step.component.ts","../../../projects/sdk/components/wizard/wizard-step/wizard-step.component.html","../../../projects/sdk/components/wizard/wizard-sub-step/wizard-sub-step.component.ts","../../../projects/sdk/components/wizard/wizard-sub-step/wizard-sub-step.component.html","../../../projects/sdk/components/wizard/wizard-wrapper/wizard-wrapper.component.ts","../../../projects/sdk/components/wizard/wizard-wrapper/wizard-wrapper.component.html","../../../projects/sdk/components/wizard/sixbell-telco-sdk-components-wizard.ts"],"sourcesContent":["import { computed, Injectable, signal } from '@angular/core';\n\n/**\n * Enum-like object representing possible wizard step statuses\n * @readonly\n * @enum {string}\n */\nexport const WIZARD_STEP_STATUS = {\n\tIN_PROGRESS: 'in progress',\n\tPENDING: 'pending',\n\tCOMPLETED: 'completed',\n} as const;\n\n/**\n * Configuration object for a wizard step\n * @property {string} name - Unique identifier for the step\n * @property {(typeof WIZARD_STEP_STATUS)[keyof typeof WIZARD_STEP_STATUS]} status - Current status of the step\n * @property {boolean} isValid - Indicates if the step's data is valid\n * @property {string} label - Display text for the step\n * @property {string} [icon] - Optional icon for the step\n */\nexport type WizardStepConfig = {\n\tname: string;\n\tstatus: (typeof WIZARD_STEP_STATUS)[keyof typeof WIZARD_STEP_STATUS];\n\tisValid: boolean;\n\tlabel: string;\n\ticon?: string;\n};\n\n/**\n * Simplified step definition without status and validation\n * @property {string} name - Unique identifier for the step\n * @property {string} label - Display text for the step\n * @property {string} [icon] - Optional icon for the step\n */\nexport type WizardStep = Omit<WizardStepConfig, 'status' | 'isValid'>;\n\n/**\n * Union type of possible wizard step status values\n */\nexport type WizardStepStatus = (typeof WIZARD_STEP_STATUS)[keyof typeof WIZARD_STEP_STATUS];\n\n/**\n * Service for managing wizard state and navigation\n * @Injectable\n */\n@Injectable({\n\tprovidedIn: 'root',\n})\nexport class WizardService {\n\t// State signals\n\t/** @private Internal signal for wizard steps */\n\tprivate _steps = signal<WizardStepConfig[]>([]);\n\t/** @private Internal signal for current step index */\n\tprivate _currentStepIndex = signal<number>(0);\n\t/** @private Internal signal for first step index */\n\tprivate _fistStepIndex = signal<number>(0);\n\t/** @private Internal signal for last step index */\n\tprivate _lastStepIndex = signal<number>(0);\n\t/** @private Internal signal for transition state */\n\tprivate _isTransitioning = signal<boolean>(false);\n\n\t// Readonly signals\n\t/** Readonly array of wizard steps */\n\tpublic steps = this._steps.asReadonly();\n\n\t/**\n\t * Current step index\n\t * @readonly\n\t */\n\tpublic currentStepIndex = this._currentStepIndex.asReadonly();\n\t/**\n\t * Currently active step\n\t * @readonly\n\t */\n\tpublic currentStep = computed(() => this.steps()[this.currentStepIndex()]);\n\n\t/**\n\t * Array of valid steps\n\t * @readonly\n\t */\n\tpublic validSteps = computed(() => this.steps().filter((step) => step.isValid));\n\t/**\n\t * Indicates if all steps are valid\n\t * @readonly\n\t */\n\tpublic areAllStepsValid = computed(() => this.validSteps().length === this.steps().length);\n\n\t/**\n\t * First step index\n\t * @readonly\n\t */\n\tpublic fistStepIndex = this._fistStepIndex.asReadonly();\n\t/**\n\t * First step in the wizard\n\t * @readonly\n\t */\n\tpublic firstStep = computed(() => this.steps()[this.fistStepIndex()]);\n\n\t/**\n\t * Last step index\n\t * @readonly\n\t */\n\tpublic lastStepIndex = this._lastStepIndex.asReadonly();\n\t/**\n\t * Last step in the wizard\n\t * @readonly\n\t */\n\tpublic lastStep = computed(() => this.steps()[this.lastStepIndex()]);\n\n\t/**\n\t * Completed steps\n\t * @readonly\n\t */\n\tpublic completedSteps = computed(() => this.steps().filter((step) => step.status === 'completed'));\n\t/**\n\t * Pending steps\n\t * @readonly\n\t */\n\tpublic pendingSteps = computed(() => this.steps().filter((step) => step.status === 'pending'));\n\t/**\n\t * In-progress steps\n\t * @readonly\n\t */\n\tpublic inProgressSteps = computed(() => this.steps().filter((step) => step.status === 'in progress'));\n\n\t/**\n\t * Indicates if all steps are completed\n\t * @readonly\n\t */\n\tpublic isCompleted = computed(() => this.completedSteps().length === this.steps().length);\n\t/**\n\t * Indicates if current step is the first step\n\t * @readonly\n\t */\n\tpublic isCurrentStepFirst = computed(() => this.currentStepIndex() === this.fistStepIndex());\n\t/**\n\t * Indicates if current step is the last step\n\t * @readonly\n\t */\n\tpublic isCurrentStepLast = computed(() => this.currentStepIndex() === this.lastStepIndex());\n\n\t/**\n\t * Indicates if wizard is transitioning between steps\n\t * @readonly\n\t */\n\tpublic isTransitioning = this._isTransitioning.asReadonly();\n\n\t/**\n\t * Initializes the wizard with given steps\n\t * @param {WizardStep[]} steps - Array of step configurations\n\t */\n\tpublic init(steps: WizardStep[]): void {\n\t\tthis.setSteps(\n\t\t\tsteps.map((step, index) => ({\n\t\t\t\t...step,\n\t\t\t\tstatus: index === 0 ? 'in progress' : 'pending',\n\t\t\t\tisValid: false,\n\t\t\t})),\n\t\t);\n\t\tthis.setFistStepIndex(0);\n\t\tthis.setLastStepIndex(steps.length - 1);\n\t}\n\n\t/**\n\t * Replaces all steps with new configuration\n\t * @param {WizardStepConfig[]} steps - New array of step configurations\n\t */\n\tpublic setSteps(steps: WizardStepConfig[]): void {\n\t\tthis._steps.set(steps);\n\t}\n\n\t/**\n\t * Adds a new step to the end of the wizard\n\t * @param {WizardStepConfig} step - Step configuration to add\n\t */\n\tpublic addStep(step: WizardStepConfig): void {\n\t\tthis.setSteps([...this.steps(), step]);\n\t}\n\n\t/**\n\t * Inserts a step at specific index\n\t * @param {number} index - Position to insert the step\n\t * @param {WizardStepConfig} step - Step configuration to add\n\t */\n\tpublic addStepAtIndex(index: number, step: WizardStepConfig): void {\n\t\tconst newSteps = this.steps().reduce((acc: WizardStepConfig[], s, i) => {\n\t\t\tif (i === index) {\n\t\t\t\tacc.push(step);\n\t\t\t}\n\t\t\tacc.push(s);\n\t\t\treturn acc;\n\t\t}, []);\n\t\tthis.setSteps(newSteps);\n\t}\n\n\t/**\n\t * Removes step at specified index\n\t * @param {number} index - Index of step to remove\n\t */\n\tpublic removeStep(index: number): void {\n\t\tconst newSteps = this.steps().filter((_, i) => i !== index);\n\t\tthis.setSteps(newSteps);\n\t}\n\n\t/**\n\t * Updates name of step at specified index\n\t * @param {number} index - Index of step to update\n\t * @param {string} name - New name for the step\n\t */\n\tpublic updateStepName(index: number, name: string): void {\n\t\tconst newSteps = this.steps().map((s, i) => (i === index ? { ...s, name } : s));\n\t\tthis.setSteps(newSteps);\n\t}\n\n\t/**\n\t * Updates label of step at specified index\n\t * @param {number} index - Index of step to update\n\t * @param {string} label - New label for the step\n\t */\n\tpublic updateStepLabel(index: number, label: string): void {\n\t\tconst newSteps = this.steps().map((s, i) => (i === index ? { ...s, label } : s));\n\t\tthis.setSteps(newSteps);\n\t}\n\n\t/**\n\t * Updates status of step at specified index\n\t * @param {number} index - Index of step to update\n\t * @param {WizardStepStatus} status - New status for the step\n\t * @param {number} [stale] - Optional delay in milliseconds before applying changes\n\t */\n\tpublic updateStepStatus(index: number, status: WizardStepStatus, stale?: number): void {\n\t\tconst newSteps = this.steps().map((s, i) => (i === index ? { ...s, status } : s));\n\n\t\tthis._isTransitioning.set(true);\n\n\t\tif (stale === undefined) {\n\t\t\tthis._isTransitioning.set(false);\n\t\t\tthis.setSteps(newSteps);\n\t\t\treturn;\n\t\t}\n\n\t\tsetTimeout(() => {\n\t\t\tthis._isTransitioning.set(false);\n\t\t\tthis.setSteps(newSteps);\n\t\t}, stale);\n\t}\n\n\t/**\n\t * Updates validation status of step at specified index\n\t * @param {number} index - Index of step to update\n\t * @param {boolean} isValid - New validation status\n\t */\n\tpublic updateStepIsValid(index: number, isValid: boolean): void {\n\t\tconst newSteps = this.steps().map((s, i) => (i === index ? { ...s, isValid } : s));\n\t\tthis.setSteps(newSteps);\n\t}\n\n\t/**\n\t * Replaces entire step configuration at specified index\n\t * @param {number} index - Index of step to replace\n\t * @param {WizardStepConfig} step - New step configuration\n\t */\n\tpublic updateStep(index: number, step: WizardStepConfig): void {\n\t\tconst newSteps = this.steps().map((s, i) => (i === index ? step : s));\n\t\tthis.setSteps(newSteps);\n\t}\n\n\t/**\n\t * Sets current active step index\n\t * @param {number} index - New current step index\n\t */\n\tpublic setCurrentStepIndex(index: number): void {\n\t\tthis._currentStepIndex.set(index);\n\t}\n\n\t/**\n\t * Sets index for first step in wizard\n\t * @param {number} index - New first step index\n\t */\n\tpublic setFistStepIndex(index: number): void {\n\t\tthis._fistStepIndex.set(index);\n\t}\n\n\t/**\n\t * Sets index for last step in wizard\n\t * @param {number} index - New last step index\n\t */\n\tpublic setLastStepIndex(index: number): void {\n\t\tthis._lastStepIndex.set(index);\n\t}\n\n\t/**\n\t * Navigates to next valid step\n\t */\n\tpublic nextStep(): void {\n\t\tif (!this.currentStep().isValid) return;\n\n\t\tconst lastIndex = this._steps().length - 1;\n\t\tconst nextIndex = this.currentStepIndex() + 1;\n\t\tif (nextIndex > lastIndex) return;\n\n\t\tconst nextStepIndex = nextIndex;\n\n\t\tthis.updateStepStatus(this.currentStepIndex(), 'completed');\n\t\tthis._currentStepIndex.set(nextStepIndex);\n\t\tthis.updateStepStatus(nextStepIndex, 'in progress', 300);\n\t}\n\n\t/**\n\t * Navigates to previous step\n\t */\n\tpublic previousStep(): void {\n\t\tif (this.currentStepIndex() <= 0) return;\n\n\t\tconst previousStepIndex = this.currentStepIndex() - 1;\n\n\t\tthis.updateStepStatus(this.currentStepIndex(), 'pending');\n\t\tthis._currentStepIndex.set(previousStepIndex);\n\t\tthis.updateStepStatus(previousStepIndex, 'in progress', 300);\n\t}\n\n\t/**\n\t * Jumps to specified step index\n\t * @param {number} index - Target step index to navigate to\n\t */\n\tpublic gotoStep(index: number): void {\n\t\tif (index < 0 || index >= this.steps().length) return;\n\n\t\tconst newSteps = this.steps().map((step, i) => {\n\t\t\tif (i === index) {\n\t\t\t\treturn { ...step, status: WIZARD_STEP_STATUS.IN_PROGRESS };\n\t\t\t}\n\t\t\tif (index === this.fistStepIndex()) {\n\t\t\t\tif (i === this.fistStepIndex()) {\n\t\t\t\t\treturn { ...step, status: WIZARD_STEP_STATUS.IN_PROGRESS };\n\t\t\t\t}\n\t\t\t\treturn { ...step, status: WIZARD_STEP_STATUS.PENDING };\n\t\t\t}\n\n\t\t\tif (index === this.lastStepIndex()) {\n\t\t\t\tif (i === this.lastStepIndex()) {\n\t\t\t\t\treturn { ...step, status: WIZARD_STEP_STATUS.IN_PROGRESS };\n\t\t\t\t}\n\t\t\t\treturn { ...step, status: WIZARD_STEP_STATUS.COMPLETED };\n\t\t\t}\n\n\t\t\tif (i < index) {\n\t\t\t\treturn { ...step, status: WIZARD_STEP_STATUS.COMPLETED };\n\t\t\t}\n\n\t\t\tif (i > index) {\n\t\t\t\treturn { ...step, status: WIZARD_STEP_STATUS.PENDING };\n\t\t\t}\n\n\t\t\treturn step;\n\t\t});\n\n\t\tthis.setSteps(newSteps);\n\t\tthis._currentStepIndex.set(index);\n\t}\n\n\t/**\n\t * Resets wizard to initial state\n\t */\n\tpublic reset(): void {\n\t\tthis._steps.set([]);\n\t\tthis._currentStepIndex.set(0);\n\t\tthis._fistStepIndex.set(0);\n\t\tthis._lastStepIndex.set(0);\n\t\tthis._isTransitioning.set(false);\n\t}\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { cn } from '@sixbell-telco/sdk/utils/cn';\n\nexport type WizardActionsAligmentProps = 'left' | 'right' | 'center';\n\n@Component({\n\tselector: 'st-wizard-actions',\n\timports: [CommonModule],\n\ttemplateUrl: './wizard-actions.component.html',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class WizardActionsComponent {\n\t// Base table properties\n\talignment = input<WizardActionsAligmentProps>('left');\n\n\tcomponentClass = computed(() => {\n\t\treturn cn('flex flex-w items-center gap-2', {\n\t\t\t'justify-start': this.alignment() === 'left',\n\t\t\t'justify-end': this.alignment() === 'right',\n\t\t\t'justify-center': this.alignment() === 'center',\n\t\t});\n\t});\n}\n","<div [class]=\"componentClass()\">\n\t<ng-content></ng-content>\n</div>\n","import { Component, computed, inject, input } from '@angular/core';\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\nimport { cn } from '@sixbell-telco/sdk/utils/cn';\nimport { WizardService } from '../services/wizard.service';\n\n/**\n * Component wrapper for individual wizard step content with validation integration.\n *\n * @remarks\n * Manages content visibility and validation state synchronization with the wizard service.\n * Automatically handles:\n * - Step activation status\n * - Validation state propagation\n * - Fade animations\n * - Destruction cleanup\n *\n * @example\n * ```html\n * <st-wizard-content\n * [stepIndex]=\"0\"\n * [isValid]=\"form.valid\"\n * >\n * \n * </st-wizard-content>\n * ```\n */\n@Component({\n selector: 'st-wizard-content',\n imports: [],\n templateUrl: './wizard-content.component.html'\n})\nexport class WizardContentComponent {\n\t/** @internal Injected wizard state service */\n\twizardService = inject(WizardService);\n\n\t/**\n\t * Position index in the wizard sequence (0-based)\n\t * @default 0\n\t */\n\tstepIndex = input(0);\n\n\t/**\n\t * Current validation state of the step\n\t * @default false\n\t * @remarks Updates wizard service automatically when changed\n\t */\n\tisValid = input<boolean>(false);\n\n\t/**\n\t * Computed status from wizard service\n\t * @internal\n\t */\n\tstatus = computed(() => this.wizardService.steps()[this.stepIndex()].status);\n\n\t/**\n\t * Observable version of isValid input\n\t * @internal\n\t */\n\tprivate isValid$ = toObservable(this.isValid);\n\n\t/**\n\t * Current active step index from service\n\t * @internal\n\t */\n\tcurrentStep = computed(() => this.wizardService.currentStepIndex());\n\n\t/**\n\t * Checks if this content's step is currently active\n\t * @returns {boolean} True if stepIndex matches current active step\n\t * @internal\n\t */\n\tisStepActive = computed(() => this.stepIndex() === this.wizardService.currentStepIndex());\n\n\t/**\n\t * Computed CSS classes for content container\n\t * @returns {string} Animation classes\n\t * @internal\n\t */\n\tcomponentClass = computed(() => cn('animate-fade-in animate-duration-300'));\n\n\t/**\n\t * Sets up validation state synchronization\n\t * @remarks Uses takeUntilDestroyed for automatic cleanup\n\t */\n\tconstructor() {\n\t\tthis.isValid$.pipe(takeUntilDestroyed()).subscribe((isValid) => {\n\t\t\tthis.wizardService.updateStepIsValid(this.stepIndex(), isValid);\n\t\t});\n\t}\n}\n","@if (this.isStepActive()) {\n\t<div [class]=\"componentClass()\">\n\t\t<ng-content></ng-content>\n\t</div>\n}\n","import { ChangeDetectionStrategy, Component, computed, inject, input, OnInit, signal } from '@angular/core';\nimport { _, TranslateService } from '@ngx-translate/core';\nimport { TypographyDirective } from '@sixbell-telco/sdk/directives/typography';\nimport { cn } from '@sixbell-telco/sdk/utils/cn';\nimport { WizardService, WizardStepStatus } from '../services/wizard.service';\n\n/**\n * Component that displays a status badge for wizard steps with translated labels.\n *\n * @remarks\n * Shows visual indicators for different step states with automatic translations.\n * Supports three status types with corresponding styling:\n * - Completed (green background)\n * - In progress (neutral border)\n * - Pending (dimmed appearance)\n *\n * Uses NGX-Translate for localization of status labels.\n *\n * @example\n * ```html\n * \n * <st-wizard-marker [status]=\"'completed'\"></st-wizard-marker>\n *\n * \n * <st-wizard-marker [status]=\"'in progress'\"></st-wizard-marker>\n * ```\n */\n@Component({\n\tselector: 'st-wizard-marker',\n\timports: [TypographyDirective],\n\ttemplateUrl: './wizard-marker.component.html',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class WizardMarkerComponent implements OnInit {\n\t/** @internal Translation service instance */\n\ttranslateService = inject(TranslateService);\n\n\t/** @internal Wizard state service */\n\twizardService = inject(WizardService);\n\n\t/**\n\t * Current status of the associated wizard step\n\t * @remarks Determines badge styling and label\n\t */\n\tstatus = input.required<WizardStepStatus>();\n\n\t/**\n\t * Computed translated status message\n\t * @internal\n\t */\n\tstatusMarkerMessage = computed(() => this.getStatusMarkerMessage());\n\n\t/**\n\t * Computed CSS classes for the status badge\n\t * @internal\n\t */\n\tstatusMarkerClasses = computed(() => this.getStepStatusMarkerClasses());\n\n\t/** @internal Signal holding translated \"completed\" text */\n\tcompleted = signal('completed');\n\t/** @internal Signal holding translated \"in progress\" text */\n\tinProgress = signal('in progress');\n\t/** @internal Signal holding translated \"pending\" text */\n\tpending = signal('pending');\n\n\t/** @internal Base CSS classes for the marker */\n\tprivate baseClasses = 'rounded-field transition-colors duration-300 ease-out delay-150';\n\n\t/** @internal Status-to-class mapping */\n\tprivate statusClassMap = {\n\t\tcompleted: 'bg-primary/20 text-primary px-3 py-[5px]',\n\t\t'in progress': 'bg-neutral text-neutral-content border-[2px] border-neutral px-[10px] py-[3px]',\n\t\tpending: 'bg-neutral/20 text-neutral-content/20 border-[2px] border-neutral px-[10px] py-[3px]',\n\t};\n\n\t/**\n\t * Initializes component translations\n\t * @remarks Loads translated status labels using NGX-Translate\n\t */\n\tngOnInit(): void {\n\t\tthis.initTranslatations();\n\t}\n\n\t/**\n\t * Gets the appropriate translated status message\n\t * @returns {string} Translated status label\n\t * @internal\n\t */\n\tprivate getStatusMarkerMessage() {\n\t\treturn this.status() === 'completed' ? this.completed() : this.status() === 'in progress' ? this.inProgress() : this.pending();\n\t}\n\n\t/**\n\t * Computes CSS classes based on current status\n\t * @returns {string} Combined Tailwind classes\n\t * @internal\n\t */\n\tprivate getStepStatusMarkerClasses() {\n\t\treturn cn(this.baseClasses, this.statusClassMap[this.status()]);\n\t}\n\n\t/**\n\t * Initializes translations for status labels\n\t * @remarks Uses translation keys:\n\t * - 'sdk.wizard.wizardMarker.completed'\n\t * - 'sdk.wizard.wizardMarker.inProgress'\n\t * - 'sdk.wizard.wizardMarker.pending'\n\t * @internal\n\t */\n\tprivate initTranslatations() {\n\t\tthis.translateService.get(_('sdk.wizard.wizardMarker.completed')).subscribe((res: string) => {\n\t\t\tthis.completed.set(res);\n\t\t});\n\t\tthis.translateService.get(_('sdk.wizard.wizardMarker.inProgress')).subscribe((res: string) => {\n\t\t\tthis.inProgress.set(res);\n\t\t});\n\t\tthis.translateService.get(_('sdk.wizard.wizardMarker.pending')).subscribe((res: string) => {\n\t\t\tthis.pending.set(res);\n\t\t});\n\t}\n}\n","<div [class]=\"statusMarkerClasses()\">\n\t<span typography [tyVariant]=\"'body-xxs'\" [tyColor]=\"'inherit'\" [tyFontWeight]=\"'medium'\">{{ statusMarkerMessage() }}</span>\n</div>\n","import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { IconComponent } from '@sixbell-telco/sdk/components/icon';\nimport { matCheckOutline } from '@sixbell-telco/sdk/components/icon/material/outline';\nimport { TypographyDirective } from '@sixbell-telco/sdk/directives/typography';\nimport { cn } from '@sixbell-telco/sdk/utils/cn';\nimport { WizardService, WizardStepStatus } from '../services/wizard.service';\n\n/**\n * Visual indicator component for individual wizard steps with status-dependent styling and animations.\n *\n * @remarks\n * Displays step progress through dynamic border and background colors. Supports three states:\n * - Completed (checkmark icon)\n * - In progress (highlighted border)\n * - Pending (dimmed appearance)\n *\n * Uses Angular signals for optimized change detection and smooth transitions.\n *\n * @example\n * ```html\n * \n * <st-wizard-step\n * [stepIndex]=\"1\"\n * [status]=\"'completed'\"\n * icon=\"user-profile\"\n * ></st-wizard-step>\n *\n * \n * <st-wizard-step\n * [stepIndex]=\"2\"\n * [status]=\"'in progress'\"\n * ></st-wizard-step>\n * ```\n */\n@Component({\n\tselector: 'st-wizard-step',\n\ttemplateUrl: './wizard-step.component.html',\n\timports: [TypographyDirective, IconComponent],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class WizardStepComponent {\n\t/** @internal Injected wizard state service */\n\twizardService = inject(WizardService);\n\n\t/**\n\t * Optional custom icon name for completed state\n\t * @default undefined (uses checkmark)\n\t */\n\ticon = input<string | undefined>();\n\n\t/**\n\t * Current progress status of the step\n\t * @remarks Determines visual state and transitions\n\t */\n\tstatus = input.required<WizardStepStatus>();\n\n\t/**\n\t * Position in wizard sequence (0-based index)\n\t * @remarks Used for current step comparison\n\t */\n\tstepIndex = input.required<number>();\n\n\t/** @internal Predefined checkmark icon */\n\ticonCheck = matCheckOutline;\n\n\t/**\n\t * Computed CSS classes for step containers\n\t * @returns {Object} Classes for outer/inner elements\n\t * @remarks Applies:\n\t * - 300ms color transitions\n\t * - 300ms delay for pending states\n\t * - Primary colors for active/completed states\n\t * @internal\n\t */\n\tstepClasses = computed(() => {\n\t\t// Base classes\n\t\tconst baseOuterClasses =\n\t\t\t'flex h-[50px] min-h-[50px] w-[50px] min-w-[50px] items-center justify-center rounded-full border-[1px] border-solid p-[2px] font-medium text-neutral-content';\n\t\tconst baseInnerClasses = 'flex h-full w-full items-center justify-center rounded-full bg-secondary';\n\n\t\t// State variables\n\t\tconst isCurrentStep = this.wizardService.currentStepIndex() === this.stepIndex();\n\t\tconst currentStatus = this.status();\n\t\tconst isCompleted = currentStatus === 'completed';\n\t\tconst isInProgress = currentStatus === 'in progress';\n\n\t\t// Conditions\n\t\tconst isCurrentActive = isCurrentStep && (isInProgress || isCompleted);\n\t\tconst isCompletedNotCurrent = !isCurrentStep && isCompleted;\n\t\tconst isPendingNotCurrent = !isCurrentStep && currentStatus === 'pending';\n\n\t\tconst outerClasses = cn(baseOuterClasses, {\n\t\t\t'border-primary currentStep transition-colors duration-300 ease-out': isCurrentActive,\n\t\t\t'border-primary notCurrentStep transition-colors duration-300 ease-out': isCompletedNotCurrent,\n\t\t\t'border-secondary notCurrentStep transition-colors duration-300 ease-out delay-[300ms]': isPendingNotCurrent,\n\t\t});\n\n\t\tconst innerClasses = cn(baseInnerClasses, {\n\t\t\t'bg-primary text-primary-content currentStep transition-colors duration-300 ease-out': isCurrentActive,\n\t\t\t'bg-primary text-primary-content notCurrentStep transition-colors duration-300 ease-out': isCompletedNotCurrent,\n\t\t\t'bg-secondary text-secondary-content notCurrentStep transition-colors duration-300 ease-out delay-[300ms]': isPendingNotCurrent,\n\t\t});\n\n\t\treturn { outerClasses, innerClasses };\n\t});\n\n\t/**\n\t * Step number visibility classes\n\t * @returns {string} Tailwind classes with fade animation\n\t * @remarks\n\t * - Hidden when completed\n\t * - 350ms fade-in delay for smooth transitions\n\t * @internal\n\t */\n\tstepNumberClasses = computed(() => {\n\t\tconst isCompleted = this.status() === 'completed';\n\t\treturn cn({\n\t\t\t'hidden opacity-0': isCompleted,\n\t\t\t'animate-fade-in animate-duration-300 delay-[350ms] opacity-100': !isCompleted,\n\t\t});\n\t});\n\n\t/**\n\t * Completion icon visibility classes\n\t * @returns {string} Tailwind classes with fade animation\n\t * @remarks\n\t * - Only visible when completed\n\t * - 350ms fade-in delay for smooth transition\n\t * @internal\n\t */\n\tstepIconClasses = computed(() => {\n\t\tconst isCompleted = this.status() === 'completed';\n\t\treturn cn({\n\t\t\t'animate-fade-in animate-duration-300 delay-[350ms] opacity-100': isCompleted,\n\t\t\t'hidden opacity-0': !isCompleted,\n\t\t});\n\t});\n}\n","<div [class]=\"stepClasses().outerClasses\">\n\t<div [class]=\"stepClasses().innerClasses\">\n\t\t<div [class]=\"stepNumberClasses()\">\n\t\t\t@let iconVar = icon();\n\t\t\t@if (iconVar) {\n\t\t\t\t<st-icon [icon]=\"iconVar\" color=\"inherit\" size=\"md\"></st-icon>\n\t\t\t} @else {\n\t\t\t\t<span typography [tyVariant]=\"'body'\" [tyColor]=\"'base'\" [tyFontWeight]=\"'semibold'\">\n\t\t\t\t\t{{ stepIndex() + 1 }}\n\t\t\t\t</span>\n\t\t\t}\n\t\t</div>\n\t\t<div [class]=\"stepIconClasses()\">\n\t\t\t<st-icon [icon]=\"iconCheck\" color=\"inherit\" size=\"md\"></st-icon>\n\t\t</div>\n\t</div>\n</div>\n","import { Component, computed, inject, input } from '@angular/core';\nimport { cn } from '@sixbell-telco/sdk/utils/cn';\nimport { WizardService } from '../services/wizard.service';\n\n/**\n * Layout variants for the sub-step connector\n * @typedef {'vertical' | 'horizontal'} WizardSubStepVariantProps\n */\nexport type WizardSubStepVariantProps = 'vertical' | 'horizontal';\n\n/**\n * A component that visualizes the connection between wizard steps with animated progress indicators.\n *\n * @remarks\n * Handles both horizontal and vertical layouts with status-dependent animations. Manages three segments:\n * - Left connector (before the step)\n * - Center indicator (current step marker)\n * - Right connector (after the step)\n *\n * @example\n * ```html\n * \n * <st-wizard-sub-step\n * [stepIndex]=\"1\"\n * [stepStatus]=\"'completed'\"\n * ></st-wizard-sub-step>\n *\n * \n * <st-wizard-sub-step\n * variant=\"vertical\"\n * [stepIndex]=\"2\"\n * [stepStatus]=\"'in progress'\"\n * ></st-wizard-sub-step>\n * ```\n */\n@Component({\n selector: 'st-wizard-sub-step',\n imports: [],\n templateUrl: './wizard-sub-step.component.html'\n})\nexport class WizardSubStepComponent {\n\t/**\n\t * Layout direction for the sub-step connectors\n\t * @default 'horizontal'\n\t */\n\tvariant = input<WizardSubStepVariantProps>('horizontal');\n\n\t/** @internal Injected wizard state service */\n\twizardService = inject(WizardService);\n\n\t/**\n\t * Index of the parent step in the wizard sequence\n\t * @remarks Required for position calculation\n\t */\n\tstepIndex = input.required<number>();\n\n\t/**\n\t * Current status of the associated wizard step\n\t * @remarks Determines visual state and animations\n\t */\n\tstepStatus = input.required<'completed' | 'in progress' | 'pending'>();\n\n\t/**\n\t * Checks if this sub-step's index matches the current active step\n\t * @returns {boolean} True if this is the active step\n\t * @internal\n\t */\n\tisCurrentStep = computed(() => this.wizardService.currentStepIndex() === this.stepIndex());\n\n\t/**\n\t * Computed classes for horizontal left connector segment\n\t * @returns {string} Tailwind classes with animated width transition\n\t * @internal\n\t */\n\thorizontalLeftClasses = computed(() => {\n\t\tconst isCompleted = this.stepStatus() === 'completed';\n\t\tconst isInProgress = this.stepStatus() === 'in progress';\n\t\tconst afterWidthClass = isCompleted || (this.isCurrentStep() && isInProgress) ? 'after:w-full' : 'after:w-0';\n\n\t\treturn cn(\n\t\t\t'h-[2px] w-full bg-secondary relative',\n\t\t\t'after:absolute after:left-0 after:bottom-0 after:bg-primary after:h-[2px]',\n\t\t\t'after:transition-[width] after:duration-300 after:ease-out',\n\t\t\tafterWidthClass,\n\t\t);\n\t});\n\n\t/**\n\t * Computed classes for horizontal center indicator\n\t * @returns {string} Tailwind classes with color transition delays\n\t * @internal\n\t */\n\thorizontalCenterClasses = computed(() => {\n\t\tconst isPrimaryBg = (this.isCurrentStep() && this.stepStatus() !== 'pending') || (!this.isCurrentStep() && this.stepStatus() === 'completed');\n\n\t\treturn cn(\n\t\t\t'h-3 min-h-3 w-3 min-w-3 rounded-full',\n\t\t\t'transition-colors duration-300 ease-out',\n\t\t\tisPrimaryBg ? 'bg-primary' : 'bg-secondary',\n\t\t\tisPrimaryBg && !this.isCurrentStep() ? '' : 'delay-300',\n\t\t);\n\t});\n\n\t/**\n\t * Computed classes for horizontal right connector segment\n\t * @returns {string} Tailwind classes with completion-based width\n\t * @internal\n\t */\n\thorizontalRightClasses = computed(() => {\n\t\tconst isCompleted = this.stepStatus() === 'completed';\n\t\tconst afterWidthClass = isCompleted ? 'after:w-full' : 'after:w-0';\n\n\t\treturn cn(\n\t\t\t'h-[2px] w-full bg-secondary relative',\n\t\t\t'after:absolute after:left-0 after:bottom-0 after:bg-primary after:h-[2px]',\n\t\t\t'after:transition-[width] after:duration-300 after:ease-out',\n\t\t\tafterWidthClass,\n\t\t);\n\t});\n\n\t/**\n\t * Computed classes for vertical left connector segment\n\t * @returns {string} Tailwind classes with animated height transition\n\t * @internal\n\t */\n\tverticalLeftClasses = computed(() => {\n\t\tconst isCompleted = this.stepStatus() === 'completed';\n\t\tconst isInProgress = this.stepStatus() === 'in progress';\n\t\tconst afterHeightClass = isCompleted || (this.isCurrentStep() && isInProgress) ? 'after:h-full' : 'after:h-0';\n\n\t\treturn cn(\n\t\t\t'w-[2px] h-full bg-secondary relative rotate-180',\n\t\t\t'after:absolute after:left-0 after:bottom-0 after:bg-primary after:w-[2px]',\n\t\t\t'after:transition-[height] after:duration-300 after:ease-out',\n\t\t\tafterHeightClass,\n\t\t);\n\t});\n\n\t/**\n\t * Computed classes for vertical center indicator\n\t * @returns {string} Tailwind classes with color transition logic\n\t * @internal\n\t */\n\tverticalCenterClasses = computed(() => {\n\t\tconst isPrimaryBg = (this.isCurrentStep() && this.stepStatus() !== 'pending') || (!this.isCurrentStep() && this.stepStatus() === 'completed');\n\n\t\treturn cn(\n\t\t\t'h-3 min-h-3 w-3 min-w-3 rounded-full',\n\t\t\t'transition-colors duration-300 ease-out',\n\t\t\tisPrimaryBg ? 'bg-primary' : 'bg-secondary',\n\t\t\tisPrimaryBg && !this.isCurrentStep() ? '' : 'delay-300',\n\t\t);\n\t});\n\n\t/**\n\t * Computed classes for vertical right connector segment\n\t * @returns {string} Tailwind classes with completion-based height\n\t * @internal\n\t */\n\tverticalRightClasses = computed(() => {\n\t\tconst isCompleted = this.stepStatus() === 'completed';\n\t\tconst afterHeightClass = isCompleted ? 'after:h-full' : 'after:h-0';\n\n\t\treturn cn(\n\t\t\t'w-[2px] h-full bg-secondary relative rotate-180',\n\t\t\t'after:absolute after:left-0 after:bottom-0 after:bg-primary after:w-[2px]',\n\t\t\t'after:transition-[height] after:duration-300 after:ease-out',\n\t\t\tafterHeightClass,\n\t\t);\n\t});\n}\n","@if (variant() === 'horizontal') {\n\t<div class=\"flex min-w-[max(100%,80px)] flex-1 -translate-y-[18px] items-center\">\n\t\t<div [class]=\"horizontalLeftClasses()\"></div>\n\t\t<div [class]=\"horizontalCenterClasses()\"></div>\n\t\t<div [class]=\"horizontalRightClasses()\"></div>\n\t</div>\n} @else {\n\t<div class=\"flex h-20 min-h-20 w-fit translate-x-[18px] flex-col items-center\">\n\t\t<div [class]=\"verticalLeftClasses()\"></div>\n\t\t<div [class]=\"verticalCenterClasses()\"></div>\n\t\t<div [class]=\"verticalRightClasses()\"></div>\n\t</div>\n}\n","import { NgClass } from '@angular/common';\nimport { Component, contentChildren, inject, input, output } from '@angular/core';\nimport { matChevronLeftOutline, matChevronRightOutline, matKeyboardReturnOutline, matSaveOutline } from '@ng-icons/material-icons/outline';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { ButtonComponent } from '@sixbell-telco/sdk/components/button';\nimport { IconComponent } from '@sixbell-telco/sdk/components/icon';\nimport { TypographyDirective } from '@sixbell-telco/sdk/directives/typography';\nimport { WizardService } from '../services/wizard.service';\nimport { WizardContentComponent } from '../wizard-content/wizard-content.component';\nimport { WizardMarkerComponent } from '../wizard-marker/wizard-marker.component';\nimport { WizardStepComponent } from '../wizard-step/wizard-step.component';\nimport { WizardSubStepComponent } from '../wizard-sub-step/wizard-sub-step.component';\n\n/**\n * Layout direction variants for the wizard component\n * @typedef {'vertical' | 'horizontal'} WizardVariantProps\n */\nexport type WizardVariantProps = 'vertical' | 'horizontal';\n\n/**\n * A container component for multi-step workflows with navigation controls and layout management.\n *\n * @remarks\n * Integrates with WizardService for state management and provides template structure for wizard steps.\n * Supports both horizontal and vertical layouts with customizable navigation controls.\n *\n * @example\n * ```html\n * \n * <st-wizard>\n * <st-wizard-content [stepIndex]=\"0\" name=\"Step 1\" [isValid]=\"true\">\n * \n * </st-wizard-content>\n * <st-wizard-content [stepIndex]=\"1\" name=\"Step 2\">\n * \n * </st-wizard-content>\n * </st-wizard>\n *\n * \n * <st-wizard variant=\"vertical\" [showControls]=\"false\">\n * \n * </st-wizard>\n * <div class=\"controls\">\n * <st-button (click)=\"handlePrevious()\">Previous</st-button>\n * <st-button (click)=\"handleNext()\">Next</st-button>\n * </div>\n * ```\n */\n@Component({\n\tselector: 'st-wizard',\n\ttemplateUrl: './wizard-wrapper.component.html',\n\timports: [\n\t\tWizardStepComponent,\n\t\tButtonComponent,\n\t\tNgClass,\n\t\tTypographyDirective,\n\t\tWizardMarkerComponent,\n\t\tWizardSubStepComponent,\n\t\tTranslatePipe,\n\t\tIconComponent,\n\t],\n})\nexport class WizardWrapperComponent {\n\t/**\n\t * Injected wizard state management service instance\n\t * @internal\n\t */\n\twizardService = inject(WizardService);\n\n\t/**\n\t * Controls the layout direction of the wizard steps\n\t * @default 'horizontal'\n\t * @example\n\t * <st-wizard variant=\"vertical\">...</st-wizard>\n\t */\n\tvariant = input<WizardVariantProps>('horizontal');\n\n\t/**\n\t * Add a card style to the wizard\n\t * @default false\n\t * @example\n\t * <st-wizard [card]=\"true\">...</st-wizard>\n\t */\n\tcard = input<boolean>(false);\n\n\t/**\n\t * Query list of contained wizard content components\n\t * @internal\n\t */\n\tcontents = contentChildren(WizardContentComponent);\n\n\t/**\n\t * Controls visibility of built-in navigation controls\n\t * @default true\n\t * @example\n\t * <st-wizard [showControls]=\"false\">...</st-wizard>\n\t */\n\tshowControls = input<boolean>(true);\n\n\t/**\n\t * Event emitted when the back button is clicked\n\t * @example\n\t * <st-wizard (back)=\"handleCancel()\">...</st-wizard>\n\t */\n\tback = output<void>();\n\n\t/**\n\t * Event emitted when navigating to the previous step\n\t * @example\n\t * <st-wizard (previous)=\"logStepChange('previous')\">...</st-wizard>\n\t */\n\tprevious = output<void>();\n\n\t/**\n\t * Event emitted when navigating to the next valid step\n\t * @example\n\t * <st-wizard (next)=\"logStepChange('next')\">...</st-wizard>\n\t */\n\tnext = output<void>();\n\n\t/**\n\t * Event emitted when all steps are completed\n\t * @example\n\t * <st-wizard (complete)=\"showCompletionModal()\">...</st-wizard>\n\t */\n\tcomplete = output<void>();\n\n\t/**\n\t * Controls visibility of the loading spinner for completition button\n\t * @default false\n\t * @example\n\t * <st-wizard [loading]=\"true\">...</st-wizard>\n\t */\n\tloading = input<boolean>(false);\n\n\t// Icon definitions\n\t/** @internal Material design chevron left icon */\n\ticonChevronLeft = matChevronLeftOutline;\n\t/** @internal Material design chevron right icon */\n\ticonChevronRight = matChevronRightOutline;\n\t/** @internal Material design return arrow icon */\n\ticonReturn = matKeyboardReturnOutline;\n\t/** @internal Material design save/floppy disk icon */\n\ticonSave = matSaveOutline;\n\n\t/**\n\t * Handles back navigation and emits onBack event\n\t * @emits back\n\t * @example\n\t * // Template\n\t * <button (click)=\"handleBack()\">Cancel</button>\n\t *\n\t * // Component\n\t * handleBack() {\n\t * this.back.emit();\n\t * }\n\t */\n\thandleBack() {\n\t\tthis.back.emit();\n\t}\n\n\t/**\n\t * Navigates to previous step and emits previous event\n\t * @emits previous\n\t * @example\n\t * // Manually trigger previous step\n\t * previousStep() {\n\t * this.wizardService.previousStep();\n\t * this.previous.emit();\n\t * }\n\t */\n\thandlePrevious() {\n\t\tthis.wizardService.previousStep();\n\t\tthis.previous.emit();\n\t}\n\n\t/**\n\t * Navigates to next valid step and emits next event\n\t * @emits next\n\t * @example\n\t * // Custom next step handler\n\t * handleNext() {\n\t * if (form.valid) {\n\t * this.wizardService.nextStep();\n\t * this.next.emit();\n\t * }\n\t * }\n\t */\n\thandleNext() {\n\t\tthis.wizardService.nextStep();\n\t\tthis.next.emit();\n\t}\n\n\t/**\n\t * Completes wizard flow and emits complete event\n\t * @emits complete\n\t * @example\n\t * // Final step handler\n\t * handleComplete() {\n\t * if (allStepsValid) {\n\t * this.complete.emit();\n\t * }\n\t * }\n\t */\n\thandleComplete() {\n\t\tthis.complete.emit();\n\t}\n}\n","@let contentsVar = contents();\n@let varinatVar = variant();\n\n<div\n\t[class]=\"varinatVar === 'horizontal' ? 'flex flex-col gap-6' : 'flex gap-6'\"\n\t[ngClass]=\"{ 'rounded-box bg-base-200 shadow-main p-6': card() && varinatVar === 'horizontal' }\"\n>\n\t\n\t@if (varinatVar === 'horizontal') {\n\t\t<ul class=\"flex gap-4 px-[20%] pt-6\">\n\t\t\t@for (step of wizardService.steps(); track $index) {\n\t\t\t\t<li [ngClass]=\"{ 'flex-1': contentsVar.length - 1 !== $index }\">\n\t\t\t\t\t<div class=\"flex items-center gap-4\">\n\t\t\t\t\t\t<st-wizard-step [icon]=\"step.icon\" [stepIndex]=\"$index\" [status]=\"step.status\"></st-wizard-step>\n\t\t\t\t\t\t@if (contentsVar.length - 1 !== $index) {\n\t\t\t\t\t\t\t<div class=\"flex flex-1 flex-col justify-center\">\n\t\t\t\t\t\t\t\t<div class=\"flex -translate-y-6 justify-center\">\n\t\t\t\t\t\t\t\t\t<st-wizard-marker [status]=\"step.status\"></st-wizard-marker>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<st-wizard-sub-step [stepIndex]=\"$index\" [stepStatus]=\"step.status\"></st-wizard-sub-step>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"mt-1 w-[50px]\">\n\t\t\t\t\t\t<div class=\"relative flex max-w-fit flex-col items-center\">\n\t\t\t\t\t\t\t<div class=\"min-w-max\">\n\t\t\t\t\t\t\t\t<span typography [tyVariant]=\"'body-sm'\" [tyColor]=\"'base'\" [tyFontWeight]=\"'medium'\">{{ step.label }}</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div class=\"text-secondary relative -top-1 min-w-max\">\n\t\t\t\t\t\t\t\t<span typography [tyVariant]=\"'body-xs'\" [tyColor]=\"'inherit'\" [tyFontWeight]=\"'normal'\">\n\t\t\t\t\t\t\t\t\t{{ 'sdk.wizard.wizardWrapper.step' | translate: { index: $index + 1 } }}</span\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</li>\n\t\t\t}\n\t\t</ul>\n\t} @else {\n\t\t<ul class=\"grid h-min max-h-min gap-4\" [ngClass]=\"{ 'rounded-box bg-base-200 shadow-main p-6': card() }\">\n\t\t\t@for (step of wizardService.steps(); track $index) {\n\t\t\t\t<li>\n\t\t\t\t\t\n\t\t\t\t\t<div class=\"grid grid-rows-[min-content_min-content] gap-4\">\n\t\t\t\t\t\t<div class=\"flex items-center gap-3\">\n\t\t\t\t\t\t\t<st-wizard-step [icon]=\"step.icon\" [stepIndex]=\"$index\" [status]=\"step.status\"></st-wizard-step>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t<div class=\"relative flex max-w-fit flex-col\">\n\t\t\t\t\t\t\t\t\t<div class=\"min-w-max\">\n\t\t\t\t\t\t\t\t\t\t<span typography [tyVariant]=\"'body-sm'\" [tyColor]=\"'base'\" [tyFontWeight]=\"'medium'\">{{ step.label }}</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div class=\"text-neutral relative -top-1 min-w-max\">\n\t\t\t\t\t\t\t\t\t\t<span typography [tyVariant]=\"'body-xs'\" [tyColor]=\"'inherit'\" [tyFontWeight]=\"'normal'\">\n\t\t\t\t\t\t\t\t\t\t\t{{ 'sdk.wizard.wizardWrapper.step' | translate: { index: $index + 1 } }}</span\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t@if (contentsVar.length - 1 !== $index) {\n\t\t\t\t\t\t\t<div class=\"flex flex-col justify-center\">\n\t\t\t\t\t\t\t\t<st-wizard-sub-step variant=\"vertical\" [stepIndex]=\"$index\" [stepStatus]=\"step.status\"></st-wizard-sub-step>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</li>\n\t\t\t}\n\t\t</ul>\n\t}\n\n\t<div class=\"flex flex-1 flex-col gap-6\" [ngClass]=\"{ 'rounded-box bg-base-200 shadow-main p-6': card() && varinatVar === 'vertical' }\">\n\t\t\n\t\t<div>\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\n\t\t\n\t\t@if (this.showControls()) {\n\t\t\t<div class=\"flex items-center justify-end gap-3\">\n\t\t\t\t@if (wizardService.isCurrentStepFirst()) {\n\t\t\t\t\t<st-button variant=\"secondary\" [icon]=\"iconReturn\" (click)=\"handleBack()\">{{ 'sdk.wizard.wizardWrapper.back' | translate }}</st-button>\n\t\t\t\t} @else {\n\t\t\t\t\t<st-button [icon]=\"iconChevronLeft\" variant=\"secondary\" (click)=\"handlePrevious()\">{{\n\t\t\t\t\t\t'sdk.wizard.wizardWrapper.previous' | translate\n\t\t\t\t\t}}</st-button>\n\t\t\t\t}\n\t\t\t\t@if (wizardService.isCurrentStepLast()) {\n\t\t\t\t\t<st-button\n\t\t\t\t\t\t[disabled]=\"!wizardService.areAllStepsValid()\"\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t(click)=\"handleComplete()\"\n\t\t\t\t\t\t[disabled]=\"loading()\"\n\t\t\t\t\t\t[loader]=\"loading()\"\n\t\t\t\t\t>\n\t\t\t\t\t\t@if (!loading()) {\n\t\t\t\t\t\t\t<st-icon [icon]=\"iconSave\"></st-icon>\n\n\t\t\t\t\t\t\t{{ 'sdk.wizard.wizardWrapper.end' | translate }}\n\t\t\t\t\t\t}\n\t\t\t\t\t</st-button>\n\t\t\t\t} @else {\n\t\t\t\t\t<st-button [icon]=\"iconChevronRight\" iconPosition=\"right\" [disabled]=\"!wizardService.currentStep().isValid\" (click)=\"handleNext()\">{{\n\t\t\t\t\t\t'sdk.wizard.wizardWrapper.next' | translate\n\t\t\t\t\t}}</st-button>\n\t\t\t\t}\n\t\t\t</div>\n\t\t} @else {\n\t\t\t<ng-content select=\"st-wizard-actions\"></ng-content>\n\t\t}\n\t</div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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