angular-archwizard
Version:
An Angular 9+ module containing a wizard component and its supporting components and directives
1,124 lines (1,112 loc) • 99.1 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('angular-archwizard', ['exports', '@angular/core', '@angular/common'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['angular-archwizard'] = {}, global.ng.core, global.ng.common));
}(this, (function (exports, core, common) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b)
if (Object.prototype.hasOwnProperty.call(b, p))
d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function () {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r = Reflect.decorate(decorators, target, key, desc);
else
for (var i = decorators.length - 1; i >= 0; i--)
if (d = decorators[i])
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __param(paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); };
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
return Reflect.metadata(metadataKey, metadataValue);
}
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try {
step(generator.next(value));
}
catch (e) {
reject(e);
} }
function rejected(value) { try {
step(generator["throw"](value));
}
catch (e) {
reject(e);
} }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function () { if (t[0] & 1)
throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f)
throw new TypeError("Generator is already executing.");
while (_)
try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
return t;
if (y = 0, t)
op = [op[0] & 2, t.value];
switch (op[0]) {
case 0:
case 1:
t = op;
break;
case 4:
_.label++;
return { value: op[1], done: false };
case 5:
_.label++;
y = op[1];
op = [0];
continue;
case 7:
op = _.ops.pop();
_.trys.pop();
continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
_ = 0;
continue;
}
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
_.label = op[1];
break;
}
if (op[0] === 6 && _.label < t[1]) {
_.label = t[1];
t = op;
break;
}
if (t && _.label < t[2]) {
_.label = t[2];
_.ops.push(op);
break;
}
if (t[2])
_.ops.pop();
_.trys.pop();
continue;
}
op = body.call(thisArg, _);
}
catch (e) {
op = [6, e];
y = 0;
}
finally {
f = t = 0;
}
if (op[0] & 5)
throw op[1];
return { value: op[0] ? op[1] : void 0, done: true };
}
}
var __createBinding = Object.create ? (function (o, m, k, k2) {
if (k2 === undefined)
k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
}) : (function (o, m, k, k2) {
if (k2 === undefined)
k2 = k;
o[k2] = m[k];
});
function __exportStar(m, o) {
for (var p in m)
if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
__createBinding(o, m, p);
}
function __values(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m)
return m.call(o);
if (o && typeof o.length === "number")
return {
next: function () {
if (o && i >= o.length)
o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m)
return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
ar.push(r.value);
}
catch (error) {
e = { error: error };
}
finally {
try {
if (r && !r.done && (m = i["return"]))
m.call(i);
}
finally {
if (e)
throw e.error;
}
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++)
s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
}
;
function __await(v) {
return this instanceof __await ? (this.v = v, this) : new __await(v);
}
function __asyncGenerator(thisArg, _arguments, generator) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var g = generator.apply(thisArg, _arguments || []), i, q = [];
return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
function verb(n) { if (g[n])
i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
function resume(n, v) { try {
step(g[n](v));
}
catch (e) {
settle(q[0][3], e);
} }
function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
function fulfill(value) { resume("next", value); }
function reject(value) { resume("throw", value); }
function settle(f, v) { if (f(v), q.shift(), q.length)
resume(q[0][0], q[0][1]); }
}
function __asyncDelegator(o) {
var i, p;
return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
}
function __asyncValues(o) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var m = o[Symbol.asyncIterator], i;
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) {
Object.defineProperty(cooked, "raw", { value: raw });
}
else {
cooked.raw = raw;
}
return cooked;
}
;
var __setModuleDefault = Object.create ? (function (o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function (o, v) {
o["default"] = v;
};
function __importStar(mod) {
if (mod && mod.__esModule)
return mod;
var result = {};
if (mod != null)
for (var k in mod)
if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
__createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
}
function __importDefault(mod) {
return (mod && mod.__esModule) ? mod : { default: mod };
}
function __classPrivateFieldGet(receiver, privateMap) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to get private field on non-instance");
}
return privateMap.get(receiver);
}
function __classPrivateFieldSet(receiver, privateMap, value) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to set private field on non-instance");
}
privateMap.set(receiver, value);
return value;
}
/**
* The `awWizardStepSymbol` directive can be used as an alternative to the `navigationSymbol` input of a [[WizardStep]]
* to define the step symbol inside the navigation bar. This way step symbol may contain arbitrary content.
*
* ### Syntax
*
* ```html
* <ng-template awWizardStepSymbol>
* ...
* </ng-template>
* ```
*/
var WizardStepSymbolDirective = /** @class */ (function () {
/**
* Constructor
*
* @param templateRef A reference to the content of the `ng-template` that contains this [[WizardStepSymbolDirective]]
*/
function WizardStepSymbolDirective(templateRef) {
this.templateRef = templateRef;
}
return WizardStepSymbolDirective;
}());
WizardStepSymbolDirective.decorators = [
{ type: core.Directive, args: [{
selector: 'ng-template[awStepSymbol], ng-template[awWizardStepSymbol]'
},] }
];
WizardStepSymbolDirective.ctorParameters = function () { return [
{ type: core.TemplateRef }
]; };
/**
* The `awWizardStepTitle` directive can be used as an alternative to the `stepTitle` input of a [[WizardStep]]
* to define the content of a step title inside the navigation bar.
* This step title can be freely created and can contain more than only plain text
*
* ### Syntax
*
* ```html
* <ng-template awWizardStepTitle>
* ...
* </ng-template>
* ```
*
* @author Marc Arndt
*/
var WizardStepTitleDirective = /** @class */ (function () {
/**
* Constructor
*
* @param templateRef A reference to the content of the `ng-template` that contains this [[WizardStepTitleDirective]]
*/
function WizardStepTitleDirective(templateRef) {
this.templateRef = templateRef;
}
return WizardStepTitleDirective;
}());
WizardStepTitleDirective.decorators = [
{ type: core.Directive, args: [{
selector: 'ng-template[awStepTitle], ng-template[awWizardStepTitle]'
},] }
];
WizardStepTitleDirective.ctorParameters = function () { return [
{ type: core.TemplateRef }
]; };
/**
* Basic functionality every type of wizard step needs to provide
*
* @author Marc Arndt
*/
/* tslint:disable-next-line directive-class-suffix */
var WizardStep = /** @class */ (function () {
function WizardStep() {
/**
* A symbol property, which contains an optional symbol for the step inside the navigation bar.
* Takes effect when `stepSymbolTemplate` is not defined or null.
*/
this.navigationSymbol = { symbol: '' };
/**
* A boolean describing if the wizard step is currently selected
*/
this.selected = false;
/**
* A boolean describing if the wizard step has been completed
*/
this.completed = false;
/**
* A boolean describing if the wizard step is shown as completed when the wizard is presented to the user
*
* Users will typically use `CompletedStepDirective` to set this flag
*/
this.initiallyCompleted = false;
/**
* A boolean describing if the wizard step is being edited after being competed
*
* This flag can only be true when `selected` is true.
*/
this.editing = false;
/**
* A boolean describing, if the wizard step should be selected by default, i.e. after the wizard has been initialized as the initial step
*/
this.defaultSelected = false;
/**
* A boolean describing if the wizard step is an optional step
*/
this.optional = false;
/**
* A function or boolean deciding, if this step can be entered
*/
this.canEnter = true;
/**
* A function or boolean deciding, if this step can be exited
*/
this.canExit = true;
/**
* This [[EventEmitter]] is called when the step is entered.
* The bound method should be used to do initialization work.
*/
this.stepEnter = new core.EventEmitter();
/**
* This [[EventEmitter]] is called when the step is exited.
* The bound method can be used to do cleanup work.
*/
this.stepExit = new core.EventEmitter();
}
Object.defineProperty(WizardStep.prototype, "hidden", {
/**
* Returns true if this wizard step should be visible to the user.
* If the step should be visible to the user false is returned, otherwise true
*/
get: function () {
return !this.selected;
},
enumerable: false,
configurable: true
});
/**
* This method returns true, if this wizard step can be transitioned with a given direction.
* Transitioned in this case means either entered or exited, depending on the given `condition` parameter.
*
* @param condition A condition variable, deciding if the step can be transitioned
* @param direction The direction in which this step should be transitioned
* @returns A [[Promise]] containing `true`, if this step can transitioned in the given direction
* @throws An `Error` is thrown if `condition` is neither a function nor a boolean
*/
WizardStep.canTransitionStep = function (condition, direction) {
if (typeof (condition) === typeof (true)) {
return Promise.resolve(condition);
}
else if (condition instanceof Function) {
return Promise.resolve(condition(direction));
}
else {
return Promise.reject(new Error("Input value '" + condition + "' is neither a boolean nor a function"));
}
};
/**
* A function called when the step is entered
*
* @param direction The direction in which the step is entered
*/
WizardStep.prototype.enter = function (direction) {
this.stepEnter.emit(direction);
};
/**
* A function called when the step is exited
*
* @param direction The direction in which the step is exited
*/
WizardStep.prototype.exit = function (direction) {
this.stepExit.emit(direction);
};
/**
* This method returns true, if this wizard step can be entered from the given direction.
* Because this method depends on the value `canEnter`, it will throw an error, if `canEnter` is neither a boolean
* nor a function.
*
* @param direction The direction in which this step should be entered
* @returns A [[Promise]] containing `true`, if the step can be entered in the given direction, false otherwise
* @throws An `Error` is thrown if `anEnter` is neither a function nor a boolean
*/
WizardStep.prototype.canEnterStep = function (direction) {
return WizardStep.canTransitionStep(this.canEnter, direction);
};
/**
* This method returns true, if this wizard step can be exited into given direction.
* Because this method depends on the value `canExit`, it will throw an error, if `canExit` is neither a boolean
* nor a function.
*
* @param direction The direction in which this step should be left
* @returns A [[Promise]] containing `true`, if the step can be exited in the given direction, false otherwise
* @throws An `Error` is thrown if `canExit` is neither a function nor a boolean
*/
WizardStep.prototype.canExitStep = function (direction) {
return WizardStep.canTransitionStep(this.canExit, direction);
};
return WizardStep;
}());
WizardStep.decorators = [
{ type: core.Directive }
];
WizardStep.propDecorators = {
stepTitleTemplate: [{ type: core.ContentChild, args: [WizardStepTitleDirective,] }],
stepSymbolTemplate: [{ type: core.ContentChild, args: [WizardStepSymbolDirective,] }],
stepId: [{ type: core.Input }],
stepTitle: [{ type: core.Input }],
navigationSymbol: [{ type: core.Input }],
canEnter: [{ type: core.Input }],
canExit: [{ type: core.Input }],
stepEnter: [{ type: core.Output }],
stepExit: [{ type: core.Output }],
hidden: [{ type: core.HostBinding, args: ['hidden',] }]
};
/**
* Basic functionality every wizard completion step needs to provide
*
* @author Marc Arndt
*/
/* tslint:disable-next-line directive-class-suffix */
var WizardCompletionStep = /** @class */ (function (_super) {
__extends(WizardCompletionStep, _super);
function WizardCompletionStep() {
var _this = _super.apply(this, __spread(arguments)) || this;
/**
* @inheritDoc
*/
_this.stepExit = new core.EventEmitter();
/**
* @inheritDoc
*/
_this.canExit = false;
return _this;
}
/**
* @inheritDoc
*/
WizardCompletionStep.prototype.enter = function (direction) {
this.completed = true;
this.stepEnter.emit(direction);
};
/**
* @inheritDoc
*/
WizardCompletionStep.prototype.exit = function (direction) {
// set this completion step as incomplete (unless it happens to be initiallyCompleted)
this.completed = this.initiallyCompleted;
this.stepExit.emit(direction);
};
return WizardCompletionStep;
}(WizardStep));
WizardCompletionStep.decorators = [
{ type: core.Directive }
];
/**
* The `aw-wizard-completion-step` component can be used to define a completion/success step at the end of your wizard
* After a `aw-wizard-completion-step` has been entered, it has the characteristic that the user is blocked from
* leaving it again to a previous step.
* In addition entering a `aw-wizard-completion-step` automatically sets the `aw-wizard` and all steps inside the `aw-wizard`
* as completed.
*
* ### Syntax
*
* ```html
* <aw-wizard-completion-step [stepTitle]="title of the wizard step"
* [navigationSymbol]="{ symbol: 'navigation symbol', fontFamily: 'navigation symbol font family' }"
* (stepEnter)="event emitter to be called when the wizard step is entered"
* (stepExit)="event emitter to be called when the wizard step is exited">
* ...
* </aw-wizard-completion-step>
* ```
*
* ### Example
*
* ```html
* <aw-wizard-completion-step stepTitle="Step 1" [navigationSymbol]="{ symbol: '1' }">
* ...
* </aw-wizard-completion-step>
* ```
*
* With a navigation symbol from the `font-awesome` font:
*
* ```html
* <aw-wizard-completion-step stepTitle="Step 1" [navigationSymbol]="{ symbol: '', fontFamily: 'FontAwesome' }">
* ...
* </aw-wizard-completion-step>
* ```
*
* @author Marc Arndt
*/
var WizardCompletionStepComponent = /** @class */ (function (_super) {
__extends(WizardCompletionStepComponent, _super);
function WizardCompletionStepComponent() {
return _super !== null && _super.apply(this, arguments) || this;
}
return WizardCompletionStepComponent;
}(WizardCompletionStep));
WizardCompletionStepComponent.decorators = [
{ type: core.Component, args: [{
selector: 'aw-wizard-completion-step',
template: "<ng-content></ng-content>\n",
providers: [
{ provide: WizardStep, useExisting: core.forwardRef(function () { return WizardCompletionStepComponent; }) },
{ provide: WizardCompletionStep, useExisting: core.forwardRef(function () { return WizardCompletionStepComponent; }) }
]
},] }
];
/**
* The direction in which a step transition was made
*
* @author Marc Arndt
*/
(function (MovingDirection) {
/**
* A forward step transition
*/
MovingDirection[MovingDirection["Forwards"] = 0] = "Forwards";
/**
* A backward step transition
*/
MovingDirection[MovingDirection["Backwards"] = 1] = "Backwards";
/**
* No step transition was done
*/
MovingDirection[MovingDirection["Stay"] = 2] = "Stay";
})(exports.MovingDirection || (exports.MovingDirection = {}));
/**
* Base implementation of [[NavigationMode]]
*
* Note: Built-in [[NavigationMode]] classes should be stateless, allowing the library user to easily create
* an instance of a particular [[NavigationMode]] class and pass it to `<aw-wizard [navigationMode]="...">`.
*
* @author Marc Arndt
*/
var BaseNavigationMode = /** @class */ (function () {
function BaseNavigationMode() {
}
/**
* Checks, whether a wizard step, as defined by the given destination index, can be transitioned to.
*
* This method controls navigation by [[goToStep]], [[goToPreviousStep]], and [[goToNextStep]] directives.
* Navigation by navigation bar is governed by [[isNavigable]].
*
* In this implementation, a destination wizard step can be entered if:
* - it exists
* - the current step can be exited in the direction of the destination step
* - the destination step can be entered in the direction from the current step
*
* Subclasses can impose additional restrictions, see [[canTransitionToStep]].
*
* @param wizard The wizard component to operate on
* @param destinationIndex The index of the destination step
* @returns A [[Promise]] containing `true`, if the destination step can be transitioned to and `false` otherwise
*/
BaseNavigationMode.prototype.canGoToStep = function (wizard, destinationIndex) {
var _this = this;
var hasStep = wizard.hasStep(destinationIndex);
var movingDirection = wizard.getMovingDirection(destinationIndex);
var canExitCurrentStep = function (previous) {
return previous && wizard.currentStep.canExitStep(movingDirection);
};
var canEnterDestinationStep = function (previous) {
return previous && wizard.getStepAtIndex(destinationIndex).canEnterStep(movingDirection);
};
var canTransitionToStep = function (previous) {
return previous && _this.canTransitionToStep(wizard, destinationIndex);
};
return Promise.resolve(hasStep)
.then(canTransitionToStep)
// Apply user-defined checks at the end. They can involve user interaction
// which is better to be avoided if navigation mode does not actually allow the transition
// (`canTransitionToStep` returns `false`).
.then(canExitCurrentStep)
.then(canEnterDestinationStep);
};
/**
* Imposes additional restrictions for `canGoToStep` in current navigation mode.
*
* The base implementation allows transition iff the given step is navigable from the navigation bar (see `isNavigable`).
* However, in some navigation modes `canTransitionToStep` can be more relaxed to allow navigation to certain steps
* by previous/next buttons, but not using the navigation bar.
*
* @param wizard The wizard component to operate on
* @param destinationIndex The index of the destination step
* @returns `true`, if the destination step can be transitioned to and `false` otherwise
*/
BaseNavigationMode.prototype.canTransitionToStep = function (wizard, destinationIndex) {
return this.isNavigable(wizard, destinationIndex);
};
/**
* Tries to transition to the wizard step, as denoted by the given destination index.
*
* When entering the destination step, the following actions are done:
* - the old current step is set as completed
* - the old current step is set as unselected
* - the old current step is exited
* - the destination step is set as selected
* - the destination step is entered
*
* When the destination step couldn't be entered, the following actions are done:
* - the current step is exited and entered in the direction `MovingDirection.Stay`
*
* @param wizard The wizard component to operate on
* @param destinationIndex The index of the destination wizard step, which should be entered
* @param preFinalize An event emitter, to be called before the step has been transitioned
* @param postFinalize An event emitter, to be called after the step has been transitioned
*/
BaseNavigationMode.prototype.goToStep = function (wizard, destinationIndex, preFinalize, postFinalize) {
var _this = this;
this.canGoToStep(wizard, destinationIndex).then(function (navigationAllowed) {
if (navigationAllowed) {
// the current step can be exited in the given direction
var movingDirection = wizard.getMovingDirection(destinationIndex);
/* istanbul ignore if */
if (preFinalize) {
preFinalize.emit();
}
// leave current step
wizard.currentStep.completed = true;
wizard.currentStep.exit(movingDirection);
wizard.currentStep.editing = false;
wizard.currentStep.selected = false;
_this.transition(wizard, destinationIndex);
// remember if the next step is already completed before entering it to properly set `editing` flag
var wasCompleted = wizard.completed || wizard.currentStep.completed;
// go to next step
wizard.currentStep.enter(movingDirection);
wizard.currentStep.selected = true;
if (wasCompleted) {
wizard.currentStep.editing = true;
}
/* istanbul ignore if */
if (postFinalize) {
postFinalize.emit();
}
}
else {
// if the current step can't be left, reenter the current step
wizard.currentStep.exit(exports.MovingDirection.Stay);
wizard.currentStep.enter(exports.MovingDirection.Stay);
}
});
};
/**
* Transitions the wizard to the given step index.
*
* Can perform additional actions in particular navigation mode implementations.
*
* @param wizard The wizard component to operate on
* @param destinationIndex The index of the destination wizard step
*/
BaseNavigationMode.prototype.transition = function (wizard, destinationIndex) {
wizard.currentStepIndex = destinationIndex;
};
/**
* Resets the state of this wizard.
*
* A reset transitions the wizard automatically to the first step and sets all steps as incomplete.
* In addition the whole wizard is set as incomplete.
*
* @param wizard The wizard component to operate on
*/
BaseNavigationMode.prototype.reset = function (wizard) {
this.ensureCanReset(wizard);
// reset the step internal state
wizard.wizardSteps.forEach(function (step) {
step.completed = step.initiallyCompleted;
step.selected = false;
step.editing = false;
});
// set the first step as the current step
wizard.currentStepIndex = wizard.defaultStepIndex;
wizard.currentStep.selected = true;
wizard.currentStep.enter(exports.MovingDirection.Forwards);
};
/**
* Checks if wizard configuration allows to perform reset.
*
* A check failure is indicated by throwing an `Error` with the message discribing the discovered misconfiguration issue.
*
* Can include additional checks in particular navigation mode implementations.
*
* @param wizard The wizard component to operate on
* @throws An `Error` is thrown, if a micconfiguration issue is discovered.
*/
BaseNavigationMode.prototype.ensureCanReset = function (wizard) {
// the wizard doesn't contain a step with the default step index
if (!wizard.hasStep(wizard.defaultStepIndex)) {
throw new Error("The wizard doesn't contain a step with index " + wizard.defaultStepIndex);
}
};
return BaseNavigationMode;
}());
/**
* The default navigation mode used by [[WizardComponent]] and [[NavigationModeDirective]].
*
* It is parameterized with two navigation policies passed to constructor:
*
* - [[navigateBackward]] policy controls whether wizard steps before the current step are navigable:
*
* - `"deny"` -- the steps are not navigable
* - `"allow"` -- the steps are navigable
* - If the corresponding constructor argument is omitted or is `null` or `undefined`,
* then the default value is applied which is `"deny"`
*
* - [[navigateForward]] policy controls whether wizard steps after the current step are navigable:
*
* - `"deny"` -- the steps are not navigable
* - `"allow"` -- the steps are navigable
* - `"visited"` -- a step is navigable iff it was already visited before
* - If the corresponding constructor argument is omitted or is `null` or `undefined`,
* then the default value is applied which is `"allow"`
*/
var ConfigurableNavigationMode = /** @class */ (function (_super) {
__extends(ConfigurableNavigationMode, _super);
/**
* Constructor
*
* @param navigateBackward Controls whether wizard steps before the current step are navigable
* @param navigateForward Controls whether wizard steps before the current step are navigable
*/
function ConfigurableNavigationMode(navigateBackward, navigateForward) {
if (navigateBackward === void 0) { navigateBackward = null; }
if (navigateForward === void 0) { navigateForward = null; }
var _this = _super.call(this) || this;
_this.navigateBackward = navigateBackward;
_this.navigateForward = navigateForward;
_this.navigateBackward = _this.navigateBackward || 'allow';
_this.navigateForward = _this.navigateForward || 'deny';
return _this;
}
/**
* @inheritDoc
*/
ConfigurableNavigationMode.prototype.canTransitionToStep = function (wizard, destinationIndex) {
// if the destination step can be navigated to using the navigation bar,
// it should be accessible with [goToStep] as well
if (this.isNavigable(wizard, destinationIndex)) {
return true;
}
// navigation with [goToStep] is permitted if all previous steps
// to the destination step have been completed or are optional
return wizard.wizardSteps
.filter(function (step, index) { return index < destinationIndex && index !== wizard.currentStepIndex; })
.every(function (step) { return step.completed || step.optional; });
};
/**
* @inheritDoc
*/
ConfigurableNavigationMode.prototype.transition = function (wizard, destinationIndex) {
if (this.navigateForward === 'deny') {
// set all steps after the destination step to incomplete
wizard.wizardSteps
.filter(function (step, index) { return wizard.currentStepIndex > destinationIndex && index > destinationIndex; })
.forEach(function (step) { return step.completed = false; });
}
_super.prototype.transition.call(this, wizard, destinationIndex);
};
/**
* @inheritDoc
*/
ConfigurableNavigationMode.prototype.isNavigable = function (wizard, destinationIndex) {
// Check if the destination step can be navigated to
var destinationStep = wizard.getStepAtIndex(destinationIndex);
if (destinationStep instanceof WizardCompletionStep) {
// A completion step can only be entered, if all previous steps have been completed, are optional, or selected
var previousStepsCompleted = wizard.wizardSteps
.filter(function (step, index) { return index < destinationIndex; })
.every(function (step) { return step.completed || step.optional || step.selected; });
if (!previousStepsCompleted) {
return false;
}
}
// Apply navigation pocicies
if (destinationIndex < wizard.currentStepIndex) {
// If the destination step is before current, apply the `navigateBackward` policy
switch (this.navigateBackward) {
case 'allow': return true;
case 'deny': return false;
default:
throw new Error("Invalid value for navigateBackward: " + this.navigateBackward);
}
}
else if (destinationIndex > wizard.currentStepIndex) {
// If the destination step is after current, apply the `navigateForward` policy
switch (this.navigateForward) {
case 'allow': return true;
case 'deny': return false;
case 'visited': return destinationStep.completed;
default:
throw new Error("Invalid value for navigateForward: " + this.navigateForward);
}
}
else {
// Re-entering the current step is not allowed
return false;
}
};
/**
* @inheritDoc
*/
ConfigurableNavigationMode.prototype.ensureCanReset = function (wizard) {
_super.prototype.ensureCanReset.call(this, wizard);
// the default step is a completion step and the wizard contains more than one step
var defaultWizardStep = wizard.getStepAtIndex(wizard.defaultStepIndex);
var defaultCompletionStep = defaultWizardStep instanceof WizardCompletionStep;
if (defaultCompletionStep && wizard.wizardSteps.length !== 1) {
throw new Error("The default step index " + wizard.defaultStepIndex + " references a completion step");
}
};
return ConfigurableNavigationMode;
}(BaseNavigationMode));
/**
* The `aw-wizard` component defines the root component of a wizard.
* Through the setting of input parameters for the `aw-wizard` component it's possible to change the location and size
* of its navigation bar.
*
* ### Syntax
* ```html
* <aw-wizard [navBarLocation]="location of navigation bar" [navBarLayout]="layout of navigation bar">
* ...
* </aw-wizard>
* ```
*
* ### Example
*
* Without completion step:
*
* ```html
* <aw-wizard navBarLocation="top" navBarLayout="small">
* <aw-wizard-step>...</aw-wizard-step>
* <aw-wizard-step>...</aw-wizard-step>
* </aw-wizard>
* ```
*
* With completion step:
*
* ```html
* <aw-wizard navBarLocation="top" navBarLayout="small">
* <aw-wizard-step>...</aw-wizard-step>
* <aw-wizard-step>...</aw-wizard-step>
* <aw-wizard-completion-step>...</aw-wizard-completion-step>
* </aw-wizard>
* ```
*
* @author Marc Arndt
*/
var WizardComponent = /** @class */ (function () {
/**
* Constructor
*/
function WizardComponent() {
/**
* The location of the navigation bar inside the wizard.
* This location can be either top, bottom, left or right
*/
this.navBarLocation = 'top';
/**
* The layout of the navigation bar inside the wizard.
* The layout can be either small, large-filled, large-empty or large-symbols
*/
this.navBarLayout = 'small';
/**
* The direction in which the steps inside the navigation bar should be shown.
* The direction can be either `left-to-right` or `right-to-left`
*/
this.navBarDirection = 'left-to-right';
this._defaultStepIndex = 0;
/**
* True, if the navigation bar shouldn't be used for navigating
*/
this.disableNavigationBar = false;
/**
* The navigation mode used to navigate inside the wizard
*
* For outside access, use the [[navigation]] getter.
*/
this._navigation = new ConfigurableNavigationMode();
/**
* An array representation of all wizard steps belonging to this model
*
* For outside access, use the [[wizardSteps]] getter.
*/
this._wizardSteps = [];
/**
* The index of the currently visible and selected step inside the wizardSteps QueryList.
* If this wizard contains no steps, currentStepIndex is -1
*
* Note: Do not modify this field directly. Instead, use navigation methods:
* [[goToStep]], [[goToPreviousStep]], [[goToNextStep]].
*/
this.currentStepIndex = -1;
}
Object.defineProperty(WizardComponent.prototype, "defaultStepIndex", {
/**
* The initially selected step, represented by its index
* Beware: This initial default is only used if no wizard step has been enhanced with the `selected` directive
*/
get: function () {
// This value can be either:
// - the index of a wizard step with a `selected` directive, or
// - the default step index, set in the [[WizardComponent]]
var foundDefaultStep = this.wizardSteps.find(function (step) { return step.defaultSelected; });
if (foundDefaultStep) {
return this.getIndexOfStep(foundDefaultStep);
}
else {
return this._defaultStepIndex;
}
},
set: function (defaultStepIndex) {
this._defaultStepIndex = defaultStepIndex;
},
enumerable: false,
configurable: true
});
Object.defineProperty(WizardComponent.prototype, "horizontalOrientation", {
/**
* Returns true if this wizard uses a horizontal orientation.
* The wizard uses a horizontal orientation, iff the navigation bar is shown at the top or bottom of this wizard
*
* @returns True if this wizard uses a horizontal orientation
*/
get: function () {
return this.navBarLocation === 'top' || this.navBarLocation === 'bottom';
},
enumerable: false,
configurable: true
});
Object.defineProperty(WizardComponent.prototype, "verticalOrientation", {
/**
* Returns true if this wizard uses a vertical orientation.
* The wizard uses a vertical orientation, iff the navigation bar is shown at the left or right of this wizard
*
* @returns True if this wizard uses a vertical orientation
*/
get: function () {
return this.navBarLocation === 'left' || this.navBarLocation === 'right';
},
enumerable: false,
configurable: true
});
/**
* Initialization work
*/
WizardComponent.prototype.ngAfterContentInit = function () {
var _this = this;
// add a subscriber to the wizard steps QueryList to listen to changes in the DOM
this.wizardStepsQueryList.changes.subscribe(function (changedWizardSteps) {
_this.updateWizardSteps(changedWizardSteps.toArray());
});
// initialize the model
this.updateWizardSteps(this.wizardStepsQueryList.toArray());
// finally reset the whole wizard component
setTimeout(function () { return _this.reset(); });
};
Object.defineProperty(WizardComponent.prototype, "currentStep", {
/**
* The WizardStep object belonging to the currently visible and selected step.
* The currentStep is always the currently selected wizard step.
* The currentStep can be either completed, if it was visited earlier,
* or not completed, if it is visited for the first time or its state is currently out of date.
*
* If this wizard contains no steps, currentStep is null
*/
get: function () {
if (this.hasStep(this.currentStepIndex)) {
return this.wizardSteps[this.currentStepIndex];
}
else {
return null;
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(WizardComponent.prototype, "completed", {
/**
* The completeness of the wizard.
* If the wizard has been completed, i.e. all steps are either completed or optional, this value is true, otherwise it is false
*/
get: function () {
return this.wizardSteps.every(function (step) { return step.completed || step.optional; });
},
enumerable: false,
configurable: true
});
Object.defineProperty(WizardComponent.prototype, "wizardSteps", {
/**
* An array representation of all wizard steps belonging to this model
*/
get: function () {
return this._wizardSteps;
},
enumerable: false,
configurable: true
});
/**
* Updates the wizard steps to the new array
*
* @param wizardSteps The updated wizard steps
*/
WizardComponent.prototype.updateWizardSteps = function (wizardSteps) {
// the wizard is currently not in the initialization phase
if (this.wizardSteps.length > 0 && this.currentStepIndex > -1) {
this.currentStepIndex = wizardSteps.indexOf(this.wizardSteps[this.currentStepIndex]);
}
this._wizardSteps = wizardSteps;
};
Object.defineProperty(WizardCompon