feat(stepper): Merge initial prototype of stepper into the upstream s…

…tepper branch. (angular#5742) * Prototyping * Further work * Further prototyping * Further prototyping * Further work * Adding event emitters * Adding "selectedIndex" attribute to stepper and working on TemplateOulet. * Prototyping * Further work * Further prototyping * Further prototyping * Further work * Adding event emitters * Template rendering and selectIndex control done. * Work in progress for accessibility * Added functionalities based on the tentative API doc. * Refactor code for cdk-stepper and cdk-step * Add support for templated label * Added support for keyboard events and focus changes for accessibility. * Updated vertical stepper + added comments * Fix package-lock.json * Fix indention * Changes made based on the review * Changes based on review - event properties, selectors, SPACE support, etc. + demo * Add select() for step component + refactor to avoid circular dependency + support cycling using arrow keys * API change based on review * Minor code clean up based on review. * Several name changes, etc based on review * Add to compatibility mode list and refactor to avoid circular dependency feat(stepper): Create stepper button directives to enable adding buttons to stepper (angular#5951) * Create stepper button directives to enable adding buttons to stepper * Changes made based on review * Minor changes with click handlers Build changes feat(stepper): Add initial styles to stepper based on Material guidelines (angular#6242) * Add initial styles to stepper based on Material guidelines * Fix flex-shrink and min-width * Changes made based on review * Fix alignment * Margin modifications feat(stepper): Add support for linear stepper (angular#6116) * Add form controls and custom error state matcher * Modify form controls for stepper-demo and add custom validator * Move custom step validation function so that users can simply import and use * Implement @input() stepControl for each step * Add linear attribute to stepper * Add enabling/disabling linear state of demo feat(stepper): Add animation to stepper (angular#6361) * Add animation * Implement Angular animation * Clean up unnecessary code * Generalize animation so that vertical and horizontal steppers can use the same function Rebase onto upstream/master feat(stepper): Add unit tests for stepper (angular#6428) * Add unit tests for stepper * Changes made based on review * More changes based on review feat(stepper): Add support for linear stepper angular#2 - each step as its own form. (angular#6117) * Add form control - consider each step as its own form group * Comment edits * Add 'valid' to MdStep for form validation * Add [stepControl] to each step based on merging * Changes based on review Fix focus logic and CSS changes (angular#6507) feat(stepper): Add documentation for stepper (angular#6533) * Documentation for stepper * Revision based on review + add accessibility section feat(stepper): Support additional properties for step (angular#6509) * Additional properties for step * Unit tests * Code changes based on review + test name changes * Refactor code for shared functionality between vertical and horizontal stepper * Refactor md-step-header and md-step-content + optional step change * Simplify code based on review * Changes to step-header based on review * Minor changes Fix host style and demo page (angular#6592) Revert package.json and package-lock.json Changes made along with BUILD changes in google3 Add typography mixin Changes to address aot compiler failures fix rtl bugs
g1shin · Aug 31, 2017 · cb5b690 · cb5b690
1 parent 87318bc
commit cb5b690
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 0 deletions.
diff --git a/src/lib/stepper/stepper-horizontal.ts b/src/lib/stepper/stepper-horizontal.ts
@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright Google Inc. 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
+ */
+
+import {Component, ViewEncapsulation} from '@angular/core';
+import {MdStepper} from './stepper';
+import {animate, state, style, transition, trigger} from '@angular/animations';
+
+@Component({
+  moduleId: module.id,
+  selector: 'md-horizontal-stepper, mat-horizontal-stepper',
+  templateUrl: 'stepper-horizontal.html',
+  styleUrls: ['stepper.css'],
+  inputs: ['selectedIndex'],
+  host: {
+    'class': 'mat-stepper-horizontal',
+    'role': 'tablist',
+  },
+  animations: [
+    trigger('stepTransition', [
+      state('previous', style({transform: 'translate3d(-100%, 0, 0)', visibility: 'hidden'})),
+      state('current', style({transform: 'translate3d(0%, 0, 0)', visibility: 'visible'})),
+      state('next', style({transform: 'translate3d(100%, 0, 0)', visibility: 'hidden'})),
+      transition('* => *',
+          animate('500ms cubic-bezier(0.35, 0, 0.25, 1)'))
+    ])
+  ],
+  providers: [{provide: MdStepper, useExisting: MdHorizontalStepper}],
+  encapsulation: ViewEncapsulation.None
+})
+export class MdHorizontalStepper extends MdStepper { }
diff --git a/src/lib/stepper/stepper-vertical.ts b/src/lib/stepper/stepper-vertical.ts
@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright Google Inc. 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
+ */
+
+import {Component, ViewEncapsulation} from '@angular/core';
+import {MdStepper} from './stepper';
+import {animate, state, style, transition, trigger} from '@angular/animations';
+
+@Component({
+  moduleId: module.id,
+  selector: 'md-vertical-stepper, mat-vertical-stepper',
+  templateUrl: 'stepper-vertical.html',
+  styleUrls: ['stepper.css'],
+  inputs: ['selectedIndex'],
+  host: {
+    'class': 'mat-stepper-vertical',
+    'role': 'tablist',
+  },
+  animations: [
+      trigger('stepTransition', [
+        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)'))
+      ])
+  ],
+  providers: [{provide: MdStepper, useExisting: MdVerticalStepper}],
+  encapsulation: ViewEncapsulation.None
+})
+export class MdVerticalStepper extends MdStepper { }