- Initial commit

.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,40 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage/*
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+#System Files
+.DS_Store
+Thumbs.db

README.md

@@ -0,0 +1,69 @@
+# Ng2Wizard
+
+This project contains a functional wizard component for [Angular 2](https://angular.io/).
+
+## Build
+
+Run `npm run build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `npm test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## How to use the wizard
+
+To use the this wizard component in an angular 2 project simply add a wizard component as followed to the html template of your component:
+
+```angular2html
+<wizard>
+  <wizard-step title="Title of step 1">
+    Content of Step 1
+    <button type="button" nextStep>Next Step</button>
+  </wizard-step>
+  <wizard-step title="Title of step 2">
+    Content of Step 2
+    <button type="button" previousStep>Go to previous step</button>
+    <button type="button" nextStep>Go to next step</button>
+  </wizard-step>
+  <wizard-step title="Title of step 3">
+    Content of Step 3
+    <button type="button" previousStep>Previous Step</button>
+    <button type="button" (click)="finishFunction()">Finish</button>
+  </wizard-step>
+</wizard>
+``` 
+
+### <wizard>
+`<wizard>...</wizard>` is the environment, in which you define your wizard.
+This contains all steps that belong to your wizard.
+
+### <wizard-step>
+`<wizard-step>...</wizard-step>` is the wizard step environment. 
+Every wizard step must be defined inside its own `<wizard-step></wizard-step>` environment.
+If you need to call a function to do some initializing work before entering a wizard step you can add `stepEnter` to the wizard step environment like this:
+
+```angular2html
+<wizard-step title="Second Step" (stepenter)="enterSecondStep()"></wizard-step>
+```
+
+This leads to the calling of the `enterSecondStep` function when the wizard moves to this step.
+When the first step of the wizard contains a `stepEnter` function, it's also called after the wizard was initialized. 
+
+Similarly you can add `stepExit` to the wizard step environment if you want to call a function every time a wizard step is exited,
+either by pressing on a component with a `nextStep` or `previousStep` directive or by a click on the navigation bar. 
+
+### [nextStep]
+By adding `nextStep` to a button or a link you automatically add a `onClick` listener to the button or link, that leads to the next step.
+This listener will automatically change the currently selected wizard step to the next wizard step after a click on the component.
+
+If you want to call a function only after pressing on a component with a `nextStep` directive you can add the a function to the component declaration of the component tagged with `nextStep` like this:
+
+```angular2html
+<button (finalize)="finalizeStep()" nextStep>Next Step</button>
+```
+
+This leads to a call of the function `finalizeStep` everytime the button is pressed.
+
+### [previousStep]
+By adding `previousStep` to a button or a link you automatically add a `onClick` listener to the button or link, that leads to the previous step.
+This listener will automatically change the currently selected wizard step to the previous wizard step after a click on the component.

gulpfile.js

@@ -0,0 +1,32 @@
+var gulp = require('gulp');
+var inlineResources = require('./scripts/gulp/inline-resources');
+var sass = require('gulp-sass');
+
+
+gulp.task('copy-and-inline-resource', copyHtml);
+
+function copyHtml() {
+  gulp.src('src/components/**/*.html')
+    .pipe(gulp.dest('./dist/components')).on('end', copyAssets);
+}
+
+function copyAssets() {
+  gulp.src('./src/assets/**/*')
+    .pipe(gulp.dest('./dist/assets')).on('end', copyCss);
+}
+
+function copyCss() {
+  gulp.src('./src/components/**/*.css')
+    .pipe(gulp.dest('./dist/components')).on('end', copyLess);
+}
+
+function copyLess() {
+  gulp.src('./src/components/**/*.less')
+    .pipe(gulp.dest('./dist/components')).on('end', inlineResource);
+}
+
+function inlineResource() {
+  inlineResources('./dist/components');
+}
+
+gulp.task('default', ['copy-and-inline-resource']);

karma-shim.js

@@ -0,0 +1,38 @@
+Error.stackTraceLimit = Infinity;
+
+require('core-js/client/shim');
+require('reflect-metadata');
+
+require('ts-helpers');
+
+require('zone.js/dist/zone');
+require('zone.js/dist/long-stack-trace-zone');
+require('zone.js/dist/proxy');
+require('zone.js/dist/sync-test');
+require('zone.js/dist/jasmine-patch');
+require('zone.js/dist/async-test');
+require('zone.js/dist/fake-async-test');
+
+/*
+ Ok, this is kinda crazy. We can use the the context method on
+ require that webpack created in order to tell webpack
+ what files we actually want to require or import.
+ Below, context will be a function/object with file names as keys.
+ using that regex we are saying look in client/app and find
+ any file that ends with '.spec.ts' and get its path. By passing in true
+ we say do this recursively
+ */
+var appContext = require.context('./src', true, /\.spec\.ts/);
+
+// get all the files, for each file, call the context function
+// that will require the file and load it up here. Context will
+// loop and require those spec files here
+appContext.keys().forEach(appContext);
+
+// Select BrowserDomAdapter.
+// see https://github.com/AngularClass/angular2-webpack-starter/issues/124
+// Somewhere in the test setup
+var testing = require('@angular/core/testing');
+var browser = require('@angular/platform-browser-dynamic/testing');
+
+testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());

karma.conf.js

@@ -0,0 +1,87 @@
+var path = require('path');
+
+var webpackConfig = require('./webpack.config');
+
+var ENV = process.env.npm_lifecycle_event;
+var isTestWatch = ENV === 'test-watch';
+
+module.exports = function (config) {
+  var _config = {
+
+    // base path that will be used to resolve all patterns (eg. files, exclude)
+    basePath: '',
+
+    // frameworks to use
+    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+    frameworks: ['jasmine'],
+
+    // list of files / patterns to load in the browser
+    files: [
+      {pattern: './karma-shim.js', watched: false}
+    ],
+
+    // list of files to exclude
+    exclude: [],
+
+    // preprocess matching files before serving them to the browser
+    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+    preprocessors: {
+      './karma-shim.js': ['webpack', 'sourcemap']
+    },
+
+    webpack: webpackConfig,
+
+    webpackMiddleware: {
+      // webpack-dev-middleware configuration
+      // i. e.
+      stats: 'errors-only'
+    },
+
+    webpackServer: {
+      noInfo: true // please don't spam the console when running in karma!
+    },
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress', 'mocha'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ["mocha"],
+
+    // web server port
+    port: 9876,
+
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+
+    // level of logging
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_INFO,
+
+    // enable / disable watching file and executing tests whenever any file changes
+    autoWatch: false,
+
+    // start these browsers
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: isTestWatch ? ['Chrome'] : ['PhantomJS'],
+
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: true
+  };
+
+  if (!isTestWatch) {
+    _config.reporters.push("coverage");
+
+    _config.coverageReporter = {
+      dir: 'coverage/',
+      reporters: [{
+        type: 'json',
+        dir: 'coverage',
+        subdir: 'json',
+        file: 'coverage-final.json'
+      }]
+    };
+  }
+
+  config.set(_config);
+
+};

package.json

@@ -0,0 +1,88 @@
+{
+  "name": "ng2-wizard",
+  "version": "0.0.0",
+  "license": "MIT",
+  "angular-cli": {},
+  "scripts": {
+    "lint": "tslint --force \"src/**/*.ts\"",
+    "pretest": "npm run lint",
+    "test": "karma start",
+    "posttest": "remap-istanbul -i coverage/json/coverage-final.json -o coverage/html -t html",
+    "test-watch": "karma start --no-single-run --auto-watch",
+    "build": "rimraf dist && ngc -p src/tsconfig.aot.json && gulp"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/common": "^2.3.1",
+    "@angular/compiler": "^2.3.1",
+    "@angular/core": "^2.3.1",
+    "@angular/forms": "^2.3.1",
+    "@angular/http": "^2.3.1",
+    "@angular/platform-browser": "^2.3.1",
+    "@angular/platform-browser-dynamic": "^2.3.1",
+    "@angular/router": "^3.3.1",
+    "core-js": "^2.4.1",
+    "rxjs": "^5.0.1",
+    "ts-helpers": "^1.1.1",
+    "zone.js": "^0.7.2"
+  },
+  "devDependencies": {
+    "@angular/compiler-cli": "^2.3.1",
+    "@angular-cli/ast-tools": "^1.0.9",
+    "@angularclass/hmr": "^1.0.1",
+    "@angularclass/hmr-loader": "^3.0.2",
+    "@ngtools/webpack": "^1.1.6",
+    "@types/jasmine": "^2.2.29",
+    "@types/node": "^6.0.38",
+    "@types/selenium-webdriver": "2.53.33",
+    "angular-router-loader": "^0.4.0",
+    "angular2-template-loader": "^0.6.0",
+    "autoprefixer": "^6.3.2",
+    "awesome-typescript-loader": "^2.2.4",
+    "codelyzer": "1.0.0-beta.3",
+    "copy-webpack-plugin": "^4.0.0",
+    "css-loader": "^0.25.0",
+    "extract-text-webpack-plugin": "^2.0.0-beta.4",
+    "file-loader": "^0.9.0",
+    "gulp": "^3.9.1",
+    "gulp-sass": "^2.3.2",
+    "html-loader": "^0.4.0",
+    "html-webpack-plugin": "^2.8.1",
+    "istanbul-instrumenter-loader": "^0.2.0",
+    "jasmine-core": "^2.3.4",
+    "jasmine-spec-reporter": "^2.7.0",
+    "json-loader": "^0.5.3",
+    "karma": "1.3.0",
+    "karma-chrome-launcher": "^2.0.0",
+    "karma-coverage": "^1.0.0",
+    "karma-jasmine": "^1.0.2",
+    "karma-mocha-reporter": "^2.0.3",
+    "karma-phantomjs-launcher": "^1.0.0",
+    "karma-remap-istanbul": "0.2.1",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "1.8.0",
+    "less": "^2.7.1",
+    "less-loader": "^2.2.3",
+    "node-sass": "^3.4.2",
+    "null-loader": "0.1.1",
+    "phantomjs-prebuilt": "^2.1.4",
+    "postcss-loader": "^1.1.0",
+    "protractor": "^4.0.10",
+    "raw-loader": "0.5.1",
+    "reflect-metadata": "^0.1.9",
+    "remap-istanbul": "^0.6.4",
+    "rimraf": "^2.5.1",
+    "sass-loader": "^4.0.0",
+    "shelljs": "^0.7.0",
+    "style-loader": "^0.13.0",
+    "to-string-loader": "^1.1.5",
+    "ts-helpers": "^1.1.1",
+    "tslint": "^3.15.1",
+    "tslint-loader": "^2.1.5",
+    "typedoc": "^0.5.1",
+    "typescript": "2.0.6",
+    "url-loader": "^0.5.6",
+    "webpack": "^2.1.0-beta.28",
+    "webpack-dev-server": "2.1.0-beta.9"
+  }
+}