@refinitiv-ui/elements 5.6.0 → 5.8.2-alpha.0

package/lib/number-field/index.js

@@ -1,9 +1,8 @@
 import { __decorate } from "tslib";
-import { ControlElement, html, css, FocusedPropertyKey } from '@refinitiv-ui/core';
+import { FormFieldElement, html, css, FocusedPropertyKey } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
 import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
-import { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
 import { VERSION } from '../version.js';
 import '../icon/index.js';
 const NUMBER_PATTERN = '^[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?$';
@@ -15,27 +14,35 @@ var Direction;
     Direction[Direction["Down"] = -1] = "Down";
 })(Direction || (Direction = {}));
 /**
- * Form control element for numbers
+ * Form control element for numbers.
  *
  * @fires value-changed - Dispatched when value changes
  * @fires error-changed - Dispatched when error state changes
  *
- * @attr {string} value - Input's default value
- * @prop {string} [value=] - Input's value
+ * @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} disabled - Set disabled state
- * @prop {boolean} [disabled=false] - Set disabled 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
  */
-let NumberField = class NumberField extends ControlElement {
+let NumberField = class NumberField extends FormFieldElement {
     constructor() {
         super(...arguments);
-        /**
-         * Set placeholder text
-         */
-        this.placeholder = null;
         /**
          * Set spinner's visibility
          */
@@ -54,18 +61,6 @@ let NumberField = class NumberField extends ControlElement {
          * This value must be greater than or equal to the value of the `min` attribute
          */
         this.max = null;
-        /**
-         * Set state to transparent
-         */
-        this.transparent = false;
-        /**
-         * Set state to error
-         */
-        this.error = false;
-        /**
-         * Set state to warning
-         */
-        this.warning = false;
         this.interimValueState = false; // make sure that internal input field value is updated only on external value change
     }
     /**
@@ -119,6 +114,7 @@ let NumberField = class NumberField extends ControlElement {
     /**
     * The value of the number entered into the input.
     * @param value number-field value
+    * @default -
     */
     set value(value) {
         this.interimValueState = true;
@@ -231,28 +227,14 @@ let NumberField = class NumberField extends ControlElement {
      */
     get internalValue() {
         // cover the case when value getter is called before first render or in interim state
-        return this.interimValueState || !this.inputEl ? super.value : this.inputValue;
-    }
-    /**
-     * Get native input value
-     * @returns string of input value
-     */
-    get inputValue() {
-        return this.inputEl.value;
-    }
-    /**
-     * Set native input value
-     * @param value input's value
-     */
-    set inputValue(value) {
-        this.inputEl.value = value;
+        return this.interimValueState || !this.inputElement ? super.value : this.inputValue;
     }
     /**
      * Handles key down input event
      * @param event Key down event object
      * @returns {void}
      */
-    onNativeInputKeyDown(event) {
+    onInputKeyDown(event) {
         if (this.readonly || this.disabled || event.defaultPrevented) {
             return;
         }
@@ -309,7 +291,7 @@ let NumberField = class NumberField extends ControlElement {
      * @returns {void}
      */
     /* istanbul ignore next */
-    onNativeBeforeInputChange(event) {
+    onBeforeInputChange(event) {
         // The event is not supported in IE11 and old browsers
         // Therefore just try to prevent some of invalid characters to be entered
         // but still do full validation on actual `input` and `change` events
@@ -317,7 +299,8 @@ let NumberField = class NumberField extends ControlElement {
         // cover all insert types, such as type, paste, drag&drop and others
         if (inputType.startsWith('insert')) {
             const data = event.data || '';
-            const inputEl = this.inputEl;
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            const inputEl = this.inputElement;
             const oldInput = this.inputValue;
             // Calculate what could be the new input
             const selectionStart = inputEl.selectionStart || 0;
@@ -337,6 +320,22 @@ let NumberField = class NumberField extends ControlElement {
             }
         }
     }
+    /**
+     * Runs on input element `input` event
+     * @param event `input` event
+     * @returns {void}
+     */
+    onInputInput(event) {
+        this.onNativeInputChange(event);
+    }
+    /**
+     * Runs on input element `change` event
+     * @param event `change` event
+     * @returns {void}
+     */
+    onInputChange(event) {
+        this.onNativeInputChange(event);
+    }
     /**
      * Triggers when native input value change with input event or change event
      * @param event Input event
@@ -346,7 +345,8 @@ let NumberField = class NumberField extends ControlElement {
         const currentInput = this.inputValue;
         const inputValue = this.stripeInvalidCharacters(currentInput, this.value, event.data || '');
         if (inputValue !== currentInput) {
-            const inputEl = this.inputEl;
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            const inputEl = this.inputElement;
             // we can only stripe the characters, so try to make the best guess where the cursor should be
             const selectionStart = inputEl.selectionStart || 0;
             const selectionEnd = inputEl.selectionEnd || 0;
@@ -606,13 +606,60 @@ let NumberField = class NumberField extends ControlElement {
         return !hasError;
     }
     /**
-     * Select the contents of input
-     * @returns void
+     * @ignore
+     * @inheritDoc
      */
-    select() {
-        if (!this.disabled) {
-            this.inputEl && this.inputEl.select();
-        }
+    /* istanbul ignore next */
+    get selectionStart() {
+        return null;
+    }
+    /**
+     * @ignore
+     * @inheritDoc
+     */
+    /* istanbul ignore next */
+    set selectionStart(index) {
+        throw new Error('Failed to set the \'selectionStart\' property on \'NumberField\': The element does not support selection.');
+    }
+    /**
+     * @ignore
+     * @inheritDoc
+     */
+    /* istanbul ignore next */
+    get selectionEnd() {
+        return null;
+    }
+    /**
+     * @ignore
+     * @inheritDoc
+     */
+    /* istanbul ignore next */
+    set selectionEnd(index) {
+        throw new Error('Failed to set the \'selectionEnd\' property on \'NumberField\': The element does not support selection.');
+    }
+    /**
+     * @ignore
+     * @inheritDoc
+     */
+    /* istanbul ignore next */
+    get selectionDirection() {
+        return null;
+    }
+    /**
+     * @ignore
+     * @inheritDoc
+     */
+    /* istanbul ignore next */
+    set selectionDirection(direction) {
+        throw new Error('Failed to set the \'selectionDirection\' property on \'NumberField\': The element does not support selection.');
+    }
+    /**
+     * @ignore
+     * @inheritDoc
+     */
+    /* istanbul ignore next */
+    setSelectionRange(startSelection, endSelection, selectionDirection) {
+        throw new Error('Failed to execute \'setSelectionRange\' on \'NumberField\': The element does not support selection.');
     }
     /**
      * Renders spinner
@@ -638,6 +685,21 @@ let NumberField = class NumberField extends ControlElement {
       </div>
     `;
     }
+    /**
+     * 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
+     */
+    get decorateInputMap() {
+        return Object.assign(Object.assign({}, super.decorateInputMap), { 'type': 'text', 'part': 'input', 'inputmode': 'decimal', 'pattern': NUMBER_PATTERN, 'role': 'spinbutton', 'aria-valuenow': `${this.value || 0}`, '@keydown': this.onInputKeyDown, '@beforeinput': this.onBeforeInputChange });
+    }
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.
@@ -645,27 +707,10 @@ let NumberField = class NumberField extends ControlElement {
      */
     render() {
         return html `
-      <input
-        part="input"
-        type="text"
-        inputmode="decimal"
-        pattern="${NUMBER_PATTERN}"
-        ?readonly=${this.readonly}
-        ?disabled=${this.disabled}
-        placeholder=${ifDefined(this.placeholder ? this.placeholder : undefined)}
-        @input="${this.onNativeInputChange}"
-        @keydown="${this.onNativeInputKeyDown}"
-        @beforeinput="${this.onNativeBeforeInputChange}"
-        @change="${this.onNativeInputChange}"
-        autocomplete="off"
-      >
-      ${this.noSpinner ? null : this.renderSpinner()}
-      `;
+      ${super.render()}
+      ${this.noSpinner ? null : this.renderSpinner()}`;
     }
 };
-__decorate([
-    property({ type: String, reflect: true })
-], NumberField.prototype, "placeholder", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'no-spinner', reflect: true })
 ], NumberField.prototype, "noSpinner", void 0);
@@ -678,21 +723,9 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true })
 ], NumberField.prototype, "max", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], NumberField.prototype, "transparent", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], NumberField.prototype, "error", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], NumberField.prototype, "warning", void 0);
 __decorate([
     property({ type: String })
 ], NumberField.prototype, "value", null);
-__decorate([
-    query('[part=input]')
-], NumberField.prototype, "inputEl", void 0);
 __decorate([
     query('[part=spinner-up]')
 ], NumberField.prototype, "spinnerUpEl", void 0);

package/lib/overlay/custom-elements.json

@@ -31,23 +31,28 @@
         },
         {
           "name": "transition-style",
-          "description": "Set the transition style"
+          "description": "Set the transition style",
+          "type": "TransitionStyle|null|undefined"
         },
         {
           "name": "z-index",
-          "description": "Set a preferable z-index to override automatically calculated z-index"
+          "description": "Set a preferable z-index to override automatically calculated z-index",
+          "type": "number|null|undefined"
         },
         {
           "name": "x",
-          "description": "Set a specific x coordinate"
+          "description": "Set a specific x coordinate",
+          "type": "number|null|undefined"
         },
         {
           "name": "y",
-          "description": "Set a specific y coordinate"
+          "description": "Set a specific y coordinate",
+          "type": "number|null|undefined"
         },
         {
           "name": "position-target",
-          "description": "Set the position target as follows:\n- HTMLElement if overlay is position next to the HTML element\n- String containing `top`, `right`, `left`, `bottom`, `center` combinations to position against the screen.\nFor instance: `top left` - put the overlay at `top left` point of the screen; `bottom` - put overlay at `bottom center` point of the screen"
+          "description": "Set the position target as follows:\n- HTMLElement if overlay is position next to the HTML element\n- String containing `top`, `right`, `left`, `bottom`, `center` combinations to position against the screen.\nFor instance: `top left` - put the overlay at `top left` point of the screen; `bottom` - put overlay at `bottom center` point of the screen",
+          "type": "PositionTarget|null|undefined"
         },
         {
           "name": "horizontal-offset",
@@ -159,27 +164,32 @@
         {
           "name": "transitionStyle",
           "attribute": "transition-style",
-          "description": "Set the transition style"
+          "description": "Set the transition style",
+          "type": "TransitionStyle|null|undefined"
         },
         {
           "name": "zIndex",
           "attribute": "z-index",
-          "description": "Set a preferable z-index to override automatically calculated z-index"
+          "description": "Set a preferable z-index to override automatically calculated z-index",
+          "type": "number|null|undefined"
         },
         {
           "name": "x",
           "attribute": "x",
-          "description": "Set a specific x coordinate"
+          "description": "Set a specific x coordinate",
+          "type": "number|null|undefined"
         },
         {
           "name": "y",
           "attribute": "y",
-          "description": "Set a specific y coordinate"
+          "description": "Set a specific y coordinate",
+          "type": "number|null|undefined"
         },
         {
           "name": "positionTarget",
           "attribute": "position-target",
-          "description": "Set the position target as follows:\n- HTMLElement if overlay is position next to the HTML element\n- String containing `top`, `right`, `left`, `bottom`, `center` combinations to position against the screen.\nFor instance: `top left` - put the overlay at `top left` point of the screen; `bottom` - put overlay at `bottom center` point of the screen"
+          "description": "Set the position target as follows:\n- HTMLElement if overlay is position next to the HTML element\n- String containing `top`, `right`, `left`, `bottom`, `center` combinations to position against the screen.\nFor instance: `top left` - put the overlay at `top left` point of the screen; `bottom` - put overlay at `bottom center` point of the screen",
+          "type": "PositionTarget|null|undefined"
         },
         {
           "name": "horizontalOffset",
@@ -278,7 +288,7 @@
           "type": "{} | undefined"
         },
         {
-          "name": "positionTargetConfig",
+          "name": "positionTargetConfig (readonly)",
           "description": "Get position target configuration based on positionTarget and fullScreen properties\nUsed for caching and calculations"
         },
         {
@@ -287,12 +297,12 @@
           "default": "\"this\""
         },
         {
-          "name": "fullyOpened",
+          "name": "fullyOpened (readonly)",
           "description": "Returns true if the overlay is opened and animation is not running.\nReturns false if overlay is closed and animation is not running",
           "type": "boolean"
         },
         {
-          "name": "transitioning",
+          "name": "transitioning (readonly)",
           "description": "Returns true if overlay is doing opening or closing transition",
           "type": "boolean"
         }
@@ -313,6 +323,9 @@
         {
           "name": "opened-changed",
           "description": "Dispatched when when open attribute changes internally. Prevent default to stop opening/closing pipeline"
+        },
+        {
+          "name": "animationiteration"
         }
       ],
       "methods": [

package/lib/overlay/custom-elements.md

@@ -0,0 +1,54 @@
+# ef-overlay
+
+Element to help building modals, dialogs and other overlay content
+
+## Properties
+
+| Property                          | Attribute                    | Type                               | Default | Description                                      |
+|-----------------------------------|------------------------------|------------------------------------|---------|--------------------------------------------------|
+| `focusBoundary`                   |                              |                                    | "this"  | Set focus boundary to restrict tabbing. Default's overlay itself.<br />If external focus is required, set to null |
+| `fullScreen`                      | `full-screen`                | `boolean`                          | false   | Set to true to show overlay in full screen mode  |
+| `fullyOpened (readonly)`          |                              | `boolean`                          |         | Returns true if the overlay is opened and animation is not running.<br />Returns false if overlay is closed and animation is not running |
+| `horizontalOffset`                | `horizontal-offset`          | `number`                           | 0       | A pixel value that will be added to the position calculated on the horizontal axis.<br />The offset will be applied either to the `left` or `right` depending on the `positionTarget` |
+| `interactiveElements`             |                              | `object`                           | []      | A list of elements, which are active when overlay is opened<br />Valid only if noInteractionLock is false (default) |
+| `lockPositionTarget`              | `lock-position-target`       | `boolean`                          | false   | True to lock position target<br />Valid only if noInteractionLock is false (default) |
+| `noAutofocus`                     | `no-autofocus`               | `boolean`                          | false   | Set to true to disable autofocusing the overlay or open |
+| `noCancelOnEscKey`                | `no-cancel-on-esc-key`       | `boolean`                          | false   | Set to true to disable canceling the overlay with the ESC key |
+| `noCancelOnOutsideClick`          | `no-cancel-on-outside-click` | `boolean`                          | false   | Set to true to disable canceling the overlay by clicking outside it |
+| `noFocusManagement`               | `no-focus-management`        | `boolean`                          | false   | True to not apply focus management.<br />The overlay will not limit Tab behaviour or do auto-focusing |
+| `noInteractionLock`               | `no-interaction-lock`        | `boolean`                          | false   | Stop preventing user interaction when overlay is visible |
+| `noOverlap`                       | `no-overlap`                 | `boolean`                          | false   | True to not overlap positionTarget               |
+| `offset`                          | `offset`                     | `number`                           | 0       | A pixel value that will be added to the position calculated on the vertical or horizontal axis.<br />The offset is applied dynamically depending on the `positionTarget` |
+| `opened`                          | `opened`                     | `boolean`                          | false   | True if the overlay is currently displayed       |
+| `position`                        | `position`                   | `{} \| undefined`                  |         | Set position and align against the attach target.<br />Position may contain a single word or a comma separated list to set the priority.<br />Position is not applied if `attachTarget` is not HTML Element.<br />For instance: `[bottom-middle, top-middle]` - default position is bottom-middle, if cannot fit position top-middle;<br />or `[left, right]` - align is not set, set best position on the left or right<br /><br />Position can be: `top`, `right`, `bottom`, `left`, `center`<br />Align can be: `start`, `middle`, `end` |
+| `positionTarget`                  | `position-target`            | `PositionTarget\|null\|undefined`  |         | Set the position target as follows:<br />- HTMLElement if overlay is position next to the HTML element<br />- String containing `top`, `right`, `left`, `bottom`, `center` combinations to position against the screen.<br />For instance: `top left` - put the overlay at `top left` point of the screen; `bottom` - put overlay at `bottom center` point of the screen |
+| `positionTargetConfig (readonly)` |                              |                                    |         | Get position target configuration based on positionTarget and fullScreen properties<br />Used for caching and calculations |
+| `spacing`                         | `spacing`                    | `boolean`                          | false   | True to apply spacing for overlay content        |
+| `transitionStyle`                 | `transition-style`           | `TransitionStyle\|null\|undefined` |         | Set the transition style                         |
+| `transitioning (readonly)`        |                              | `boolean`                          |         | Returns true if overlay is doing opening or closing transition |
+| `transparent`                     | `transparent`                | `boolean`                          | false   | True to make overlay background transparent      |
+| `verticalOffset`                  | `vertical-offset`            | `number`                           | 0       | A pixel value that will be added to the position calculated on the vertical axis.<br />The offset will be applied either to the `top` or `bottom` depending on the `positionTarget` |
+| `withBackdrop`                    | `with-backdrop`              | `boolean`                          | false   | True to show backdrop                            |
+| `withShadow`                      | `with-shadow`                | `boolean`                          | false   | True to add shadow                               |
+| `x`                               | `x`                          | `number\|null\|undefined`          |         | Set a specific x coordinate                      |
+| `y`                               | `y`                          | `number\|null\|undefined`          |         | Set a specific y coordinate                      |
+| `zIndex`                          | `z-index`                    | `number\|null\|undefined`          |         | Set a preferable z-index to override automatically calculated z-index |
+
+## Methods
+
+| Method        | Type       | Description                                      |
+|---------------|------------|--------------------------------------------------|
+| `clearCached` | `(): void` | Clear all cached values.<br />Run when external changes occur to styles to re-calculate position. |
+| `fit`         | `(): void` | Fit the overlay panel                            |
+| `refit`       | `(): void` | Clear all cached values and fit the overlay.<br />Use this function if any of `maxWidth`, `maxHeight`, `minWidth`, `minHeight`, `height` or `width` changed |
+| `toFront`     | `(): void` | Move overlay to front of other overlays          |
+
+## Events
+
+| Event                | Description                                      |
+|----------------------|--------------------------------------------------|
+| `animationiteration` |                                                  |
+| `closed`             | Dispatched when overlay becomes invisible and close animation finishes |
+| `opened`             | Dispatched when the overlay becomes visible and the open animation finishes |
+| `opened-changed`     | Dispatched when when open attribute changes internally. Prevent default to stop opening/closing pipeline |
+| `refit`              | Dispatched when refit algorithm finishes calculations |

package/lib/overlay/elements/overlay.d.ts

@@ -43,18 +43,22 @@ export declare class Overlay extends ResponsiveElement {
     spacing: boolean;
     /**
      * Set the transition style
+     * @type {TransitionStyle|null|undefined}
      */
     transitionStyle: TransitionStyle | NullOrUndefined;
     /**
      * Set a preferable z-index to override automatically calculated z-index
+     * @type {number|null|undefined}
      */
     zIndex: number | NullOrUndefined;
     /**
      * Set a specific x coordinate
+     * @type {number|null|undefined}
      */
     x: number | NullOrUndefined;
     /**
      * Set a specific y coordinate
+     * @type {number|null|undefined}
      */
     y: number | NullOrUndefined;
     /**
@@ -62,6 +66,7 @@ export declare class Overlay extends ResponsiveElement {
      * - HTMLElement if overlay is position next to the HTML element
      * - String containing `top`, `right`, `left`, `bottom`, `center` combinations to position against the screen.
      * For instance: `top left` - put the overlay at `top left` point of the screen; `bottom` - put overlay at `bottom center` point of the screen
+     * @type {PositionTarget|null|undefined}
      */
     positionTarget: HTMLElement | PositionTarget | NullOrUndefined;
     /**