import type Keyboard from './Keyboard'; export interface KeyboardLayoutObject { [key: string]: string[]; } export type KeyboardButtonTheme = { class: string; buttons: string; } | null; export interface KeyboardInput { default: string; } export type CursorPosition = number | null; export type KeyboardElement = HTMLDivElement | HTMLButtonElement | HTMLSpanElement; export type KeyboardInputOption = HTMLInputElement | HTMLDivElement | HTMLElement | undefined; export type KeyboardHandlerEvent = KeyboardEvent | MouseEvent | PointerEvent | UIEvent | Event; export interface KeyboardButtonElements { [key: string]: KeyboardElement[]; } /** * Keyboard update mode * @enum */ export declare enum KeyboardUpdateMode { Auto = "auto", Manual = "manual" } /** * Layout button enum * @enum */ export declare enum ButtonType { Standard = "standard-btn", Function = "function-btn" } /** * Keyboard visibility * @enum */ export declare enum KeyboardVisibility { Hidden = "hidden", Visible = "visible" } /** * Layout row direction * @enum */ export declare enum LayoutDirection { Horizontal = "horizontal", Vertical = "vertical", Fixed = "fixed" } /** * Keyboard enum * @enum */ export declare enum KeyboardType { Default = "default", Numeric = "numeric", Phone = "phone", Math = "math", Custom = "custom" } /** * Keyboard theme variation * @enum */ export declare enum KeyboardThemeVariation { Large = "large", Default = "default", Compact = "compact", UltraSmall = "ultra-small" } /** * Beep tone enum * @enum */ export declare enum BeepTone { TONE_1 = "TONE1", TONE_2 = "TONE2", TONE_3 = "TONE3", TONE_4 = "TONE4", TONE_5 = "TONE5", TONE_6 = "TONE6", TONE_7 = "TONE7" } type FunctionKeyPressCallback = (button: string, instance: Keyboard, e?: KeyboardHandlerEvent) => void; /** * KeyboardTypeEvents */ export interface KeyboardTypeEvents { /** * Executes thae callback function when virtual keyboard rendered by the first time. * @event */ beforeFirstRender?: (instance: Keyboard) => void; /** * Executes a callback function before a virtual keyboard render. * @event */ beforeRender?: (beforeRender: Keyboard) => void; /** * Executes a callback function every time virtual keyboard is rendered (e.g: when you change layouts). * @event */ onRender?: (instance: Keyboard) => void; /** * Executes a callback function once virtual keyboard is rendered for the first time (on initialization). * @event */ onInit?: (instance: Keyboard) => void; /** * Retrieves the current input * @event */ onChange?: (input: string, e?: KeyboardHandlerEvent) => void; /** * Executes a callback function on any key press of virtual keyboard. Returns button layout name (i.e.: “{enter}”, "b", "c", "2" ). * @event */ onKeyPress?: (button: string, e?: KeyboardHandlerEvent) => void; /** * Execute a callback function on keypress of non-standard type only (functionality type i.e.: “{alt}”) of virtual keyboard. * @event */ onFunctionKeyPress?: FunctionKeyPressCallback; /** * Execute a callback function on keypress of standard type only (type i.e.: “a”, “k”, “5”) of virtual keyboard. * @event */ onStandardKeyPress?: FunctionKeyPressCallback; } export interface PrefabKeyboardEvents { /** * Execute the callback function on keypress of non-standard type only (functionality type i.e.: “{alt}”). * @event */ internalOnFunctionKeyPress?: FunctionKeyPressCallback; } /** * Keyboard layout options */ export interface KeyboardTypeOptions { /** * Specifies which keyboard type should be used out of the box. * Also can enforce by define dataset `` * @defaultValue {@link KeyboardType.Default} */ keyboardType?: KeyboardType; /** * Specifies a custom keyboard layout to be used. This should be used in addition to {@link KeyboardType} setted to {@link KeyboardType.Custom} */ layout?: KeyboardLayoutObject; /** * Specifies which layout should be used inside the "layout" option, useful to handle function keys (e.g. "{shift}")". This should be used in addition to {@link KeyboardType} setted to {@link KeyboardType.Custom}. Initial layout also can be defined here. */ layoutName?: string; /** * Specifies which direction layout should render. Horizontaly, Verticaly or Fixed. * - {@link LayoutDirection.Horizontal}, layout will render from left to right axis (row flow) * - {@link LayoutDirection.Vertical}, layout will render from top to bottom axis (column flow) * - {@link LayoutDirection.Fixed}, layout will render in fixed grid mode. This mode helps draw layout like `space-evenly` on POS. But not support flexible arrange. * @defaultValue {@link LayoutDirection.Horizontal} */ layoutDirection?: LayoutDirection; /** * A prop to add your own css classes to the keyboard wrapper. * You can add multiple classes separated by a space. * Prefab keyboards have their own themes... set this property will remove its theme. */ theme?: string; } /** * Keyboard options */ export interface KeyboardOptions extends KeyboardTypeOptions, KeyboardTypeEvents { /** * Defines a class modifier to work with theme variations. * You can use some pre-variations of {@link KeyboardThemeVariation} or add your own css class, that can have multiple classes separated by space. Strings will be transformed to kebab-case automatically. * * The class its self will be the concatenation of keyboard slug with two dashes. eg.: `mb-variation--compact`, `mb-variation--my-class` */ themeVariation?: KeyboardThemeVariation | string; /** * Replaces variable buttons (such as `{backspace}`) with a human-friendly name (e.g.: `backspace`). */ labels?: { [button: string]: string; }; /** * Converts button output value (such as `{check}`) to standard keyboard output (e.g.: `enter`). */ outputs?: { [button: string]: string; }; /** * Change the CSS class to add to the button when it gets active by click. */ activeButtonClass?: string; /** * Customize the CSS class to handle keyboard hidden events. * */ hiddenKeyboardClass?: string; /** * Shows aditional debug information. * Runs a `console.log` every time a key is pressed. * Shows the buttons pressed and the current input. * Add `debug` class to main keyboard wrapper */ debug?: boolean; /** * `number`: Restrains mamba keyboard input to a certain length. */ maxLength?: any; /** * If input is readonly(or static `div` element as input), keyboard will disable cursor event handlers since it won't be necessary. * * This property do not change or include readonly attribute */ readonly?: boolean; /** * Tells keyboard which value it should use at input start position after key press input change. Like a currency placeholder. * Only works if the {@link updateMode} are on mode {@link KeyboardUpdateMode.Auto}. */ lastValue?: string; /** * Tells keyboard if it should get or set number values only. * If some cases you dont want capture formatted values to internal keyboard virtual input, this props cleans the input work to number, to able to be formatted back again. * Useful for fields with formatting that happen after key events. */ filtersNumbersOnly?: boolean; /** * Optionally set a condition for the virtual keyboard to render or work. * Its instance will be destroyed if exist. * Can be a Boolean or a function that do something and return a boolean. * This property change keybpard visibility and stop its events and actions too. */ renderCondition?: boolean | (() => boolean); /** * Enabled or disables keyboard events and actions. * This property do not change keybpard visibility. */ disabled?: boolean; /** * A prop to ensure characters are always be added/removed at the end of the string. */ disableCursorPositioning?: boolean; /** * Restrains input(s) change to the defined regular expression pattern. */ inputPattern?: RegExp; /** * Exclude specific buttons from each layout * @example * * ```js * excludeFromLayout: { * default: ['a'], * shift: ['B'], * } * ``` */ excludeFromLayout?: { [layoutName: string]: string[]; }; /** * Include specific function buttons to go through synthetic event dispatch. * This is useful to send key press of function keys to the input event handler, like math keys. * * The key code will be resolved by String.charcode if it's not already mapped. (only for single char) * @example * ```js * { * ... * // These keys will not display on input but send input events without braces * // (e.g. KeyboardEvent({ key: "+", code: 107 })) * allowKeySyntheticEvent: ['{+}', '{-}', '{*}', '{≠}'], * } * ``` */ allowKeySyntheticEvent?: string[]; /** * Points key events to a customizable input element, instead of using document active element. * You can type and directly display the value in a `div` element setted with `data-keyboard="true" property`, so keyboard will insert its value to the element `innerText`. */ input?: KeyboardInputOption; /** * Specifies if keyboard should operate automatic or manually. * - In automatic({@link KeyboardUpdateMode.Auto}) mode, it will try handle input key press value on focused elements. * * - In manually({@link KeyboardUpdateMode.Manual}) mode, it will leave the changes to you handle outside, using {@link KeyboardTypeEvents.onChange} event along with `oninput` DOM event. * @example * ```js * function onChange(input, e) { * inputComponent.set({ value: input }); * } * * const keyboard = new Keyboard({ * onChange: input => this.onChange(input), * }); * // Update virtual keyboard input when the real one updates directly * inputDOMElement.addEventListener('input', event => { * keyboard.setInput(event.target.value); * }); * * ``` * * @defaultValue {@link KeyboardUpdateMode.Auto} */ updateMode?: KeyboardUpdateMode; /** * Keep keyboard visible (dont hide when input loose focus) * * @defaultValue `false` */ keepVisible?: boolean; /** * Keep input cursor at its ends * * @defaultValue `false` */ lockCursor?: boolean; /** * If should render keyboard when it's instance creates * Call `render()` method to show the keyboard * @defaultValue `true` */ autoRender?: boolean; /** * Make beep sound for every key press. * ! This do not disable POS sound entirely. Only for this Keyboard instance * @defaultValue System preference depending of the app, otherwise `false` */ soundEnabled?: boolean; /** * Define keyboard beep tone * * @defaultValue {@link BeepTone.TONE_3} */ beepTone?: BeepTone; /** * Define keyboard beep time * * @defaultValue `90` */ beepTime?: number; /** * Enable or disables key suggestions * @defaultValue `true` */ enableLayoutSuggestions?: boolean; /** * Character suggestions for especial and exotic keys * Define it was tuple it max of four optional words * Some prefab keyboard already have some latin words * @see [Default Suggestions](./mappings/defaultSuggestions.ts) */ layoutSuggestions?: { [key: string]: [string?, string?, string?, string?]; }; /** * Other options can exist */ [name: string]: any; } type LabelsOptionType = Pick; export type KeyboardTypesPredefinedOptions = Readonly<(NonNullable> & LabelsOptionType) & PrefabKeyboardEvents>; export interface KeyboardControllerParams { getOptions: () => KeyboardOptions; keyboardInstance: Keyboard; } export type onSuggestionSelect = (button: string, candidate: string, e?: KeyboardHandlerEvent) => void; export type CursorWorkerParams = KeyboardControllerParams; export type PhysicalKeyboardParams = KeyboardControllerParams; export interface SuggestionBoxParams extends KeyboardControllerParams { onSelect: onSuggestionSelect; } export {};