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: 8px !default;
 $input-label-float-scale: 0.75 !default;
+$input-label-float-width: $input-container-padding + 16px;
 
 $input-placeholder-offset: $input-label-default-offset !default;
 
@@ -95,6 +96,10 @@ md-input-container {
 
   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;
@@ -262,6 +267,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});
     }
   }
 
@@ -307,15 +315,27 @@ md-input-container {
       @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-icon-left,
+  &.md-icon-right {
+    > label {
+      &: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):not(.md-container-ignore),
+        .md-placeholder {
+          width: calc((100% - #{$icon-offset} - #{$input-label-float-width}) / #{$input-label-float-scale});
+        }
+      }
+    }
   }
 
   // icon offset should have higher priority as normal label
@@ -343,6 +363,24 @@ md-input-container {
   &.md-icon-left.md-icon-right {
     padding-left: $icon-offset;
     padding-right: $icon-offset;
+
+    > label {
+      &:not(.md-no-float):not(.md-container-ignore),
+      .md-placeholder {
+        width: calc(100% - (#{$icon-offset} * 2));
+      }
+    }
+
+    &.md-input-focused,
+    &.md-input-has-placeholder,
+    &.md-input-has-value {
+      > label {
+        &:not(.md-no-float):not(.md-container-ignore),
+        .md-placeholder {
+          width: calc((100% - (#{$icon-offset} * 2)) / #{$input-label-float-scale});
+        }
+      }
+    }
   }
 }