SiWizardComponent documentation¶

selector

si-wizard

Input Properties¶

Name	Type	Default	Description
backText ¶	`TranslatableString`	$localize`:@@SI_WIZARD.BACK:Back`	Description of back button.
cancelText ¶	`TranslatableString`	$localize`:@@SI_WIZARD.CANCEL:Cancel`	Description of cancel button.
completionPageVisibleTime ¶	`number`	`3000`	Define how many milliseconds the completion page is visible.
completionText ¶	`TranslatableString`	$localize`:@@SI_WIZARD.COMPLETED:Wizard completed!`	Text shown if you complete the wizard.
enableCompletionPage ¶	`boolean`	`false`	Display a predefined page by the end of the wizard.
hasCancel ¶	`boolean`	`false`	Show the cancel button
hideNavigation ¶	`boolean`	`false`	Hide the navigation buttons previous/next.
hideSave ¶	`boolean`	`false`	Hide the save button.
inlineNavigation ¶	`boolean`	`false`	Set false to show navigation buttons in footer instead of inline.
nextText ¶	`TranslatableString`	$localize`:@@SI_WIZARD.NEXT:Next`	Description of next button.
saveText ¶	`TranslatableString`	$localize`:@@SI_WIZARD.SAVE:Save`	Description of save button.
showStepNumbers ¶	`boolean`	`false`	Use number representation for steps.
showVerticalDivider ¶	`boolean`	`false`	Set to true to display a divider between the steps and the content in the vertical
stepActiveIcon ¶	`string`	`'elementRadioChecked'`	Class name of icon shown for the active step.
stepCompletedIcon ¶	`string`	`'elementCheckedFilled'`	Class name of icon shown when a step was completed.
stepFailedIcon ¶	`string`	`'elementWarningFilled'`	Class name of icon shown when a step had an error.
stepIcon ¶	`string`	`'elementNotChecked'`	Class name of icon shown for current and upcoming steps.
verticalLayout ¶	`boolean`	`false`	Set the orientation of the wizard to vertical.
verticalMaxSize ¶	`string`		Set the wizard step container max size in vertical layout.
verticalMinSize ¶	`string`		Set the wizard step container min size in vertical layout.

Output Properties¶

Name	Type	Description
completionAction ¶	`void`	Callback function triggered after the wizard has been completed.
wizardCancel ¶	`void`	Callback function triggered if the wizard has been canceled.

Attributes and Methods¶

Name	Type	Description
back(...) ¶	(delta: `number` = `1`) => `void`	Go to the previous wizard step. Parameters delta: `number` = `1` optional number of steps to move backwards.
(readonly) currentStep ¶	(`undefined` \| `SiWizardStepComponent`)	Get current visible wizard step.
(readonly) index ¶	`number`	Get the current step wizard step index.
next(...) ¶	(delta: `number` = `1`) => `void`	Go to the next wizard step. Parameters delta: `number` = `1` optional number of steps to move forward.
save() ¶	() => `void`	Triggers the save action to complete the wizard.
(readonly) stepCount ¶	`number`	Get number of wizard steps.

Types Documentation¶

TranslatableString (`string` & `Translatable`)¶ Type alias Represents a translatable string. This can either be a translation key, e.g. `ACTIONS.EDIT` that will be automatically translated when displayed on the UI or a pre-translated string, e.g. `Edit` . Equivalent to a normal string in usage and functionality.

Translatable ¶ import imported from @siemens/element-translate-ng

SiWizardStepComponent

¶

Class

▶

Constructor
() => `{}`¶

Properties
back: `OutputEmitterRef`<`void`> = ...¶
failed: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
heading: `InputSignal`<`TranslatableString`> = `''`¶
Whether this step is currently active or not. isActive: `WritableSignal`<`boolean`> = `false`¶
isNextNavigable: `InputSignalWithTransform`<`boolean`, `unknown`> = `true`¶
isValid: `InputSignalWithTransform`<`boolean`, `unknown`> = `true`¶
next: `OutputEmitterRef`<`void`> = ...¶
save: `OutputEmitterRef`<`void`> = ...¶

Except where otherwise noted, content on this site is licensed under MIT License.