From c476c0a5d319a8dfbea61b4d3dc8208e8cfa149d Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Thu, 7 Sep 2017 23:02:52 +0200
Subject: [PATCH] fix(slide-toggle): remove side-margin if slide-toggle label
 is empty

* Removes the side-margin of the actual indicator of the slide-toggle if the user label is empty (similar as in #4730)

Fixes #6868
---
 src/lib/slide-toggle/index.ts             |  3 +-
 src/lib/slide-toggle/slide-toggle.html    |  5 +-
 src/lib/slide-toggle/slide-toggle.scss    |  5 ++
 src/lib/slide-toggle/slide-toggle.spec.ts | 69 ++++++++++++++++++++++-
 src/lib/slide-toggle/slide-toggle.ts      |  7 +++
 5 files changed, 85 insertions(+), 4 deletions(-)

diff --git a/src/lib/slide-toggle/index.ts b/src/lib/slide-toggle/index.ts
index 6220ea1fee2e..6c81e7460d4e 100644
--- a/src/lib/slide-toggle/index.ts
+++ b/src/lib/slide-toggle/index.ts
@@ -9,6 +9,7 @@
 import {NgModule} from '@angular/core';
 import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
 import {PlatformModule} from '@angular/cdk/platform';
+import {ObserversModule} from '@angular/cdk/observers';
 import {MdSlideToggle} from './slide-toggle';
 import {
   FOCUS_ORIGIN_MONITOR_PROVIDER,
@@ -19,7 +20,7 @@ import {
 
 
 @NgModule({
-  imports: [MdRippleModule, MdCommonModule, PlatformModule],
+  imports: [MdRippleModule, MdCommonModule, PlatformModule, ObserversModule],
   exports: [MdSlideToggle, MdCommonModule],
   declarations: [MdSlideToggle],
   providers: [
diff --git a/src/lib/slide-toggle/slide-toggle.html b/src/lib/slide-toggle/slide-toggle.html
index e1001c880499..b5125b3e90b3 100644
--- a/src/lib/slide-toggle/slide-toggle.html
+++ b/src/lib/slide-toggle/slide-toggle.html
@@ -1,6 +1,7 @@
 <label class="mat-slide-toggle-label" #label>
 
-  <div class="mat-slide-toggle-bar">
+  <div class="mat-slide-toggle-bar"
+       [class.mat-slide-toggle-bar-no-side-margin]="!labelContent.textContent || !labelContent.textContent.trim()">
 
     <input #input class="mat-slide-toggle-input cdk-visually-hidden" type="checkbox"
            [id]="inputId"
@@ -32,7 +33,7 @@
 
   </div>
 
-  <span class="mat-slide-toggle-content">
+  <span class="mat-slide-toggle-content" #labelContent (cdkObserveContent)="_onLabelTextChange()">
     <ng-content></ng-content>
   </span>
 </label>
diff --git a/src/lib/slide-toggle/slide-toggle.scss b/src/lib/slide-toggle/slide-toggle.scss
index 9a89c6ded37d..62f3298d78a4 100644
--- a/src/lib/slide-toggle/slide-toggle.scss
+++ b/src/lib/slide-toggle/slide-toggle.scss
@@ -74,6 +74,11 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
   }
 }
 
+.mat-slide-toggle-bar-no-side-margin {
+  margin-left: 0;
+  margin-right: 0;
+}
+
 // The thumb container is responsible for the dragging functionality.
 // The container includes the visual thumb and the ripple container element.
 .mat-slide-toggle-thumb-container {
diff --git a/src/lib/slide-toggle/slide-toggle.spec.ts b/src/lib/slide-toggle/slide-toggle.spec.ts
index d8bb973f8b0f..345dcb5e418c 100644
--- a/src/lib/slide-toggle/slide-toggle.spec.ts
+++ b/src/lib/slide-toggle/slide-toggle.spec.ts
@@ -16,7 +16,11 @@ describe('MdSlideToggle without forms', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [MdSlideToggleModule],
-      declarations: [SlideToggleBasic, SlideToggleWithTabindexAttr],
+      declarations: [
+        SlideToggleBasic,
+        SlideToggleWithTabindexAttr,
+        SlideToggleWithoutLabel
+      ],
       providers: [
         {provide: HAMMER_GESTURE_CONFIG, useFactory: () => gestureConfig = new TestGestureConfig()}
       ]
@@ -493,6 +497,62 @@ describe('MdSlideToggle without forms', () => {
       expect(slideThumbContainer.classList).not.toContain('mat-dragging');
     }));
   });
+
+  describe('without label', () => {
+    let fixture: ComponentFixture<SlideToggleWithoutLabel>;
+    let testComponent: SlideToggleWithoutLabel;
+    let slideToggleElement: HTMLElement;
+    let slideToggleBarElement: HTMLElement;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(SlideToggleWithoutLabel);
+
+      const slideToggleDebugEl = fixture.debugElement.query(By.directive(MdSlideToggle));
+
+      testComponent = fixture.componentInstance;
+      slideToggleElement = slideToggleDebugEl.nativeElement;
+      slideToggleBarElement = slideToggleDebugEl
+          .query(By.css('.mat-slide-toggle-bar')).nativeElement;
+    });
+
+    it('should remove margin for slide-toggle without a label', () => {
+      fixture.detectChanges();
+
+      expect(slideToggleBarElement.classList)
+        .toContain('mat-slide-toggle-bar-no-side-margin');
+    });
+
+    it('should not remove margin if initial label is set through binding', async(() => {
+      testComponent.label = 'Some content';
+      fixture.detectChanges();
+
+      expect(slideToggleBarElement.classList)
+        .not.toContain('mat-slide-toggle-bar-no-side-margin');
+    }));
+
+    it('should re-add margin if label is added asynchronously', async(() => {
+      fixture.detectChanges();
+
+      expect(slideToggleBarElement.classList)
+        .toContain('mat-slide-toggle-bar-no-side-margin');
+
+      testComponent.label = 'Some content';
+      fixture.detectChanges();
+
+      // Wait for the MutationObserver to detect the content change and for the cdkObserveContent
+      // to emit the change event to the slide-toggle.
+      setTimeout(() => {
+        // The MutationObserver from the cdkObserveContent directive detected the content change
+        // and notified the slide-toggle component. The slide-toggle then marks the component as
+        // dirty by calling `markForCheck()`. This needs to be reflected by the component template
+        // then.
+        fixture.detectChanges();
+
+        expect(slideToggleElement.classList)
+          .not.toContain('mat-slide-toggle-bar-no-side-margin');
+      }, 1);
+    }));
+  });
 });
 
 describe('MdSlideToggle with forms', () => {
@@ -806,3 +866,10 @@ class SlideToggleWithFormControl {
   template: `<md-slide-toggle tabindex="5"></md-slide-toggle>`
 })
 class SlideToggleWithTabindexAttr {}
+
+@Component({
+  template: `<md-slide-toggle>{{label}}</md-slide-toggle>`
+})
+class SlideToggleWithoutLabel {
+  label: string;
+}
diff --git a/src/lib/slide-toggle/slide-toggle.ts b/src/lib/slide-toggle/slide-toggle.ts
index 6de28f90c39f..8b5d13de0d04 100644
--- a/src/lib/slide-toggle/slide-toggle.ts
+++ b/src/lib/slide-toggle/slide-toggle.ts
@@ -278,6 +278,13 @@ export class MdSlideToggle extends _MdSlideToggleMixinBase implements OnDestroy,
     }
   }
 
+  /** Method being called whenever the label text changes. */
+  _onLabelTextChange() {
+    // This method is getting called whenever the label of the slide-toggle changes.
+    // Since the slide-toggle uses the OnPush strategy we need to notify it about the change
+    // that has been recognized by the cdkObserveContent directive.
+    this._changeDetectorRef.markForCheck();
+  }
 }
 
 /**