├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── index.ts
├── package.json
├── src
├── ng2-wizard.module.ts
├── wizard-step-tab.component.ts
├── wizard-step.component.css
├── wizard-step.component.html
├── wizard-step.component.ts
├── wizard.component.css
├── wizard.component.html
└── wizard.component.ts
├── tsconfig-aot.json
└── tsconfig.json
/.gitignore:
--------------------------------------------------------------------------------
1 | .npmignore
2 | .gitignore
3 |
4 | *.tgz
5 | *.js
6 | *.map
7 | *.d.ts
8 | *.metadata.json
9 |
10 | /**/*.js
11 | /**/*.map
12 | /**/*.d.ts
13 | node_modules/
14 | dist/
15 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .npmignore
2 | .gitignore
3 |
4 | *.tgz
5 |
6 | typings/
7 | tsconfig.json
8 | tsconfig-aot.json
9 | typings.json
10 |
11 | /**/*.ts
12 | !/**/*.d.ts
13 |
14 | src/
15 | gulpfile.js
16 |
17 | node_modules/
18 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Flávio Silva
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](https://badge.fury.io/js/ng2-wizard)
2 |
3 | # WizardComponent
4 | @version 2.0.8
5 | @author: Flávio Silva
6 | @link: [https://github.com/fssolutions/ng2-wizard](https://github.com/fssolutions/ng2-wizard)
7 |
8 | ## Installation
9 |
10 | Wizard runs on angular 2 and is available as an NPM package. You can install ng2-wizard
11 | in your project's directory as usual:
12 |
13 | ```bash
14 | $ npm install --save ng2-wizard
15 | ```
16 |
17 | Component Wizard(step to step with tabs) for Angular 2.
18 | ```
19 |
20 | ```
21 |
22 | ## Example
23 | ### Template (.html)
24 | ```
25 |
26 |
27 | Title of first tab
28 | Hello World
29 |
30 |
31 | ```
32 | ### TypeScript (.ts)
33 | Import WizardComponent and WizardStepComponent
34 | ```
35 | import { Ng2WizardModule } from 'ng2-wizard';
36 | ```
37 |
38 | Add in your module
39 | ```
40 | @NgModule({
41 | imports: [
42 | Ng2WizardModule,
43 | ]
44 | })
45 | ```
46 |
47 | ## Contributing
48 |
49 | Contributions are welcome and appreciated. You can find ng2-combosearch on GitHub, feel free to start
50 | an issue or create a pull requests:
51 | [https://github.com/fssolutions/ng2-wizard](https://github.com/fssolutions/ng2-wizard)
52 |
53 |
54 | ## License
55 |
56 | Copyright (c) 2016 Flávio Silva [fssolutions](http://www.flaviosilva.net).
57 | Licensed under the MIT License (MIT)
58 |
--------------------------------------------------------------------------------
/index.ts:
--------------------------------------------------------------------------------
1 | export * from './dist/wizard.component';
2 | export * from './dist/wizard-step.component';
3 | export * from './dist/wizard-step-tab.component';
4 |
5 | export * from './dist/ng2-wizard.module';
6 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ng2-wizard",
3 | "version": "2.0.8",
4 | "description": "Component wizard to angular 2",
5 | "main": "dist/index.js",
6 | "dependencies": {
7 | "@angular/common": "^5.2.9"
8 | },
9 | "devDependencies": {
10 | "@angular/cli": "^1.7.3",
11 | "@angular/compiler": "^5.2.9",
12 | "@angular/compiler-cli": "^5.2.10",
13 | "@angular/core": "^5.2.9",
14 | "@angular/platform-browser": "^5.2.9",
15 | "@types/core-js": "^0.9.46",
16 | "@types/node": "^9.6.1",
17 | "rxjs": "^5.5.8",
18 | "typescript": "^2.8.1",
19 | "typings": "^2.1.1",
20 | "zone.js": "^0.8.21",
21 | "gulp": "^3.9.1",
22 | "gulp-inline-ng2-template": "^4.0.0"
23 | },
24 | "scripts": {
25 | "prepublish": "gulp js:build && ngc --p tsconfig-aot.json",
26 | "pubtest": ""
27 | },
28 | "repository": {
29 | "type": "git",
30 | "url": "git+https://github.com/fssolutions/ng2-wizard.git"
31 | },
32 | "keywords": [
33 | "angular2",
34 | "wizard"
35 | ],
36 | "author": "fssolutions",
37 | "license": "MIT",
38 | "bugs": {
39 | "url": "https://github.com/fssolutions/ng2-wizard/issues"
40 | },
41 | "homepage": "https://github.com/fssolutions/ng2-wizard#readme"
42 | }
43 |
--------------------------------------------------------------------------------
/src/ng2-wizard.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 |
4 | import { WizardComponent } from './wizard.component';
5 | import { WizardStepComponent } from './wizard-step.component';
6 | import { WizardStepTabComponent } from './wizard-step-tab.component';
7 |
8 | @NgModule({
9 | imports: [
10 | CommonModule
11 | ],
12 | declarations: [ WizardComponent, WizardStepComponent, WizardStepTabComponent ],
13 | exports: [ WizardComponent, WizardStepComponent, WizardStepTabComponent ],
14 | })
15 | export class Ng2WizardModule { }
16 |
--------------------------------------------------------------------------------
/src/wizard-step-tab.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ElementRef } from '@angular/core';
2 | import { SafeHtml, DomSanitizer } from '@angular/platform-browser';
3 |
4 |
5 | @Component({
6 | selector: 'wizard-step-tab',
7 | template: ''
8 | })
9 | export class WizardStepTabComponent {
10 |
11 | constructor(
12 | private elementRef: ElementRef,
13 | private domSanitizer: DomSanitizer
14 | ) { }
15 |
16 | public setDisplay(type: string){
17 | this.elementRef.nativeElement.style.display = type;
18 | }
19 |
20 | public getHTML(): SafeHtml {
21 | let html = this.elementRef.nativeElement.innerHTML;
22 | return this.domSanitizer.bypassSecurityTrustHtml(html);
23 | }
24 |
25 | }
26 |
--------------------------------------------------------------------------------
/src/wizard-step.component.css:
--------------------------------------------------------------------------------
1 | .step {
2 | padding: 15px;
3 | padding-top: 20px;
4 | }
5 |
--------------------------------------------------------------------------------
/src/wizard-step.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/src/wizard-step.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, AfterContentInit, ElementRef, ContentChild } from '@angular/core';
2 | import { SafeHtml } from '@angular/platform-browser';
3 |
4 | import { WizardStepTabComponent } from './wizard-step-tab.component';
5 |
6 | /**
7 | * # WizardStepComponent
8 | *
9 | * Childrens component of WizardComponent
10 | *
11 | *```
12 | *
13 | * Title of your tab
14 | * Hello World - your content
15 | *
16 | *```
17 | *
18 | * ## Atention!!
19 | * The tag <wizard-step-tab> is o obrigatory
20 | *```
21 | * Title of your tab
22 | *```
23 | */
24 | @Component({
25 | selector: 'wizard-step',
26 | styleUrls: [
27 | './wizard-step.component.css'
28 | ],
29 | templateUrl: './wizard-step.component.html'
30 | })
31 |
32 | export class WizardStepComponent implements AfterContentInit {
33 | private tabName: SafeHtml;
34 |
35 | @ContentChild(WizardStepTabComponent) private wizardStepTabComponent: WizardStepTabComponent;
36 |
37 | public isActive: boolean = false;
38 |
39 | constructor(private elementRef: ElementRef) { }
40 |
41 | ngAfterContentInit() {
42 | if(this.wizardStepTabComponent){
43 | this.wizardStepTabComponent.setDisplay('none');
44 | this.tabName = this.wizardStepTabComponent.getHTML();
45 | }else
46 | throw new Error('WizardStepComponent: TagName "wizard-step-tab" was not found in step');
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/src/wizard.component.css:
--------------------------------------------------------------------------------
1 | .wizard {
2 | display: block;
3 | }
4 |
5 | .wizard-portrait .step {
6 | padding-top: 0px !important;
7 | }
8 |
9 | .wizard nav {
10 | display: -webkit-flex;
11 | display: flex;
12 | border-bottom: 1px solid #ddd;
13 | }
14 |
15 | .wizard nav.hidden {
16 | display: none !important;
17 | }
18 |
19 | .wizard nav label {
20 | padding-bottom: 5px;
21 | padding-left: 15px;
22 | padding-right: 15px;
23 | padding-top: 5px;
24 | margin-bottom: 0px;
25 | position: relative;
26 | font-weight: normal !important;
27 | border-bottom: 6px solid transparent;
28 | border-top: 6px solid transparent;
29 | overflow: hidden;
30 | text-overflow: ellipsis;
31 | white-space: nowrap;
32 | }
33 |
34 | .wizard nav label.active,
35 | .wizard nav label.enable:hover {
36 | background-color: rgb(245, 245, 245);
37 | border-bottom: 6px solid rgb(82, 145, 245);
38 | cursor: pointer;
39 | }
40 |
41 | .wizard nav label.disabled {
42 | cursor: not-allowed;
43 | }
44 |
45 | .wizard-portrait {
46 | display: -webkit-flex;
47 | display: flex;
48 | }
49 |
50 | .wizard-portrait nav {
51 | display: inline-block;
52 | -webkit-flex: 1;
53 | -ms-flex: 1;
54 | flex: 1;
55 | overflow: hidden;
56 | border-bottom: none;
57 | }
58 |
59 | .wizard-portrait > div {
60 | -webkit-flex: 4;
61 | -ms-flex: 4;
62 | flex: 4;
63 | }
64 |
65 | .wizard-portrait nav label {
66 | display: block;
67 | border-left: 6px solid transparent !important;
68 | }
69 |
70 | .wizard-portrait nav label.active,
71 | .wizard-portrait nav label.enable:hover {
72 | background-color: rgb(245, 245, 245);
73 | border-bottom-color: transparent !important;
74 | border-left: 6px solid rgb(82, 145, 245) !important;
75 | cursor: pointer;
76 | }
77 |
78 | .wizard-portrait nav label:hover::after,
79 | .wizard-portrait nav label.active::after {
80 | display: block;
81 | width: 20px;
82 | height: 20px;
83 | background: white;
84 | content: ' ';
85 | position: absolute;
86 | right: -10px;
87 | top: 5px;
88 | -webkit-transform: rotate(45deg);
89 | }
90 |
--------------------------------------------------------------------------------
/src/wizard.component.html:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
7 |
8 |