docs(): add documentation for switch

src/components/animate/_effects.scss

@@ -6,7 +6,7 @@ material-ink-bar {
 }
 
 canvas.material-ink-ripple {
- pointer-events: none;
+ pointer-events: none !important;
  position: absolute;
  top: 0;
  left: 0;

src/components/checkbox/checkbox.js

@@ -20,15 +20,15 @@ angular.module('material.components.checkbox', [
  * @restrict E
  *
  * @description
- * The checkbox directive is used like the normal [angular checkbox](https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D)
+ * The checkbox directive is used like the normal [angular checkbox](https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D).
  *
  * @param {string} ngModel Assignable angular expression to data-bind to.
  * @param {string=} name Property name of the form under which the control is published.
  * @param {expression=} ngTrueValue The value to which the expression should be set when selected.
  * @param {expression=} ngFalseValue The value to which the expression should be set when not selected.
  * @param {string=} ngChange Angular expression to be executed when input changes due to user interaction with the input element.
  * @param {boolean=} noink Use of attribute indicates use of ripple ink effects
- * @param {boolean=} disabled Use of attribute indicates the tab is disabled: no ink effects and not selectable
+ * @param {boolean=} disabled Use of attribute indicates the switch is disabled: no ink effects and not selectable
  * @param {string=} ariaLabel Publish the button label used by screen-readers for accessibility. Defaults to the checkbox's text.
  *
  * @usage

src/components/radioButton/_radio-button.scss

@@ -74,6 +74,7 @@ material-radio-button,
  vertical-align: middle;
  white-space: normal;
  pointer-events: none;
+ width: auto;
  }
 
  .circle {

src/components/switch/README.md

@@ -0,0 +1 @@
+The switch component is similar to a checkbox, except it creates a draggable switch.

src/components/switch/_switch.scss

@@ -1,32 +1,41 @@
 material-switch {
+ display: block;
  position: relative;
- width: $switch-width;
- height: $baseline-grid * 3;
+ height: $baseline-grid * 4;
 
- @include flex-display();
- @include flex-justify-content(center);
- @include flex-align-items(center);
+ *{
+  outline: none !important;
+ }
 
  .material-switch-bar {
- width: 32px;
+ position: absolute;
+ left: $baseline-grid * 2;
+ top: $baseline-grid * 1.5;
+ width: $baseline-grid * 4;
  height: 1px;
  background-color: #5a5a5a;
  pointer-events: none;
  }
 
- /* check _radio-button.scss */
+ /* used also in _radio-button.scss */
  .material-switch-thumb {
  position: absolute;
  margin: 0;
  left: 0;
  top: 0;
+ outline: none;
 
- -webkit-transition: -webkit-transform 0.2s linear; 
- transition: transform 0.2s linear;
- @include transform-translate3d(0,0,0);
-
- &.material-checked {
+ .material-container {
+ -webkit-transition: -webkit-transform 0.2s linear; 
+ transition: transform 0.2s linear;
+ @include transform-translate3d(0,0,0);
+ }
+ &.material-checked .material-container {
  @include transform-translate3d($switch-width - 16,0,0);
  }
+
+ .material-label {
+ margin-left: $baseline-grid * 7;
+ }
  }
 }

src/components/switch/demo1/index.html

@@ -1,5 +1,22 @@
 <div ng-app="myApp">
- <material-switch ng-model="val"></material-switch>
- <br/>
- Value: {{val}}
+ <material-switch ng-model="data.cb1" aria-label="Switch 1">
+ Switch 1: {{ data.cb1 }}
+ </material-switch>
+
+ <material-switch ng-model="data.cb2" aria-label="Switch 2" ng-true-value="yup" ng-false-value="nope">
+ Switch 2: {{ data.cb2 }}
+ </material-switch>
+
+ <material-switch disabled aria-label="Disabled switch">
+ Switch (Disabled)
+ </material-switch>
+
+ <material-switch disabled aria-label="Disabled active switch" ng-model="data.cb4" ng-init="data.cb4=true">
+ Switch (Disabled, Active)
+ </material-switch>
+
+ <material-switch noink aria-label="Switch No Ink">
+ Switch (No Ink)
+ </material-switch>
+
 </div>

src/components/switch/switch.js

@@ -1,3 +1,8 @@
+/**
+ * @ngdoc module
+ * @name material.components.switch
+ */
+
 angular.module('material.components.switch', [
  'material.components.checkbox',
  'material.components.radioButton',
@@ -9,6 +14,39 @@ angular.module('material.components.switch', [
  MaterialSwitch
 ]);
 
+/**
+ * @ngdoc directive
+ * @module material.components.switch
+ * @name materialSwitch
+ * @restrict E
+ *
+ * The switch directive is used very much like the normal [angular checkbox](https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D).
+ *
+ * @param {string} ngModel Assignable angular expression to data-bind to.
+ * @param {string=} name Property name of the form under which the control is published.
+ * @param {expression=} ngTrueValue The value to which the expression should be set when selected.
+ * @param {expression=} ngFalseValue The value to which the expression should be set when not selected.
+ * @param {string=} ngChange Angular expression to be executed when input changes due to user interaction with the input element.
+ * @param {boolean=} noink Use of attribute indicates use of ripple ink effects.
+ * @param {boolean=} disabled Use of attribute indicates the switch is disabled: no ink effects and not selectable
+ * @param {string=} ariaLabel Publish the button label used by screen-readers for accessibility. Defaults to the switch's text.
+ *
+ * @usage
+ * <hljs lang="html">
+ * <material-switch ng-model="isActive" aria-label="Finished?">
+ * Finished ?
+ * </material-switch>
+ *
+ * <material-switch noink ng-model="hasInk" aria-label="No Ink Effects">
+ * No Ink Effects
+ * </material-switch>
+ *
+ * <material-switch disabled ng-model="isDisabled" aria-label="Disabled">
+ * Disabled
+ * </material-switch>
+ *
+ * </hljs>
+ */
 function MaterialSwitch(checkboxDirectives, radioButtonDirectives) {
  var checkboxDirective = checkboxDirectives[0];
  var radioButtonDirective = radioButtonDirectives[0];