fix(input): fractional value not displayed after initialization (#DS-2633) (#337)

Author: lskramarov

packages/components/input/input-number.spec.ts

@@ -44,8 +44,7 @@ function createComponent<T>(component: Type<T>, imports: any[] = [], providers:
         <kbq-form-field>
             <input
                 [(ngModel)]="value"
-                kbqInput
-                type="number"
+                kbqNumberInput
             />
             <kbq-stepper />
         </kbq-form-field>
@@ -60,8 +59,7 @@ class KbqNumberInputTestComponent {
         <kbq-form-field>
             <input
                 [formControl]="formControl"
-                kbqInput
-                type="number"
+                kbqNumberInput
             />
             <kbq-stepper />
         </kbq-form-field>
@@ -79,9 +77,8 @@ class KbqNumberInputWithFormControl {
         >
             <kbq-form-field>
                 <input
-                    kbqInput
+                    kbqNumberInput
                     formControlName="reactiveInputValue"
-                    type="number"
                 />
                 <kbq-stepper />
             </kbq-form-field>
@@ -103,8 +100,7 @@ class KbqNumberInputWithFormControlName {
         <kbq-form-field>
             <input
                 [(ngModel)]="value"
-                kbqInput
-                type="number"
+                kbqNumberInput
                 max="10"
                 min="3"
                 step="0.5"
@@ -127,8 +123,7 @@ class KbqNumberInputMaxMinStep {
                 [min]="min"
                 [step]="step"
                 [bigStep]="bigStep"
-                kbqInput
-                type="number"
+                kbqNumberInput
             />
             <kbq-stepper />
         </kbq-form-field>
@@ -147,8 +142,7 @@ class KbqNumberInputMaxMinStepInput {
         <kbq-form-field>
             <input
                 [(ngModel)]="value"
-                kbqInput
-                type="number"
+                kbqNumberInput
             />
             <kbq-cleaner />
         </kbq-form-field>
@@ -168,8 +162,7 @@ class KbqNumberInputWithCleaner {
                 [step]="step"
                 [bigStep]="bigStep"
                 [withThousandSeparator]="withMask"
-                kbqInput
-                type="number"
+                kbqNumberInput
             />
             <kbq-stepper />
         </kbq-form-field>

packages/components/input/input-number.ts

@@ -85,7 +85,7 @@ interface NumberLocaleConfig {
 }
 
 @Directive({
-    selector: `input[kbqInput][type="number"]`,
+    selector: `input[kbqNumberInput]`,
     exportAs: 'kbqNumericalInput',
     providers: [KBQ_NUMBER_INPUT_VALUE_ACCESSOR],
     host: {

packages/components/input/input.ts

@@ -60,7 +60,7 @@ export class KbqInputBase {
 export const KbqInputMixinBase: CanUpdateErrorStateCtor & typeof KbqInputBase = mixinErrorState(KbqInputBase);
 
 @Directive({
-    selector: `input[kbqInput]`,
+    selector: `input[kbqInput],input[kbqNumberInput]`,
     exportAs: 'kbqInput',
     host: {
         class: 'kbq-input',

packages/docs-examples/components/input/input-number-overview/input-number-overview-example.html

@@ -4,9 +4,8 @@
             <label class="kbq-form__label flex-40">With min value, max value and localized thousand separator</label>
             <kbq-form-field class="kbq-form__control flex-60">
                 <input
-                    kbqInput
+                    kbqNumberInput
                     placeholder="Allowed number from -7 to 7"
-                    type="number"
                     [bigStep]="1.5"
                     [max]="7"
                     [min]="-7"
@@ -21,8 +20,7 @@
             <label class="kbq-form__label flex-40">With localized thousand separator</label>
             <kbq-form-field class="kbq-form__control flex-60">
                 <input
-                    kbqInput
-                    type="number"
+                    kbqNumberInput
                     [(ngModel)]="value"
                 />
                 <kbq-stepper />
@@ -33,8 +31,7 @@
             <label class="kbq-form__label flex-40">Without localized thousand separator</label>
             <kbq-form-field class="kbq-form__control flex-60">
                 <input
-                    kbqInput
-                    type="number"
+                    kbqNumberInput
                     [withThousandSeparator]="false"
                     [(ngModel)]="value"
                 />

tools/public_api_guard/components/input.api.md

@@ -104,7 +104,7 @@ export class KbqInput extends KbqInputMixinBase implements KbqFormFieldControl<a
     get value(): string;
     set value(value: string);
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqInput, "input[kbqInput]", ["kbqInput"], { "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "required": { "alias": "required"; "required": false; }; "type": { "alias": "type"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqInput, "input[kbqInput],input[kbqNumberInput]", ["kbqInput"], { "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "required": { "alias": "required"; "required": false; }; "type": { "alias": "type"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, never, false, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqInput, [null, { optional: true; self: true; }, { optional: true; self: true; }, { optional: true; }, { optional: true; }, null, { optional: true; self: true; }]>;
 }
@@ -276,7 +276,7 @@ export class KbqNumberInput implements KbqFormFieldControl<any>, ControlValueAcc
     // (undocumented)
     writeValue(value: number | null): void;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNumberInput, "input[kbqInput][type=\"number\"]", ["kbqNumericalInput"], { "bigStep": { "alias": "bigStep"; "required": false; }; "step": { "alias": "step"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "withThousandSeparator": { "alias": "withThousandSeparator"; "required": false; }; "startFormattingFrom": { "alias": "startFormattingFrom"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNumberInput, "input[kbqNumberInput]", ["kbqNumericalInput"], { "bigStep": { "alias": "bigStep"; "required": false; }; "step": { "alias": "step"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "withThousandSeparator": { "alias": "withThousandSeparator"; "required": false; }; "startFormattingFrom": { "alias": "startFormattingFrom"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, false, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNumberInput, [null, null, { attribute: "step"; }, { attribute: "big-step"; }, { attribute: "min"; }, { attribute: "max"; }, { optional: true; }]>;
 }