Update sass variables and export slider directives + nits

Author: iveysaur

src/components/slider/slider.scss

@@ -1,20 +1,22 @@
 @import 'default-theme';
+@import '_variables';
 
 // This refers to the thickness of the slider. On a horizontal slider this is the height, on a
 // vertical slider this is the width.
-$slider-thickness: 20px !default;
-$slider-min-size: 128px !default;
+$md-slider-thickness: 20px !default;
+$md-slider-min-size: 128px !default;
+$md-slider-padding: 8px !default;
 
-$slider-track-height: 2px !default;
-$slider-thumb-size: 20px !default;
+$md-slider-track-height: 2px !default;
+$md-slider-thumb-size: 20px !default;
 
-$slider-thumb-default-scale: 0.7 !default;
-$slider-thumb-focus-scale: 1 !default;
+$md-slider-thumb-default-scale: 0.7 !default;
+$md-slider-thumb-focus-scale: 1 !default;
 
 // TODO(iveysaur): Find an implementation to hide the track under a disabled thumb.
-$slider-off-color: rgba(black, 0.26);
-$slider-focused-color: rgba(black, 0.38);
-$slider-disabled-color: rgba(black, 0.26);
+$md-slider-off-color: rgba(black, 0.26);
+$md-slider-focused-color: rgba(black, 0.38);
+$md-slider-disabled-color: rgba(black, 0.26);
 
 /**
  * Uses a container height and an item height to center an item vertically within the container.
@@ -26,17 +28,17 @@ $slider-disabled-color: rgba(black, 0.26);
 /**
  * Positions the thumb based on its width and height.
  */
-@mixin slider-thumb-position($width: $slider-thumb-size, $height: $slider-thumb-size) {
+@mixin slider-thumb-position($width: $md-slider-thumb-size, $height: $md-slider-thumb-size) {
   position: absolute;
-  top: center-vertically($slider-thickness, $height);
+  top: center-vertically($md-slider-thickness, $height);
   width: $width;
   height: $height;
   border-radius: max($width, $height);
 }
 
 md-slider {
-  height: $slider-thickness;
-  min-width: $slider-min-size;
+  height: $md-slider-thickness;
+  min-width: $md-slider-min-size;
   position: relative;
   padding: 0;
   display: inline-block;
@@ -56,12 +58,12 @@ md-slider *::after {
 .md-slider-wrapper {
   width: 100%;
   height: 100%;
-  padding-left: 8px;
-  padding-right: 8px;
+  padding-left: $md-slider-padding;
+  padding-right: $md-slider-padding;
 }
 
 /**
- * Holds the isActive and isDragging classes as well as help with positioning the children.
+ * Holds the isActive and isDragging classes as well as helps with positioning the children.
  * Cannot be merged with .md-slider-wrapper.
  */
 .md-slider-container {
@@ -71,21 +73,21 @@ md-slider *::after {
 .md-slider-track-container {
   width: 100%;
   position: absolute;
-  top: center-vertically($slider-thickness, $slider-track-height);
-  height: $slider-track-height;
+  top: center-vertically($md-slider-thickness, $md-slider-track-height);
+  height: $md-slider-track-height;
 }
 
 .md-slider-track {
   position: absolute;
   left: 0;
   right: 0;
   height: 100%;
-  background-color: $slider-off-color;
+  background-color: $md-slider-off-color;
 }
 
 .md-slider-track-fill {
-  transition-duration: 400ms;
-  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
+  transition-duration: $swift-ease-out-duration;
+  transition-timing-function: $swift-ease-out-timing-function;
   transition-property: width, height;
   background-color: md-color($md-accent);
 }
@@ -95,29 +97,29 @@ md-slider *::after {
   left: 0;
   top: 50%;
   transform: translate3d(-50%, -50%, 0);
-  transition-duration: 400ms;
-  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
+  transition-duration: $swift-ease-out-duration;
+  transition-timing-function: $swift-ease-out-timing-function;
   transition-property: left, bottom;
 }
 
 .md-slider-thumb-position {
-  transition: transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
 }
 
 .md-slider-thumb {
   z-index: 1;
 
-  @include slider-thumb-position($slider-thumb-size, $slider-thumb-size);
-  transform: scale($slider-thumb-default-scale);
-  transition: transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+  @include slider-thumb-position($md-slider-thumb-size, $md-slider-thumb-size);
+  transform: scale($md-slider-thumb-default-scale);
+  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
 }
 
 .md-slider-thumb::after {
   content: '';
   position: absolute;
-  width: $slider-thumb-size;
-  height: $slider-thumb-size;
-  border-radius: max($slider-thumb-size, $slider-thumb-size);
+  width: $md-slider-thumb-size;
+  height: $md-slider-thumb-size;
+  border-radius: max($md-slider-thumb-size, $md-slider-thumb-size);
   border-width: 3px;
   border-style: solid;
   transition: inherit;
@@ -132,10 +134,10 @@ md-slider *::after {
 }
 
 .md-slider-active .md-slider-thumb {
-  transform: scale($slider-thumb-focus-scale);
+  transform: scale($md-slider-thumb-focus-scale);
 }
 
 .md-slider-disabled .md-slider-thumb::after {
-  background-color: $slider-disabled-color;
-  border-color: $slider-disabled-color;
+  background-color: $md-slider-disabled-color;
+  border-color: $md-slider-disabled-color;
 }

src/components/slider/slider.spec.ts

@@ -9,7 +9,7 @@ import {
 import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing';
 import {Component, DebugElement, provide, ViewEncapsulation} from '@angular/core';
 import {By} from '@angular/platform-browser';
-import {MdSlider} from './slider';
+import {MdSlider, MD_SLIDER_DIRECTIVES} from './slider';
 import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
 import {TestGestureConfig} from './test-gesture-config';
 
@@ -317,7 +317,7 @@ describe('MdSlider', () => {
 
 // The transition has to be removed in order to test the updated positions without setTimeout.
 @Component({
-  directives: [[MdSlider]],
+  directives: [MD_SLIDER_DIRECTIVES],
   template: `<md-slider></md-slider>`,
   styles: [`
     .md-slider-track-fill, .md-slider-thumb-position {
@@ -329,19 +329,19 @@ describe('MdSlider', () => {
 class StandardSlider { }
 
 @Component({
-  directives: [[MdSlider]],
+  directives: [MD_SLIDER_DIRECTIVES],
   template: `<md-slider disabled></md-slider>`
 })
 class DisabledSlider { }
 
 @Component({
-  directives: [[MdSlider]],
+  directives: [MD_SLIDER_DIRECTIVES],
   template: `<md-slider min="5" max="15"></md-slider>`
 })
 class SliderWithMinAndMax { }
 
 @Component({
-  directives: [[MdSlider]],
+  directives: [MD_SLIDER_DIRECTIVES],
   template: `<md-slider value="26"></md-slider>`
 })
 class SliderWithValue { }

src/components/slider/slider.ts

@@ -206,8 +206,8 @@ export class MdSlider implements AfterContentInit {
 export class SliderRenderer {
   private _sliderElement: HTMLElement;
 
-  constructor(private _elementRef: ElementRef) {
-    this._sliderElement = this._elementRef.nativeElement;
+  constructor(elementRef: ElementRef) {
+    this._sliderElement = elementRef.nativeElement;
   }
 
   /**
@@ -249,3 +249,5 @@ export class SliderRenderer {
     this._sliderElement.focus();
   }
 }
+
+export const MD_SLIDER_DIRECTIVES = [MdSlider];

src/components/slider/test-gesture-config.ts

@@ -19,10 +19,10 @@ export class TestGestureConfig extends MdGestureConfig {
   buildHammer(element: HTMLElement) {
     let mc = super.buildHammer(element);
 
-    if (!this.hammerInstances.get(element)) {
-      this.hammerInstances.set(element, [mc]);
-    } else {
+    if (this.hammerInstances.get(element)) {
       this.hammerInstances.get(element).push(mc);
+    } else {
+      this.hammerInstances.set(element, [mc]);
     }
 
     return mc;

src/demo-app/slider/slider-demo.ts

@@ -1,10 +1,10 @@
 import {Component} from '@angular/core';
-import {MdSlider} from '@angular2-material/slider/slider';
+import {MD_SLIDER_DIRECTIVES} from '@angular2-material/slider/slider';
 
 @Component({
   moduleId: module.id,
   selector: 'slider-demo',
   templateUrl: 'slider-demo.html',
-  directives: [MdSlider],
+  directives: [MD_SLIDER_DIRECTIVES],
 })
 export class SliderDemo { }