From d751ee7269890efce338a653aa284d27e17c602c Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Fri, 29 Dec 2017 19:47:54 +0100
Subject: [PATCH] fix(slide-toggle): truncate label content with ellipsis

* Instead of showing the text overflow of slide-toggle content, an ellipsis for too long labels will be shown.

Fixes #5212
---
 src/lib/slide-toggle/slide-toggle.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/lib/slide-toggle/slide-toggle.scss b/src/lib/slide-toggle/slide-toggle.scss
index a43fd0ea542c..f229e6d1ca36 100644
--- a/src/lib/slide-toggle/slide-toggle.scss
+++ b/src/lib/slide-toggle/slide-toggle.scss
@@ -2,6 +2,7 @@
 @import '../core/ripple/ripple';
 @import '../core/style/elevation';
 @import '../core/style/vendor-prefixes';
+@import '../core/style/list-common';
 @import '../../cdk/a11y/a11y';
 
 $mat-slide-toggle-thumb-size: 20px !default;
@@ -17,6 +18,7 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
 .mat-slide-toggle {
   display: inline-block;
   height: $mat-slide-toggle-height;
+  max-width: 100%;
 
   line-height: $mat-slide-toggle-height;
 
@@ -53,6 +55,10 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
   cursor: pointer;
 }
 
+.mat-slide-toggle-content {
+  @include mat-truncate-line();
+}
+
 /* If the label should be placed before the thumb then we just change the orders. */
 .mat-slide-toggle-label-before {
   .mat-slide-toggle-label { order: 1; }
@@ -131,6 +137,10 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
   width: $mat-slide-toggle-bar-width;
   height: $mat-slide-toggle-bar-height;
 
+  // Prevent shrinking of the bar container. It can happen that the content is long enough to
+  // shrink the bar and the thumb.
+  flex-shrink: 0;
+
   border-radius: $mat-slide-toggle-bar-border-radius;
 
   @include cdk-high-contrast {