feature(EJ2-1928): NumericTextBox floating label changes have been committed into angular sb.

Author: pipeline

src/numerictextbox/format.html

@@ -1,15 +1,12 @@
 <div class="control-section">
     <div class="content-wrapper">
-        <div>
-            <div class="control-label">Kilometers</div>
+        <div class="wrapper">
             <ej-numerictextbox placeholder="Enter the distance" value="250" format="###.### km" min="0"></ej-numerictextbox>
         </div>
-        <div>
-            <div class="control-label">Service Tax</div>
+        <div class="wrapper">
             <ej-numerictextbox placeholder="Enter the tax" value="25" format="### '%'" min="0" max="100"></ej-numerictextbox>
         </div>
-        <div>
-            <div class="control-label">Fare</div>
+        <div class="wrapper">
             <ej-numerictextbox placeholder="Enter the amount" value="1025" format="$ ###.##" min="0"></ej-numerictextbox>
         </div>
     </div>
@@ -28,10 +25,9 @@
         margin: 0 auto;
         min-width: 185px;
     }
-    
-    .control-label {
-        padding: 24px 0px 0px 0px;
-        font-size: 12px;
-        opacity: 0.54;
+
+    .wrapper {
+        margin-top: 40px;
     }
+      
 </style>

src/numerictextbox/internationalization.component.ts

@@ -1,11 +1,18 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { loadCldr, L10n } from '@syncfusion/ej2-base';
+import { NumericTextBoxComponent } from '@syncfusion/ej2-ng-inputs';
 
 @Component({
     selector: 'control-content',
     templateUrl: 'internationalization.html',
 })
 export class InternationalizationController {
+    @ViewChild('numeric')
+    public numeric: NumericTextBoxComponent;
+    @ViewChild('percentage')
+    public percentage: NumericTextBoxComponent;
+    @ViewChild('currencyTextBox')
+    public currencyTextBox: NumericTextBoxComponent;    
     locale: string = 'de';
     currency: string = 'EUR';
     numericValue: number = 10;
@@ -18,20 +25,17 @@ export class InternationalizationController {
          L10n.load({
             'en': {
                 'numerictextbox': {
-                    incrementTitle: 'Increment value', decrementTitle: 'Decrement value',
-                    placeholder: 'Enter the value'
+                    incrementTitle: 'Increment value', decrementTitle: 'Decrement value'
                 }
             },
             'de': {
                 'numerictextbox': {
-                    incrementTitle: 'Wert erhöhen', decrementTitle: 'Dekrementwert',
-                    placeholder: 'Geben Sie den Wert ein'
+                    incrementTitle: 'Wert erhöhen', decrementTitle: 'Dekrementwert'
                 }
             },
             'zh': {
                 'numerictextbox': {
-                    incrementTitle: '增值', decrementTitle: '遞減值',
-                    placeholder: '輸入值'
+                    incrementTitle: '增值', decrementTitle: '遞減值'
                 }
             }
         });
@@ -49,10 +53,19 @@ export class InternationalizationController {
         this.locale = culture;
         if (culture === 'zh') {
             this.currency = 'CNY';
+            this.numeric.placeholder = '输入值';
+            this.currencyTextBox.placeholder = '输入货币';
+            this.percentage.placeholder = '输入百分比';
         } else if (culture === 'de') {
             this.currency = 'EUR';
+            this.numeric.placeholder = 'Geben Sie den Wert ein';
+            this.currencyTextBox.placeholder = 'Geben Sie die Währung ein';
+            this.percentage.placeholder = 'Geben Sie den Prozentsatz ein';
         } else {
             this.currency = 'USD';
+            this.numeric.placeholder = 'Enter the value';
+            this.currencyTextBox.placeholder = 'Enter the currency';
+            this.percentage.placeholder = 'Enter the percentage';
         }
     }
     constructor() { }

src/numerictextbox/internationalization.html

@@ -1,17 +1,14 @@
 <div class="control-section">
     <div class="col-lg-8 content-wrapper">
         <div class="content">
-           <div>
-            <div class="control-label">Numeric TextBox</div>
-            <ej-numerictextbox [value]="numericValue" [locale]="locale" ></ej-numerictextbox>
+        <div class="wrapper">
+            <ej-numerictextbox #numeric [value]="numericValue" placeholder="Geben Sie den Wert ein" [locale]="locale" ></ej-numerictextbox>
         </div>
-        <div>
-            <div class="control-label">Percentage TextBox</div>
-            <ej-numerictextbox format="p2" [value]="percentValue" [min]="min" [max]="max" [step]="step" [locale]="locale"></ej-numerictextbox>
+        <div class="wrapper">
+            <ej-numerictextbox #percentage format="p2" placeholder="Geben Sie den Prozentsatz ein" [value]="percentValue" [min]="min" [max]="max" [step]="step" [locale]="locale"></ej-numerictextbox>
         </div>
-        <div>
-            <div class="control-label">Currency TextBox</div>
-            <ej-numerictextbox format="c2" [value]="currencyValue" [locale]="locale" [currency]="currency" ></ej-numerictextbox>
+        <div class='wrapper'>
+            <ej-numerictextbox #currencyTextBox format="c2" placeholder="Geben Sie die Währung ein" [value]="currencyValue" [locale]="locale" [currency]="currency" ></ej-numerictextbox>
         </div>
       </div>
     </div>
@@ -58,10 +55,8 @@
         padding: 20px 0px;
     }
 
-    .control-label {
-        padding: 24px 0px 0px 0px;
-        font-size: 12px;
-        opacity: 0.54;
+    .wrapper {
+        margin-top: 40px;
     }
 
 </style>