fix(input): truncate long label

* Truncating the label if it's longer than the input itself
* When the input is focused the label is responsive to its width change

fixes #5331

Author: EladBezalel

src/components/input/demoBasicUsage/index.html

@@ -35,7 +35,7 @@
           </md-input-container>
 
           <md-input-container class="md-block" flex-gt-sm>
-            <label>Last Name</label>
+            <label>Long Last Name That Will Be Truncated And 3 Dots (Ellipsis) Will Appear At The End</label>
             <input ng-model="theMax">
           </md-input-container>
         </div>

src/components/input/input.scss

@@ -4,6 +4,7 @@ $input-label-default-offset: 24px !default;
 $input-label-default-scale: 1.0 !default;
 $input-label-float-offset: 6px !default;
 $input-label-float-scale: 0.75 !default;
+$input-label-float-width: $input-container-padding + 16px;
 
 $input-placeholder-offset: $input-label-default-offset !default;
 
@@ -100,11 +101,28 @@ md-input-container {
     > label {
       @include rtl(left, $icon-offset, auto);
       @include rtl(right, auto, $icon-offset);
+
+      &:not(.md-no-float):not(.md-container-ignore),
+      .md-placeholder {
+        width: calc(100% - #{$icon-offset} - #{$input-label-float-width});
+      }
+    }
+
+    &.md-input-focused,
+    &.md-input-has-placeholder,
+    &.md-input-has-value {
+      label:not(.md-no-float) {
+        width: calc((100% - #{$icon-offset} - #{$input-label-float-width}) / #{$input-label-float-scale});
+      }
     }
   }
 
   label:not(.md-no-float):not(.md-container-ignore),
   .md-placeholder {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
     order: 1;
     pointer-events: none;
     -webkit-font-smoothing: antialiased;
@@ -272,6 +290,9 @@ md-input-container {
   &.md-input-has-value {
     label:not(.md-no-float) {
       transform: translate3d(0, $input-label-float-offset, 0) scale($input-label-float-scale);
+      transition: transform $swift-ease-out-timing-function 0.5s,
+                  width $swift-ease-out-timing-function 0.5s;
+      width: calc((100% - #{$input-label-float-width})/ #{$input-label-float-scale});
     }
   }
 
@@ -317,16 +338,6 @@ md-input-container.md-icon-float {
     @include rtl(left, 2px, auto);
     @include rtl(right, auto, 2px);
   }
-
-  &.md-input-focused,
-  &.md-input-has-value {
-
-    label {
-      transform: translate3d(0, $input-label-float-offset, 0) scale($input-label-float-scale);
-      transition: transform $swift-ease-out-timing-function 0.5s;
-    }
-  }
-
 }
 
 md-input-container.md-icon-right {