import { nothing, TemplateResult } from 'lit';
import { ClassInfo } from 'lit/directives/class-map.js';
import OmniElement from '../core/OmniElement.js';
import { RenderFunction } from '../render-element/RenderElement.js';
export { RenderFunction, RenderResult } from '../render-element/RenderElement.js';
import '../icons/ArrowRight.icon.js';
import '../icons/Backspace.icon.js';
import '../icons/ChevronDown.icon.js';
import '../icons/Check.icon.js';
import '../icons/CapsOff.icon.js';
import '../icons/CapsOn.icon.js';
import '../icons/CapsLock.icon.js';
import '../icons/Next.icon.js';
import '../icons/Previous.icon.js';
import '../icons/Search.icon.js';
import '../icons/Send.icon.js';
import '../render-element/RenderElement.js';
import '../label/Label.js';
import '../icon/Icon.js';
import './KeyboardButton.js';
/**
* A responsive on-screen keyboard control component.
*
* @import
* ```js
* import '@capitec/omni-components/keyboard';
* ```
*
* @example
* ```html
*
* ```
*
* @element omni-keyboard
* @status experimental
*
* @slot caps-off - Content to display on case change button when in a lowercase state.
* @slot caps-on - Content to display on case change button when in a single uppercase state.
* @slot caps-lock - Content to display on case change button when in a permanent uppercase state (caps lock).
* @slot close - Content to display next to close label.
* @slot backspace - Content to display on backspace button.
* @slot clear - Content to display on clear button.
* @slot action-done - Content to display on call to action button ('Enter') when target component has enterkeyhint="done".
* @slot action-go - Content to display on call to action button ('Enter') when target component has enterkeyhint="go".
* @slot action-next - Content to display on call to action button ('Enter') when target component has enterkeyhint="next".
* @slot action-previous - Content to display on call to action button ('Enter') when target component has enterkeyhint="previous".
* @slot action-search - Content to display on call to action button ('Enter') when target component has enterkeyhint="search".
* @slot action-send - Content to display on call to action button ('Enter') when target component has enterkeyhint="send".
* @slot action-enter - Content to display on call to action button ('Enter') when target component has enterkeyhint="enter" or enterkeyhint is not set.
*
* @global_attribute {boolean | string} data-omni-keyboard-attach - Indicates that the Keyboard is enabled for that component when the Keyboard has `attach-mode="attribute"` or when the value is equal to the Keyboard's id and `attach-mode="id"`.
* @global_attribute {boolean} data-omni-keyboard-hidden - Disables the Keyboard for that component.
* @global_attribute {InputMode} data-omni-keyboard-mode - Indicates that the Keyboard is to render in specified type of inputmode. Takes precedence over `inputmode` attribute.
* @global_attribute {EnterKeyHint} enterkeyhint - Indicates that the Keyboard's call to action button must render (and in some cases behave) accordingly.
* @global_attribute {boolean} data-omni-keyboard-multi-line - Indicates that the call to action button inserts a new line instead of default behaviour.
* @global_attribute {boolean} data-omni-keyboard-mask - Indicates that the Keyboard display value must be masked.
* @global_attribute {boolean} data-omni-keyboard-no-display - Disables the Keyboard display value. Takes precedence over `data-omni-keyboard-mask`.
*
* @cssprop --omni-keyboard-button-icon-max-height - Max height for slotted content in keyboard buttons.
* @cssprop --omni-keyboard-button-icon-max-width - Max width for slotted content in keyboard buttons.
* @cssprop --omni-keyboard-button-font-family - Font family for text in keyboard buttons.
* @cssprop --omni-keyboard-button-font-color - Font color for text in keyboard buttons.
* @cssprop --omni-keyboard-button-font-size - Font size for text in keyboard buttons.
* @cssprop --omni-keyboard-button-background-color - Background color for keyboard buttons.
* @cssprop --omni-keyboard-button-border - Border for keyboard buttons.
* @cssprop --omni-keyboard-button-margin - Margin for keyboard buttons.
* @cssprop --omni-keyboard-button-font-weight - Font weight for text in keyboard buttons.
* @cssprop --omni-keyboard-button-height - Height for keyboard buttons.
* @cssprop --omni-keyboard-button-width - Width for keyboard buttons.
* @cssprop --omni-keyboard-button-line-height - Line height for keyboard buttons.
* @cssprop --omni-keyboard-button-border-radius - Border radius for keyboard buttons.
*
* @cssprop --omni-keyboard-button-mobile-margin - Margin for keyboard buttons in mobile viewports.
* @cssprop --omni-keyboard-button-mobile-height - Height for keyboard buttons in mobile viewports.
* @cssprop --omni-keyboard-button-mobile-width - Width for keyboard buttons in mobile viewports.
* @cssprop --omni-return-keyboard-button-mobile-width - Width for return keyboard buttons in mobile viewports.
* @cssprop --omni-numeric-keyboard-button-mobile-width - Width for numeric keyboard buttons in mobile viewports.
*
* @cssprop --omni-keyboard-button-mobile-small-height - Height for keyboard buttons in small mobile viewports.
* @cssprop --omni-keyboard-button-mobile-small-width - Width for keyboard buttons in small mobile viewports.
* @cssprop --omni-keyboard-button-mobile-small-font-size - Font size for text in keyboard buttons in small mobile viewports.
* @cssprop --omni-keyboard-button-mobile-small-border-radius - Border radius for keyboard buttons in small mobile viewports.
* @cssprop --omni-return-keyboard-button-mobile-small-width - Width for return keyboard buttons in small mobile viewports.
* @cssprop --omni-numeric-keyboard-button-mobile-small-width - Width for numeric keyboard buttons in small mobile viewports.
*
* @cssprop --omni-keyboard-shadow-border-radius - Border radius for keyboard shadow.
* @cssprop --omni-keyboard-shadow-padding-bottom - Bottom padding for keyboard shadow.
* @cssprop --omni-keyboard-shadow-background-color - Background color for keyboard shadow.
*
* @cssprop --omni-keyboard-top-bar-width - Width for keyboard top bar.
* @cssprop --omni-keyboard-top-bar-padding-left - Left padding for keyboard top bar.
* @cssprop --omni-keyboard-top-bar-padding-right - Right padding for keyboard top bar.
* @cssprop --omni-keyboard-top-bar-background-color - Background color for keyboard top bar.
* @cssprop --omni-keyboard-top-bar-border-radius - Border radius for keyboard top bar.
* @cssprop --omni-keyboard-top-bar-border-bottom-color - Border bottom color for keyboard top bar.
*
* @cssprop --omni-keyboard-numeric-display-label-max-width - Width for display label in keyboard numeric mode.
* @cssprop --omni-keyboard-special-display-label-max-width - Width for display label in keyboard special mode.
* @cssprop --omni-keyboard-alpha-display-label-max-width - Width for display label in keyboard alpha-numeric mode.
*
* @cssprop --omni-keyboard-wrapper-width - Width for keyboard button rows wrapper.
* @cssprop --omni-keyboard-special-wrapper-width - Width for keyboard button rows wrapper for special keys.
* @cssprop --omni-keyboard-numeric-wrapper-width - Width for keyboard button rows wrapper for numeric keyboard mode.
*
* @cssprop --omni-keyboard-action-button-width - Width for keyboard call to action button.
* @cssprop --omni-keyboard-action-button-max-width - Max width for keyboard call to action button.
* @cssprop --omni-keyboard-action-button-color - Font or icon colour for keyboard call to action button.
* @cssprop --omni-keyboard-action-button-background-color - Background colour for keyboard call to action button.
* @cssprop --omni-keyboard-action-button-font-size - Font size for keyboard call to action button.
* @cssprop --omni-keyboard-action-button-font-weight - Font weight for keyboard call to action button.
* @cssprop --omni-keyboard-action-button-border-radius - Border radius for keyboard call to action button.
* @cssprop --omni-keyboard-action-button-margin - Margin for keyboard call to action button.
*
* @cssprop --omni-keyboard-close-icon-width - Width for keyboard close button icon.
* @cssprop --omni-keyboard-close-button-font-weight - Font weight for keyboard close button.
* @cssprop --omni-keyboard-close-button-color - Font colour for keyboard close button.
* @cssprop --omni-keyboard-close-button-font-size - Font size for keyboard close button.
* @cssprop --omni-keyboard-closer-width - Width for keyboard close button area.
* @cssprop --omni-keyboard-closer-padding-right - Right padding for keyboard close button area.
*
* @cssprop --omni-keyboard-background-color - Background color for keyboard.
*
* @cssprop --omni-keyboard-key-row-margin - Margin for keyboard rows.
* @cssprop --omni-keyboard-key-row-width - Width for keyboard rows.
* @cssprop --omni-keyboard-row-padding-top - Top padding for first keyboard row.
* @cssprop --omni-keyboard-row-padding-bottom - Bottom padding for last keyboard row.
*
* @cssprop --omni-keyboard-icons-color - Colour for keyboard icons.
*
* @cssprop --omni-keyboard-top-bar-mobile-height - Height for keyboard top bar in mobile viewports.
* @cssprop --omni-keyboard-top-bar-mobile-border-radius - Border radius for keyboard top bar in mobile viewports.
*
* @cssprop --omni-keyboard-mobile-numeric-display-label-max-width - Width for display label in keyboard numeric mode for mobile viewports.
* @cssprop --omni-keyboard-mobile-special-display-label-max-width - Width for display label in keyboard special mode for mobile viewports.
* @cssprop --omni-keyboard-mobile-alpha-display-label-max-width - Width for display label in keyboard alpha-numeric mode for mobile viewports.
*
* @cssprop --omni-keyboard-mobile-key-row-margin - Margin for keyboard rows in mobile viewports.
* @cssprop --omni-keyboard-mobile-special-key-row-margin - Margin for special keyboard rows in mobile viewports.
* @cssprop --omni-keyboard-mobile-key-row-width - Width for keyboard rows in mobile viewports.
*
* @cssprop --omni-keyboard-mobile-action-button-height - Height for keyboard call to action button in mobile viewports.
* @cssprop --omni-keyboard-mobile-action-button-max-width - Max width for keyboard call to action button in mobile viewports.
* @cssprop --omni-keyboard-mobile-action-button-margin - Margin for keyboard call to action button in mobile viewports.
*
* @cssprop --omni-keyboard-mobile-close-icon-width - Width for keyboard close button icon in mobile viewports.
* @cssprop --omni-keyboard-mobile-close-icon-width - Width for keyboard close button icon in mobile viewports.
*
* @cssprop --omni-keyboard-mobile-small-numeric-display-label-max-width - Width for display label in keyboard numeric mode for small mobile viewports.
* @cssprop --omni-keyboard-mobile-small-special-display-label-max-width - Width for display label in keyboard special mode for small mobile viewports.
* @cssprop --omni-keyboard-mobile-small-alpha-display-label-max-width - Width for display label in keyboard alpha-numeric mode for small mobile viewports.
*
* @cssprop --omni-keyboard-mobile-small-key-row-margin - Margin for keyboard rows in small mobile viewports.
* @cssprop --omni-keyboard-mobile-small-key-row-margin - Margin for special keyboard rows in small mobile viewports.
*
* @cssprop --omni-keyboard-mobile-small-action-button-height - Height for keyboard call to action button in small mobile viewports.
* @cssprop --omni-keyboard-mobile-small-action-button-max-width - Max width for keyboard call to action button in small mobile viewports.
*/
export declare class Keyboard extends OmniElement {
/**
* The rule for the Keyboard to attach to inputs for showing on component focus.
* * `all` - The Keyboard will show on focus for all input related components unless opted out with `data-omni-keyboard-hidden` on the component.
* * `attribute` - The Keyboard will only show on focus for input related components with the `data-omni-keyboard-attach` attribute
* * `id` - The Keyboard will only show on focus for input related components with the `data-omni-keyboard-attach` attribute set equal to the Keyboard's id
* @attr [attach-mode="all"]
*/
attachMode: 'all' | 'attribute' | 'id';
/**
* The text label to display by the close button.
* @attr [close-label="Close"]
*/
closeLabel: string;
/**
* The text label to display on the spacebar button.
* @attr [space-label="Space"]
*/
spaceLabel: string;
/**
* The text label to display on the clear button. The `clear` slot takes precedence over this label.
* @attr [clear-label="Clear"]
*/
clearLabel: string;
/**
* The text label to display on the call to action button when `enterkeyhint` is not defined or `enterkeyhint="enter"`. The `action-enter` slot takes precedence over this label.
* @attr [action-label="Enter"]
*/
actionLabel: string;
private mode;
private currentCase;
private state;
private target?;
private targetObserver?;
private targetComponent?;
private targetComponentObserver?;
private returnMode;
private focusNodes;
private get displayValue();
private get displayCase();
private get currentEnterKeyHint();
private globalClick;
private globalFocus;
/**
* Initialises the component.
*
* @hideconstructor
*/
constructor();
/**
* Creates a new Keyboard element with the provided context and appends it to the DOM (either to document body or to provided target parent element).
* @param init Initialisation context for Keyboard element that will be created.
* @returns Keyboard element that was created.
*/
static create(init: KeyboardInit): Keyboard | undefined;
connectedCallback(): void;
disconnectedCallback(): void;
/**
* Handles closing of the Keyboard component
*
* @ignore
*/
_close(raiseChange?: boolean, nextFocus?: boolean): void;
/**
* Focuses the next highest tabIndex from the previous element's tabIndex. If `reverse` is true, will focus the next smallest tabIndex instead.
*
* @ignore
*/
_focusNext(fromInput: Element, reverse?: boolean): {
element: HTMLElement;
tabIndex: number;
} | null;
_findNextTabIndex(elem: Element, searchingElem: Element, tidx: number, reverse: boolean, foundNext: {
element: HTMLElement;
tabIndex: number;
} | null): {
element: HTMLElement;
tabIndex: number;
} | null;
_findNextTabIndexInChildren(elem: Element, searchingElem: Element, tidx: number, reverse: boolean, foundNext: {
element: HTMLElement;
tabIndex: number;
} | null): {
element: HTMLElement;
tabIndex: number;
} | null;
/**
* Handles component key down events.
*
* @param event - The event details.
*
* @ignore
*/
_keypress(event: CustomEvent<{
value: string;
}>): Promise;
_globalClick(e: MouseEvent): Promise;
_globalFocus(): void;
/**
* Finds the current innermost active component or element.
* @ignore
*/
_findActiveElement(innerElement?: boolean): Element | null;
_toggleCase(): void;
_toggleState(): void;
static get styles(): import("lit").CSSResultGroup[];
protected render(): TemplateResult | typeof nothing;
renderCaps(): TemplateResult<1> | typeof nothing;
renderClose(): TemplateResult<1>;
renderBackspace(): TemplateResult<1>;
renderClear(mode?: 'return' | 'numeric'): TemplateResult<1>;
renderCallToAction(extraClasses?: ClassInfo | undefined): TemplateResult<1>;
}
/**
* Indicates that the Keyboard display value must be masked.
*/
export declare const maskAttribute = "data-omni-keyboard-mask";
/**
* Indicates that the call to action button inserts a new line instead of default behaviour.
*/
export declare const multiLineAttribute = "data-omni-keyboard-multi-line";
/**
* Disables the Keyboard for that component.
*/
export declare const hiddenAttribute = "data-omni-keyboard-hidden";
/**
* Disables the Keyboard display value. Takes precedence over `data-omni-keyboard-mask`.
*/
export declare const noDisplayValueAttribute = "data-omni-keyboard-no-display";
/**
* Indicates that the Keyboard is enabled for that component when the Keyboard has `attach-mode="attribute"` or when the value is equal to the Keyboard's id and `attach-mode="id"`.
*/
export declare const attachAttribute = "data-omni-keyboard-attach";
/**
* Indicates that the Keyboard is to render in specified type of inputmode. Takes precedence over `inputmode` attribute.
*/
export declare const explicitKeyboardMode = "data-omni-keyboard-mode";
export type InputMode = 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
export type InputEventTypes = 'insertText' | 'insertReplacementText' | 'insertLineBreak' | 'insertParagraph' | 'insertOrderedList' | 'insertUnorderedList' | 'insertHorizontalRule' | 'insertFromYank' | 'insertFromDrop' | 'insertFromPaste' | 'insertFromPasteAsQuotation' | 'insertTranspose' | 'insertCompositionText' | 'insertLink' | 'deleteWordBackward' | 'deleteWordForward' | 'deleteSoftLineBackward' | 'deleteSoftLineForward' | 'deleteEntireSoftLine' | 'deleteHardLineBackward' | 'deleteHardLineForward' | 'deleteByDrag' | 'deleteByCut' | 'deleteContent' | 'deleteContentBackward' | 'deleteContentForward' | 'historyUndo' | 'historyRedo' | 'formatBold' | 'formatItalic' | 'formatUnderline' | 'formatStrikeThrough' | 'formatSuperscript' | 'formatSubscript' | 'formatJustifyFull' | 'formatJustifyCenter' | 'formatJustifyRight' | 'formatJustifyLeft' | 'formatIndent' | 'formatOutdent' | 'formatRemove' | 'formatSetBlockTextDirection' | 'formatSetInlineTextDirection' | 'formatBackColor' | 'formatFontColor' | 'formatFontName';
export type EnterKeyHint = 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send' | undefined;
export type KeyboardMode = 'numeric' | 'alpha-numeric' | 'none';
export type InputEventInitWithType = InputEventInit | {
inputType: InputEventTypes;
};
export type KeyboardInit = {
/**
* The id to apply to the Keyboard elements.
*/
id?: string;
/**
* The container to append the Keyboard as child. If not provided will append to a new div element on the document body.
*/
parent?: string | HTMLElement | DocumentFragment | null;
/**
* The rule for the Keyboard to attach to inputs for showing on component focus.
* * `all` - The Keyboard will show on focus for all input related components unless opted out with `data-omni-keyboard-hidden` on the component.
* * `attribute` - The Keyboard will only show on focus for input related components with the `data-omni-keyboard-attach` attribute.
* * `id` - The Keyboard will only show on focus for input related components with the `data-omni-keyboard-attach` attribute set equal to the Keyboard's id
*/
attachMode?: 'all' | 'attribute' | 'id';
/**
* The text label to display by the close button.
*/
closeLabel?: string;
/**
* The text label to display on the spacebar button.
*/
spaceLabel?: string;
/**
* The text label to display on the clear button. The `clear` slot takes precedence over this label.
*/
clearLabel?: string;
/**
* The text label to display on the call to action button when `enterkeyhint` is not defined or `enterkeyhint="enter"`. The `action-enter` slot takes precedence over this label.
*/
actionLabel?: string;
/**
* A function that returns content to render within the 'clear' slot
*/
clear?: RenderFunction;
/**
* A function that returns content to render within the 'caps-off' slot
*/
capsOff?: RenderFunction;
/**
* A function that returns content to render within the 'caps-on' slot
*/
capsOn?: RenderFunction;
/**
* A function that returns content to render within the 'caps-lock' slot
*/
capsLock?: RenderFunction;
/**
* A function that returns content to render within the 'backspace' slot
*/
backspace?: RenderFunction;
/**
* A function that returns content to render within the 'close' slot
*/
close?: RenderFunction;
/**
* A function that returns content to render within the 'action-enter' slot
*/
actionEnter?: RenderFunction;
/**
* A function that returns content to render within the 'action-done' slot
*/
actionDone?: RenderFunction;
/**
* A function that returns content to render within the 'action-go' slot
*/
actionGo?: RenderFunction;
/**
* A function that returns content to render within the 'action-next' slot
*/
actionNext?: RenderFunction;
/**
* A function that returns content to render within the 'action-previous' slot
*/
actionPrevious?: RenderFunction;
/**
* A function that returns content to render within the 'action-search' slot
*/
actionSearch?: RenderFunction;
/**
* A function that returns content to render within the 'action-send' slot
*/
actionSend?: RenderFunction;
};
declare global {
interface HTMLElementTagNameMap {
'omni-keyboard': Keyboard;
}
}
//# sourceMappingURL=Keyboard.d.ts.map