fix(slide-toggle): disabled theme and dragging

* It seems like as per the new theming feature, view encapsulation turned off and now the checked theming overwrites the disabled theme (too high specificity)

* If a slide-toggle is disabled, users are still able to drag the thumb (which is invalid)

* Fix invalid `user-select` property, and now dragging works without clamps.

Author: devversion

src/lib/slide-toggle/_slide-toggle-theme.scss

@@ -3,7 +3,9 @@
 
 
 @mixin _md-slide-toggle-checked($palette) {
-  &.md-checked {
+  // Do not apply the checked colors if the toggle is disabled, because the specificity would be to high for
+  // the disabled styles.
+  &.md-checked:not(.md-disabled) {
     .md-slide-toggle-thumb {
       background-color: md-color($palette);
     }

src/lib/slide-toggle/slide-toggle.scss

@@ -24,6 +24,12 @@ $md-slide-toggle-margin: 16px !default;
   line-height: $md-slide-toggle-height;
 
   white-space: nowrap;
+
+  // Disable user selection to ensure that dragging is smooth without grabbing some elements
+  // accidentally. Manually prefixing here, because the un-prefixed property is not supported yet.
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
   user-select: none;
 
   outline: none;
@@ -68,7 +74,6 @@ $md-slide-toggle-margin: 16px !default;
   height: $md-slide-toggle-height;
 
   position: relative;
-  user-select: none;
 
   margin-right: 8px;
 }

src/lib/slide-toggle/slide-toggle.ts

@@ -214,16 +214,24 @@ export class MdSlideToggle implements AfterContentInit, ControlValueAccessor {
 
   /** TODO: internal */
   _onDragStart() {
-    this._slideRenderer.startThumbDrag(this.checked);
+    if (!this.disabled) {
+      this._slideRenderer.startThumbDrag(this.checked);
+    }
   }
 
   /** TODO: internal */
   _onDrag(event: HammerInput) {
-    this._slideRenderer.updateThumbPosition(event.deltaX);
+    if (this._slideRenderer.isDragging()) {
+      this._slideRenderer.updateThumbPosition(event.deltaX);
+    }
   }
 
   /** TODO: internal */
   _onDragEnd() {
+    if (!this._slideRenderer.isDragging()) {
+      return;
+    }
+
     // Notice that we have to stop outside of the current event handler,
     // because otherwise the click event will be fired and will reset the new checked variable.
     setTimeout(() => {
@@ -257,7 +265,7 @@ class SlideToggleRenderer {
 
   /** Initializes the drag of the slide-toggle. */
   startThumbDrag(checked: boolean) {
-    if (!this._thumbBarWidth) {
+    if (!this.isDragging()) {
       this._thumbBarWidth = this._thumbBarEl.clientWidth - this._thumbEl.clientWidth;
       this._checked = checked;
       this._thumbEl.classList.add('md-dragging');
@@ -266,7 +274,7 @@ class SlideToggleRenderer {
 
   /** Stops the current drag and returns the new checked value. */
   stopThumbDrag(): boolean {
-    if (this._thumbBarWidth) {
+    if (this.isDragging()) {
       this._thumbBarWidth = null;
       this._thumbEl.classList.remove('md-dragging');
 
@@ -278,10 +286,8 @@ class SlideToggleRenderer {
 
   /** Updates the thumb containers position from the specified distance. */
   updateThumbPosition(distance: number) {
-    if (this._thumbBarWidth) {
-      this._percentage = this._getThumbPercentage(distance);
-      applyCssTransform(this._thumbEl, `translate3d(${this._percentage}%, 0, 0)`);
-    }
+    this._percentage = this._getThumbPercentage(distance);
+    applyCssTransform(this._thumbEl, `translate3d(${this._percentage}%, 0, 0)`);
   }
 
   /** Retrieves the percentage of thumb from the moved distance. */