@refinitiv-ui/elements 5.12.0-alpha.0 → 5.12.0

package/lib/notification/helpers/types.d.ts

@@ -0,0 +1,10 @@
+import type { Notification } from '../elements/notification';
+export declare type Task = {
+    el: Notification;
+    options: TaskOptions;
+};
+export declare type TaskOptions = {
+    message: string;
+    type: string;
+    duration: number;
+};

package/lib/notification/helpers/types.js

@@ -0,0 +1 @@
+export {};

package/lib/notification/index.d.ts

@@ -0,0 +1,2 @@
+export * from './elements/notification.js';
+export { info, confirm, warn, error } from './helpers/status.js';

package/lib/notification/index.js

@@ -0,0 +1,2 @@
+export * from './elements/notification.js';
+export { info, confirm, warn, error } from './helpers/status.js';

package/lib/notification/themes/halo/dark/index.js

@@ -0,0 +1,5 @@
+import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
+
+elf.customStyles.define('ef-notification-tray', ':host{--max:1;--default-timeout:5000;display:flex;flex-flow:column nowrap;justify-content:flex-end}:host([attach]){position:fixed;z-index:100000}:host([attach=top]){top:0;left:0;right:0}:host([attach=right]){top:0;right:0;bottom:0}:host([attach=bottom]){left:0;right:0;bottom:0}:host([attach=left]){top:0;left:0;bottom:0}');
+
+elf.customStyles.define('ef-notification', ':host{touch-action:manipulation;perspective:2000px;position:relative;height:var(--bar-height,3em);overflow:hidden;display:flex;align-items:center;text-align:center;color:var(--color,#ccc);-webkit-animation:.2s forwards notification-open;animation:.2s forwards notification-open;--bar-height:44px;font-size:14px;color:var(--color,#fff)}:host [part=container]{height:var(--bar-height,3em);width:100%;position:relative;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:var(--background-color,#007678);-webkit-animation:.2s notification-container-open;animation:.2s notification-container-open;padding:12px 16px}:host [part=container]::before{content:\'\';display:block;position:absolute;top:0;right:0;bottom:0;width:3em;opacity:0;transition:opacity .2s;color:var(--background-color,#007678);background:currentColor;box-shadow:0 0 1em 1em currentColor}:host [part=content]{width:100%;text-align:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:20px}:host [part=clear]{touch-action:manipulation;margin:auto;display:block;position:absolute;width:20px;height:20px;right:.75em;top:0;bottom:0;opacity:0;transition:opacity .2s;opacity:.4}:host(:hover) [part=clear],:host(:hover) [part=container]::before{opacity:1}:host([confirm]){--background-color:#227542}:host([warning]){--background-color:#7F6400}:host([error]){--background-color:#A01C2B}:host([collapsed]){-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:notification-close;animation-name:notification-close}:host([collapsed]) [part=container]{-webkit-animation-name:notification-container-close;animation-name:notification-container-close}:host([collapsed]) [part=clear],:host([collapsed]) [part=container]::before{opacity:0}@-webkit-keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@-webkit-keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@-webkit-keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@-webkit-keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}@keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}:host [part=content] ::slotted(a){color:inherit!important;text-decoration:underline!important}:host [part=content] ::slotted(a:hover){cursor:pointer!important;-webkit-text-decoration-color:inherit!important;text-decoration-color:inherit!important}');

package/lib/notification/themes/halo/light/index.js

@@ -0,0 +1,5 @@
+import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
+
+elf.customStyles.define('ef-notification-tray', ':host{--max:1;--default-timeout:5000;display:flex;flex-flow:column nowrap;justify-content:flex-end}:host([attach]){position:fixed;z-index:100000}:host([attach=top]){top:0;left:0;right:0}:host([attach=right]){top:0;right:0;bottom:0}:host([attach=bottom]){left:0;right:0;bottom:0}:host([attach=left]){top:0;left:0;bottom:0}');
+
+elf.customStyles.define('ef-notification', ':host{touch-action:manipulation;perspective:2000px;position:relative;height:var(--bar-height,3em);overflow:hidden;display:flex;align-items:center;text-align:center;color:var(--color,#0d0d0d);-webkit-animation:.2s forwards notification-open;animation:.2s forwards notification-open;--bar-height:44px;font-size:14px;color:var(--color,#fff)}:host [part=container]{height:var(--bar-height,3em);width:100%;position:relative;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:var(--background-color,#007678);-webkit-animation:.2s notification-container-open;animation:.2s notification-container-open;padding:12px 16px}:host [part=container]::before{content:\'\';display:block;position:absolute;top:0;right:0;bottom:0;width:3em;opacity:0;transition:opacity .2s;color:var(--background-color,#007678);background:currentColor;box-shadow:0 0 1em 1em currentColor}:host [part=content]{width:100%;text-align:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:20px}:host [part=clear]{touch-action:manipulation;margin:auto;display:block;position:absolute;width:20px;height:20px;right:.75em;top:0;bottom:0;opacity:0;transition:opacity .2s;opacity:.4}:host(:hover) [part=clear],:host(:hover) [part=container]::before{opacity:1}:host([confirm]){--background-color:#246B3E}:host([warning]){--background-color:#CCA000;color:#0d0d0d}:host([error]){--background-color:#B63243}:host([collapsed]){-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:notification-close;animation-name:notification-close}:host([collapsed]) [part=container]{-webkit-animation-name:notification-container-close;animation-name:notification-container-close}:host([collapsed]) [part=clear],:host([collapsed]) [part=container]::before{opacity:0}@-webkit-keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@-webkit-keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@-webkit-keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@-webkit-keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}@keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}:host [part=content] ::slotted(a){color:inherit!important;text-decoration:underline!important}:host [part=content] ::slotted(a:hover){cursor:pointer!important;-webkit-text-decoration-color:inherit!important;text-decoration-color:inherit!important}');

package/lib/notification/themes/solar/charcoal/index.js

@@ -0,0 +1,5 @@
+import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
+
+elf.customStyles.define('ef-notification-tray', ':host{--max:1;--default-timeout:5000;display:flex;flex-flow:column nowrap;justify-content:flex-end}:host([attach]){position:fixed;z-index:100000}:host([attach=top]){top:0;left:0;right:0}:host([attach=right]){top:0;right:0;bottom:0}:host([attach=bottom]){left:0;right:0;bottom:0}:host([attach=left]){top:0;left:0;bottom:0}');
+
+elf.customStyles.define('ef-notification', ':host{touch-action:manipulation;perspective:2000px;position:relative;height:var(--bar-height,3em);overflow:hidden;display:flex;align-items:center;text-align:center;color:var(--color,#c2c2c2);-webkit-animation:.4s forwards notification-open;animation:.4s forwards notification-open;--bar-height:30px;--background-color:#295e8c;color:#fff}:host [part=container]{height:var(--bar-height,3em);width:100%;position:relative;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:6px 27px 6px 10px;background-color:var(--background-color,#19aaee);-webkit-animation:.4s notification-container-open;animation:.4s notification-container-open}:host [part=container]::before{content:\'\';display:block;position:absolute;top:0;right:0;bottom:0;width:3em;opacity:0;transition:opacity .2s;color:var(--background-color,#19aaee);background:currentColor;box-shadow:0 0 1em 1em currentColor}:host [part=content]{width:100%;text-align:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host [part=clear]{touch-action:manipulation;margin:auto;display:block;position:absolute;top:0;bottom:0;opacity:0;transition:opacity .2s;right:.5em;width:16px;height:16px;stroke-width:1.5px;opacity:1}:host(:hover) [part=clear],:host(:hover) [part=container]::before{opacity:1}:host([confirm]){--background-color:#2ec57e;--background-color:#237843}:host([warning]){--background-color:#FF9933;--background-color:#cc7f33}:host([error]){--background-color:#F5475B;--background-color:#a8313f}:host([collapsed]){-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:notification-close;animation-name:notification-close}:host([collapsed]) [part=container]{-webkit-animation-name:notification-container-close;animation-name:notification-container-close}:host([collapsed]) [part=clear],:host([collapsed]) [part=container]::before{opacity:0}@-webkit-keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@-webkit-keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@-webkit-keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@-webkit-keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}@keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}:host [part=content] ::slotted(a){color:inherit!important;text-decoration:underline!important}:host [part=content] ::slotted(a:hover){cursor:pointer!important;-webkit-text-decoration-color:inherit!important;text-decoration-color:inherit!important}');

package/lib/notification/themes/solar/pearl/index.js

@@ -0,0 +1,5 @@
+import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
+
+elf.customStyles.define('ef-notification-tray', ':host{--max:1;--default-timeout:5000;display:flex;flex-flow:column nowrap;justify-content:flex-end}:host([attach]){position:fixed;z-index:100000}:host([attach=top]){top:0;left:0;right:0}:host([attach=right]){top:0;right:0;bottom:0}:host([attach=bottom]){left:0;right:0;bottom:0}:host([attach=left]){top:0;left:0;bottom:0}');
+
+elf.customStyles.define('ef-notification', ':host{touch-action:manipulation;perspective:2000px;position:relative;height:var(--bar-height,3em);overflow:hidden;display:flex;align-items:center;text-align:center;color:var(--color,#505050);-webkit-animation:.4s forwards notification-open;animation:.4s forwards notification-open;--bar-height:30px;--background-color:#295e8c;color:#fff}:host [part=container]{height:var(--bar-height,3em);width:100%;position:relative;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:6px 27px 6px 10px;background-color:var(--background-color,#19aaee);-webkit-animation:.4s notification-container-open;animation:.4s notification-container-open}:host [part=container]::before{content:\'\';display:block;position:absolute;top:0;right:0;bottom:0;width:3em;opacity:0;transition:opacity .2s;color:var(--background-color,#19aaee);background:currentColor;box-shadow:0 0 1em 1em currentColor}:host [part=content]{width:100%;text-align:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host [part=clear]{touch-action:manipulation;margin:auto;display:block;position:absolute;top:0;bottom:0;opacity:0;transition:opacity .2s;right:.5em;width:16px;height:16px;stroke-width:1.5px;opacity:1}:host(:hover) [part=clear],:host(:hover) [part=container]::before{opacity:1}:host([confirm]){--background-color:#2ec57e;--background-color:#237843}:host([warning]){--background-color:#FF9933;--background-color:#cc7f33}:host([error]){--background-color:#D94255;--background-color:#a8313f}:host([collapsed]){-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:notification-close;animation-name:notification-close}:host([collapsed]) [part=container]{-webkit-animation-name:notification-container-close;animation-name:notification-container-close}:host([collapsed]) [part=clear],:host([collapsed]) [part=container]::before{opacity:0}@-webkit-keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@keyframes notification-open{from{height:0}to{height:var(--bar-height,3em)}}@-webkit-keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@keyframes notification-close{from{height:var(--bar-height,3em)}to{height:0}}@-webkit-keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@keyframes notification-container-open{0%{opacity:.1;transform:rotateX(-90deg)}100%,80%,90%{opacity:1;transform:rotateX(0)}}@-webkit-keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}@keyframes notification-container-close{from{opacity:1;transform:rotateX(0)}to{transform:rotateX(90deg)}}:host [part=content] ::slotted(a){color:inherit!important;text-decoration:underline!important}:host [part=content] ::slotted(a:hover){cursor:pointer!important;-webkit-text-decoration-color:inherit!important;text-decoration-color:inherit!important}');

package/lib/number-field/index.d.ts

@@ -0,0 +1,339 @@
+import { JSXInterface } from '../jsx';
+import { FormFieldElement, CSSResultGroup, TemplateResult, PropertyValues, TapEvent } from '@refinitiv-ui/core';
+import { TemplateMap } from '@refinitiv-ui/core/lib/directives/template-map.js';
+import '../icon/index.js';
+declare type SelectionDirection = 'forward' | 'backward' | 'none';
+declare enum Direction {
+    Up = 1,
+    Down = -1
+}
+/**
+ * Form control element for numbers.
+ *
+ * @fires value-changed - Dispatched when value changes
+ * @fires error-changed - Dispatched when error state changes
+ *
+ * @attr {boolean} disabled - Set disabled state
+ * @prop {boolean} [disabled=false] - Set disabled state
+ *
+ * @attr {boolean} error - Set error state
+ * @prop {boolean} [error=false] - Set error state
+ *
+ * @attr {string} placeholder - Set placeholder text
+ * @prop {string} [placeholder=""] - Set placeholder text
+ *
+ * @attr {boolean} readonly - Set readonly state
+ * @prop {boolean} [readonly=false] - Set readonly state
+ *
+ * @attr {boolean} transparent - Disables all other states and border/background styles.
+ * @prop {boolean} [transparent=false] - Disables all other states and border/background styles.
+ *
+ * @attr {boolean} warning - Set warning state
+ * @prop {boolean} [warning=false] - Set warning state
+ *
+ * @attr {string} value - Input's value
+ * @prop {string} [value=""] - Input's value
+ */
+export declare class NumberField extends FormFieldElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * A `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @return CSS template
+     */
+    static get styles(): CSSResultGroup;
+    /**
+     * Set spinner's visibility
+     */
+    noSpinner: boolean;
+    /**
+     * Set step value
+     */
+    step: string | null;
+    /**
+     * Set minimum value.
+     * This value must be less than or equal to the value of the `max` attribute
+     */
+    min: string | null;
+    /**
+     * Set maximum value.
+     * This value must be greater than or equal to the value of the `min` attribute
+     */
+    max: string | null;
+    private interimValueState;
+    /**
+    * The value of the number entered into the input.
+    * @param value number-field value
+    * @default -
+    */
+    set value(value: string);
+    get value(): string;
+    /**
+     * Returns the value of the element, interpreted as double number
+     */
+    get valueAsNumber(): number;
+    /**
+     * Get spinner up element
+     */
+    private spinnerUpEl?;
+    /**
+    * Get spinner down element
+    */
+    private spinnerDownEl?;
+    /**
+     * Updates the element
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
+    protected update(changedProperties: PropertyValues): void;
+    /**
+     * Called when the element’s DOM has been updated and rendered
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
+    protected updated(changedProperties: PropertyValues): void;
+    /**
+     * Convert string to number
+     * @param value value to convert
+     * @returns NaN if string is an invalid number or Infinity or empty string;
+     */
+    private stringToNumber;
+    /**
+     * Convert a float number to a fixed number
+     * @param value Value to convert
+     * @param [decimals] optional decimals. Default is based on step base and allowed value step
+     * @returns fixed number
+     */
+    private toFixedNumber;
+    /**
+     * Convert step value from string to number or 'any'
+     * @returns step value of input as a number or 'any'
+     */
+    private get stepValue();
+    /**
+     * Get the number of decimal places
+     * @param value Value to check
+     * @returns the number of decimal places
+     */
+    private getDecimalPlace;
+    /**
+     * Get number of decimals based on step base and allowed value step
+     * @returns decimals
+     */
+    private get stepDecimals();
+    /**
+     * Check if passed value is a valid value
+     * @override
+     * @param value Value to check
+     * @returns {boolean} false if value is invalid
+     */
+    protected isValidValue(value: string): boolean;
+    /**
+     * Get value as valid number string.
+     * @param value A value to convert
+     * @returns string value
+     */
+    private valueAsNumberString;
+    /**
+     * Get either inputValue or actual value dependant on control state
+     * @returns string of input value
+     */
+    private get internalValue();
+    /**
+     * Handles key down input event
+     * @param event Key down event object
+     * @returns {void}
+     */
+    protected onInputKeyDown(event: KeyboardEvent): void;
+    /**
+     * Run when spinner has been tapped
+     * @param event tap event
+     * @returns {void}
+     */
+    protected onSpinnerTap(event: TapEvent): void;
+    /**
+     * Step down or up and notify value change
+     * @param direction Up or Down
+     * @returns {void}
+     */
+    protected onApplyStep(direction: Direction): void;
+    /**
+     * Run before input changes
+     * Prevent invalid characters
+     * @param event before input event
+     * @returns {void}
+     */
+    protected onBeforeInputChange(event: InputEvent): void;
+    /**
+     * Runs on input element `input` event
+     * @param event `input` event
+     * @returns {void}
+     */
+    protected onInputInput(event: InputEvent): void;
+    /**
+     * Runs on input element `change` event
+     * @param event `change` event
+     * @returns {void}
+     */
+    protected onInputChange(event: InputEvent): void;
+    /**
+     * Triggers when native input value change with input event or change event
+     * @param event Input event
+     * @returns {void}
+     */
+    protected onNativeInputChange(event: InputEvent): void;
+    /**
+     * Stripe characters from input text based on previous input and data
+     * @param input The new input to process
+     * @param oldInput Previous input
+     * @param data The data that has been inserted
+     * @returns the input where characters are striped away
+     */
+    private stripeInvalidCharacters;
+    /**
+     * On *user-interaction* set the value and notify.
+     * This function will not call request update, but will fire value-changed event
+     * @returns {void}
+     */
+    private setSilentlyValueAndNotify;
+    /**
+     * Reset error state on input
+     * @returns {void}
+     */
+    private resetError;
+    /**
+     * Get the allowed step value
+     * @returns allowed step
+     */
+    private getAllowedValueStep;
+    /**
+     * Get the step base as per HTML5 specs
+     * @returns step base
+     */
+    private get stepBase();
+    /**
+     * Check if value subtracted from the step base is not an integral multiple of the allowed value step
+     * @param value value to check
+     * @returns true if value is integral
+     */
+    private isValueIntegralMultipleOfStep;
+    /**
+     * Find the nearest value that, when subtracted from the `stepBase`
+     * is an integral multiple of the `allowedValueStep`,
+     * and that is less than `value` if the `direction` was `Down`, and more than value otherwise.
+     * @param value the value to operate on
+     * @param stepBase base to start calculation
+     * @param allowedValueStep a step to go Down or Up
+     * @param direction Direction, either -1 for Down or 1 for Up
+     * @returns nearest number
+     */
+    private findNearestSteppedValue;
+    /**
+     * Apply step up or step down on the input
+     * @param stepIncrement step increment factor
+     * @param direction either go up or down
+     * @returns {void}
+     */
+    private applyStepDirection;
+    /**
+     * Increases the input value by amount of step
+     * @param [stepIncrement] The stepIncrement parameter is a numeric value. If no parameter is passed, stepIncrement defaults to 1.
+     * @returns {void}
+     */
+    stepUp(stepIncrement?: number): void;
+    /**
+     * Decreases the input value by amount of step
+     * @param [stepIncrement] The stepIncrement parameter is a numeric value. If no parameter is passed, stepIncrement defaults to 1.
+     * @returns {void}
+     */
+    stepDown(stepIncrement?: number): void;
+    /**
+     * Returns true if an input element contains valid data.
+     * @returns true if input is valid
+     */
+    checkValidity(): boolean;
+    /**
+     * Validate input. Mark as error if input is invalid
+     * @returns false if there is an error
+     */
+    reportValidity(): boolean;
+    /**
+     * @ignore
+     * @inheritDoc
+     */
+    get selectionStart(): number | null;
+    /**
+     * @ignore
+     * @inheritDoc
+     */
+    set selectionStart(index: number | null);
+    /**
+     * @ignore
+     * @inheritDoc
+     */
+    get selectionEnd(): number | null;
+    /**
+     * @ignore
+     * @inheritDoc
+     */
+    set selectionEnd(index: number | null);
+    /**
+     * @ignore
+     * @inheritDoc
+     */
+    get selectionDirection(): SelectionDirection | null;
+    /**
+     * @ignore
+     * @inheritDoc
+     */
+    set selectionDirection(direction: SelectionDirection | null);
+    /**
+     * @ignore
+     * @inheritDoc
+     */
+    setSelectionRange(startSelection: number | null, endSelection: number | null, selectionDirection?: SelectionDirection): void;
+    /**
+     * Renders spinner
+     * @returns {TemplateResult} spinner part template
+     */
+    protected renderSpinner(): TemplateResult;
+    /**
+     * Decorate `<input>` element with common properties extended from form field element:
+     * type="text" - always `text`
+     * part="input" - always "input", used for styling
+     * inputmode="decimal" - show decimals keyboard by default
+     * pattern="'^[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?$'" - numbers only
+     * role="spinbutton" - number field is actually a spinner
+     * aria-valuenow - current value or 0
+     * @keydown - Listener for `keydown` event. Runs `this.onInputKeyDown`
+     * @beforeinput - Listener for `beforeinput` event. Runs `this.onBeforeInputChange`
+     * @returns template map
+     */
+    protected get decorateInputMap(): TemplateMap;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return {TemplateResult}  Render template
+     */
+    protected render(): TemplateResult;
+}
+export {};
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-number-field': NumberField;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-number-field': Partial<NumberField> | JSXInterface.HTMLAttributes<NumberField>;
+    }
+  }
+}
+
+export {};