@ever-co/angular2-wizard - npm Package Compare versions

Comparing version 0.3.1 to 0.5.0

config/helpers.js

@@ -0,0 +0,0 @@ /**

config/karma.conf.js

@@ -0,0 +0,0 @@ module.exports = function(config) {

config/spec-bundle.js

@@ -0,0 +0,0 @@ /*

config/webpack.test.js

@@ -0,0 +0,0 @@ /**

dist/index.d.ts

@@ -5,3 +5,3 @@ import { ModuleWithProviders } from '@angular/core';
 export declare class FormWizardModule {
-    static forRoot(): ModuleWithProviders;
+    static forRoot(): ModuleWithProviders<FormWizardModule>;
 }

dist/index.js

 "use strict";
+var __createBinding = (this && this.__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];
+}));
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -8,6 +15,7 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 };
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormWizardModule = void 0;
 var core_1 = require("@angular/core");
@@ -17,4 +25,4 @@ var common_1 = require("@angular/common");
 var wizard_step_component_1 = require("./src/wizard-step.component");
-__export(require("./src/wizard.component"));
-__export(require("./src/wizard-step.component"));
+__exportStar(require("./src/wizard.component"), exports);
+__exportStar(require("./src/wizard-step.component"), exports);
 var FormWizardModule = /** @class */ (function () {
@@ -21,0 +29,0 @@ function FormWizardModule() {

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

@@ -1,3 +0,3 @@
-import { EventEmitter } from '@angular/core';
-export declare class WizardStepComponent {
+import { EventEmitter, OnInit } from '@angular/core';
+export declare class WizardStepComponent implements OnInit {
     title: string;
@@ -14,3 +14,5 @@ hidden: boolean;
     constructor();
-    isActive: boolean;
+    ngOnInit(): void;
+    set isActive(isActive: boolean);
+    get isActive(): boolean;
 }

dist/src/wizard-step.component.js

@@ -12,2 +12,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.WizardStepComponent = void 0;
 var core_1 = require("@angular/core");
@@ -26,2 +27,4 @@ var WizardStepComponent = /** @class */ (function () {
     }
+    WizardStepComponent.prototype.ngOnInit = function () {
+    };
     Object.defineProperty(WizardStepComponent.prototype, "isActive", {
@@ -35,3 +38,3 @@ get: function () {
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
@@ -38,0 +41,0 @@ });

dist/src/wizard.component.d.ts

@@ -1,19 +0,21 @@
-import { EventEmitter, QueryList, AfterContentInit } from '@angular/core';
+import { EventEmitter, QueryList, AfterContentInit, OnInit } from '@angular/core';
 import { WizardStepComponent } from './wizard-step.component';
-export declare class WizardComponent implements AfterContentInit {
+export declare class WizardComponent implements OnInit, AfterContentInit {
     wizardSteps: QueryList<WizardStepComponent>;
-    buttonNext: string;
-    buttonPrevious: string;
-    buttonDone: string;
     private _steps;
     private _isCompleted;
     onStepChanged: EventEmitter<WizardStepComponent>;
+    previousText: string;
+    nextText: string;
+    doneText: string;
     constructor();
+    ngOnInit(): void;
     ngAfterContentInit(): void;
-    readonly steps: Array<WizardStepComponent>;
-    readonly isCompleted: boolean;
-    activeStep: WizardStepComponent;
-    readonly activeStepIndex: number;
-    readonly hasNextStep: boolean;
-    readonly hasPrevStep: boolean;
+    get steps(): Array<WizardStepComponent>;
+    get isCompleted(): boolean;
+    get activeStep(): WizardStepComponent;
+    set activeStep(step: WizardStepComponent);
+    get activeStepIndex(): number;
+    get hasNextStep(): boolean;
+    get hasPrevStep(): boolean;
     goToStep(step: WizardStepComponent): void;
@@ -23,2 +25,3 @@ next(): void;
     complete(): void;
+    reset(force?: boolean): void;
 }

dist/src/wizard.component.js

@@ -12,2 +12,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.WizardComponent = void 0;
 var core_1 = require("@angular/core");
@@ -20,3 +21,8 @@ var wizard_step_component_1 = require("./wizard-step.component");
         this.onStepChanged = new core_1.EventEmitter();
+        this.previousText = 'Previous';
+        this.nextText = 'Next';
+        this.doneText = 'Done';
     }
+    WizardComponent.prototype.ngOnInit = function () {
+    };
     WizardComponent.prototype.ngAfterContentInit = function () {
@@ -26,5 +32,2 @@ var _this = this;
         this.steps[0].isActive = true;
-        this.buttonNext = (this.buttonNext) ? this.buttonNext : "Next";
-        this.buttonPrevious = (this.buttonPrevious) ? this.buttonPrevious : "Previous";
-        this.buttonDone = (this.buttonDone) ? this.buttonDone : "Done";
     };
@@ -35,3 +38,3 @@ Object.defineProperty(WizardComponent.prototype, "steps", {
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
@@ -43,3 +46,3 @@ });
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
@@ -58,3 +61,3 @@ });
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
@@ -66,3 +69,3 @@ });
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
@@ -74,3 +77,3 @@ });
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
@@ -82,3 +85,3 @@ });
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
@@ -111,2 +114,21 @@ });
     };
+    /*
+     *
+     */
+    WizardComponent.prototype.reset = function (force) {
+        var _this = this;
+        if (force === void 0) { force = false; }
+        if (this._isCompleted || force) {
+            this.activeStep = this.steps[0];
+            this.steps.forEach(function (step) {
+                step.isDisabled = true;
+            });
+            this._isCompleted = false;
+            this.activeStep.isDisabled = false;
+            this.activeStep.isActive = true;
+            setTimeout(function () {
+                _this._isCompleted = false;
+            }, 1000);
+        }
+    };
     __decorate([
@@ -117,21 +139,21 @@ core_1.ContentChildren(wizard_step_component_1.WizardStepComponent),
     __decorate([
+        core_1.Output(),
+        __metadata("design:type", core_1.EventEmitter)
+    ], WizardComponent.prototype, "onStepChanged", void 0);
+    __decorate([
         core_1.Input(),
         __metadata("design:type", String)
-    ], WizardComponent.prototype, "buttonNext", void 0);
+    ], WizardComponent.prototype, "previousText", void 0);
     __decorate([
         core_1.Input(),
         __metadata("design:type", String)
-    ], WizardComponent.prototype, "buttonPrevious", void 0);
+    ], WizardComponent.prototype, "nextText", void 0);
     __decorate([
         core_1.Input(),
         __metadata("design:type", String)
-    ], WizardComponent.prototype, "buttonDone", void 0);
-    __decorate([
-        core_1.Output(),
-        __metadata("design:type", core_1.EventEmitter)
-    ], WizardComponent.prototype, "onStepChanged", void 0);
+    ], WizardComponent.prototype, "doneText", void 0);
     WizardComponent = __decorate([
         core_1.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\">{{buttonPrevious}}</button>\n        <button type=\"button\" class=\"btn btn-secondary float-right\" (click)=\"next()\" [disabled]=\"!activeStep.isValid\" [hidden]=\"!hasNextStep || !activeStep.showNext\">{{buttonNext}}</button>\n        <button type=\"button\" class=\"btn btn-secondary float-right\" (click)=\"complete()\" [disabled]=\"!activeStep.isValid\" [hidden]=\"hasNextStep\">{{buttonDone}}</button>\n    </div>\n  </div>",
+            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\" \n        [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\" *ngIf=\"!isCompleted\">\n        <button type=\"button\" class=\"btn btn-default float-left\" (click)=\"previous()\" *ngIf=\"hasPrevStep || activeStep.showPrev\">{{previousText}}</button>\n        <button type=\"button\" class=\"btn btn-secondary float-right\" (click)=\"next()\" [disabled]=\"!activeStep.isValid\" *ngIf=\"hasNextStep || activeStep.showNext\">{{nextText}}</button>\n        <button type=\"button\" class=\"btn btn-primary float-right\" (click)=\"complete()\" [disabled]=\"!activeStep.isValid\" *ngIf=\"!hasNextStep\">{{doneText}}</button>\n    </div>\n  </div>",
             styles: [
@@ -138,0 +160,0 @@ '.card { height: 100%; }',

index.ts

@@ -23,3 +23,3 @@ import { NgModule, ModuleWithProviders } from '@angular/core';
 export class FormWizardModule {
-  static forRoot(): ModuleWithProviders {
+  static forRoot(): ModuleWithProviders<FormWizardModule> {
     return {
@@ -26,0 +26,0 @@ ngModule: FormWizardModule

karma.conf.js

 module.exports = require('./config/karma.conf.js');

package.json

 {
   "name": "@ever-co/angular2-wizard",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "scripts": {
@@ -19,2 +19,3 @@ "build": "ngc -p tsconfig.json",
   },
+  "typings": "./dist/index.d.ts",
   "keywords": [
@@ -34,38 +35,38 @@ "angular2-wizard",
   "dependencies": {
-    "bootstrap": "^4.0.0-alpha.6"
+    "bootstrap": "^4.6.0"
   },
   "devDependencies": {
-    "@angular/common": "^2.3.1",
-    "@angular/compiler": "^2.3.1",
-    "@angular/compiler-cli": "^2.3.1",
-    "@angular/core": "^2.3.1",
-    "@angular/platform-browser": "^2.3.1",
-    "@angular/platform-browser-dynamic": "^2.3.1",
-    "@angular/platform-server": "^2.3.1",
-    "@types/es6-shim": "^0.31.32",
-    "@types/jasmine": "^2.5.42",
-    "@types/selenium-webdriver": "^2.53.39",
-    "awesome-typescript-loader": "^3.0.4-rc.2",
-    "codelyzer": "^0.0.28",
-    "istanbul-instrumenter-loader": "^2.0.0",
-    "jasmine-core": "^2.5.2",
-    "karma": "^1.4.1",
-    "karma-chrome-launcher": "^2.0.0",
-    "karma-coverage": "^1.1.1",
-    "karma-jasmine": "^1.1.0",
-    "karma-mocha-reporter": "^2.2.2",
-    "karma-remap-coverage": "^0.1.4",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^2.0.2",
-    "rxjs": "^5.0.1",
-    "source-map-loader": "^0.1.6",
+    "@angular/common": "^12.2.10",
+    "@angular/compiler": "^12.2.10",
+    "@angular/compiler-cli": "^12.2.10",
+    "@angular/core": "^12.2.10",
+    "@angular/platform-browser": "^12.2.10",
+    "@angular/platform-browser-dynamic": "^12.2.10",
+    "@angular/platform-server": "^12.2.10",
+    "@types/jasmine": "^3.10.0",
+    "@types/selenium-webdriver": "^4.0.15",
+    "codelyzer": "^6.0.2",
+    "jasmine-core": "^3.10.0",
+    "karma": "^6.3.5",
+    "karma-chrome-launcher": "^3.1.0",
+    "karma-coverage": "^2.0.3",
+    "karma-jasmine": "^4.0.1",
+    "karma-mocha-reporter": "^2.2.5",
+    "karma-remap-coverage": "^0.1.5",
+    "karma-sourcemap-loader": "^0.3.8",
+    "karma-webpack": "^5.0.0",
+    "rxjs": "^7.4.0",
+    "source-map-loader": "^3.0.0",
     "ts-helpers": "^1.1.2",
-    "tslint": "^3.15.1",
-    "typescript": "^2.1.6",
-    "webpack": "^2.2.1",
-    "zone.js": "0.7.2"
+    "tslint": "^6.1.3",
+    "typescript": "~4.2.4",
+    "webpack": "^5.58.2",
+    "zone.js": "^0.11.4"
   },
   "engines": {
-    "node": ">=0.8.0"
+    "node": ">=14.4.0"
+  },
+  "_comment01": {
+    "typings": "./dist/index.d.ts"
   }
 }

README.MD

 # angular2-wizard
+
 [![npm version](https://badge.fury.io/js/angular2-wizard.svg)](https://badge.fury.io/js/angular2-wizard)
@@ -7,11 +8,18 @@ [![Build Status](https://travis-ci.org/maiyaporn/angular2-wizard.svg?branch=master)](https://travis-ci.org/maiyaporn/angular2-wizard)
 
-This is an Angular2 Form Wizard component. Just like any form wizard. You can define steps and control how each step works. You can enable/disable navigation button based on validity of the current step. Currently, the component only support basic functionality. More features will come later.
+This is an Angular2+ Form Wizard component. Just like any form wizard. You can define steps and control how each step works. You can enable/disable navigation button based on validity of the current step. Currently, the component only support basic functionality. More features will come later.
 
 You can checkout the demo below and see how to use it in the next section.
 
+## Origin
+
+- Forked from https://github.com/maiyaporn/angular2-wizard
+- Updated from https://github.com/3dluis/angular2-wizard
+
 ## Demo
+
 https://maiyaporn.github.io/angular2-wizard-demo/
 
 ## Dependencies
-- Angular2 (tested with 2.3.1)
+
+- Angular2+
 - Bootstrap 4
@@ -58,3 +66,3 @@
 <form-wizard>
-  <wizard-step [title]="'Step1'" [isValid]="emailForm.form.valid" (onNext)="onStep1Next($event)">
+  <wizard-step [title]="'Step1'" [nextText]="'Next'" [previousText]="'Previous'" [doneText]="'Done'" [isValid]="emailForm.form.valid" (onNext)="onStep1Next($event)">
     <h1>Step1</h1>
@@ -61,0 +69,0 @@ <form #emailForm="ngForm">

src/wizard-step.component.spec.ts

@@ -17,13 +17,11 @@ import { TestBed } from '@angular/core/testing';
 
-    describe('when create wizard step', () => {
-        it('should have a title', () => {
-            let fixture = TestBed.createComponent(WizardStepComponent);
-            fixture.componentInstance.title = 'Step1';
+it('should have a title', () => {
+    let fixture = TestBed.createComponent(WizardStepComponent);
+    fixture.componentInstance.title = 'Step1';
 
-            fixture.detectChanges();
+    fixture.detectChanges();
 
-            expect(fixture.componentInstance.title).toBe('Step1');
-        });
-    });
+    expect(fixture.componentInstance.title).toBe('Step1');
+});
 
 });

src/wizard-step.component.ts

@@ -1,2 +0,2 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import {Component, Input, Output, EventEmitter, OnInit} from '@angular/core';
 
@@ -12,3 +12,3 @@ @Component({
 })
-export class WizardStepComponent {
+export class WizardStepComponent implements OnInit {
   @Input() title: string;
@@ -29,2 +29,6 @@ @Input() hidden: boolean = false;
 
+    ngOnInit(){
+
+    }
+
   @Input('isActive')
@@ -31,0 +35,0 @@ set isActive(isActive: boolean) {

src/wizard.component.spec.ts

@@ -17,8 +17,6 @@ import { TestBed } from '@angular/core/testing';
 
-    describe('', () => {
-        it('', () => {
-            let fixture = TestBed.createComponent(WizardComponent);
-        });
+    it('should create the app', () => {
+        const fixture = TestBed.createComponent(WizardComponent);
     });
 
 });

src/wizard.component.ts

@@ -1,2 +0,2 @@
-import { Component, Output, Input, EventEmitter, ContentChildren, QueryList, AfterContentInit } from '@angular/core';
+import {Component, Output, Input, EventEmitter, ContentChildren, QueryList, AfterContentInit, OnInit} from '@angular/core';
 import { WizardStepComponent } from './wizard-step.component';
@@ -10,3 +10,4 @@
       <ul class="nav nav-justified">
-        <li class="nav-item" *ngFor="let step of steps" [ngClass]="{'active': step.isActive, 'enabled': !step.isDisabled, 'disabled': step.isDisabled, 'completed': isCompleted}">
+        <li class="nav-item" *ngFor="let step of steps" 
+        [ngClass]="{'active': step.isActive, 'enabled': !step.isDisabled, 'disabled': step.isDisabled, 'completed': isCompleted}">
           <a (click)="goToStep(step)">{{step.title}}</a>
@@ -19,6 +20,6 @@ </li>
     </div>
-    <div class="card-footer" [hidden]="isCompleted">
-        <button type="button" class="btn btn-secondary float-left" (click)="previous()" [hidden]="!hasPrevStep || !activeStep.showPrev">{{buttonPrevious}}</button>
-        <button type="button" class="btn btn-secondary float-right" (click)="next()" [disabled]="!activeStep.isValid" [hidden]="!hasNextStep || !activeStep.showNext">{{buttonNext}}</button>
-        <button type="button" class="btn btn-secondary float-right" (click)="complete()" [disabled]="!activeStep.isValid" [hidden]="hasNextStep">{{buttonDone}}</button>
+    <div class="card-footer" *ngIf="!isCompleted">
+        <button type="button" class="btn btn-default float-left" (click)="previous()" *ngIf="hasPrevStep || activeStep.showPrev">{{previousText}}</button>
+        <button type="button" class="btn btn-secondary float-right" (click)="next()" [disabled]="!activeStep.isValid" *ngIf="hasNextStep || activeStep.showNext">{{nextText}}</button>
+        <button type="button" class="btn btn-primary float-right" (click)="complete()" [disabled]="!activeStep.isValid" *ngIf="!hasNextStep">{{doneText}}</button>
     </div>
@@ -39,10 +40,6 @@ </div>`
 })
-export class WizardComponent implements AfterContentInit {
+export class WizardComponent implements OnInit, AfterContentInit {
   @ContentChildren(WizardStepComponent)
   wizardSteps: QueryList<WizardStepComponent>;
 
-  @Input() buttonNext: string;
-  @Input() buttonPrevious: string;
-  @Input() buttonDone: string;
-
   private _steps: Array<WizardStepComponent> = [];
@@ -54,10 +51,21 @@ private _isCompleted: boolean = false;
 
+  @Input()
+  previousText: string = 'Previous';
+
+  @Input()
+  nextText: string = 'Next';
+
+  @Input()
+  doneText: string = 'Done';
+
+
   constructor() { }
 
+    ngOnInit(){
+
+    }
+
   ngAfterContentInit() {
     this.wizardSteps.forEach(step => this._steps.push(step));
     this.steps[0].isActive = true;
-    this.buttonNext = (this.buttonNext) ? this.buttonNext: "Next";
-    this.buttonPrevious = (this.buttonPrevious) ? this.buttonPrevious: "Previous";
-    this.buttonDone = (this.buttonDone) ? this.buttonDone: "Done";
   }
@@ -125,3 +133,22 @@
   }
+  /*
+   * 
+   */
+  public reset(force: boolean = false): void {
+    if (this._isCompleted || force) {
+      this.activeStep = this.steps[0];
+      this.steps.forEach((step) => {
+        step.isDisabled = true;
+      });
 
-}
+      this._isCompleted = false;
+      this.activeStep.isDisabled = false;
+      this.activeStep.isActive = true;
+
+      setTimeout(() => {
+        this._isCompleted = false;
+      }, 1000);
+    }
+  }
+
+}

tsconfig.json

@@ -0,0 +0,0 @@ {

tslint.json

@@ -0,0 +0,0 @@ {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

43552

increased by2.92%

Dev dependency count

26

decreased by-10.34%

Lines of code

916

increased by6.64%

Number of lines in readme file

122

increased by7.02%

Number of low supply chain risk alerts

1

decreased by-50%

Dependency changes

• Updatedbootstrap@^4.6.0