From 0696959b4cbe5203582393c400dba834f2eaa398 Mon Sep 17 00:00:00 2001 From: christophercr Date: Tue, 24 Jul 2018 09:58:15 +0200 Subject: [PATCH] feat(stark-ui): implement OnEnterKey directive. Create KeyboardDirectives module ISSUES CLOSED: #538 --- packages/stark-ui/src/modules.ts | 1 + .../src/modules/keyboard-directives.ts | 2 + .../modules/keyboard-directives/directives.ts | 1 + .../directives/on-enter-key.directive.spec.ts | 109 ++++++++++++++++++ .../directives/on-enter-key.directive.ts | 69 +++++++++++ .../keyboard-directives.module.ts | 8 ++ showcase/src/app/app.component.html | 3 + showcase/src/app/app.routes.ts | 3 +- showcase/src/app/demo/demo.module.ts | 29 ++++- showcase/src/app/demo/index.ts | 1 + .../src/app/demo/keyboard-directives/index.ts | 1 + .../keyboard-directives.component.html | 27 +++++ .../keyboard-directives.component.scss | 11 ++ .../keyboard-directives.component.ts | 67 +++++++++++ .../on-enter-key-directive.html | 25 ++++ .../on-enter-key-directive.ts | 48 ++++++++ showcase/src/assets/translations/en.json | 9 ++ showcase/src/assets/translations/fr.json | 9 ++ showcase/src/assets/translations/nl.json | 9 ++ 19 files changed, 427 insertions(+), 5 deletions(-) create mode 100644 packages/stark-ui/src/modules/keyboard-directives.ts create mode 100644 packages/stark-ui/src/modules/keyboard-directives/directives.ts create mode 100644 packages/stark-ui/src/modules/keyboard-directives/directives/on-enter-key.directive.spec.ts create mode 100644 packages/stark-ui/src/modules/keyboard-directives/directives/on-enter-key.directive.ts create mode 100644 packages/stark-ui/src/modules/keyboard-directives/keyboard-directives.module.ts create mode 100644 showcase/src/app/demo/keyboard-directives/index.ts create mode 100644 showcase/src/app/demo/keyboard-directives/keyboard-directives.component.html create mode 100644 showcase/src/app/demo/keyboard-directives/keyboard-directives.component.scss create mode 100644 showcase/src/app/demo/keyboard-directives/keyboard-directives.component.ts create mode 100644 showcase/src/assets/examples/keyboard-directives/on-enter-key-directive.html create mode 100644 showcase/src/assets/examples/keyboard-directives/on-enter-key-directive.ts diff --git a/packages/stark-ui/src/modules.ts b/packages/stark-ui/src/modules.ts index 3f130849c3..5859f2de5d 100644 --- a/packages/stark-ui/src/modules.ts +++ b/packages/stark-ui/src/modules.ts @@ -1,5 +1,6 @@ export * from "./modules/action-bar"; export * from "./modules/app-logo"; +export * from "./modules/keyboard-directives"; export * from "./modules/pretty-print"; export * from "./modules/slider"; export * from "./modules/table"; diff --git a/packages/stark-ui/src/modules/keyboard-directives.ts b/packages/stark-ui/src/modules/keyboard-directives.ts new file mode 100644 index 0000000000..7348cb9f6f --- /dev/null +++ b/packages/stark-ui/src/modules/keyboard-directives.ts @@ -0,0 +1,2 @@ +export * from "./keyboard-directives/keyboard-directives.module"; +export * from "./keyboard-directives/directives"; diff --git a/packages/stark-ui/src/modules/keyboard-directives/directives.ts b/packages/stark-ui/src/modules/keyboard-directives/directives.ts new file mode 100644 index 0000000000..77eb0569da --- /dev/null +++ b/packages/stark-ui/src/modules/keyboard-directives/directives.ts @@ -0,0 +1 @@ +export * from "./directives/on-enter-key.directive"; diff --git a/packages/stark-ui/src/modules/keyboard-directives/directives/on-enter-key.directive.spec.ts b/packages/stark-ui/src/modules/keyboard-directives/directives/on-enter-key.directive.spec.ts new file mode 100644 index 0000000000..22ff38c9ff --- /dev/null +++ b/packages/stark-ui/src/modules/keyboard-directives/directives/on-enter-key.directive.spec.ts @@ -0,0 +1,109 @@ +/*tslint:disable:completed-docs*/ +import { ComponentFixture, fakeAsync, TestBed } from "@angular/core/testing"; +import { Component, DebugElement } from "@angular/core"; +import { By } from "@angular/platform-browser"; +import { STARK_LOGGING_SERVICE } from "@nationalbankbelgium/stark-core"; +import { MockStarkLoggingService } from "@nationalbankbelgium/stark-core/testing"; +import { StarkOnEnterKeyDirective } from "./on-enter-key.directive"; +import Spy = jasmine.Spy; +import createSpy = jasmine.createSpy; + +describe("OnEnterKeyDirective", () => { + @Component({ + selector: "test-component", + template: getTemplate("starkOnEnterKey") + }) + class TestComponent { + public onEnterKeyHandler: Spy = createSpy("onEnterKeyHandlerSpy"); + + public onEnterKeyParam: object = { id: "123" }; + } + + let fixture: ComponentFixture; + + function getTemplate(onEnterKeyDirective: string): string { + return ""; + } + + function initializeComponentFixture(): void { + fixture = TestBed.createComponent(TestComponent); + // trigger initial data binding + fixture.detectChanges(); + } + + function triggerKeyPressEvent(inputElement: DebugElement, keyCode: number): void { + const keypressEvent: Event = document.createEvent("Event"); + keypressEvent.initEvent("keypress", true, true); + keypressEvent["which"] = keyCode; + inputElement.triggerEventHandler("keypress", keypressEvent); + } + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [StarkOnEnterKeyDirective, TestComponent], + providers: [{ provide: STARK_LOGGING_SERVICE, useValue: new MockStarkLoggingService() }] + }); + }); + + describe("when onEnterKeyHandler is not defined", () => { + beforeEach( + fakeAsync(() => { + // compile template and css + return TestBed.compileComponents(); + }) + ); + + beforeEach(() => { + initializeComponentFixture(); + }); + + it("should not do anything when the enter key is pressed and the enter key handler was not provided", () => { + expect(fixture).toBeDefined(); + const hostComponent: TestComponent = fixture.componentInstance; + + const inputElement: DebugElement = fixture.debugElement.query(By.css("input")); + triggerKeyPressEvent(inputElement, 13); + + expect(hostComponent.onEnterKeyHandler).not.toHaveBeenCalled(); + }); + }); + + describe("when onEnterKeyHandler is given", () => { + // overriding the components's template + beforeEach( + fakeAsync(() => { + const newTemplate: string = getTemplate( + "[starkOnEnterKey]='onEnterKeyHandler' [starkOnEnterKeyParams]='[onEnterKeyParam]'" + ); + + TestBed.overrideTemplate(TestComponent, newTemplate); + + // compile template and css + return TestBed.compileComponents(); + }) + ); + + beforeEach(() => { + initializeComponentFixture(); + }); + + it("should call the given function when Enter key is pressed", () => { + const hostComponent: TestComponent = fixture.componentInstance; + + const inputElement: DebugElement = fixture.debugElement.query(By.css("input")); + triggerKeyPressEvent(inputElement, 13); + + expect(hostComponent.onEnterKeyHandler).toHaveBeenCalledTimes(1); + expect(hostComponent.onEnterKeyHandler).toHaveBeenCalledWith(hostComponent.onEnterKeyParam); + }); + + it("should not call the given function when a key other than Enter is pressed", () => { + const hostComponent: TestComponent = fixture.componentInstance; + + const inputElement: DebugElement = fixture.debugElement.query(By.css("input")); + triggerKeyPressEvent(inputElement, 1); + + expect(hostComponent.onEnterKeyHandler).not.toHaveBeenCalled(); + }); + }); +}); diff --git a/packages/stark-ui/src/modules/keyboard-directives/directives/on-enter-key.directive.ts b/packages/stark-ui/src/modules/keyboard-directives/directives/on-enter-key.directive.ts new file mode 100644 index 0000000000..c71204b8e2 --- /dev/null +++ b/packages/stark-ui/src/modules/keyboard-directives/directives/on-enter-key.directive.ts @@ -0,0 +1,69 @@ +import { Directive, HostListener, Inject, Input, OnInit } from "@angular/core"; +import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core"; + +/** + * Name of the directive + */ +const directiveName: string = "[starkOnEnterKey]"; + +/** + * Directive that allows the execution of a certain callback whenever the user presses the Enter key in a field. + * + * This directive is used essentially for input tags. + * + * `IMPORTANT:` This directive will have its own context so any properties/methods of the host component where this directive is used will not be accessible. + * In case you want to access any variable or method of your component where you include this directive from the callback function, + * you should bind the component's "this" context to the callback function passed to the directive with the "bind()" method. + * + * For example: + * ```html + * + * ``` + * + * Then in your component your callback could be defined like this: + * ```typescript + * public yourCallbackFn(paramValue: string): void { + * this.someProperty; // is the value of the component's "someProperty" due to the ".bind(this)" in the callback passed to the directive, otherwise it would be "undefined"! + * paramValue; // is "someValue" since it was a literal param passed via the [starkOnEnterKeyParams] input + * } + * ``` + */ +@Directive({ + selector: directiveName +}) +export class StarkOnEnterKeyDirective implements OnInit { + /** + * Callback function to be triggered on every Enter key press in the field + */ + /* tslint:disable:no-input-rename */ + @Input("starkOnEnterKey") public onEnterKeyHandler: Function; + + /** + * Parameters to be passed to the specified callback function + */ + @Input("starkOnEnterKeyParams") public onEnterKeyParams: any[]; + + /** + * Event handler to be invoked on a "keypress" event in the field + */ + @HostListener("keypress", ["$event"]) + public eventHandler(event: KeyboardEvent): void { + if (this.onEnterKeyHandler && event.which === 13) { + this.onEnterKeyHandler(...this.onEnterKeyParams); + event.preventDefault(); + } + } + + /** + * Class constructor + * @param logger - The logger of the application + */ + public constructor(@Inject(STARK_LOGGING_SERVICE) private logger: StarkLoggingService) {} + + /** + * Directive lifecycle hook + */ + public ngOnInit(): void { + this.logger.debug(directiveName + ": directive initialized"); + } +} diff --git a/packages/stark-ui/src/modules/keyboard-directives/keyboard-directives.module.ts b/packages/stark-ui/src/modules/keyboard-directives/keyboard-directives.module.ts new file mode 100644 index 0000000000..1d690da149 --- /dev/null +++ b/packages/stark-ui/src/modules/keyboard-directives/keyboard-directives.module.ts @@ -0,0 +1,8 @@ +import { NgModule } from "@angular/core"; +import { StarkOnEnterKeyDirective } from "./directives"; + +@NgModule({ + declarations: [StarkOnEnterKeyDirective], + exports: [StarkOnEnterKeyDirective] +}) +export class StarkKeyboardDirectivesModule {} diff --git a/showcase/src/app/app.component.html b/showcase/src/app/app.component.html index a544d50811..5187b7bb4d 100644 --- a/showcase/src/app/app.component.html +++ b/showcase/src/app/app.component.html @@ -37,6 +37,9 @@ Example Viewer + + Keyboard Directives + Table diff --git a/showcase/src/app/app.routes.ts b/showcase/src/app/app.routes.ts index e371f6e104..ff24adb266 100644 --- a/showcase/src/app/app.routes.ts +++ b/showcase/src/app/app.routes.ts @@ -1,4 +1,4 @@ -import { ActionBarComponent, ButtonComponent, ExampleViewerComponent, TableComponent } from "./demo"; +import { ActionBarComponent, ButtonComponent, ExampleViewerComponent, KeyboardDirectivesComponent, TableComponent } from "./demo"; import { HomeComponent } from "./home"; import { NoContentComponent } from "./no-content"; import { Ng2StateDeclaration } from "@uirouter/angular"; @@ -8,6 +8,7 @@ export const APP_STATES: Ng2StateDeclaration[] = [ { name: "demo-action-bar", url: "/demo/action-bar", component: ActionBarComponent }, { name: "demo-button", url: "/demo/button", component: ButtonComponent }, { name: "demo-example-viewer", url: "/demo/example-viewer", component: ExampleViewerComponent }, + { name: "demo-keyboard-directives", url: "/demo/keyboard-directives", component: KeyboardDirectivesComponent }, { name: "demo-table", url: "/demo/table", component: TableComponent }, { name: "otherwise", url: "/otherwise", component: NoContentComponent } ]; diff --git a/showcase/src/app/demo/demo.module.ts b/showcase/src/app/demo/demo.module.ts index 643699269c..eb12546315 100644 --- a/showcase/src/app/demo/demo.module.ts +++ b/showcase/src/app/demo/demo.module.ts @@ -1,31 +1,52 @@ -import { MatButtonModule, MatCardModule, MatIconModule, MatTabsModule, MatTooltipModule, MatSnackBarModule } from "@angular/material"; +import { + MatButtonModule, + MatCardModule, + MatIconModule, + MatTabsModule, + MatTooltipModule, + MatSnackBarModule, + MatFormFieldModule, + MatInputModule +} from "@angular/material"; import { CommonModule } from "@angular/common"; import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; import { TranslateModule } from "@ngx-translate/core"; import { ActionBarComponent } from "./action-bar/action-bar.component"; import { ButtonComponent } from "./button/button.component"; import { ExampleViewerComponent } from "./example-viewer/example-viewer.component"; +import { KeyboardDirectivesComponent } from "./keyboard-directives/keyboard-directives.component"; import { TableComponent } from "./table/table.component"; import { SharedModule } from "../shared/shared.module"; -import { StarkActionBarModule, StarkSliderModule, StarkTableModule, StarkSvgViewBoxModule } from "@nationalbankbelgium/stark-ui"; +import { + StarkActionBarModule, + StarkSliderModule, + StarkTableModule, + StarkSvgViewBoxModule, + StarkKeyboardDirectivesModule +} from "@nationalbankbelgium/stark-ui"; @NgModule({ imports: [ MatButtonModule, MatCardModule, + MatFormFieldModule, MatIconModule, + MatInputModule, MatTooltipModule, MatSnackBarModule, MatTabsModule, CommonModule, + FormsModule, TranslateModule, SharedModule, StarkActionBarModule, StarkSliderModule, StarkSvgViewBoxModule, + StarkKeyboardDirectivesModule, StarkTableModule ], - declarations: [ActionBarComponent, ButtonComponent, ExampleViewerComponent, TableComponent], - exports: [ActionBarComponent, ButtonComponent, ExampleViewerComponent, TableComponent] + declarations: [ActionBarComponent, ButtonComponent, ExampleViewerComponent, KeyboardDirectivesComponent, TableComponent], + exports: [ActionBarComponent, ButtonComponent, ExampleViewerComponent, KeyboardDirectivesComponent, TableComponent] }) export class DemoModule {} diff --git a/showcase/src/app/demo/index.ts b/showcase/src/app/demo/index.ts index f9d77c5c6e..b8f2773320 100644 --- a/showcase/src/app/demo/index.ts +++ b/showcase/src/app/demo/index.ts @@ -1,5 +1,6 @@ export * from "./action-bar"; export * from "./button"; export * from "./example-viewer"; +export * from "./keyboard-directives"; export * from "./table"; export * from "./demo.module"; diff --git a/showcase/src/app/demo/keyboard-directives/index.ts b/showcase/src/app/demo/keyboard-directives/index.ts new file mode 100644 index 0000000000..436d3f7d27 --- /dev/null +++ b/showcase/src/app/demo/keyboard-directives/index.ts @@ -0,0 +1 @@ +export * from "./keyboard-directives.component"; diff --git a/showcase/src/app/demo/keyboard-directives/keyboard-directives.component.html b/showcase/src/app/demo/keyboard-directives/keyboard-directives.component.html new file mode 100644 index 0000000000..b495013d78 --- /dev/null +++ b/showcase/src/app/demo/keyboard-directives/keyboard-directives.component.html @@ -0,0 +1,27 @@ + +
+

SHOWCASE.DEMO.KEYBOARD_DIRECTIVES.DESCRIPTION

+ + SHOWCASE.DEMO.KEYBOARD_DIRECTIVES.INPUT_WITH_CONTEXT + + + + SHOWCASE.DEMO.KEYBOARD_DIRECTIVES.INPUT_WITHOUT_CONTEXT + + + + SHOWCASE.DEMO.KEYBOARD_DIRECTIVES.INPUT_WITHOUT_CONTEXT_ALTERNATIVE + + +
+ + 
{{ logging }}
+ diff --git a/showcase/src/app/demo/keyboard-directives/keyboard-directives.component.scss b/showcase/src/app/demo/keyboard-directives/keyboard-directives.component.scss new file mode 100644 index 0000000000..5140e7f346 --- /dev/null +++ b/showcase/src/app/demo/keyboard-directives/keyboard-directives.component.scss @@ -0,0 +1,11 @@ +.on-enter-key-directive-form { + display: flex; + flex-direction: column; +} + +pre code { + display: block; + height: 200px; + background-color: #cfcfcf; + overflow: auto; +} diff --git a/showcase/src/app/demo/keyboard-directives/keyboard-directives.component.ts b/showcase/src/app/demo/keyboard-directives/keyboard-directives.component.ts new file mode 100644 index 0000000000..3dc991b5ad --- /dev/null +++ b/showcase/src/app/demo/keyboard-directives/keyboard-directives.component.ts @@ -0,0 +1,67 @@ +import { Component, Inject, OnInit } from "@angular/core"; +import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core"; + +@Component({ + selector: "showcase-demo-on-enter-key", + styleUrls: ["./keyboard-directives.component.scss"], + templateUrl: "./keyboard-directives.component.html" +}) +export class KeyboardDirectivesComponent implements OnInit { + public latestInputValue: string; + public inputValue1: string; + public inputValue2: string; + public inputValue3: string; + + public logging: string; + + public constructor(@Inject(STARK_LOGGING_SERVICE) private logger: StarkLoggingService) {} + + public ngOnInit(): void { + this.latestInputValue = ""; + this.inputValue1 = ""; + this.inputValue2 = ""; + this.inputValue3 = ""; + this.logging = ""; + } + + public onEnterKeyCallback(...paramValues: any[]): void { + switch (paramValues[0]) { + case "input1": + this.updateLogging(this.inputValue1, paramValues); + break; + case "input2": + // this.updateLogging() is not accessible since this onEnterKeyCallback is called without context + let callbackLogging: string = `Callback triggered from ${paramValues[0]}!`; + callbackLogging += ` - Passed params: ${paramValues}`; + callbackLogging += ` - Component this.latestInputValue property: '${this.latestInputValue}'\n`; + // however this.logger is accessible because the OnEnterKey directive has also the "logger" service injected + this.logger.debug(callbackLogging); + break; + case "input3": + // this.updateLogging() is not accessible since this onEnterKeyCallback is called without context + if (paramValues.length === 5) { + // the context of the host component was passed in the last parameter + // so we can access all properties/methods from the component + const parentComponentContext: KeyboardDirectivesComponent = paramValues[4]; + parentComponentContext.updateLogging(parentComponentContext.inputValue3, paramValues); + } + break; + default: + break; + } + } + + public updateLogging(inputValue: string, paramValues: any[]): void { + if (typeof this.latestInputValue !== "undefined") { + this.latestInputValue = inputValue; + } + + let callbackLogging: string = `Callback triggered from ${paramValues[0]}!`; + callbackLogging += ` - Passed params: ${paramValues}`; + callbackLogging += ` - Component this.latestInputValue property: '${this.latestInputValue}'\n`; + + // this won't appear in the view when no context is passed to this callback function + this.logging += callbackLogging; + this.logger.debug(callbackLogging); + } +} diff --git a/showcase/src/assets/examples/keyboard-directives/on-enter-key-directive.html b/showcase/src/assets/examples/keyboard-directives/on-enter-key-directive.html new file mode 100644 index 0000000000..be5fedfbcf --- /dev/null +++ b/showcase/src/assets/examples/keyboard-directives/on-enter-key-directive.html @@ -0,0 +1,25 @@ +
+

Type some value in the inputs and then press the Enter key in any of them to trigger a callback function

+ + With bound context + + + + Without bound context + + + + Without bound context but passed as parameter + + +
+ +
{{ logging }}
+ diff --git a/showcase/src/assets/examples/keyboard-directives/on-enter-key-directive.ts b/showcase/src/assets/examples/keyboard-directives/on-enter-key-directive.ts new file mode 100644 index 0000000000..c12d31c02b --- /dev/null +++ b/showcase/src/assets/examples/keyboard-directives/on-enter-key-directive.ts @@ -0,0 +1,48 @@ +import { Component, Inject, OnInit } from "@angular/core"; +import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core"; + +@Component({ + selector: "showcase-demo-on-enter-key", + styleUrls: ["./on-enter-key.component.scss"], + templateUrl: "./on-enter-key.component.html" +}) +export class OnEnterKeyComponent implements OnInit { + public latestInputValue: string; + public inputValue1: string; + public inputValue2: string; + public inputValue3: string; + + public logging: string; + + public constructor(@Inject(STARK_LOGGING_SERVICE) private logger: StarkLoggingService) {} + + public ngOnInit(): void { + this.latestInputValue = ""; + this.inputValue1 = ""; + this.inputValue2 = ""; + this.inputValue3 = ""; + this.logging = ""; + } + + public onEnterKeyCallback(...paramValues: any[]): void { + if (typeof this.latestInputValue !== "undefined") { + this.latestInputValue = paramValues[1]; + } + + let callbackLogging: string = `Callback triggered from ${paramValues[0]}!`; + callbackLogging += ` - Passed params: ${paramValues}`; + callbackLogging += ` - Component this.latestInputValue property: '${this.latestInputValue}'\n`; + + // this won't appear in the view when no context is passed to this callback function + this.logging += callbackLogging; + // this will always be logged to the console since the directive has also the "logger" service injected + this.logger.debug(callbackLogging); + + if (paramValues.length === 5) { + // the context of the host component was passed in the last parameter + // so we can change the component's property to update the logging section + const parentComponentContext: OnEnterKeyComponent = paramValues[4]; + parentComponentContext.logging += callbackLogging; + } + } +} diff --git a/showcase/src/assets/translations/en.json b/showcase/src/assets/translations/en.json index 997b2ef07b..7346017a44 100644 --- a/showcase/src/assets/translations/en.json +++ b/showcase/src/assets/translations/en.json @@ -5,6 +5,15 @@ "CLASSIC-FULL": "Action Bar Classic Full", "CLASSIC-COMPACT": "Action Bar Classic Compact", "ALT": "Action Bar Alternative" + }, + "KEYBOARD_DIRECTIVES": { + "ON_ENTER_KEY_DIRECTIVE": "On Enter Key Directive", + "DESCRIPTION": "Type some value in the inputs and then press Enter in any of them to trigger the callback function", + "INPUT_WITH_CONTEXT": "With bound context", + "INPUT_WITHOUT_CONTEXT": "Without bound context (bound values are not accessible)", + "INPUT_WITHOUT_CONTEXT_ALTERNATIVE": "Without bound context but passed as parameter", + "TYPE_AND_PRESS_ENTER": "Type a value and press Enter", + "TYPE_PRESS_ENTER_AND_CHECK_CONSOLE": "Type a value, press Enter and check the console" } } } diff --git a/showcase/src/assets/translations/fr.json b/showcase/src/assets/translations/fr.json index 997b2ef07b..ecb0cc10c9 100644 --- a/showcase/src/assets/translations/fr.json +++ b/showcase/src/assets/translations/fr.json @@ -5,6 +5,15 @@ "CLASSIC-FULL": "Action Bar Classic Full", "CLASSIC-COMPACT": "Action Bar Classic Compact", "ALT": "Action Bar Alternative" + }, + "KEYBOARD_DIRECTIVES": { + "ON_ENTER_KEY_DIRECTIVE": "On Enter Key Directive", + "DESCRIPTION": "Tapez une valeur dans les entrées, puis appuyez sur Entrée dans l'un d'eux pour déclencher la fonction callback", + "INPUT_WITH_CONTEXT": "Avec contexte lié", + "INPUT_WITHOUT_CONTEXT": "Sans contexte lié (les valeurs liées ne sont pas accessibles)", + "INPUT_WITHOUT_CONTEXT_ALTERNATIVE": "Sans contexte lié mais passé en paramètre", + "TYPE_AND_PRESS_ENTER": "Tapez une valeur et appuyez sur Entrée", + "TYPE_PRESS_ENTER_AND_CHECK_CONSOLE": "Tapez une valeur, appuyez sur Entrée et vérifiez la console" } } } diff --git a/showcase/src/assets/translations/nl.json b/showcase/src/assets/translations/nl.json index 997b2ef07b..88083962ab 100644 --- a/showcase/src/assets/translations/nl.json +++ b/showcase/src/assets/translations/nl.json @@ -5,6 +5,15 @@ "CLASSIC-FULL": "Action Bar Classic Full", "CLASSIC-COMPACT": "Action Bar Classic Compact", "ALT": "Action Bar Alternative" + }, + "KEYBOARD_DIRECTIVES": { + "ON_ENTER_KEY_DIRECTIVE": "On Enter Key Directive", + "DESCRIPTION": "Typ een waarde in de invulvelden en druk vervolgens op Enter om de callback functie te activeren", + "INPUT_WITH_CONTEXT": "Met verbonden context", + "INPUT_WITHOUT_CONTEXT": "Zonder verbonden context (verbonden waarden zijn niet toegankelijk)", + "INPUT_WITHOUT_CONTEXT_ALTERNATIVE": "Zonder verbonden context maar doorgegeven als parameter", + "TYPE_AND_PRESS_ENTER": "Typ een waarde en druk Enter", + "TYPE_PRESS_ENTER_AND_CHECK_CONSOLE": "Typ een waarde, druk Enter en controleer de console" } } }