@refinitiv-ui/elements 5.0.0-beta.3 → 5.0.0-dev.204

package/lib/tab-bar/themes/solar/pearl/index.js

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/lib/tab/themes/solar/pearl';
 import '@refinitiv-ui/elements/lib/button/themes/solar/pearl';
 
-elf.customStyles.define('ef-tab-bar', ':host{position:relative;background-color:#c2c2c2}:host [part=content]{display:flex;overflow:hidden}:host [part=left-btn],:host [part=right-btn]{display:none;position:absolute;height:auto;margin:auto;z-index:2;top:0;bottom:0;background-color:#bec3cc}:host [part=left-btn]:hover,:host [part=right-btn]:hover{background-color:#c3c7d0}:host [part=left-btn]:active,:host [part=right-btn]:active{background-color:#b1b5be}:host [part=left-btn]:focus:not([focused]),:host [part=left-btn][focused=visible],:host [part=right-btn]:focus:not([focused]),:host [part=right-btn][focused=visible]{background-color:#e32970}:host [part=left-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=left-btn][focused=visible]:not([active]):not(:hover),:host [part=right-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=right-btn][focused=visible]:not([active]):not(:hover){color:#fff;background-color:#bec3cc}:host [part=left-btn]{left:0}:host [part=right-btn]{right:0}:host([vertical]){width:180px;flex-shrink:0}:host([vertical]) [part=content]{flex-direction:column}:host([vertical]) [part=content] ::slotted(ef-tab){justify-content:flex-start;border-bottom:1px solid #a9afba}');
+elf.customStyles.define('ef-tab-bar', ':host{position:relative;background-color:#c2c2c2}:host [part=content]{display:flex;overflow:hidden}:host [part=left-btn],:host [part=right-btn]{display:none;position:absolute;height:auto;margin:auto;z-index:2;top:0;bottom:0;background-color:#fafbfc}:host [part=left-btn]:hover,:host [part=right-btn]:hover{background-color:#fafbfc}:host [part=left-btn]:active,:host [part=right-btn]:active{background-color:#e8e9ea}:host [part=left-btn]:focus:not([focused]),:host [part=left-btn][focused=visible],:host [part=right-btn]:focus:not([focused]),:host [part=right-btn][focused=visible]{background-color:#ffb771}:host [part=left-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=left-btn][focused=visible]:not([active]):not(:hover),:host [part=right-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=right-btn][focused=visible]:not([active]):not(:hover){color:#1d1d1d;background-color:#fafbfc}:host [part=left-btn]{left:0}:host [part=right-btn]{right:0}:host([vertical]){width:180px;flex-shrink:0}:host([vertical]) [part=content]{flex-direction:column}:host([vertical]) [part=content] ::slotted(ef-tab){justify-content:flex-start;border:none;border-bottom:1px solid #a9afba}:host(:not([vertical])) [part=content] ::slotted(ef-tab:first-of-type){border-left:1px solid #a9afba}');

package/lib/text-field/custom-elements.json

@@ -3,7 +3,7 @@
   "tags": [
     {
       "name": "ef-text-field",
-      "description": "Form control element for text",
+      "description": "Form control element for text.",
       "attributes": [
         {
           "name": "pattern",
@@ -11,29 +11,10 @@
           "type": "string",
           "default": "\"\""
         },
-        {
-          "name": "placeholder",
-          "description": "Set place holder text",
-          "type": "string",
-          "default": "\"\""
-        },
-        {
-          "name": "error",
-          "description": "Set state to error",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "warning",
-          "description": "Set state to warning",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "icon",
           "description": "Specify icon to display in input. Value can be icon name",
-          "type": "string",
-          "default": "\"\""
+          "type": "string | null"
         },
         {
           "name": "icon-has-action",
@@ -41,12 +22,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "transparent",
-          "description": "Disables all other states and border/background styles.\nUse with advanced composite elements requiring e.g. multi selection in\ncombo-box when parent container handles element states.",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "maxlength",
           "description": "Set character max limit",
@@ -58,8 +33,20 @@
           "type": "number | null"
         },
         {
-          "name": "value",
-          "description": "Input's value",
+          "name": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "error",
+          "description": "Set error state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "placeholder",
+          "description": "Set placeholder text",
           "type": "string",
           "default": "\"\""
         },
@@ -67,13 +54,25 @@
           "name": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
-          "name": "disabled",
-          "description": "Set disabled state",
+          "name": "transparent",
+          "description": "Disables all other states and border/background styles.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "warning",
+          "description": "Set warning state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
+        },
+        {
+          "name": "value",
+          "description": "Input's value",
+          "type": "string",
+          "default": "\"\""
         }
       ],
       "properties": [
@@ -84,33 +83,11 @@
           "type": "string",
           "default": "\"\""
         },
-        {
-          "name": "placeholder",
-          "attribute": "placeholder",
-          "description": "Set place holder text",
-          "type": "string",
-          "default": "\"\""
-        },
-        {
-          "name": "error",
-          "attribute": "error",
-          "description": "Set state to error",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "warning",
-          "attribute": "warning",
-          "description": "Set state to warning",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "icon",
           "attribute": "icon",
           "description": "Specify icon to display in input. Value can be icon name",
-          "type": "string",
-          "default": "\"\""
+          "type": "string | null"
         },
         {
           "name": "iconHasAction",
@@ -119,13 +96,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "transparent",
-          "attribute": "transparent",
-          "description": "Disables all other states and border/background styles.\nUse with advanced composite elements requiring e.g. multi selection in\ncombo-box when parent container handles element states.",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "maxLength",
           "attribute": "maxlength",
@@ -139,19 +109,23 @@
           "type": "number | null"
         },
         {
-          "name": "selectionStart",
-          "description": "Selection start index",
-          "type": "number | null"
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "false"
         },
         {
-          "name": "selectionEnd",
-          "description": "Selection end index",
-          "type": "number | null"
+          "name": "error",
+          "attribute": "error",
+          "description": "Set error state",
+          "type": "boolean",
+          "default": "false"
         },
         {
-          "name": "value",
-          "attribute": "value",
-          "description": "Input's value",
+          "name": "placeholder",
+          "attribute": "placeholder",
+          "description": "Set placeholder text",
           "type": "string",
           "default": "\"\""
         },
@@ -160,14 +134,28 @@
           "attribute": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
-          "name": "disabled",
-          "attribute": "disabled",
-          "description": "Set disabled state",
+          "name": "transparent",
+          "attribute": "transparent",
+          "description": "Disables all other states and border/background styles.",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
+        },
+        {
+          "name": "warning",
+          "attribute": "warning",
+          "description": "Set warning state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "Input's value",
+          "type": "string",
+          "default": "\"\""
         }
       ],
       "events": [
@@ -181,26 +169,27 @@
         },
         {
           "name": "icon-click",
-          "description": "Dispatched only when element has icon-has-action attribute and icon is clicked"
+          "description": "Dispatched when icon is clicked"
         }
       ],
       "methods": [
         {
-          "name": "select",
-          "description": "Select the contents of input",
-          "params": []
+          "name": "onInputInput",
+          "description": "",
+          "params": [
+            {
+              "name": "event",
+              "type": "InputEvent"
+            }
+          ]
         },
         {
-          "name": "setSelectionRange",
-          "description": "Set the selection range",
+          "name": "onInputChange",
+          "description": "",
           "params": [
             {
-              "name": "startSelection",
-              "description": "Start of selection"
-            },
-            {
-              "name": "endSelection",
-              "description": "End of the selection"
+              "name": "event",
+              "type": "InputEvent"
             }
           ]
         }

package/lib/text-field/custom-elements.md

@@ -0,0 +1,35 @@
+# ef-text-field
+
+Form control element for text.
+
+## Properties
+
+| Property        | Attribute         | Type             | Default | Description                                      |
+|-----------------|-------------------|------------------|---------|--------------------------------------------------|
+| `disabled`      | `disabled`        | `boolean`        | false   | Set disabled state                               |
+| `error`         | `error`           | `boolean`        | false   | Set error state                                  |
+| `icon`          | `icon`            | `string \| null` | null    | Specify icon to display in input. Value can be icon name |
+| `iconHasAction` | `icon-has-action` | `boolean`        | false   | Specify when icon need to be clickable           |
+| `maxLength`     | `maxlength`       | `number \| null` | null    | Set character max limit                          |
+| `minLength`     | `minlength`       | `number \| null` | null    | Set character min limit                          |
+| `pattern`       | `pattern`         | `string`         | ""      | Set regular expression for input validation      |
+| `placeholder`   | `placeholder`     | `string`         | ""      | Set placeholder text                             |
+| `readonly`      | `readonly`        | `boolean`        | false   | Set readonly state                               |
+| `transparent`   | `transparent`     | `boolean`        | false   | Disables all other states and border/background styles. |
+| `value`         | `value`           | `string`         | ""      | Input's value                                    |
+| `warning`       | `warning`         | `boolean`        | false   | Set warning state                                |
+
+## Methods
+
+| Method          | Type                 |
+|-----------------|----------------------|
+| `onInputChange` | `(event: any): void` |
+| `onInputInput`  | `(event: any): void` |
+
+## Events
+
+| Event           | Description                         |
+|-----------------|-------------------------------------|
+| `error-changed` | Dispatched when error state changes |
+| `icon-click`    | Dispatched when icon is clicked     |
+| `value-changed` | Dispatched when value changes       |

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

@@ -1,58 +1,59 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, CSSResult, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
-import '../icon';
-declare type SelectionIndex = number | null;
+import { FormFieldElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import { TemplateMap } from '@refinitiv-ui/core/lib/directives/template-map.js';
+import '../icon/index.js';
 /**
- * Form control element for text
+ * Form control element for text.
  *
  * @fires value-changed - Dispatched when value changes
  * @fires error-changed - Dispatched when error state changes
+ * @fires icon-click - Dispatched when icon is clicked
  *
- * @attr {string} value - Input's 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
  */
-export declare class TextField extends ControlElement {
+export declare class TextField extends FormFieldElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
     /**
-     * @returns A `CSSResult` that will be used to style the host,
+     * A `CSSResultGroup` that will be used to style the host,
      * slotted children and the internal template of the element.
+     * @returns CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * Set regular expression for input validation
      */
     pattern: string;
-    /**
-     * Set place holder text
-     */
-    placeholder: string;
-    /**
-     * Set state to error
-     */
-    error: boolean;
-    /**
-     * Set state to warning
-     */
-    warning: boolean;
     /**
      * Specify icon to display in input. Value can be icon name
      */
-    icon: string;
+    icon: string | null;
     /**
      * Specify when icon need to be clickable
      */
     iconHasAction: boolean;
-    /**
-     * Disables all other states and border/background styles.
-     * Use with advanced composite elements requiring e.g. multi selection in
-     * combo-box when parent container handles element states.
-     */
-    transparent: boolean;
     /**
      * Set character max limit
      */
@@ -61,32 +62,6 @@ export declare class TextField extends ControlElement {
      * Set character min limit
      */
     minLength: number | null;
-    /**
-     * Get native input element from shadow roots
-     */
-    private inputElement;
-    /**
-     * Selection start index
-     */
-    get selectionStart(): number | null;
-    set selectionStart(index: SelectionIndex);
-    /**
-     * Selection end index
-     */
-    get selectionEnd(): number | null;
-    set selectionEnd(index: SelectionIndex);
-    /**
-     * Select the contents of input
-     * @returns void
-     */
-    select(): void;
-    /**
-     * Set the selection range
-     * @param startSelection Start of selection
-     * @param endSelection End of the selection
-     * @returns {void}
-     */
-    setSelectionRange(startSelection: number, endSelection: number): void;
     /**
      * Called after the component is first rendered
      * @param changedProperties Properties which have changed
@@ -104,52 +79,62 @@ export declare class TextField extends ControlElement {
      * @param changedProperties Properties that has changed
      * @returns True if input should be re-validated
      */
-    private shouldValidateInput;
+    protected shouldValidateInput(changedProperties: PropertyValues): boolean;
     /**
-     * renders icon element if property present
+     * Runs on input element `input` event
+     * @param event `input` event
      * @returns {void}
      */
-    private renderIcon;
+    protected onInputInput(event: InputEvent): void;
     /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return Render template
+     * Runs on input element `change` event
+     * @param event `change` event
+     * @returns {void}
      */
-    protected render(): TemplateResult;
+    protected onInputChange(event: InputEvent): void;
     /**
-     * check if value is changed and fire event
+     * Check if value is changed and fire event
      * @returns {void}
      */
-    private onPossibleValueChange;
+    protected onPossibleValueChange(event: InputEvent): void;
     /**
-     * validate input according `pattern`, `minLength` and `maxLength` properties
+     * Validate input according `pattern`, `minLength` and `maxLength` properties
      * change state of `error` property according pattern validation
-     * @returns void
+     * @returns {void}
      */
-    private validateInput;
+    protected validateInput(): void;
     /**
      * @param error existing state of error
      * @returns true if there is no error and browser is IE11 and minLength more than 0 and value exists
      */
-    private shouldValidateForMinLength;
+    protected shouldValidateForMinLength(error: boolean): boolean;
     /**
-     * Detect `enter` and `space` keydown and fire
-     * @param event keydown event
+     * Fires event on `icon` click
      * @returns {void}
      */
-    private handleKeyDown;
+    protected iconClick(): void;
     /**
-     * Process internal icon click and fire `icon-click` event
-     * @returns void
+     * Decorate `<input>` element with common properties extended from form field element:
+     * type="text" - always `text`
+     * part="input" - always "input", used for styling
+     * maxlength - calculated from `this.maxLength`
+     * minlength - calculated from `this.minLength`
+     * pattern - calculated from `this.pattern`
+     * @returns template map
      */
-    private iconClick;
+    protected get decorateInputMap(): TemplateMap;
     /**
-     * Fire event on `icon` click
+     * Renders icon element if property present
      * @returns {void}
      */
-    private notifyIcon;
+    protected renderIcon(): TemplateResult | null;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    protected render(): TemplateResult;
 }
-export {};
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -158,7 +143,9 @@ declare global {
 
   namespace JSX {
     interface IntrinsicElements {
-      'ef-text-field': Partial<TextField> | JSXInterface.ControlHTMLAttributes<TextField>;
+      'ef-text-field': Partial<TextField> | JSXInterface.HTMLAttributes<TextField>;
     }
   }
-}
+}
+
+export {};