@y3krulez/angular-archwizard
Version:
The port of angular-archwizard, supporting IVY and thus being compatible with Angular16+
1 lines • 115 kB
Source Map (JSON)
{"version":3,"file":"y3krulez-angular-archwizard.mjs","sources":["../../src/lib/directives/wizard-step-symbol.directive.ts","../../src/lib/directives/wizard-step-title.directive.ts","../../src/lib/util/wizard-step.interface.ts","../../src/lib/util/wizard-completion-step.interface.ts","../../src/lib/components/wizard-completion-step.component.ts","../../src/lib/components/wizard-completion-step.component.html","../../src/lib/navigation/wizard.interface.ts","../../src/lib/util/step-id.interface.ts","../../src/lib/util/step-index.interface.ts","../../src/lib/util/step-offset.interface.ts","../../src/lib/directives/go-to-step.directive.ts","../../src/lib/components/wizard-navigation-bar.component.ts","../../src/lib/components/wizard-navigation-bar.component.html","../../src/lib/components/wizard-step.component.ts","../../src/lib/components/wizard-step.component.html","../../src/lib/util/moving-direction.enum.ts","../../src/lib/navigation/base-navigation-mode.interface.ts","../../src/lib/navigation/configurable-navigation-mode.ts","../../src/lib/components/wizard.component.ts","../../src/lib/components/wizard.component.html","../../src/lib/directives/enable-back-links.directive.ts","../../src/lib/directives/next-step.directive.ts","../../src/lib/directives/optional-step.directive.ts","../../src/lib/directives/previous-step.directive.ts","../../src/lib/directives/reset-wizard.directive.ts","../../src/lib/directives/selected-step.directive.ts","../../src/lib/directives/wizard-completion-step.directive.ts","../../src/lib/directives/wizard-step.directive.ts","../../src/lib/directives/navigation-mode.directive.ts","../../src/lib/directives/completed-step.directive.ts","../../src/lib/archwizard.module.ts","../../src/index.ts","../../src/y3krulez-angular-archwizard.ts"],"sourcesContent":["import {Directive, TemplateRef} from '@angular/core';\r\n\r\n/**\r\n * The `awWizardStepSymbol` directive can be used as an alternative to the `navigationSymbol` input of a [[WizardStep]]\r\n * to define the step symbol inside the navigation bar. This way step symbol may contain arbitrary content.\r\n *\r\n * ### Syntax\r\n *\r\n * ```html\r\n * <ng-template awWizardStepSymbol>\r\n * ...\r\n * </ng-template>\r\n * ```\r\n */\r\n@Directive({\r\n selector: 'ng-template[awStepSymbol], ng-template[awWizardStepSymbol]'\r\n})\r\nexport class WizardStepSymbolDirective {\r\n /**\r\n * Constructor\r\n *\r\n * @param templateRef A reference to the content of the `ng-template` that contains this [[WizardStepSymbolDirective]]\r\n */\r\n constructor(public templateRef: TemplateRef<any>) {\r\n }\r\n}\r\n","import {Directive, TemplateRef} from '@angular/core';\r\n\r\n/**\r\n * The `awWizardStepTitle` directive can be used as an alternative to the `stepTitle` input of a [[WizardStep]]\r\n * to define the content of a step title inside the navigation bar.\r\n * This step title can be freely created and can contain more than only plain text\r\n *\r\n * ### Syntax\r\n *\r\n * ```html\r\n * <ng-template awWizardStepTitle>\r\n * ...\r\n * </ng-template>\r\n * ```\r\n *\r\n * @author Marc Arndt\r\n */\r\n@Directive({\r\n selector: 'ng-template[awStepTitle], ng-template[awWizardStepTitle]'\r\n})\r\nexport class WizardStepTitleDirective {\r\n /**\r\n * Constructor\r\n *\r\n * @param templateRef A reference to the content of the `ng-template` that contains this [[WizardStepTitleDirective]]\r\n */\r\n constructor(public templateRef: TemplateRef<any>) {\r\n }\r\n}\r\n","import { ContentChild, EventEmitter, HostBinding, Input, Output, Directive } from '@angular/core';\r\nimport {WizardStepSymbolDirective} from '../directives/wizard-step-symbol.directive';\r\nimport {WizardStepTitleDirective} from '../directives/wizard-step-title.directive';\r\nimport {MovingDirection} from './moving-direction.enum';\r\nimport {NavigationSymbol} from './navigation-symbol.interface';\r\n\r\n/**\r\n * Basic functionality every type of wizard step needs to provide\r\n *\r\n * @author Marc Arndt\r\n */\r\n@Directive()\r\n/* tslint:disable-next-line directive-class-suffix */\r\nexport abstract class WizardStep {\r\n /**\r\n * A step title property, which contains the visible header title of the step.\r\n * This title is then shown inside the navigation bar.\r\n * Compared to `stepTitle` this property can contain any html content and not only plain text\r\n */\r\n @ContentChild(WizardStepTitleDirective)\r\n public stepTitleTemplate: WizardStepTitleDirective;\r\n\r\n /**\r\n * A step symbol property that, if defined, overrides `navigationSymbol`.\r\n * Allows to display arbitrary content as a step symbol instead of plain text.\r\n */\r\n @ContentChild(WizardStepSymbolDirective)\r\n public stepSymbolTemplate: WizardStepSymbolDirective;\r\n\r\n /**\r\n * A step id, unique to the step\r\n */\r\n @Input()\r\n public stepId: string;\r\n\r\n /**\r\n * A step title property, which contains the visible header title of the step.\r\n * This title is only shown inside the navigation bar, if `stepTitleTemplate` is not defined or null.\r\n */\r\n @Input()\r\n public stepTitle: string;\r\n\r\n /**\r\n * A symbol property, which contains an optional symbol for the step inside the navigation bar.\r\n * Takes effect when `stepSymbolTemplate` is not defined or null.\r\n */\r\n @Input()\r\n public navigationSymbol: NavigationSymbol = {symbol: ''};\r\n\r\n /**\r\n * A boolean describing if the wizard step is currently selected\r\n */\r\n public selected = false;\r\n\r\n /**\r\n * A boolean describing if the wizard step has been completed\r\n */\r\n public completed = false;\r\n\r\n /**\r\n * A boolean describing if the wizard step is shown as completed when the wizard is presented to the user\r\n *\r\n * Users will typically use `CompletedStepDirective` to set this flag\r\n */\r\n public initiallyCompleted = false;\r\n\r\n /**\r\n * A boolean describing if the wizard step is being edited after being competed\r\n *\r\n * This flag can only be true when `selected` is true.\r\n */\r\n public editing = false;\r\n\r\n /**\r\n * A boolean describing, if the wizard step should be selected by default, i.e. after the wizard has been initialized as the initial step\r\n */\r\n public defaultSelected = false;\r\n\r\n /**\r\n * A boolean describing if the wizard step is an optional step\r\n */\r\n public optional = false;\r\n\r\n /**\r\n * A function or boolean deciding, if this step can be entered\r\n */\r\n @Input()\r\n public canEnter: ((direction: MovingDirection) => boolean) | ((direction: MovingDirection) => Promise<boolean>) | boolean = true;\r\n\r\n /**\r\n * A function or boolean deciding, if this step can be exited\r\n */\r\n @Input()\r\n public canExit: ((direction: MovingDirection) => boolean) | ((direction: MovingDirection) => Promise<boolean>) | boolean = true;\r\n\r\n /**\r\n * This [[EventEmitter]] is called when the step is entered.\r\n * The bound method should be used to do initialization work.\r\n */\r\n @Output()\r\n public stepEnter: EventEmitter<MovingDirection> = new EventEmitter<MovingDirection>();\r\n\r\n /**\r\n * This [[EventEmitter]] is called when the step is exited.\r\n * The bound method can be used to do cleanup work.\r\n */\r\n @Output()\r\n public stepExit: EventEmitter<MovingDirection> = new EventEmitter<MovingDirection>();\r\n\r\n /**\r\n * Returns true if this wizard step should be visible to the user.\r\n * If the step should be visible to the user false is returned, otherwise true\r\n */\r\n @HostBinding('hidden')\r\n public get hidden(): boolean {\r\n return !this.selected;\r\n }\r\n\r\n /**\r\n * This method returns true, if this wizard step can be transitioned with a given direction.\r\n * Transitioned in this case means either entered or exited, depending on the given `condition` parameter.\r\n *\r\n * @param condition A condition variable, deciding if the step can be transitioned\r\n * @param direction The direction in which this step should be transitioned\r\n * @returns A [[Promise]] containing `true`, if this step can transitioned in the given direction\r\n * @throws An `Error` is thrown if `condition` is neither a function nor a boolean\r\n */\r\n private static canTransitionStep(condition: ((direction: MovingDirection) => boolean) |\r\n ((direction: MovingDirection) => Promise<boolean>) |\r\n boolean,\r\n direction: MovingDirection): Promise<boolean> {\r\n if (typeof(condition) === typeof(true)) {\r\n return Promise.resolve(condition as boolean);\r\n } else if (condition instanceof Function) {\r\n return Promise.resolve(condition(direction));\r\n } else {\r\n return Promise.reject(new Error(`Input value '${condition}' is neither a boolean nor a function`));\r\n }\r\n }\r\n\r\n /**\r\n * A function called when the step is entered\r\n *\r\n * @param direction The direction in which the step is entered\r\n */\r\n public enter(direction: MovingDirection): void {\r\n this.stepEnter.emit(direction);\r\n }\r\n\r\n /**\r\n * A function called when the step is exited\r\n *\r\n * @param direction The direction in which the step is exited\r\n */\r\n public exit(direction: MovingDirection) {\r\n this.stepExit.emit(direction);\r\n }\r\n\r\n /**\r\n * This method returns true, if this wizard step can be entered from the given direction.\r\n * Because this method depends on the value `canEnter`, it will throw an error, if `canEnter` is neither a boolean\r\n * nor a function.\r\n *\r\n * @param direction The direction in which this step should be entered\r\n * @returns A [[Promise]] containing `true`, if the step can be entered in the given direction, false otherwise\r\n * @throws An `Error` is thrown if `anEnter` is neither a function nor a boolean\r\n */\r\n public canEnterStep(direction: MovingDirection): Promise<boolean> {\r\n return WizardStep.canTransitionStep(this.canEnter, direction);\r\n }\r\n\r\n /**\r\n * This method returns true, if this wizard step can be exited into given direction.\r\n * Because this method depends on the value `canExit`, it will throw an error, if `canExit` is neither a boolean\r\n * nor a function.\r\n *\r\n * @param direction The direction in which this step should be left\r\n * @returns A [[Promise]] containing `true`, if the step can be exited in the given direction, false otherwise\r\n * @throws An `Error` is thrown if `canExit` is neither a function nor a boolean\r\n */\r\n public canExitStep(direction: MovingDirection): Promise<boolean> {\r\n return WizardStep.canTransitionStep(this.canExit, direction);\r\n }\r\n}\r\n","import {EventEmitter, Directive} from '@angular/core';\r\nimport {WizardStep} from './wizard-step.interface';\r\nimport {MovingDirection} from './moving-direction.enum';\r\n\r\n/**\r\n * Basic functionality every wizard completion step needs to provide\r\n *\r\n * @author Marc Arndt\r\n */\r\n@Directive()\r\n/* tslint:disable-next-line directive-class-suffix */\r\nexport abstract class WizardCompletionStep extends WizardStep {\r\n /**\r\n * @inheritDoc\r\n */\r\n public stepExit = new EventEmitter<MovingDirection>();\r\n\r\n /**\r\n * @inheritDoc\r\n */\r\n public canExit: ((direction: MovingDirection) => boolean) | boolean = false;\r\n\r\n /**\r\n * @inheritDoc\r\n */\r\n public enter(direction: MovingDirection): void {\r\n this.completed = true;\r\n this.stepEnter.emit(direction);\r\n }\r\n\r\n /**\r\n * @inheritDoc\r\n */\r\n public exit(direction: MovingDirection): void {\r\n // set this completion step as incomplete (unless it happens to be initiallyCompleted)\r\n this.completed = this.initiallyCompleted;\r\n this.stepExit.emit(direction);\r\n }\r\n}\r\n","import {Component, forwardRef} from '@angular/core';\r\nimport {WizardCompletionStep} from '../util/wizard-completion-step.interface';\r\nimport {WizardStep} from '../util/wizard-step.interface';\r\n\r\n/**\r\n * The `aw-wizard-completion-step` component can be used to define a completion/success step at the end of your wizard\r\n * After a `aw-wizard-completion-step` has been entered, it has the characteristic that the user is blocked from\r\n * leaving it again to a previous step.\r\n * In addition entering a `aw-wizard-completion-step` automatically sets the `aw-wizard` and all steps inside the `aw-wizard`\r\n * as completed.\r\n *\r\n * ### Syntax\r\n *\r\n * ```html\r\n * <aw-wizard-completion-step [stepTitle]=\"title of the wizard step\"\r\n * [navigationSymbol]=\"{ symbol: 'navigation symbol', fontFamily: 'navigation symbol font family' }\"\r\n * (stepEnter)=\"event emitter to be called when the wizard step is entered\"\r\n * (stepExit)=\"event emitter to be called when the wizard step is exited\">\r\n * ...\r\n * </aw-wizard-completion-step>\r\n * ```\r\n *\r\n * ### Example\r\n *\r\n * ```html\r\n * <aw-wizard-completion-step stepTitle=\"Step 1\" [navigationSymbol]=\"{ symbol: '1' }\">\r\n * ...\r\n * </aw-wizard-completion-step>\r\n * ```\r\n *\r\n * With a navigation symbol from the `font-awesome` font:\r\n *\r\n * ```html\r\n * <aw-wizard-completion-step stepTitle=\"Step 1\" [navigationSymbol]=\"{ symbol: '', fontFamily: 'FontAwesome' }\">\r\n * ...\r\n * </aw-wizard-completion-step>\r\n * ```\r\n *\r\n * @author Marc Arndt\r\n */\r\n@Component({\r\n selector: 'aw-wizard-completion-step',\r\n templateUrl: 'wizard-completion-step.component.html',\r\n providers: [\r\n {provide: WizardStep, useExisting: forwardRef(() => WizardCompletionStepComponent)},\r\n {provide: WizardCompletionStep, useExisting: forwardRef(() => WizardCompletionStepComponent)}\r\n ]\r\n})\r\nexport class WizardCompletionStepComponent extends WizardCompletionStep {\r\n}\r\n","<ng-content></ng-content>\r\n","import { EventEmitter, InjectionToken } from \"@angular/core\";\r\nimport { WizardStep } from \"../util/wizard-step.interface\";\r\n\r\nexport const WIZARD_TOKEN = new InjectionToken<Wizard>('WIZARD_TOKEN');\r\n\r\nexport interface Wizard {\r\n navBarDirection: string;\r\n get wizardSteps(): WizardStep[];\r\n disableNavigationBar: boolean;\r\n isNavigable(destinationIndex: number): boolean;\r\n getIndexOfStep(step: WizardStep): number;\r\n get completed(): boolean;\r\n\r\n getIndexOfStepWithId(stepId: string): number;\r\n goToStep(destinationIndex: number, preFinalize?: EventEmitter<void>, postFinalize?: EventEmitter<void>): void;\r\n}","import {WizardStep} from './wizard-step.interface';\r\n\r\n/**\r\n * An unique identifier of a wizard step\r\n *\r\n * @author Marc Arndt\r\n */\r\nexport interface StepId {\r\n /**\r\n * The id of the destination step\r\n */\r\n stepId: string;\r\n}\r\n\r\n/**\r\n * Checks whether the given `value` implements the interface [[StepId]].\r\n *\r\n * @param value The value to be checked\r\n * @returns True if the given value implements [[StepId]] and false otherwise\r\n */\r\nexport function isStepId(value: any): value is StepId {\r\n return value.hasOwnProperty('stepId') && !(value instanceof WizardStep);\r\n}\r\n","/**\r\n * An index of a wizard step.\r\n * This index is the index of the step inside the wizard.\r\n * The index is always zero based, i.e. the step with index 0 is the first step of the wizard\r\n *\r\n * @author Marc Arndt\r\n */\r\nexport interface StepIndex {\r\n /**\r\n * The index of the destination step\r\n */\r\n stepIndex: number;\r\n}\r\n\r\n/**\r\n * Checks whether the given `value` implements the interface [[StepIndex]].\r\n *\r\n * @param value The value to be checked\r\n * @returns True if the given value implements [[StepIndex]] and false otherwise\r\n */\r\nexport function isStepIndex(value: any): value is StepIndex {\r\n return value.hasOwnProperty('stepIndex');\r\n}\r\n","/**\r\n * An offset between two steps.\r\n * This offset can be either positive or negative.\r\n * A positive offset means, that the offset step is after the other step, while a negative offset means,\r\n * that the offset step is ahead of the other step.\r\n *\r\n * @author Marc Arndt\r\n */\r\nexport interface StepOffset {\r\n /**\r\n * The offset to the destination step\r\n */\r\n stepOffset: number;\r\n}\r\n\r\n/**\r\n * Checks whether the given `value` implements the interface [[StepOffset]].\r\n *\r\n * @param value The value to be checked\r\n * @returns True if the given value implements [[StepOffset]] and false otherwise\r\n */\r\nexport function isStepOffset(value: any): value is StepOffset {\r\n return value.hasOwnProperty('stepOffset');\r\n}\r\n","import { Directive, EventEmitter, HostListener, Inject, Input, Optional, Output } from '@angular/core';\r\nimport { isStepId, StepId } from '../util/step-id.interface';\r\nimport { isStepIndex, StepIndex } from '../util/step-index.interface';\r\nimport { isStepOffset, StepOffset } from '../util/step-offset.interface';\r\nimport { WizardStep } from '../util/wizard-step.interface';\r\nimport { WIZARD_TOKEN, Wizard } from '../navigation/wizard.interface';\r\n\r\n\r\n/**\r\n * The `awGoToStep` directive can be used to navigate to a given step.\r\n * This step can be defined in one of multiple formats\r\n *\r\n * ### Syntax\r\n *\r\n * With absolute step index:\r\n *\r\n * ```html\r\n * <button [awGoToStep]=\"{ stepIndex: absolute step index }\" (finalize)=\"finalize method\">...</button>\r\n * ```\r\n *\r\n * With unique step id:\r\n *\r\n * ```html\r\n * <button [awGoToStep]=\"{ stepId: 'step id of destination step' }\" (finalize)=\"finalize method\">...</button>\r\n * ```\r\n *\r\n * With a wizard step object:\r\n *\r\n * ```html\r\n * <button [awGoToStep]=\"wizard step object\" (finalize)=\"finalize method\">...</button>\r\n * ```\r\n *\r\n * With an offset to the defining step:\r\n *\r\n * ```html\r\n * <button [awGoToStep]=\"{ stepOffset: offset }\" (finalize)=\"finalize method\">...</button>\r\n * ```\r\n *\r\n * @author Marc Arndt\r\n */\r\n@Directive({\r\n selector: '[awGoToStep]'\r\n})\r\nexport class GoToStepDirective {\r\n /**\r\n * This [[EventEmitter]] is called directly before the current step is exited during a transition through a component with this directive.\r\n */\r\n @Output()\r\n public preFinalize: EventEmitter<void> = new EventEmitter();\r\n\r\n /**\r\n * This [[EventEmitter]] is called directly after the current step is exited during a transition through a component with this directive.\r\n */\r\n @Output()\r\n public postFinalize: EventEmitter<void> = new EventEmitter();\r\n\r\n /**\r\n * The destination step, to which the wizard should navigate, after the component, having this directive has been activated.\r\n * This destination step can be given either as a [[WizardStep]] containing the step directly,\r\n * a [[StepOffset]] between the current step and the `wizardStep`, in which this directive has been used,\r\n * or a step index as a number or string\r\n */\r\n // tslint:disable-next-line:no-input-rename\r\n @Input('awGoToStep')\r\n public targetStep: WizardStep | StepOffset | StepIndex | StepId;\r\n\r\n /**\r\n * Constructor\r\n *\r\n * @param wizard The wizard component\r\n * @param wizardStep The wizard step, which contains this [[GoToStepDirective]]\r\n */\r\n constructor(@Inject(WIZARD_TOKEN) public wizard: Wizard, @Optional() private wizardStep: WizardStep) {\r\n }\r\n\r\n /**\r\n * A convenience field for `preFinalize`\r\n */\r\n public get finalize(): EventEmitter<void> {\r\n return this.preFinalize;\r\n }\r\n\r\n /**\r\n * A convenience name for `preFinalize`\r\n *\r\n * @param emitter The [[EventEmitter]] to be set\r\n */\r\n @Output()\r\n public set finalize(emitter: EventEmitter<void>) {\r\n /* istanbul ignore next */\r\n this.preFinalize = emitter;\r\n }\r\n\r\n /**\r\n * Returns the destination step of this directive as an absolute step index inside the wizard\r\n *\r\n * @returns The index of the destination step\r\n * @throws If `targetStep` is of an unknown type an `Error` is thrown\r\n */\r\n public get destinationStep(): number {\r\n let destinationStep: number;\r\n\r\n if (isStepIndex(this.targetStep)) {\r\n destinationStep = this.targetStep.stepIndex;\r\n } else if (isStepId(this.targetStep)) {\r\n destinationStep = this.wizard.getIndexOfStepWithId(this.targetStep.stepId);\r\n } else if (isStepOffset(this.targetStep) && this.wizardStep !== null) {\r\n destinationStep = this.wizard.getIndexOfStep(this.wizardStep) + this.targetStep.stepOffset;\r\n } else if (this.targetStep instanceof WizardStep) {\r\n destinationStep = this.wizard.getIndexOfStep(this.targetStep);\r\n } else {\r\n throw new Error(`Input 'targetStep' is neither a WizardStep, StepOffset, StepIndex or StepId`);\r\n }\r\n\r\n return destinationStep;\r\n }\r\n\r\n /**\r\n * Listener method for `click` events on the component with this directive.\r\n * After this method is called the wizard will try to transition to the `destinationStep`\r\n */\r\n @HostListener('click')\r\n public onClick(): void {\r\n this.wizard.goToStep(this.destinationStep, this.preFinalize, this.postFinalize);\r\n }\r\n}\r\n","import { Component, Inject, Input } from '@angular/core';\r\nimport { WizardCompletionStep } from '../util/wizard-completion-step.interface';\r\nimport { WizardStep } from '../util/wizard-step.interface';\r\nimport { WIZARD_TOKEN, Wizard } from '../navigation/wizard.interface';\r\n\r\n/**\r\n * The `aw-wizard-navigation-bar` component contains the navigation bar inside a [[WizardComponent]].\r\n * To correctly display the navigation bar, it's required to set the right css classes for the navigation bar,\r\n * otherwise it will look like a normal `ul` component.\r\n *\r\n * ### Syntax\r\n *\r\n * ```html\r\n * <aw-wizard-navigation-bar></aw-wizard-navigation-bar>\r\n * ```\r\n *\r\n * @author Marc Arndt\r\n */\r\n@Component({\r\n selector: 'aw-wizard-navigation-bar',\r\n templateUrl: 'wizard-navigation-bar.component.html',\r\n})\r\nexport class WizardNavigationBarComponent {\r\n /**\r\n * Constructor\r\n *\r\n * @param wizard The state the wizard currently resides in\r\n */\r\n constructor(@Inject(WIZARD_TOKEN) public wizard: Wizard) {\r\n }\r\n\r\n /**\r\n * Returns all [[WizardStep]]s contained in the wizard\r\n *\r\n * @returns An array containing all [[WizardStep]]s\r\n */\r\n get wizardSteps(): Array<WizardStep> {\r\n switch (this.wizard.navBarDirection) {\r\n case 'right-to-left':\r\n return this.wizard.wizardSteps.slice().reverse();\r\n case 'left-to-right':\r\n default:\r\n return this.wizard.wizardSteps;\r\n }\r\n }\r\n\r\n /**\r\n * Returns the number of wizard steps, that need to be displaced in the navigation bar\r\n *\r\n * @returns The number of wizard steps to be displayed\r\n */\r\n get numberOfWizardSteps(): number {\r\n return this.wizard.wizardSteps.length;\r\n }\r\n\r\n /**\r\n * Checks, whether a [[WizardStep]] can be marked as `current` in the navigation bar\r\n *\r\n * @param wizardStep The wizard step to be checked\r\n * @returns True if the step can be marked as `current`\r\n */\r\n public isCurrent(wizardStep: WizardStep): boolean {\r\n return wizardStep.selected;\r\n }\r\n\r\n /**\r\n * Checks, whether a [[WizardStep]] can be marked as `editing` in the navigation bar\r\n *\r\n * @param wizardStep The wizard step to be checked\r\n * @returns True if the step can be marked as `editing`\r\n */\r\n public isEditing(wizardStep: WizardStep): boolean {\r\n return wizardStep.editing;\r\n }\r\n\r\n /**\r\n * Checks, whether a [[WizardStep]] can be marked as `done` in the navigation bar\r\n *\r\n * @param wizardStep The wizard step to be checked\r\n * @returns True if the step can be marked as `done`\r\n */\r\n public isDone(wizardStep: WizardStep): boolean {\r\n return wizardStep.completed;\r\n }\r\n\r\n /**\r\n * Checks, whether a [[WizardStep]] can be marked as `optional` in the navigation bar\r\n *\r\n * @param wizardStep The wizard step to be checked\r\n * @returns True if the step can be marked as `optional`\r\n */\r\n public isOptional(wizardStep: WizardStep): boolean {\r\n return wizardStep.optional;\r\n }\r\n\r\n /**\r\n * Checks, whether a [[WizardStep]] can be marked as `completed` in the navigation bar.\r\n *\r\n * The `completed` class is only applied to completion steps.\r\n *\r\n * @param wizardStep The wizard step to be checked\r\n * @returns True if the step can be marked as `completed`\r\n */\r\n public isCompleted(wizardStep: WizardStep): boolean {\r\n return wizardStep instanceof WizardCompletionStep && this.wizard.completed;\r\n }\r\n\r\n /**\r\n * Checks, whether a [[WizardStep]] can be marked as `navigable` in the navigation bar.\r\n * A wizard step can be navigated to if:\r\n * - the step is currently not selected\r\n * - the navigation bar isn't disabled\r\n * - the navigation mode allows navigation to the step\r\n *\r\n * @param wizardStep The wizard step to be checked\r\n * @returns True if the step can be marked as navigable\r\n */\r\n public isNavigable(wizardStep: WizardStep): boolean {\r\n return !wizardStep.selected && !this.wizard.disableNavigationBar &&\r\n this.wizard.isNavigable(this.wizard.getIndexOfStep(wizardStep));\r\n }\r\n}\r\n","<ul class=\"steps-indicator steps-{{numberOfWizardSteps}}\">\r\n <li [attr.id]=\"step.stepId\" *ngFor=\"let step of wizardSteps\" [ngClass]=\"{\r\n 'current': isCurrent(step),\r\n 'editing': isEditing(step),\r\n 'done': isDone(step),\r\n 'optional': isOptional(step),\r\n 'completed': isCompleted(step),\r\n 'navigable': isNavigable(step)\r\n }\">\r\n <a [awGoToStep]=\"step\">\r\n <div class=\"label\">\r\n <ng-container *ngIf=\"step.stepTitleTemplate\" [ngTemplateOutlet]=\"step.stepTitleTemplate.templateRef\"\r\n [ngTemplateOutletContext]=\"{wizardStep: step}\"></ng-container>\r\n <ng-container *ngIf=\"!step.stepTitleTemplate\">{{step.stepTitle}}</ng-container>\r\n </div>\r\n <div class=\"step-indicator\"\r\n [ngStyle]=\"{ 'font-family': step.stepSymbolTemplate ? '' : step.navigationSymbol.fontFamily }\">\r\n <ng-container *ngIf=\"step.stepSymbolTemplate\" [ngTemplateOutlet]=\"step.stepSymbolTemplate.templateRef\"\r\n [ngTemplateOutletContext]=\"{wizardStep: step}\"></ng-container>\r\n <ng-container *ngIf=\"!step.stepSymbolTemplate\">{{step.navigationSymbol.symbol}}</ng-container>\r\n </div>\r\n </a>\r\n </li>\r\n</ul>\r\n","import {Component, forwardRef} from '@angular/core';\r\nimport {WizardStep} from '../util/wizard-step.interface';\r\n\r\n/**\r\n * The `aw-wizard-step` component is used to define a normal step inside a wizard.\r\n *\r\n * ### Syntax\r\n *\r\n * With `stepTitle` and `navigationSymbol` inputs:\r\n *\r\n * ```html\r\n * <aw-wizard-step [stepTitle]=\"step title\" [navigationSymbol]=\"{ symbol: 'symbol', fontFamily: 'font-family' }\"\r\n * [canExit]=\"deciding function\" (stepEnter)=\"enter function\" (stepExit)=\"exit function\">\r\n * ...\r\n * </aw-wizard-step>\r\n * ```\r\n *\r\n * With `awWizardStepTitle` and `awWizardStepSymbol` directives:\r\n *\r\n * ```html\r\n * <aw-wizard-step\"\r\n * [canExit]=\"deciding function\" (stepEnter)=\"enter function\" (stepExit)=\"exit function\">\r\n * <ng-template awWizardStepTitle>\r\n * step title\r\n * </ng-template>\r\n * <ng-template awWizardStepSymbol>\r\n * symbol\r\n * </ng-template>\r\n * ...\r\n * </aw-wizard-step>\r\n * ```\r\n *\r\n * ### Example\r\n *\r\n * With `stepTitle` and `navigationSymbol` inputs:\r\n *\r\n * ```html\r\n * <aw-wizard-step stepTitle=\"Address information\" [navigationSymbol]=\"{ symbol: '', fontFamily: 'FontAwesome' }\">\r\n * ...\r\n * </aw-wizard-step>\r\n * ```\r\n *\r\n * With `awWizardStepTitle` and `awWizardStepSymbol` directives:\r\n *\r\n * ```html\r\n * <aw-wizard-step>\r\n * <ng-template awWizardStepTitle>\r\n * Address information\r\n * </ng-template>\r\n * <ng-template awWizardStepSymbol>\r\n * <i class=\"fa fa-taxi\"></i>\r\n * </ng-template>\r\n * </aw-wizard-step>\r\n * ```\r\n *\r\n * @author Marc Arndt\r\n */\r\n@Component({\r\n selector: 'aw-wizard-step',\r\n templateUrl: 'wizard-step.component.html',\r\n providers: [\r\n {provide: WizardStep, useExisting: forwardRef(() => WizardStepComponent)}\r\n ]\r\n})\r\nexport class WizardStepComponent extends WizardStep {\r\n}\r\n","<ng-content></ng-content>\r\n","/**\r\n * The direction in which a step transition was made\r\n *\r\n * @author Marc Arndt\r\n */\r\n\r\n/**\r\n * This enum contains the different possible moving directions in which a wizard can be traversed\r\n *\r\n * @author Marc Arndt\r\n */\r\nexport enum MovingDirection {\r\n /**\r\n * A forward step transition\r\n */\r\n Forwards,\r\n /**\r\n * A backward step transition\r\n */\r\n Backwards,\r\n /**\r\n * No step transition was done\r\n */\r\n Stay\r\n}\r\n","import {EventEmitter} from '@angular/core';\r\nimport {MovingDirection} from '../util/moving-direction.enum';\r\nimport {NavigationMode} from './navigation-mode.interface';\r\nimport {WizardComponent} from '../components/wizard.component';\r\n\r\n/**\r\n * Base implementation of [[NavigationMode]]\r\n *\r\n * Note: Built-in [[NavigationMode]] classes should be stateless, allowing the library user to easily create\r\n * an instance of a particular [[NavigationMode]] class and pass it to `<aw-wizard [navigationMode]=\"...\">`.\r\n *\r\n * @author Marc Arndt\r\n */\r\nexport abstract class BaseNavigationMode implements NavigationMode {\r\n\r\n /**\r\n * Checks, whether a wizard step, as defined by the given destination index, can be transitioned to.\r\n *\r\n * This method controls navigation by [[goToStep]], [[goToPreviousStep]], and [[goToNextStep]] directives.\r\n * Navigation by navigation bar is governed by [[isNavigable]].\r\n *\r\n * In this implementation, a destination wizard step can be entered if:\r\n * - it exists\r\n * - the current step can be exited in the direction of the destination step\r\n * - the destination step can be entered in the direction from the current step\r\n *\r\n * Subclasses can impose additional restrictions, see [[canTransitionToStep]].\r\n *\r\n * @param wizard The wizard component to operate on\r\n * @param destinationIndex The index of the destination step\r\n * @returns A [[Promise]] containing `true`, if the destination step can be transitioned to and `false` otherwise\r\n */\r\n public canGoToStep(wizard: WizardComponent, destinationIndex: number): Promise<boolean> {\r\n const hasStep = wizard.hasStep(destinationIndex);\r\n\r\n const movingDirection = wizard.getMovingDirection(destinationIndex);\r\n\r\n const canExitCurrentStep = (previous: boolean) => {\r\n return previous && wizard.currentStep.canExitStep(movingDirection);\r\n };\r\n\r\n const canEnterDestinationStep = (previous: boolean) => {\r\n return previous && wizard.getStepAtIndex(destinationIndex).canEnterStep(movingDirection);\r\n };\r\n\r\n const canTransitionToStep = (previous: boolean) => {\r\n return previous && this.canTransitionToStep(wizard, destinationIndex);\r\n };\r\n\r\n return Promise.resolve(hasStep)\r\n .then(canTransitionToStep)\r\n // Apply user-defined checks at the end. They can involve user interaction\r\n // which is better to be avoided if navigation mode does not actually allow the transition\r\n // (`canTransitionToStep` returns `false`).\r\n .then(canExitCurrentStep)\r\n .then(canEnterDestinationStep);\r\n }\r\n\r\n /**\r\n * Imposes additional restrictions for `canGoToStep` in current navigation mode.\r\n *\r\n * The base implementation allows transition iff the given step is navigable from the navigation bar (see `isNavigable`).\r\n * However, in some navigation modes `canTransitionToStep` can be more relaxed to allow navigation to certain steps\r\n * by previous/next buttons, but not using the navigation bar.\r\n *\r\n * @param wizard The wizard component to operate on\r\n * @param destinationIndex The index of the destination step\r\n * @returns `true`, if the destination step can be transitioned to and `false` otherwise\r\n */\r\n protected canTransitionToStep(wizard: WizardComponent, destinationIndex: number): boolean {\r\n return this.isNavigable(wizard, destinationIndex);\r\n }\r\n\r\n /**\r\n * Tries to transition to the wizard step, as denoted by the given destination index.\r\n *\r\n * When entering the destination step, the following actions are done:\r\n * - the old current step is set as completed\r\n * - the old current step is set as unselected\r\n * - the old current step is exited\r\n * - the destination step is set as selected\r\n * - the destination step is entered\r\n *\r\n * When the destination step couldn't be entered, the following actions are done:\r\n * - the current step is exited and entered in the direction `MovingDirection.Stay`\r\n *\r\n * @param wizard The wizard component to operate on\r\n * @param destinationIndex The index of the destination wizard step, which should be entered\r\n * @param preFinalize An event emitter, to be called before the step has been transitioned\r\n * @param postFinalize An event emitter, to be called after the step has been transitioned\r\n */\r\n public goToStep(\r\n wizard: WizardComponent,\r\n destinationIndex: number,\r\n preFinalize?: EventEmitter<void>,\r\n postFinalize?: EventEmitter<void>): void {\r\n\r\n this.canGoToStep(wizard, destinationIndex).then(navigationAllowed => {\r\n if (navigationAllowed) {\r\n // the current step can be exited in the given direction\r\n const movingDirection: MovingDirection = wizard.getMovingDirection(destinationIndex);\r\n\r\n /* istanbul ignore if */\r\n if (preFinalize) {\r\n preFinalize.emit();\r\n }\r\n\r\n // leave current step\r\n wizard.currentStep.completed = true;\r\n wizard.currentStep.exit(movingDirection);\r\n wizard.currentStep.editing = false;\r\n wizard.currentStep.selected = false;\r\n\r\n this.transition(wizard, destinationIndex);\r\n\r\n // remember if the next step is already completed before entering it to properly set `editing` flag\r\n const wasCompleted = wizard.completed || wizard.currentStep.completed;\r\n\r\n // go to next step\r\n wizard.currentStep.enter(movingDirection);\r\n wizard.currentStep.selected = true;\r\n if (wasCompleted) {\r\n wizard.currentStep.editing = true;\r\n }\r\n\r\n /* istanbul ignore if */\r\n if (postFinalize) {\r\n postFinalize.emit();\r\n }\r\n } else {\r\n // if the current step can't be left, reenter the current step\r\n wizard.currentStep.exit(MovingDirection.Stay);\r\n wizard.currentStep.enter(MovingDirection.Stay);\r\n }\r\n });\r\n }\r\n\r\n /**\r\n * Transitions the wizard to the given step index.\r\n *\r\n * Can perform additional actions in particular navigation mode implementations.\r\n *\r\n * @param wizard The wizard component to operate on\r\n * @param destinationIndex The index of the destination wizard step\r\n */\r\n protected transition(wizard: WizardComponent, destinationIndex: number): void {\r\n wizard.currentStepIndex = destinationIndex;\r\n }\r\n\r\n /**\r\n * @inheritDoc\r\n */\r\n public abstract isNavigable(WizardComponent: WizardComponent, destinationIndex: number): boolean;\r\n\r\n /**\r\n * Resets the state of this wizard.\r\n *\r\n * A reset transitions the wizard automatically to the first step and sets all steps as incomplete.\r\n * In addition the whole wizard is set as incomplete.\r\n *\r\n * @param wizard The wizard component to operate on\r\n */\r\n public reset(wizard: WizardComponent): void {\r\n this.ensureCanReset(wizard);\r\n\r\n // reset the step internal state\r\n wizard.wizardSteps.forEach(step => {\r\n step.completed = step.initiallyCompleted;\r\n step.selected = false;\r\n step.editing = false;\r\n });\r\n\r\n // set the first step as the current step\r\n wizard.currentStepIndex = wizard.defaultStepIndex;\r\n wizard.currentStep.selected = true;\r\n wizard.currentStep.enter(MovingDirection.Forwards);\r\n }\r\n\r\n /**\r\n * Checks if wizard configuration allows to perform reset.\r\n *\r\n * A check failure is indicated by throwing an `Error` with the message discribing the discovered misconfiguration issue.\r\n *\r\n * Can include additional checks in particular navigation mode implementations.\r\n *\r\n * @param wizard The wizard component to operate on\r\n * @throws An `Error` is thrown, if a micconfiguration issue is discovered.\r\n */\r\n protected ensureCanReset(wizard: WizardComponent): void {\r\n // the wizard doesn't contain a step with the default step index\r\n if (!wizard.hasStep(wizard.defaultStepIndex)) {\r\n throw new Error(`The wizard doesn't contain a step with index ${wizard.defaultStepIndex}`);\r\n }\r\n }\r\n}\r\n","import {BaseNavigationMode} from './base-navigation-mode.interface';\r\nimport {WizardComponent} from '../components/wizard.component';\r\nimport {WizardCompletionStep} from '../util/wizard-completion-step.interface';\r\n\r\n/**\r\n * The default navigation mode used by [[WizardComponent]] and [[NavigationModeDirective]].\r\n *\r\n * It is parameterized with two navigation policies passed to constructor:\r\n *\r\n * - [[navigateBackward]] policy controls whether wizard steps before the current step are navigable:\r\n *\r\n * - `\"deny\"` -- the steps are not navigable\r\n * - `\"allow\"` -- the steps are navigable\r\n * - If the corresponding constructor argument is omitted or is `null` or `undefined`,\r\n * then the default value is applied which is `\"deny\"`\r\n *\r\n * - [[navigateForward]] policy controls whether wizard steps after the current step are navigable:\r\n *\r\n * - `\"deny\"` -- the steps are not navigable\r\n * - `\"allow\"` -- the steps are navigable\r\n * - `\"visited\"` -- a step is navigable iff it was already visited before\r\n * - If the corresponding constructor argument is omitted or is `null` or `undefined`,\r\n * then the default value is applied which is `\"allow\"`\r\n */\r\nexport class ConfigurableNavigationMode extends BaseNavigationMode {\r\n\r\n /**\r\n * Constructor\r\n *\r\n * @param navigateBackward Controls whether wizard steps before the current step are navigable\r\n * @param navigateForward Controls whether wizard steps before the current step are navigable\r\n */\r\n constructor(\r\n private navigateBackward: 'allow'|'deny'|null = null,\r\n private navigateForward: 'allow'|'deny'|'visited'|null = null,\r\n ) {\r\n super();\r\n this.navigateBackward = this.navigateBackward || 'allow';\r\n this.navigateForward = this.navigateForward || 'deny';\r\n }\r\n\r\n /**\r\n * @inheritDoc\r\n */\r\n protected canTransitionToStep(wizard: WizardComponent, destinationIndex: number): boolean {\r\n // if the destination step can be navigated to using the navigation bar,\r\n // it should be accessible with [goToStep] as well\r\n if (this.isNavigable(wizard, destinationIndex)) {\r\n return true;\r\n }\r\n\r\n // navigation with [goToStep] is permitted if all previous steps\r\n // to the destination step have been completed or are optional\r\n return wizard.wizardSteps\r\n .filter((step, index) => index < destinationIndex && index !== wizard.currentStepIndex)\r\n .every(step => step.completed || step.optional);\r\n }\r\n\r\n /**\r\n * @inheritDoc\r\n */\r\n protected transition(wizard: WizardComponent, destinationIndex: number): void {\r\n if (this.navigateForward === 'deny') {\r\n // set all steps after the destination step to incomplete\r\n wizard.wizardSteps\r\n .filter((step, index) => wizard.currentStepIndex > destinationIndex && index > destinationIndex)\r\n .forEach(step => step.completed = false);\r\n }\r\n\r\n super.transition(wizard, destinationIndex);\r\n }\r\n\r\n /**\r\n * @inheritDoc\r\n */\r\n public isNavigable(wizard: WizardComponent, destinationIndex: number): boolean {\r\n // Check if the destination step can be navigated to\r\n const destinationStep = wizard.getStepAtIndex(destinationIndex);\r\n if (destinationStep instanceof WizardCompletionStep) {\r\n // A completion step can only be entered, if all previous steps have been completed, are optional, or selected\r\n const previousStepsCompleted = wizard.wizardSteps\r\n .filter((step, index) => index < destinationIndex)\r\n .every(step => step.completed || step.optional || step.selected);\r\n if (!previousStepsCompleted) {\r\n return false;\r\n }\r\n }\r\n\r\n // Apply navigation pocicies\r\n if (destinationIndex < wizard.currentStepIndex) {\r\n // If the destination step is before current, apply the `navigateBackward` policy\r\n switch (this.navigateBackward) {\r\n case 'allow': return true;\r\n case 'deny': return false;\r\n default:\r\n throw new Error(`Invalid value for navigateBackward: ${this.navigateBackward}`);\r\n }\r\n } else if (destinationIndex > wizard.currentStepIndex) {\r\n // If the destination step is after current, apply the `navigateForward` policy\r\n switch (this.navigateForward) {\r\n case 'allow': return true;\r\n case 'deny': return false;\r\n case 'visited': return destinationStep.completed;\r\n default:\r\n throw new Error(`Invalid value for navigateForward: ${this.navigateForward}`);\r\n }\r\n } else {\r\n // Re-entering the current step is not allowed\r\n return false;\r\n }\r\n }\r\n\r\n /**\r\n * @inheritDoc\r\n */\r\n protected ensureCanReset(wizard: WizardComponent): void {\r\n super.ensureCanReset(wizard);\r\n\r\n // the default step is a completion step and the wizard contains more than one step\r\n const defaultWizardStep = wizard.getStepAtIndex(wizard.defaultStepIndex);\r\n const defaultCompletionStep = defaultWizardStep instanceof WizardCompletionStep;\r\n if (defaultCompletionStep && wizard.wizardSteps.length !== 1) {\r\n throw new Error(`The default step index ${wizard.defaultStepIndex} references a completion step`);\r\n }\r\n }\r\n}\r\n","import {\r\n AfterContentInit,\r\n Component,\r\n ContentChildren,\r\n HostBinding,\r\n Input,\r\n QueryList,\r\n EventEmitter,\r\n} from '@angular/core';\r\nimport {NavigationMode} from '../navigation/navigation-mode.interface';\r\nimport {WizardStep} from '../util/wizard-step.interface';\r\nimport {MovingDirection} from '../util/moving-direction.enum';\r\nimport {ConfigurableNavigationMode} from '../navigation/configurable-navigation-mode';\r\nimport { WIZARD_TOKEN, Wizard } from '../navigation/wizard.interface';\r\n\r\n/**\r\n * The `aw-wizard` component defines the root component of a wizard.\r\n * Through the setting of input parameters for the `aw-wizard` component it's possible to change the location and size\r\n * of its navigation bar.\r\n *\r\n * ### Syntax\r\n * ```html\r\n * <aw-wizard [navBarLocation]=\"location of navigation bar\" [navBarLayout]=\"layout of navigation bar\">\r\n * ...\r\n * </aw-wizard>\r\n * ```\r\n *\r\n * ### Example\r\n *\r\n * Without completion step:\r\n *\r\n * ```html\r\n * <aw-wizard navBarLocation=\"top\" navBarLayout=\"small\">\r\n * <aw-wizard-step>...</aw-wizard-step>\r\n * <aw-wizard-step>...</aw-wizard-step>\r\n * </aw-wizard>\r\n * ```\r\n *\r\n * With completion step:\r\n *\r\n * ```html\r\n * <aw-wizard navBarLocation=\"top\" navBarLayout=\"small\">\r\n * <aw-wizard-step>...</aw-wizard-step>\r\n * <aw-wizard-step>...</aw-wizard-step>\r\n * <aw-wizard-completion-step>...</aw-wizard-completion-step>\r\n * </aw-wizard>\r\n * ```\r\n *\r\n * @author Marc Arndt\r\n */\r\n@Component({\r\n selector: 'aw-wizard',\r\n templateUrl: 'wizard.component.html',\r\n providers: [{ provide: WIZARD_TOKEN, useExisting: WizardComponent }]\r\n})\r\nexport class WizardComponent implements AfterContentInit, Wizard {\r\n /**\r\n * A QueryList containing all [[WizardStep]]s inside this wizard\r\n */\r\n @ContentChildren(WizardStep, { descendants: true })\r\n public wizardStepsQueryList: QueryList<WizardStep>;\r\n\r\n /**\r\n * The location of the navigation bar inside the wizard.\r\n * This location can be either top, bottom, left or right\r\n */\r\n @Input()\r\n public navBarLocation = 'top';\r\n\r\n /**\r\n * The layout of the navigation bar inside the wizard.\r\n * The layout can be either small, large-filled, large-empty or large-symbols\r\n */\r\n @Input()\r\n public navBarLayout = 'small';\r\n\r\n /**\r\n * The direction in which the steps inside the navigation bar should be shown.\r\n * The direction can be either `left-to-right` or `right-to-left`\r\n */\r\n @Input()\r\n public navBarDirection = 'left-to-right';\r\n\r\n /**\r\n * The initially selected step, represented by its index\r\n * Beware: This initial default is only used if no wizard step has been enhanced with the `selected` directive\r\n */\r\n @Input()\r\n public get defaultStepIndex(): number {\r\n // This value can be either:\r\n // - the index of a wizard step with a `selected` directive, or\r\n // - the default step index, set in the [[WizardComponent]]\r\n\r\n const foundDefaultStep = this.wizardSteps.find(step => step.defaultSelected);\r\n\r\n if (foundDefaultStep) {\r\n return this.getIndexOfStep(foundDefaultStep);\r\n } else {\r\n return this._defaultStepIndex;\r\n }\r\n }\r\n public set defaultStepIndex(defaultStepIndex: number) {\r\n this._defaultStepIndex = defaultStepIndex;\r\n }\r\n private _defaultStepIndex = 0;\r\n\r\n /**\r\n * True, if the navigation bar shouldn't be used for navigating\r\n */\r\n @Input()\r\n public disableNavigationBar = false;\r\n\r\n /**\r\n * The navigation mode used to navigate inside the wizard\r\n *\r\n * For outside access, use the [[navigation]] getter.\r\n */\r\n private _navigation: NavigationMode = new ConfigurableNavigationMode();\r\n\r\n /**\r\n * An array representation of all wizard steps belonging to this model\r\n *\r\n * For outside access, use the [[wizardSteps]] getter.\r\n */\r\n private _wizardSteps: WizardStep[] = [];\r\n\r\n /**\r\n * The index of the currently visible and selected step inside the wizardSteps QueryList.\r\n * If this wizard contains no steps, currentStepIndex is -1\r\n *\r\n * Note: Do not modify this field directly. Instead, use navigation methods:\r\n * [[goToStep]], [[goToPreviousStep]], [[goToNextStep]].\r\n */\r\n public currentStepIndex = -1;\r\n\r\n /**\r\n * Constructor\r\n */\r\n constructor() {\r\n }\r\n\r\n /**\r\n * Returns true if this wizard uses a horizontal orientation.\r\n * The wizard uses a horizontal orientation, iff the navigation bar is shown at the top or bottom of this wizard\r\n *\r\n * @returns True if this wizard uses a horizontal orientation\r\n */\r\n @HostBinding('class.horizontal')\r\n public get horizontalOrientation(): boolean {\r\n return this.navBarLocation === 'top' || this.navBarLocation === 'bottom';\r\n }\r\n\r\n /**\r\n * Returns true if this wizard uses a vertical orientation.\r\n * The wizard uses a vertical orientation, iff the navigation bar is shown at the left or right of this wizard\r\n *\r\n * @returns True if this wizard uses a vertical orientation\r\n */\r\n @HostBinding('class.vertical')\r\n public get verticalOrientation(): boolean {\r\n return this.navBarLocation === 'left' || this.navBarLocation === 'right';\r\n }\r\n\r\n /**\r\n * Initialization work\r\n */\r\n public ngAfterContentInit(): void {\r\n // add a subscriber to the wizard steps QueryList to listen to changes in the DOM\r\n this.wizardStepsQueryList.changes.subscribe(changedWizardSteps => {\r\n this.updateWizardSteps(changedWizardSteps.toArray());\r\n });\r\n\r\n // initialize the model\r\n this.updateWizardSteps(this.wizardStepsQueryList.toArray());\r\n\r\n // finally reset the whole wizard component\r\n setTimeout(() => this.reset());\r\n }\r\n\r\n /**\r\n * The WizardStep object belonging to the currently visible and selected step.\r\n * The currentStep is always the currently selected wizard step.\r\n * The currentStep can be either completed, if it was visited earlier,\r\n * or not completed, if it is visited for the first time or its state is currently out of date.\r\n *\r\n * If this wizard contains no steps, currentStep is null\r\n */\r\n public get currentStep(): WizardStep {\r\n if (this.hasStep(this.currentStepIndex)) {\r\n return this.wizardSteps[this.currentStepIndex];\r\n } else {\r\n return null;\r\n }\r\n }\r\n\r\n /**\r\n * The completeness of the wizard.\r\n * If the wizard has been completed, i.e. all steps are either completed or optional, this value is true, otherwise it is false\r\n */\