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

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

@@ -3,4 +3,4 @@ import '@refinitiv-ui/elements/lib/text-field/themes/halo/dark';
 import '@refinitiv-ui/elements/lib/button-bar/themes/halo/dark';
 import '@refinitiv-ui/elements/lib/layout/themes/halo/dark';
 
-elf.customStyles.define('ef-pagination', ':host [part=container]{align-items:center;justify-content:flex-end}:host [part=info]{margin-right:10px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([disabled]) [part=info]{color:rgba(204,204,204,.5)}:host [part=input]{min-width:40px;text-align:center;height:22px;width:150px;margin:0}:host [part=button],:host [part=input]{touch-action:manipulation}:host{--responsive-width:400;margin:1px 0}:host [part=buttons]{margin:0}');
+elf.customStyles.define('ef-pagination', ':host [part=container]{align-items:center;justify-content:flex-end}:host [part=input]{min-width:40px;text-align:center;height:22px;width:150px;margin:0}:host [part=button],:host [part=input]{touch-action:manipulation}:host{margin:1px 0}:host [part=buttons]{margin:0}');

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

@@ -3,4 +3,4 @@ import '@refinitiv-ui/elements/lib/text-field/themes/halo/light';
 import '@refinitiv-ui/elements/lib/button-bar/themes/halo/light';
 import '@refinitiv-ui/elements/lib/layout/themes/halo/light';
 
-elf.customStyles.define('ef-pagination', ':host [part=container]{align-items:center;justify-content:flex-end}:host [part=info]{margin-right:10px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([disabled]) [part=info]{color:rgba(64,64,64,.5)}:host [part=input]{min-width:40px;text-align:center;width:150px;margin:0 1px}:host [part=button],:host [part=input]{touch-action:manipulation}:host{--responsive-width:400;margin:1px 0}:host [part=buttons]{margin:0}');
+elf.customStyles.define('ef-pagination', ':host [part=container]{align-items:center;justify-content:flex-end}:host [part=input]{min-width:40px;text-align:center;width:150px;margin:0 1px}:host [part=button],:host [part=input]{touch-action:manipulation}:host{margin:1px 0}:host [part=buttons]{margin:0}');

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

@@ -3,4 +3,4 @@ import '@refinitiv-ui/elements/lib/text-field/themes/solar/charcoal';
 import '@refinitiv-ui/elements/lib/button-bar/themes/solar/charcoal';
 import '@refinitiv-ui/elements/lib/layout/themes/solar/charcoal';
 
-elf.customStyles.define('ef-pagination', ':host [part=container]{align-items:center;justify-content:flex-end}:host [part=info]{margin-right:10px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([disabled]) [part=info]{color:rgba(194,194,194,.6)}:host [part=input]{min-width:40px;text-align:center;height:21px;width:150px;margin:0}:host [part=button],:host [part=input]{touch-action:manipulation}:host{--first-icon:previous;--last-icon:next;--previous-icon:left;--next-icon:right;--responsive-width:300}');
+elf.customStyles.define('ef-pagination', ':host [part=container]{align-items:center;justify-content:flex-end}:host [part=input]{min-width:40px;text-align:center;height:21px;width:150px;margin:0}:host [part=button],:host [part=input]{touch-action:manipulation}:host{--first-icon:previous;--last-icon:next;--previous-icon:left;--next-icon:right}');

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

@@ -3,4 +3,4 @@ import '@refinitiv-ui/elements/lib/text-field/themes/solar/pearl';
 import '@refinitiv-ui/elements/lib/button-bar/themes/solar/pearl';
 import '@refinitiv-ui/elements/lib/layout/themes/solar/pearl';
 
-elf.customStyles.define('ef-pagination', ':host [part=container]{align-items:center;justify-content:flex-end}:host [part=info]{margin-right:10px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([disabled]) [part=info]{color:rgba(72,72,72,.6)}:host [part=input]{min-width:40px;text-align:center;height:23px;width:150px;margin:0 1px}:host [part=button],:host [part=input]{touch-action:manipulation}:host{--first-icon:previous;--last-icon:next;--previous-icon:left;--next-icon:right;--responsive-width:300}');
+elf.customStyles.define('ef-pagination', ':host [part=container]{align-items:center;justify-content:flex-end}:host [part=input]{min-width:40px;text-align:center;height:23px;width:150px;margin:0 1px}:host [part=button],:host [part=input]{touch-action:manipulation}:host{--first-icon:previous;--last-icon:next;--previous-icon:left;--next-icon:right}');

package/lib/panel/custom-elements.md

@@ -0,0 +1,11 @@
+# ef-panel
+
+A container for components.
+It provides a standard background color and padding, depends on theme.
+
+## Properties
+
+| Property      | Attribute     | Type      | Default | Description                         |
+|---------------|---------------|-----------|---------|-------------------------------------|
+| `spacing`     | `spacing`     | `boolean` | false   | Apply default padding from theme    |
+| `transparent` | `transparent` | `boolean` | false   | Set panel background to transparent |

package/lib/panel/index.d.ts

@@ -1,17 +1,22 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, CSSResult, TemplateResult } from '@refinitiv-ui/core';
+import { BasicElement, CSSResultGroup, TemplateResult } from '@refinitiv-ui/core';
 /**
  * A container for components.
  * It provides a standard background color and padding, depends on theme.
  */
 export declare class Panel extends BasicElement {
     /**
-     * A `CSSResult` that will be used
+     * 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(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * Apply default padding from theme
      */
@@ -38,4 +43,6 @@ declare global {
       'ef-panel': Partial<Panel> | JSXInterface.HTMLAttributes<Panel>;
     }
   }
-}
+}
+
+export {};

package/lib/panel/index.js

@@ -1,10 +1,8 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { BasicElement, html, customElement, property, css } from '@refinitiv-ui/core';
+import { __decorate } from "tslib";
+import { BasicElement, html, css } 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 { VERSION } from '../version.js';
 /**
  * A container for components.
  * It provides a standard background color and padding, depends on theme.
@@ -22,7 +20,14 @@ let Panel = class Panel extends BasicElement {
         this.transparent = false;
     }
     /**
-     * A `CSSResult` that will be used
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
@@ -67,4 +72,3 @@ Panel = __decorate([
     })
 ], Panel);
 export { Panel };
-//# sourceMappingURL=index.js.map

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

@@ -3,13 +3,19 @@
   "tags": [
     {
       "name": "ef-password-field",
-      "description": "A form control element for password",
+      "description": "A form control element for password.",
       "attributes": [
         {
-          "name": "pattern",
-          "description": "Set regular expression for input validation",
-          "type": "string",
-          "default": "\"\""
+          "name": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "error",
+          "description": "Set error state",
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "placeholder",
@@ -18,33 +24,23 @@
           "default": "\"\""
         },
         {
-          "name": "error",
-          "description": "Set state to error",
+          "name": "readonly",
+          "description": "Set readonly state",
           "type": "boolean",
           "default": "false"
         },
         {
-          "name": "warning",
-          "description": "Set state to warning",
+          "name": "transparent",
+          "description": "Disables all other states and border/background styles.",
           "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.",
+          "name": "warning",
+          "description": "Set warning state",
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "minlength",
-          "description": "Set character minimum limit",
-          "type": "number | null"
-        },
-        {
-          "name": "maxlength",
-          "description": "Set character maximum limit",
-          "type": "number | null"
-        },
         {
           "name": "value",
           "description": "Input's value",
@@ -52,22 +48,43 @@
           "default": "\"\""
         },
         {
-          "name": "readonly",
-          "description": "Set readonly state",
-          "type": "boolean",
-          "default": "\"false\""
+          "name": "maxlength",
+          "description": "Set character max limit",
+          "type": "number"
         },
         {
-          "name": "disabled",
-          "description": "Set disabled state",
-          "type": "boolean",
-          "default": "\"false\""
+          "name": "minlength",
+          "description": "Set character min limit",
+          "type": "number"
         }
       ],
       "properties": [
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "error",
+          "attribute": "error",
+          "description": "Set error state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "maxLength",
+          "description": "Set character max limit",
+          "type": "number | null"
+        },
+        {
+          "name": "minLength",
+          "description": "Set character min limit",
+          "type": "number | null"
+        },
         {
           "name": "pattern",
-          "attribute": "pattern",
           "description": "Set regular expression for input validation",
           "type": "string",
           "default": "\"\""
@@ -80,37 +97,25 @@
           "default": "\"\""
         },
         {
-          "name": "error",
-          "attribute": "error",
-          "description": "Set state to error",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "warning",
-          "attribute": "warning",
-          "description": "Set state to warning",
+          "name": "readonly",
+          "attribute": "readonly",
+          "description": "Set readonly state",
           "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.",
+          "description": "Disables all other states and border/background styles.",
           "type": "boolean",
           "default": "false"
         },
         {
-          "name": "minLength",
-          "attribute": "minlength",
-          "description": "Set character minimum limit",
-          "type": "number | null"
-        },
-        {
-          "name": "maxLength",
-          "attribute": "maxlength",
-          "description": "Set character maximum limit",
-          "type": "number | null"
+          "name": "warning",
+          "attribute": "warning",
+          "description": "Set warning state",
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "value",
@@ -118,20 +123,6 @@
           "description": "Input's value",
           "type": "string",
           "default": "\"\""
-        },
-        {
-          "name": "readonly",
-          "attribute": "readonly",
-          "description": "Set readonly state",
-          "type": "boolean",
-          "default": "\"false\""
-        },
-        {
-          "name": "disabled",
-          "attribute": "disabled",
-          "description": "Set disabled state",
-          "type": "boolean",
-          "default": "\"false\""
         }
       ],
       "events": [
@@ -142,12 +133,16 @@
         {
           "name": "error-changed",
           "description": "Dispatched when error state changes"
+        },
+        {
+          "name": "icon-click",
+          "description": "Dispatched when icon is clicked"
         }
       ],
       "methods": [
         {
-          "name": "select",
-          "description": "Select the contents of input",
+          "name": "renderIcon",
+          "description": "",
           "params": []
         }
       ]

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

@@ -0,0 +1,39 @@
+# ef-password-field
+
+A form control element for password.
+
+## Attributes
+
+| Attribute   | Type     | Description             |
+|-------------|----------|-------------------------|
+| `maxlength` | `number` | Set character max limit |
+| `minlength` | `number` | Set character min limit |
+
+## Properties
+
+| Property      | Attribute     | Type             | Default | Description                                      |
+|---------------|---------------|------------------|---------|--------------------------------------------------|
+| `disabled`    | `disabled`    | `boolean`        | false   | Set disabled state                               |
+| `error`       | `error`       | `boolean`        | false   | Set error state                                  |
+| `maxLength`   |               | `number \| null` | null    | Set character max limit                          |
+| `minLength`   |               | `number \| null` | null    | Set character min limit                          |
+| `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      |
+|--------------|-----------|
+| `renderIcon` | `(): any` |
+
+## 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/password-field/index.d.ts

@@ -1,70 +1,55 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, CSSResult, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
-import '../icon';
+import { PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import { TemplateMap } from '@refinitiv-ui/core/lib/directives/template-map.js';
+import { TextField } from '../text-field/index.js';
+import '../icon/index.js';
+import '@refinitiv-ui/phrasebook/lib/locale/en/password-field.js';
+import { Translate } from '@refinitiv-ui/translate';
 /**
- * A form control element for password
+ * A form control element for password.
  *
  * @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 {number} maxlength - Set character max limit
+ * @prop {number | null} [maxLength=null] - Set character max limit
+ *
+ * @attr {number} minlength - Set character min limit
+ * @prop {number | null} [minLength=null] - Set character min limit
+ *
+ * @prop {string} [pattern=""] - Set regular expression for input validation
+ *
+ * @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 PasswordField extends ControlElement {
-    /**
-     * @return A `CSSResult` that will be used to style the host,
-     * slotted children and the internal template of the element.
-     */
-    static get styles(): CSSResult | CSSResult[];
-    /**
-     * Set regular expression for input validation
-     */
-    pattern: string;
-    /**
-     * Set placeholder text
-     */
-    placeholder: string;
-    /**
-     * Set state to error
-     */
-    error: boolean;
-    /**
-     * Set state to warning
-     */
-    warning: 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 minimum limit
-     */
-    minLength: number | null;
+export declare class PasswordField extends TextField {
     /**
-     * Set character maximum limit
+     * Used for translations
      */
-    maxLength: number | null;
-    /**
-     * Get native input element from shadow roots
-     */
-    private inputElement;
+    protected t: Translate;
     /**
      * Defines whether password is visible or not
      */
     private isPasswordVisible;
-    /**
-     * Select the contents of input
-     * @return void
-     */
-    select(): void;
     /**
      * Called when the element’s DOM has been updated and rendered for the first time
      * @param changedProperties Properties that has changed
@@ -72,52 +57,21 @@ export declare class PasswordField extends ControlElement {
      */
     protected firstUpdated(changedProperties: PropertyValues): void;
     /**
-     * Called when the element’s DOM has been updated and rendered
-     * @param changedProperties Properties that has changed
-     * @return shouldUpdate
-     */
-    protected updated(changedProperties: PropertyValues): void;
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return Render template
+     * Decorate `<input>` element with common properties extended from text-field:
+     * type="text|password" - text if password is visible
+     * @returns template map
      */
-    protected render(): TemplateResult;
+    protected get decorateInputMap(): TemplateMap;
     /**
-     * Check if input should be re-validated
-     * True if value changed and pattern or minlength is present
-     * True if pattern or minlength changed
-     * @param changedProperties Properties that has changed
-     * @return True if input should be re-validated
-     */
-    private shouldValidateInput;
-    /**
-     * check if value is changed and fire event
-     * @return {void}
-     */
-    private onPossibleValueChange;
-    /**
-     * validate input according `pattern`, `min` and `max` properties
-     * change state of `error` property according pattern validation
-     * @return void
-     */
-    private validateInput;
-    /**
-     * @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;
-    /**
-     * Detect `enter` and `space` keydown and fire
-     * @param event keydown event
+     * Renders icon element
      * @returns {void}
      */
-    private handleKeyDown;
+    protected renderIcon(): TemplateResult | null;
     /**
      * Toggles password visibility state
      * @return void
      */
-    private togglePasswordVisibility;
+    protected togglePasswordVisibility(): void;
 }
 
 declare global {
@@ -127,7 +81,9 @@ declare global {
 
   namespace JSX {
     interface IntrinsicElements {
-      'ef-password-field': Partial<PasswordField> | JSXInterface.ControlHTMLAttributes<PasswordField>;
+      'ef-password-field': Partial<PasswordField> | JSXInterface.HTMLAttributes<PasswordField>;
     }
   }
-}
+}
+
+export {};