feat: (platform) introduce step-input (#3005)

* [wip] setup platform step-input * in progress * WIP * wip [skip ci] * add precision * add suport for different states of control * bind step-input to form state * add "in focus" mode * add step-input tests * add tests, add trl support * fix lint errors * fixes after pr review * define some types explicitly * fix functions to meet typedef rule * fix spelling * step input refactoring * remove extra argument * remove extra detectChanges * remove uneeded method * fix console error Co-authored-by: deno <mladen.droshev@sap.com>
SAP · Aug 14, 2020 · 10e446d · 10e446d
1 parent 1de7b62
commit 10e446d
Show file tree

Hide file tree

Showing 30 changed files with 1,809 additions and 3 deletions.
diff --git a/apps/docs/src/app/platform/api-files.ts b/apps/docs/src/app/platform/api-files.ts
@@ -25,5 +25,6 @@ export const API_FILES = {
         'PlatformPanelActionsComponent',
         'PlatformPanelConfig'
     ],
-    switch: ['SwitchComponent']
+    switch: ['SwitchComponent'],
+    stepInput: ['NumberStepInputComponent', 'StepInputComponent', 'StepInputConfig']
 };
diff --git a/...platform/component-docs/platform-forms/step-input/platform-step-input-docs.component.html b/...platform/component-docs/platform-forms/step-input/platform-step-input-docs.component.html
@@ -0,0 +1,32 @@
+<fd-docs-section-title id="noForm" componentName="numberStepInput">
+    Number Step Input without form
+</fd-docs-section-title>
+<description>This example shows what options Number Step Input has and how it can be used out of form</description>
+<component-example>
+    <fdp-platform-number-step-input-example></fdp-platform-number-step-input-example>
+</component-example>
+<code-example [exampleFiles]="numberStepInput"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title id="reactiveFormExample" componentName="numberStepInput">
+    Number Step Input with reactive form
+</fd-docs-section-title>
+<description>This example shows how Step Input behaves with reactive form</description>
+<component-example>
+    <fdp-platform-number-step-input-form-example></fdp-platform-number-step-input-form-example>
+</component-example>
+<code-example [exampleFiles]="numberStepInputForm"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title id="templateDrivenForm" componentName="numberStepInput">
+    Number Step Input in template-driven form
+</fd-docs-section-title>
+<description
+    >This example shows how Step Input behaves with a template-driven form with an initial value set.</description
+>
+<component-example>
+    <fdp-platform-number-step-input-template-form-example></fdp-platform-number-step-input-template-form-example>
+</component-example>
+<code-example [exampleFiles]="numberStepInputTemplateForm"></code-example>
diff --git a/...platform/component-docs/platform-forms/step-input/platform-step-input-docs.component.scss b/...platform/component-docs/platform-forms/step-input/platform-step-input-docs.component.scss
@@ -0,0 +1,13 @@
+.step-input-example {
+    padding-bottom: 1.5rem;
+
+    fd-step-input {
+        display: block;
+    }
+}
+
+.step-input-example-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
diff --git a/...p/platform/component-docs/platform-forms/step-input/platform-step-input-docs.component.ts b/...p/platform/component-docs/platform-forms/step-input/platform-step-input-docs.component.ts
@@ -0,0 +1,57 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+import { ExampleFile } from '../../../../documentation/core-helpers/code-example/example-file';
+
+import * as exampleHtml from '!raw-loader!./platform-step-input-examples/platform-number-step-input-example.component.html';
+import * as exampleTs from '!raw-loader!./platform-step-input-examples/platform-number-step-input-example.component.ts';
+import * as reactiveFormExampleHtml from '!raw-loader!./platform-step-input-examples/platform-number-step-input-reactive-example.component.html';
+import * as reactiveFormExampleTs from '!raw-loader!./platform-step-input-examples/platform-number-step-input-reactive-example.component.ts';
+import * as templateFormExampleHtml from '!raw-loader!./platform-step-input-examples/platform-number-step-input-template-example.component.html';
+import * as templateFormExampleTs from '!raw-loader!./platform-step-input-examples/platform-number-step-input-template-example.component.ts';
+
+@Component({
+    selector: 'app-step-input',
+    templateUrl: './platform-step-input-docs.component.html',
+    styleUrls: ['./platform-step-input-docs.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class PlatformStepInputDocsComponent {
+    numberStepInput: ExampleFile[] = [
+        {
+            language: 'html',
+            code: exampleHtml,
+            fileName: 'platform-number-step-input-example'
+        },
+        {
+            language: 'typescript',
+            code: exampleTs,
+            fileName: 'platform-number-step-input-example'
+        }
+    ];
+
+    numberStepInputForm: ExampleFile[] = [
+        {
+            language: 'html',
+            code: reactiveFormExampleHtml,
+            fileName: 'platform-number-step-input-form-example'
+        },
+        {
+            language: 'typescript',
+            code: reactiveFormExampleTs,
+            fileName: 'platform-number-step-input-form-example'
+        }
+    ];
+
+    numberStepInputTemplateForm: ExampleFile[] = [
+        {
+            language: 'html',
+            code: templateFormExampleHtml,
+            fileName: 'platform-number-step-input-template-form-example'
+        },
+        {
+            language: 'typescript',
+            code: templateFormExampleTs,
+            fileName: 'platform-number-step-input-template-form-example'
+        }
+    ];
+}
diff --git a/...step-input/platform-step-input-examples/platform-number-step-input-example.component.html b/...step-input/platform-step-input-examples/platform-number-step-input-example.component.html
@@ -0,0 +1,64 @@
+<div class="step-input-example-container">
+    <div class="step-input-example">
+        <label>Default Number Step Input</label>
+        <br />
+        <fdp-number-step-input name="number"></fdp-number-step-input>
+    </div>
+    <div class="step-input-example">
+        <label>Compact</label>
+        <br />
+        <fdp-number-step-input
+            name="compact"
+            contentDensity="compact"
+            [value]="value"
+            (valueChange)="onValueChange($event)"
+        ></fdp-number-step-input>
+        <br />
+        <small>value: {{ value }}</small>
+    </div>
+    <div class="step-input-example">
+        <label>Min Max limits <small>(min: -20, max: 20)</small></label>
+        <br />
+        <fdp-number-step-input name="minMaxLimits" [value]="0" [min]="-20" [max]="20"></fdp-number-step-input>
+    </div>
+</div>
+
+<div class="step-input-example-container">
+    <div class="step-input-example">
+        <label>Precision</label>
+        <br />
+        <fdp-number-step-input name="precision" [value]="0" [precision]="2" [step]="0.25"></fdp-number-step-input>
+    </div>
+    <div class="step-input-example">
+        <label>Disabled</label>
+        <br />
+        <fdp-number-step-input name="stepNumberDisabled" [value]="50" [disabled]="true"></fdp-number-step-input>
+    </div>
+    <div class="step-input-example">
+        <label>Read Only</label>
+        <br />
+        <fdp-number-step-input name="stepNumberReadOnly" [value]="50" [editable]="false"></fdp-number-step-input>
+    </div>
+    <div class="step-input-example">
+        <label>With description</label>
+        <br />
+        <fdp-number-step-input name="stepNumberDescription" description="PC" [value]="25"></fdp-number-step-input>
+    </div>
+</div>
+
+<label>Horizontal alignment in the input field</label>
+<br />
+<div class="step-input-example-container">
+    <div class="step-input-example">
+        <small>Left</small><br />
+        <fdp-number-step-input name="alignment" align="left" [value]="100"></fdp-number-step-input>
+    </div>
+    <div class="step-input-example">
+        <small>Center</small><br />
+        <fdp-number-step-input name="alignment" align="center" [value]="100"></fdp-number-step-input>
+    </div>
+    <div class="step-input-example">
+        <small>Right</small><br />
+        <fdp-number-step-input name="alignment" align="right" [value]="100"></fdp-number-step-input>
+    </div>
+</div>
diff --git a/...s/step-input/platform-step-input-examples/platform-number-step-input-example.component.ts b/...s/step-input/platform-step-input-examples/platform-number-step-input-example.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { NumberStepInputChangeEvent } from '@fundamental-ngx/platform';
+
+@Component({
+    selector: 'fdp-platform-number-step-input-example',
+    templateUrl: './platform-number-step-input-example.component.html'
+})
+export class PlatformNumberStepInputExampleComponent {
+    value = 100;
+
+    onValueChange(event: NumberStepInputChangeEvent): void {
+        this.value = event.payload;
+    }
+}
diff --git a/...t/platform-step-input-examples/platform-number-step-input-reactive-example.component.html b/...t/platform-step-input-examples/platform-number-step-input-reactive-example.component.html
@@ -0,0 +1,28 @@
+<main class="fd-page">
+    <div class="fd-page__content fd-has-background-color-neutral-2">
+        <h4>Enter value between {{ MIN_VALUE }} and {{ MAX_VALUE }}</h4>
+        <fdp-form-group #fg [multiLayout]="true">
+            <fdp-form-field
+                #formField
+                id="qty"
+                label="Quantity"
+                placeholder="Things quantity"
+                hint="This is tooltip to help"
+                zone="zLeft"
+                rank="10"
+                hintPlacement="left"
+                [validators]="stepInputQtyValidators"
+            >
+                <fdp-number-step-input name="qty" [formControl]="formField.formControl"></fdp-number-step-input>
+            </fdp-form-field>
+
+            <ng-template #i18n let-errors>
+                <span *ngIf="errors.required"> Value is required </span>
+                <span *ngIf="errors.min"> Value must be more than {{ MIN_VALUE }} </span>
+                <span *ngIf="errors.max"> Value must be less than {{ MAX_VALUE }} </span>
+            </ng-template>
+        </fdp-form-group>
+    </div>
+    <pre>Form result: {{ fg.formGroup.value | json }}</pre>
+    <pre>Form Status: {{ fg.formGroup.status }}</pre>
+</main>
diff --git a/...put/platform-step-input-examples/platform-number-step-input-reactive-example.component.ts b/...put/platform-step-input-examples/platform-number-step-input-reactive-example.component.ts
@@ -0,0 +1,21 @@
+import { Component, AfterViewInit, ChangeDetectorRef } from '@angular/core';
+import { ValidatorFn, Validators } from '@angular/forms';
+
+const MAX_VALUE = 20;
+const MIN_VALUE = 10;
+
+@Component({
+    selector: 'fdp-platform-number-step-input-form-example',
+    templateUrl: './platform-number-step-input-reactive-example.component.html'
+})
+export class PlatformNumberStepInputFormExampleComponent implements AfterViewInit {
+    MIN_VALUE = MIN_VALUE;
+    MAX_VALUE = MAX_VALUE;
+    stepInputQtyValidators: ValidatorFn[] = [Validators.required, Validators.min(MIN_VALUE), Validators.max(MAX_VALUE)];
+
+    constructor(private cdr: ChangeDetectorRef) {}
+
+    ngAfterViewInit(): void {
+        this.cdr.detectChanges();
+    }
+}
diff --git a/...t/platform-step-input-examples/platform-number-step-input-template-example.component.html b/...t/platform-step-input-examples/platform-number-step-input-template-example.component.html
@@ -0,0 +1,25 @@
+<main class="fd-page">
+    <div class="fd-page__content fd-has-background-color-neutral-2">
+        <fdp-form-group [multiLayout]="true">
+            <fdp-form-field
+                id="number"
+                label="Quantity"
+                placeholder="Things quantity"
+                hint="This is tooltip to help"
+                zone="zLeft"
+                rank="10"
+                hintPlacement="left"
+                [validators]="stepInputQtyValidators"
+            >
+                <fdp-number-step-input name="qty" [(ngModel)]="qty"></fdp-number-step-input>
+            </fdp-form-field>
+
+            <ng-template #i18n let-errors>
+                <span *ngIf="errors.required">
+                    Value is required
+                </span>
+            </ng-template>
+        </fdp-form-group>
+    </div>
+    <pre>Qty: {{ qty }}</pre>
+</main>
diff --git a/...put/platform-step-input-examples/platform-number-step-input-template-example.component.ts b/...put/platform-step-input-examples/platform-number-step-input-template-example.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { ValidatorFn, Validators } from '@angular/forms';
+
+@Component({
+    selector: 'fdp-platform-number-step-input-template-form-example',
+    templateUrl: './platform-number-step-input-template-example.component.html'
+})
+export class PlatformNumberStepInputTemplateFormExampleComponent {
+    qty = 10;
+    stepInputQtyValidators: ValidatorFn[] = [Validators.required];
+}
diff --git a/...orm-forms/step-input/platform-step-input-header/platform-step-input-header.component.html b/...orm-forms/step-input/platform-step-input-header/platform-step-input-header.component.html
@@ -0,0 +1,25 @@
+<header>Step Input Component</header>
+
+<description>
+    The step input control allows the user to change the input values in predefined increments (steps).
+    <br />
+    <br />
+
+    <import module="PlatformStepInputModule"></import>
+    <br />
+
+    <h3>Platform specific enhancements:</h3>
+    <ul>
+        <li>The core implementation is in progress and probably needs to some re-work</li>
+        <li>Component implements the FormFieldControl interface, thus can be used with in the FormField component.</li>
+        <li>
+            Focuses on single responsibility which will deal with specific types:
+            <ul>
+                <li>NumberStepInput - which can deal with quantity</li>
+            </ul>
+        </li>
+    </ul>
+</description>
+
+<fd-header-tabs></fd-header-tabs>
+<router-outlet></router-outlet>
diff --git a/...tform-forms/step-input/platform-step-input-header/platform-step-input-header.component.ts b/...tform-forms/step-input/platform-step-input-header/platform-step-input-header.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-step-input-header',
+    templateUrl: './platform-step-input-header.component.html'
+})
+export class PlatformStepInputHeaderComponent {}
diff --git a/...s/src/app/platform/component-docs/platform-forms/step-input/platform-step-input.module.ts b/...s/src/app/platform/component-docs/platform-forms/step-input/platform-step-input.module.ts
@@ -0,0 +1,38 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { PlatformStepInputModule, FdpFormGroupModule } from '@fundamental-ngx/platform';
+
+import { ApiComponent } from '../../../../documentation/core-helpers/api/api.component';
+import { API_FILES } from '../../../api-files';
+import { SharedDocumentationModule } from '../../../../documentation/shared-documentation.module';
+
+import { PlatformStepInputDocsComponent } from './platform-step-input-docs.component';
+import { PlatformStepInputHeaderComponent } from './platform-step-input-header/platform-step-input-header.component';
+import { PlatformNumberStepInputExampleComponent } from './platform-step-input-examples/platform-number-step-input-example.component';
+import { PlatformNumberStepInputFormExampleComponent } from './platform-step-input-examples/platform-number-step-input-reactive-example.component';
+import { PlatformNumberStepInputTemplateFormExampleComponent } from './platform-step-input-examples/platform-number-step-input-template-example.component';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: PlatformStepInputHeaderComponent,
+        children: [
+            { path: '', component: PlatformStepInputDocsComponent },
+            { path: 'api', component: ApiComponent, data: { content: API_FILES.stepInput } }
+        ]
+    }
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes), SharedDocumentationModule, PlatformStepInputModule, FdpFormGroupModule],
+    exports: [RouterModule],
+    declarations: [
+        PlatformStepInputDocsComponent,
+        PlatformStepInputHeaderComponent,
+        PlatformNumberStepInputExampleComponent,
+        PlatformNumberStepInputFormExampleComponent,
+        PlatformNumberStepInputTemplateFormExampleComponent
+    ]
+})
+export class PlatformStepInputDocsModule {}
diff --git a/apps/docs/src/app/platform/documentation/platform-documentation.component.ts b/apps/docs/src/app/platform/documentation/platform-documentation.component.ts
@@ -30,7 +30,8 @@ export class PlatformDocumentationComponent extends DocumentationBaseComponent {
             { url: 'platform/search-field', name: 'Search Field' },
             { url: 'platform/split-menu-button', name: 'Split Menu Button' },
             { url: 'platform/textarea', name: 'Textarea' },
-            { url: 'platform/switch', name: 'Switch' }
+            { url: 'platform/switch', name: 'Switch' },
+            { url: 'platform/step-input', name: 'Step Input' }
         ];
 
         this.layouts = [];

diff --git a/apps/docs/src/app/platform/platform-documentation.routes.ts b/apps/docs/src/app/platform/platform-documentation.routes.ts
@@ -118,6 +118,13 @@ export const ROUTES: Routes = [
                     import('./component-docs/platform-forms/platform-input/platform-input-docs.module').then(
                         (m) => m.PlatformInputDocsModule
                     )
+            },
+            {
+                path: 'step-input',
+                loadChildren: () =>
+                    import('./component-docs/platform-forms/step-input/platform-step-input.module').then(
+                        (m) => m.PlatformStepInputDocsModule
+                    )
             }
         ]
     }

diff --git a/libs/core/src/lib/utils/functions/key-util.ts b/libs/core/src/lib/utils/functions/key-util.ts
@@ -16,7 +16,9 @@ const keyMap: Map<string, { aliases: string[], keyCode: number }> = new Map(
         ['Meta', {aliases: ['Meta'], keyCode: 91}],
         ['Shift', {aliases: ['Shift'], keyCode: 16}],
         ['Backspace', {aliases: ['Backspace'], keyCode: 8}],
-        ['KeyA', {aliases: ['KeyA'], keyCode: 65}]
+        ['KeyA', {aliases: ['KeyA'], keyCode: 65}],
+        ['PageUp', { aliases: ['PageUp'], keyCode: 33 }],
+        ['PageDown', { aliases: ['PageDown'], keyCode: 34 }]
     ]
 );
 

diff --git a/libs/platform/src/lib/components/form/public_api.ts b/libs/platform/src/lib/components/form/public_api.ts
@@ -19,3 +19,4 @@ export * from './text-area/text-area.module';
 export * from './switch/switch.module';
 export * from './switch/switch/switch.config';
 export * from './switch/switch/switch.component';
+export * from './step-input/public_api';