chore: add build script and config files

.gitignore

@@ -0,0 +1,4 @@
+# Created by .ignore support plugin (hsz.mobi)
+dist/
+.idea/
+node_modules/

package.json

@@ -0,0 +1,57 @@
+{
+  "name": "ionic-stepper",
+  "version": "1.0.0",
+  "description": "steppers components for Ionic / ionic2",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "cd dev && ionic serve",
+    "postinstall": "cd dev && npm install",
+    "clean": "rm -rf ./src ./dist",
+    "lint": "tslint ./src/**/*.ts",
+    "copy-src": "cpx './dev/src/ionic-stepper/**/*' './src'",
+    "copy-scss": "cpx './src/**/*.scss' './dist'",
+    "build:ts": "tsc && ngc",
+    "prebuild": "npm run clean && npm run copy-src && npm run lint",
+    "build": "npm run build:ts",
+    "postbuild": "npm run copy-scss"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/HsuanXyz/ionic-stepper.git"
+  },
+  "dependencies": {
+    "@angular/animations": "4.4.6",
+    "@angular/common": "4.4.6",
+    "@angular/compiler": "4.4.6",
+    "@angular/compiler-cli": "4.4.6",
+    "@angular/core": "4.4.6",
+    "@angular/forms": "4.4.6",
+    "@angular/platform-browser": "4.4.6",
+    "@angular/platform-browser-dynamic": "4.4.6",
+    "cpx": "^1.5.0",
+    "ionic-angular": "^3.9.2",
+    "ionicons": "~3.0.0",
+    "rxjs": "5.5.2",
+    "zone.js": "0.8.18"
+  },
+  "devDependencies": {
+    "tslint": "^5.4.3",
+    "tslint-ionic-rules": "^0.0.13",
+    "typescript": "~2.4.2"
+  },
+  "keywords": [
+    "ionic",
+    "ionic2",
+    "ionic3",
+    "component",
+    "steppers",
+    "step"
+  ],
+  "author": "HsuanLee",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/HsuanXyz/ionic-stepper/issues"
+  },
+  "homepage": "https://github.com/HsuanXyz/ionic-stepper#readme"
+}

src/index.ts

@@ -0,0 +1,5 @@
+export { IonicStepperModule } from './ionic-stepper.module';
+export { IonicStepperComponent } from './ionic-stepper';
+export { IonicStepComponent } from './ionic-step';
+export { IonicStepHeaderComponent } from './ionic-step-header';
+export { IonicStepperNext, IonicStepperPrevious } from './ionic-stepper-button';

src/ionic-step-header.scss

@@ -0,0 +1,90 @@
+@import "./variables";
+
+$head-prefix:#{$step-prefix}-header;
+
+ion-step-header {
+  display: flex;
+  height: 72px;
+  overflow: hidden;
+  align-items: center;
+  padding: 0 24px;
+
+  .#{$head-prefix}-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 8px;
+    flex: none;
+    width: $step-circle-w;
+    height: $step-circle-h;
+    border-radius: $step-circle-r;
+    background-color: $step-circle-inactive-background-color;
+    color: $step-circle-color;
+    transition: background-color 225ms cubic-bezier(0.4, 0.0, 0.2, 1);
+
+    &-error {
+      background-color: rgba($step-error-color, 0.38)
+    }
+
+    &-active {
+      background-color: $step-circle-active-background-color;
+      &.#{$head-prefix}-icon-error {
+        background-color: $step-error-color;
+      }
+    }
+
+  }
+
+  .#{$head-prefix}-text-container {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    overflow: hidden;
+    outline: 0;
+    cursor: pointer;
+    position: relative;
+    box-sizing: content-box;
+    &.mt {
+      margin-top: 14px;
+    }
+  }
+
+  .#{$head-prefix}-label {
+    display: inline-block;
+    font-size: $step-label-size;
+    color: $step-label-inactive-color;
+    min-width: 50px;
+    vertical-align: middle;
+    width: 100%;
+    transition: color 225ms cubic-bezier(0.4, 0.0, 0.2, 1);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    &-error {
+      color: rgba($step-error-color, 0.38)
+    }
+
+    &-active {
+      color: $step-label-active-color;
+      &.#{$head-prefix}-label-error {
+        color: $step-error-color;
+      }
+    }
+  }
+
+  .#{$head-prefix}-description {
+    display: inline-block;
+    color: $step-label-inactive-color;
+    min-width: 50px;
+    vertical-align: middle;
+    width: 100%;
+    font-size: 80%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    &-error {
+      color: rgba($step-error-color, 0.38)
+    }
+  }
+
+}

src/ionic-step-header.ts

@@ -0,0 +1,38 @@
+import { Component, Input } from '@angular/core';
+import { IonicStepStatus } from './ionic-step';
+
+@Component({
+  selector: 'ion-step-header',
+  template: `
+<div class="ionic-step-header-icon"
+     [class.ionic-step-header-icon-error]="isError"
+     [class.ionic-step-header-icon-active]="active">
+    <span class="ionic-step-header-icon-number" *ngIf="icon === 'number'; else ionIcon">{{index + 1}}</span>
+    <ng-template #ionIcon><ion-icon [name]="!isError ? icon : errorIcon"></ion-icon></ng-template>
+</div>
+<div class="ionic-step-header-text-container" [class.mt]="description">
+  <div class="ionic-step-header-label"
+       [class.ionic-step-header-label-error]="isError"
+       [class.ionic-step-header-label-active]="active">{{label}}</div>
+  <div class="ionic-step-header-description" [class.ionic-step-header-description-error]="isError" *ngIf="description">
+    <span>{{description}}</span>
+  </div>
+</div>
+  `,
+  host: {
+    '[class.ionic-step-header-status-error]': 'isError'
+  }
+})
+export class IonicStepHeaderComponent {
+
+  @Input() label: string;
+  @Input() description: string;
+  @Input() icon = 'number';
+  @Input() errorIcon = 'close';
+  @Input() index: number;
+  @Input() active = false;
+  @Input() status: IonicStepStatus = '';
+
+  get isError(): boolean { return this.status === 'error'; }
+
+}

src/ionic-step.ts

@@ -0,0 +1,23 @@
+import { Component, Input, TemplateRef, ViewChild } from '@angular/core';
+
+export type IonicStepStatus = ('' | 'error');
+
+@Component({
+  selector: 'ion-step',
+  template: `
+  <ng-template><ng-content></ng-content></ng-template>
+  `
+})
+export class IonicStepComponent {
+  index: number;
+
+  @Input() disabled: boolean;
+  @Input() label: string;
+  @Input() description: string;
+  @Input() icon = 'number';
+  @Input() errorIcon = 'close';
+  @Input() status: IonicStepStatus = '';
+
+  @ViewChild(TemplateRef) content: TemplateRef<any>;
+
+}

src/ionic-stepper-animations.ts

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+// https://github.com/angular/material2/blob/master/src/lib/stepper/stepper-animations.ts
+
+import {
+  state,
+  style,
+  transition,
+  trigger,
+  animate,
+  AnimationTriggerMetadata,
+} from '@angular/animations';
+
+export const IonicStepperAnimations: {
+  readonly horizontalStepTransition: AnimationTriggerMetadata;
+  readonly verticalStepTransition: AnimationTriggerMetadata;
+} = {
+  horizontalStepTransition: trigger('horizontalStepTransition', [
+    state('previous', style({transform: 'translate3d(-100%, 0, 0)', visibility: 'hidden'})),
+    state('current', style({transform: 'none', visibility: 'visible'})),
+    state('next', style({transform: 'translate3d(100%, 0, 0)', visibility: 'hidden'})),
+    transition('* => *', animate('500ms cubic-bezier(0.35, 0, 0.25, 1)'))
+  ]),
+
+  verticalStepTransition: trigger('verticalStepTransition', [
+    state('previous', style({height: '0px', visibility: 'hidden'})),
+    state('next', style({height: '0px', visibility: 'hidden'})),
+    state('current', style({height: '*', visibility: 'visible'})),
+    transition('* <=> current', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
+  ])
+};

src/ionic-stepper-button.ts

@@ -0,0 +1,26 @@
+import { Directive} from '@angular/core';
+import { IonicStepperComponent } from './ionic-stepper';
+
+/** Button that moves to the next step in a stepper workflow. */
+@Directive({
+  selector: '[ionicStepperNext]',
+  host: {
+    '(click)': '_stepper.nextStep()',
+  }
+})
+export class IonicStepperNext {
+
+  constructor(public _stepper: IonicStepperComponent) {}
+}
+
+/** Button that moves to the previous step in a stepper workflow. */
+@Directive({
+  selector: '[ionicStepperPrevious]',
+  host: {
+    '(click)': '_stepper.previousStep()',
+  }
+})
+export class IonicStepperPrevious {
+
+  constructor(public _stepper: IonicStepperComponent) {}
+}

src/ionic-stepper.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { IonicStepperComponent } from './ionic-stepper';
+import { IonicStepComponent } from './ionic-step';
+import { CommonModule } from '@angular/common';
+import { IonicStepHeaderComponent } from './ionic-step-header';
+import { IonicModule } from 'ionic-angular';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { IonicStepperNext, IonicStepperPrevious } from './ionic-stepper-button';
+
+const COMPONENTS = [
+  IonicStepperComponent,
+  IonicStepComponent,
+  IonicStepHeaderComponent,
+  IonicStepperNext,
+  IonicStepperPrevious
+];
+
+@NgModule({
+  declarations: [...COMPONENTS],
+  imports: [CommonModule, BrowserAnimationsModule, IonicModule],
+  exports: [...COMPONENTS]
+})
+export class IonicStepperModule {
+}

src/ionic-stepper.scss

@@ -0,0 +1,49 @@
+@import "./variables";
+
+ion-stepper {
+
+  .#{$stepper-prefix}-horizontal-container,
+  .#{$stepper-prefix}-vertical-container {
+    display: block;
+  }
+
+  .#{$stepper-prefix}-horizontal-header-container {
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+  }
+
+  .#{$stepper-prefix}-vertical-content-container {
+    margin-left: 36px;
+    position: relative;
+  }
+
+  .#{$stepper-prefix}-vertical-content {
+    overflow: hidden;
+  }
+
+  .ionic-vertical-content {
+    padding: 0 24px 24px 24px;
+  }
+
+  .#{$stepper-prefix}-vertical-line::before {
+    content: '';
+    position: absolute;
+    top: -16px;
+    bottom: -16px;
+    left: 0;
+    border-left-width: 1px;
+    border-left-style: solid;
+    border-left-color: $step-line-color;
+  }
+
+  .#{$stepper-prefix}-horizontal-line{
+    border-top-width: 1px;
+    border-top-style: solid;
+    border-top-color: $step-line-color;
+    flex: auto;
+    height: 0;
+    margin: 0 -16px;
+    min-width: 10px;
+  }
+}