Added variable to display pagination at the top

.gitignore

@@ -1,6 +1,4 @@
-dist/*
-*.ngfactory.ts
-*.ngsummary.json
+aot/
 
 # Coverage
 coverage/*
@@ -9,11 +7,6 @@ coverage/*
 node_modules/*
 npm-debug.log
 
-# TypeScript
-*.js
-*.map
-*.d.ts
-
 # JetBrains
 .idea
 .project

dist/index.d.ts

@@ -0,0 +1,6 @@
+import { ModuleWithProviders } from '@angular/core';
+export * from './src/wizard.component';
+export * from './src/wizard-step.component';
+export declare class FormWizardModule {
+    static forRoot(): ModuleWithProviders;
+}

dist/index.js

@@ -0,0 +1,39 @@
+var __decorate = (this && this.__decorate) || function (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;
+};
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { WizardComponent } from './src/wizard.component';
+import { WizardStepComponent } from './src/wizard-step.component';
+export * from './src/wizard.component';
+export * from './src/wizard-step.component';
+var FormWizardModule = FormWizardModule_1 = (function () {
+    function FormWizardModule() {
+    }
+    FormWizardModule.forRoot = function () {
+        return {
+            ngModule: FormWizardModule_1
+        };
+    };
+    return FormWizardModule;
+}());
+FormWizardModule = FormWizardModule_1 = __decorate([
+    NgModule({
+        imports: [
+            CommonModule
+        ],
+        declarations: [
+            WizardComponent,
+            WizardStepComponent
+        ],
+        exports: [
+            WizardComponent,
+            WizardStepComponent
+        ]
+    })
+], FormWizardModule);
+export { FormWizardModule };
+var FormWizardModule_1;

dist/index.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":3,"metadata":{"FormWizardModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","module":"./src/wizard.component","name":"WizardComponent"},{"__symbolic":"reference","module":"./src/wizard-step.component","name":"WizardStepComponent"}],"exports":[{"__symbolic":"reference","module":"./src/wizard.component","name":"WizardComponent"},{"__symbolic":"reference","module":"./src/wizard-step.component","name":"WizardStepComponent"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"FormWizardModule"}}}}}},"exports":[{"from":"./src/wizard.component"},{"from":"./src/wizard-step.component"}]},{"__symbolic":"module","version":1,"metadata":{"FormWizardModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","module":"./src/wizard.component","name":"WizardComponent"},{"__symbolic":"reference","module":"./src/wizard-step.component","name":"WizardStepComponent"}],"exports":[{"__symbolic":"reference","module":"./src/wizard.component","name":"WizardComponent"},{"__symbolic":"reference","module":"./src/wizard-step.component","name":"WizardStepComponent"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"FormWizardModule"}}}}}},"exports":[{"from":"./src/wizard.component"},{"from":"./src/wizard-step.component"}]}]

dist/src/wizard-step.component.d.ts

@@ -0,0 +1,16 @@
+import { OnInit, EventEmitter } from '@angular/core';
+export declare class WizardStepComponent implements OnInit {
+    title: string;
+    hidden: boolean;
+    isValid: boolean;
+    showNext: boolean;
+    showPrev: boolean;
+    onNext: EventEmitter<any>;
+    onPrev: EventEmitter<any>;
+    onComplete: EventEmitter<any>;
+    private _isActive;
+    isDisabled: boolean;
+    constructor();
+    ngOnInit(): void;
+    isActive: boolean;
+}

dist/src/wizard-step.component.js

@@ -0,0 +1,82 @@
+var __decorate = (this && this.__decorate) || function (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;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+var WizardStepComponent = (function () {
+    function WizardStepComponent() {
+        this.hidden = false;
+        this.isValid = true;
+        this.showNext = true;
+        this.showPrev = true;
+        this.onNext = new EventEmitter();
+        this.onPrev = new EventEmitter();
+        this.onComplete = new EventEmitter();
+        this._isActive = false;
+        this.isDisabled = true;
+    }
+    WizardStepComponent.prototype.ngOnInit = function () {
+    };
+    Object.defineProperty(WizardStepComponent.prototype, "isActive", {
+        get: function () {
+            return this._isActive;
+        },
+        set: function (isActive) {
+            this._isActive = isActive;
+            this.isDisabled = false;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    return WizardStepComponent;
+}());
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], WizardStepComponent.prototype, "title", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], WizardStepComponent.prototype, "hidden", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], WizardStepComponent.prototype, "isValid", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], WizardStepComponent.prototype, "showNext", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], WizardStepComponent.prototype, "showPrev", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], WizardStepComponent.prototype, "onNext", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], WizardStepComponent.prototype, "onPrev", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], WizardStepComponent.prototype, "onComplete", void 0);
+__decorate([
+    Input('isActive'),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], WizardStepComponent.prototype, "isActive", null);
+WizardStepComponent = __decorate([
+    Component({
+        selector: 'wizard-step',
+        template: "\n    <div [hidden]=\"!isActive\">\n      <ng-content></ng-content>\n    </div>\n  "
+    }),
+    __metadata("design:paramtypes", [])
+], WizardStepComponent);
+export { WizardStepComponent };

dist/src/wizard-step.component.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":3,"metadata":{"WizardStepComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"wizard-step","template":"\n    <div [hidden]=\"!isActive\">\n      <ng-content></ng-content>\n    </div>\n  "}]}],"members":{"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hidden":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"isValid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showNext":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showPrev":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onNext":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onPrev":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onComplete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["isActive"]}]}]}}}},{"__symbolic":"module","version":1,"metadata":{"WizardStepComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"wizard-step","template":"\n    <div [hidden]=\"!isActive\">\n      <ng-content></ng-content>\n    </div>\n  "}]}],"members":{"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hidden":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"isValid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showNext":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showPrev":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onNext":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onPrev":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onComplete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["isActive"]}]}]}}}}]

dist/src/wizard.component.d.ts

@@ -0,0 +1,21 @@
+import { OnInit, EventEmitter, QueryList, AfterContentInit } from '@angular/core';
+import { WizardStepComponent } from './wizard-step.component';
+export declare class WizardComponent implements OnInit, AfterContentInit {
+    wizardSteps: QueryList<WizardStepComponent>;
+    private _steps;
+    private _isCompleted;
+    onStepChanged: EventEmitter<WizardStepComponent>;
+    constructor();
+    ngOnInit(): void;
+    ngAfterContentInit(): void;
+    readonly steps: Array<WizardStepComponent>;
+    private readonly isCompleted;
+    private activeStep;
+    private readonly activeStepIndex;
+    private readonly hasNextStep;
+    private readonly hasPrevStep;
+    goToStep(step: WizardStepComponent): void;
+    next(): void;
+    previous(): void;
+    complete(): void;
+}

dist/src/wizard.component.js

@@ -0,0 +1,127 @@
+var __decorate = (this && this.__decorate) || function (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;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { Component, Output, EventEmitter, ContentChildren, QueryList } from '@angular/core';
+import { WizardStepComponent } from './wizard-step.component';
+var WizardComponent = (function () {
+    function WizardComponent() {
+        this._steps = [];
+        this._isCompleted = false;
+        this.onStepChanged = new EventEmitter();
+    }
+    WizardComponent.prototype.ngOnInit = function () {
+    };
+    WizardComponent.prototype.ngAfterContentInit = function () {
+        var _this = this;
+        this.wizardSteps.forEach(function (step) { return _this._steps.push(step); });
+        this.steps[0].isActive = true;
+    };
+    Object.defineProperty(WizardComponent.prototype, "steps", {
+        get: function () {
+            return this._steps.filter(function (step) { return !step.hidden; });
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(WizardComponent.prototype, "isCompleted", {
+        get: function () {
+            return this._isCompleted;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(WizardComponent.prototype, "activeStep", {
+        get: function () {
+            return this.steps.find(function (step) { return step.isActive; });
+        },
+        set: function (step) {
+            if (step !== this.activeStep && !step.isDisabled) {
+                this.activeStep.isActive = false;
+                step.isActive = true;
+                this.onStepChanged.emit(step);
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(WizardComponent.prototype, "activeStepIndex", {
+        get: function () {
+            return this.steps.indexOf(this.activeStep);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(WizardComponent.prototype, "hasNextStep", {
+        get: function () {
+            return this.activeStepIndex < this.steps.length - 1;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(WizardComponent.prototype, "hasPrevStep", {
+        get: function () {
+            return this.activeStepIndex > 0;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    WizardComponent.prototype.goToStep = function (step) {
+        if (!this.isCompleted) {
+            this.activeStep = step;
+        }
+    };
+    WizardComponent.prototype.next = function () {
+        if (this.hasNextStep) {
+            var nextStep = this.steps[this.activeStepIndex + 1];
+            this.activeStep.onNext.emit();
+            nextStep.isDisabled = false;
+            this.activeStep = nextStep;
+        }
+    };
+    WizardComponent.prototype.previous = function () {
+        if (this.hasPrevStep) {
+            var prevStep = this.steps[this.activeStepIndex - 1];
+            this.activeStep.onPrev.emit();
+            prevStep.isDisabled = false;
+            this.activeStep = prevStep;
+        }
+    };
+    WizardComponent.prototype.complete = function () {
+        this.activeStep.onComplete.emit();
+        this._isCompleted = true;
+    };
+    return WizardComponent;
+}());
+__decorate([
+    ContentChildren(WizardStepComponent),
+    __metadata("design:type", QueryList)
+], WizardComponent.prototype, "wizardSteps", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], WizardComponent.prototype, "onStepChanged", void 0);
+WizardComponent = __decorate([
+    Component({
+        selector: 'form-wizard',
+        template: "<div class=\"card\">\n    <div class=\"card-header\">\n      <ul class=\"nav nav-justified\">\n        <li class=\"nav-item\" *ngFor=\"let step of steps\" [ngClass]=\"{'active': step.isActive, 'enabled': !step.isDisabled, 'disabled': step.isDisabled, 'completed': isCompleted}\">\n          <a (click)=\"goToStep(step)\">{{step.title}}</a>\n        </li>\n      </ul>\n    </div>\n    <div class=\"card-block\">\n      <ng-content></ng-content>\n    </div>\n    <div class=\"card-footer\" [hidden]=\"isCompleted\">\n        <button type=\"button\" class=\"btn btn-secondary float-left\" (click)=\"previous()\" [hidden]=\"!hasPrevStep || !activeStep.showPrev\">Previous</button>\n        <button type=\"button\" class=\"btn btn-secondary float-right\" (click)=\"next()\" [disabled]=\"!activeStep.isValid\" [hidden]=\"!hasNextStep || !activeStep.showNext\">Next</button>\n        <button type=\"button\" class=\"btn btn-secondary float-right\" (click)=\"complete()\" [disabled]=\"!activeStep.isValid\" [hidden]=\"hasNextStep\">Done</button>\n    </div>\n  </div>",
+        styles: [
+            '.card { height: 100%; }',
+            '.card-header { background-color: #fff; padding: 0; font-size: 1.25rem; }',
+            '.card-block { overflow-y: auto; }',
+            '.card-footer { background-color: #fff; border-top: 0 none; }',
+            '.nav-item { padding: 1rem 0rem; border-bottom: 0.5rem solid #ccc; }',
+            '.active { font-weight: bold; color: black; border-bottom-color: #1976D2 !important; }',
+            '.enabled { cursor: pointer; border-bottom-color: rgb(88, 162, 234); }',
+            '.disabled { color: #ccc; }',
+            '.completed { cursor: default; }'
+        ]
+    }),
+    __metadata("design:paramtypes", [])
+], WizardComponent);
+export { WizardComponent };