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

package/lib/color-dialog/index.d.ts

@@ -1,13 +1,13 @@
 import { JSXInterface } from '../jsx';
-import { TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
+import { TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import '../button/index.js';
+import '../number-field/index.js';
+import '../text-field/index.js';
+import { Dialog } from '../dialog/index.js';
+import './elements/color-palettes.js';
+import './elements/grayscale-palettes.js';
 import { Translate } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/lib/locale/en/color-dialog';
-import '../button';
-import '../number-field';
-import '../text-field';
-import { Dialog } from '../dialog';
-import './elements/color-palettes';
-import './elements/grayscale-palettes';
+import '@refinitiv-ui/phrasebook/lib/locale/en/color-dialog.js';
 /**
  * Displays a colour picker dialog,
  * for selecting a predefined range of colours.
@@ -15,8 +15,8 @@ import './elements/grayscale-palettes';
  * @fires value-changed - Fired when the `value` property changes.
  * @fires opened-changed - Fired when the `opened` property changes.
  *
- * @attr {string|null} header - Set Header/Title of the color dialog
- * @prop {string|null} header - Set Header/Title of the color dialog
+ * @attr {string | null} header - Set Header/Title of the color dialog
+ * @prop {string | null} [header=null] - Set Header/Title of the color dialog
  *
  * @attr {boolean} [opened=false] - Set dialog to open
  * @prop {boolean} [opened=false] - Set dialog to open
@@ -24,14 +24,14 @@ import './elements/grayscale-palettes';
  * @attr {boolean} [no-cancel-on-esc-key=false] - Prevents dialog to close when user presses ESC key
  * @prop {boolean} [noCancelOnEscKey=false] - Prevents dialog to close when user presses ESC key
  *
- * @attr {string} x - Set a specific x coordinate of dialog
- * @prop {string} x - Set a specific x coordinate of dialog
+ * @attr {string | undefined} x - Set a specific x coordinate of dialog
+ * @prop {string | undefined} x - Set a specific x coordinate of dialog
  *
- * @attr {string} y - Set a specific y coordinate of dialog
- * @prop {string} y - Set a specific y coordinate of dialog
+ * @attr {string | undefined} y - Set a specific y coordinate of dialog
+ * @prop {string | undefined} y - Set a specific y coordinate of dialog
  *
- * @attr {string} position-target - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
- * @prop {string} positionTarget - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
+ * @attr {string | undefined} position-target - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
+ * @prop {string | undefined} positionTarget - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
  *
  * @prop {boolean} [noCancelOnOutsideClick=true] - Prevents dialog to close when user clicks outside the dialog.
  *
@@ -43,12 +43,17 @@ import './elements/grayscale-palettes';
  */
 export declare class ColorDialog extends Dialog {
     /**
-     * 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 {CSSResult | CSSResult[]} CSS template
+     * @return CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * speed up rendering by not populating content on page load
      */
@@ -222,4 +227,6 @@ declare global {
       'ef-color-dialog': Partial<ColorDialog> | JSXInterface.HTMLAttributes<ColorDialog>;
     }
   }
-}
+}
+
+export {};

package/lib/color-dialog/index.js

@@ -1,20 +1,21 @@
-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 { html, css, customElement, property, WarningNotice, styleMap, query } from '@refinitiv-ui/core';
+import { __decorate } from "tslib";
+import { html, css, WarningNotice } 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 { styleMap } from '@refinitiv-ui/core/lib/directives/style-map.js';
+import { rgb } from '@refinitiv-ui/utils/lib/color.js';
+import { VERSION } from '../version.js';
+import { ValueModel } from './helpers/value-model.js';
+import { isHex, removeHashSign } from './helpers/color-helpers.js';
+import '../button/index.js';
+import '../number-field/index.js';
+import '../text-field/index.js';
+import { Dialog } from '../dialog/index.js';
+import './elements/color-palettes.js';
+import './elements/grayscale-palettes.js';
 import { translate } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/lib/locale/en/color-dialog';
-import '../button';
-import '../number-field';
-import '../text-field';
-import { Dialog } from '../dialog';
-import './elements/color-palettes';
-import './elements/grayscale-palettes';
-import { ColorHelpers } from './helpers/color-helpers';
-import { ValueModel } from './helpers/value-model';
+import '@refinitiv-ui/phrasebook/lib/locale/en/color-dialog.js';
 /**
  * Displays a colour picker dialog,
  * for selecting a predefined range of colours.
@@ -22,8 +23,8 @@ import { ValueModel } from './helpers/value-model';
  * @fires value-changed - Fired when the `value` property changes.
  * @fires opened-changed - Fired when the `opened` property changes.
  *
- * @attr {string|null} header - Set Header/Title of the color dialog
- * @prop {string|null} header - Set Header/Title of the color dialog
+ * @attr {string | null} header - Set Header/Title of the color dialog
+ * @prop {string | null} [header=null] - Set Header/Title of the color dialog
  *
  * @attr {boolean} [opened=false] - Set dialog to open
  * @prop {boolean} [opened=false] - Set dialog to open
@@ -31,14 +32,14 @@ import { ValueModel } from './helpers/value-model';
  * @attr {boolean} [no-cancel-on-esc-key=false] - Prevents dialog to close when user presses ESC key
  * @prop {boolean} [noCancelOnEscKey=false] - Prevents dialog to close when user presses ESC key
  *
- * @attr {string} x - Set a specific x coordinate of dialog
- * @prop {string} x - Set a specific x coordinate of dialog
+ * @attr {string | undefined} x - Set a specific x coordinate of dialog
+ * @prop {string | undefined} x - Set a specific x coordinate of dialog
  *
- * @attr {string} y - Set a specific y coordinate of dialog
- * @prop {string} y - Set a specific y coordinate of dialog
+ * @attr {string | undefined} y - Set a specific y coordinate of dialog
+ * @prop {string | undefined} y - Set a specific y coordinate of dialog
  *
- * @attr {string} position-target - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
- * @prop {string} positionTarget - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
+ * @attr {string | undefined} position-target - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
+ * @prop {string | undefined} positionTarget - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
  *
  * @prop {boolean} [noCancelOnOutsideClick=true] - Prevents dialog to close when user clicks outside the dialog.
  *
@@ -71,13 +72,21 @@ let ColorDialog = class ColorDialog extends Dialog {
         this._value = '';
     }
     /**
-     * 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 {CSSResult | CSSResult[]} CSS template
+     * @return CSS template
      */
     static get styles() {
-        return [...Dialog.styles,
+        return [
+            super.styles,
             css `
         :host {
           display: block;
@@ -88,7 +97,8 @@ let ColorDialog = class ColorDialog extends Dialog {
           var(--no-color-line-color, #ff0000) calc(50% + 1px),
           transparent calc(50% + 2px));
         }
-    `];
+    `
+        ];
     }
     /**
      * Value of selected color from color dialog will be written here as hex value
@@ -103,7 +113,7 @@ let ColorDialog = class ColorDialog extends Dialog {
             value = '';
         }
         this._value = value;
-        void this.requestUpdate('value', oldValue);
+        this.requestUpdate('value', oldValue);
     }
     get value() {
         return this._value;
@@ -122,7 +132,7 @@ let ColorDialog = class ColorDialog extends Dialog {
     }
     get hex() {
         const value = this.value;
-        return value ? ColorHelpers.removeHashSign(value) : '';
+        return value ? removeHashSign(value) : '';
     }
     /**
      * Red value from 0 to 255
@@ -131,10 +141,10 @@ let ColorDialog = class ColorDialog extends Dialog {
      */
     set red(red) {
         red = String(red);
-        this.value = this.isValidRGB(red) ? ColorHelpers.rgbToHex(red, this.green, this.blue) : '';
+        this.value = this.isValidRGB(red) ? rgb(Number(red), Number(this.green), Number(this.blue)).formatHex() : '';
     }
     get red() {
-        return this.hex ? ColorHelpers.hexToRGB(this.hex).red : '';
+        return this.hex ? rgb(`#${this.hex}`).r.toString() : '';
     }
     /**
      * Green value from 0 to 255
@@ -143,10 +153,10 @@ let ColorDialog = class ColorDialog extends Dialog {
      */
     set green(green) {
         green = String(green);
-        this.value = this.isValidRGB(green) ? ColorHelpers.rgbToHex(this.red, green, this.blue) : '';
+        this.value = this.isValidRGB(green) ? rgb(Number(this.red), Number(green), Number(this.blue)).formatHex() : '';
     }
     get green() {
-        return this.hex ? ColorHelpers.hexToRGB(this.hex).green : '';
+        return this.hex ? rgb(`#${this.hex}`).g.toString() : '';
     }
     /**
      * Blue value from 0 to 255
@@ -155,10 +165,10 @@ let ColorDialog = class ColorDialog extends Dialog {
      */
     set blue(blue) {
         blue = String(blue);
-        this.value = this.isValidRGB(blue) ? ColorHelpers.rgbToHex(this.red, this.green, blue) : '';
+        this.value = this.isValidRGB(blue) ? rgb(Number(this.red), Number(this.green), Number(blue)).formatHex() : '';
     }
     get blue() {
-        return this.hex ? ColorHelpers.hexToRGB(this.hex).blue : '';
+        return this.hex ? rgb(`#${this.hex}`).b.toString() : '';
     }
     /**
      * Check if component should be updated
@@ -217,7 +227,7 @@ let ColorDialog = class ColorDialog extends Dialog {
      * @returns true if value is valid
      */
     isValidValue(value) {
-        const isValid = value === '' || ColorHelpers.isHex(value);
+        const isValid = value === '' || isHex(value);
         if (!isValid) {
             new WarningNotice(`The specified value "${value}" is not valid value. The correct value should look like "#fff" or "#ffffff".`).show();
         }
@@ -229,7 +239,7 @@ let ColorDialog = class ColorDialog extends Dialog {
      * @returns true if value is valid
      */
     isValidHex(value) {
-        const isValid = value === '' || (!value.includes('#') && ColorHelpers.isHex(`#${value}`));
+        const isValid = value === '' || (!value.includes('#') && isHex(`#${value}`));
         if (!isValid) {
             new WarningNotice(`The specified hex "${value}" is not valid color. The correct value should look like "fff" or "ffffff".`).show();
         }
@@ -241,7 +251,7 @@ let ColorDialog = class ColorDialog extends Dialog {
      * @returns true if value is within 0 - 255
      */
     isValidRGB(value) {
-        const isValid = value === '' || ColorHelpers.isValidDecimalForRGB(value);
+        const isValid = value === '' || Number(value) >= 0 && Number(value) <= 255;
         if (!isValid) {
             new WarningNotice(`The specified RGB "${value}" is not valid color. The value should be 0 - 255.`).show();
         }
@@ -253,8 +263,8 @@ let ColorDialog = class ColorDialog extends Dialog {
      * @return {void}
      */
     onColorChanged(event) {
-        this.valueModel.hex = ColorHelpers.removeHashSign(event.target.value);
-        void this.requestUpdate();
+        this.valueModel.hex = removeHashSign(event.target.value);
+        this.requestUpdate();
     }
     /**
      * update hex value when typing on hex input
@@ -263,7 +273,7 @@ let ColorDialog = class ColorDialog extends Dialog {
      */
     onHexChanged(event) {
         this.valueModel.hex = event.target.value;
-        void this.requestUpdate();
+        this.requestUpdate();
     }
     /**
      * update r,g,b value when typing on RGB inputs
@@ -281,7 +291,7 @@ let ColorDialog = class ColorDialog extends Dialog {
         else if (targetElem === this.blueInputEl) {
             this.valueModel.blue = this.blueInputEl.value;
         }
-        void this.requestUpdate();
+        this.requestUpdate();
     }
     /**
      * set opened state to false
@@ -338,7 +348,7 @@ let ColorDialog = class ColorDialog extends Dialog {
           <div
             part="preview-color"
             style=${styleMap({
-            backgroundColor: this.valueModel.value
+            backgroundColor: this.valueModel.value || undefined
         })}
             ?no-color=${!this.valueModel.value}></div>
           <div>${this.t('RED')}&nbsp;:
@@ -447,4 +457,3 @@ ColorDialog = __decorate([
     })
 ], ColorDialog);
 export { ColorDialog };
-//# sourceMappingURL=index.js.map

package/lib/combo-box/custom-elements.json

@@ -8,7 +8,8 @@
         {
           "name": "multiple",
           "description": "Multiple selection mode",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "opened",
@@ -31,7 +32,8 @@
         {
           "name": "free-text",
           "description": "Allow to enter any value",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "error",
@@ -53,25 +55,26 @@
         {
           "name": "value",
           "description": "Returns the first selected item value.\nUse `values` when multiple selection mode is enabled.",
-          "type": "string"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "name",
           "description": "Set name of the element",
           "type": "string",
-          "default": "\"''\""
+          "default": "\"\""
         }
       ],
       "properties": [
@@ -91,7 +94,8 @@
           "name": "multiple",
           "attribute": "multiple",
           "description": "Multiple selection mode",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "opened",
@@ -118,7 +122,8 @@
           "name": "freeText",
           "attribute": "free-text",
           "description": "Allow to enter any value",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "error",
@@ -143,49 +148,53 @@
         {
           "name": "data",
           "description": "Data array to be displayed",
-          "type": "ComboBoxData<T>"
+          "type": "ComboBoxData<T>",
+          "default": "[]"
         },
         {
           "name": "value",
           "attribute": "value",
           "description": "Returns the first selected item value.\nUse `values` when multiple selection mode is enabled.",
-          "type": "string"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "values",
           "description": "Returns a values collection of the currently\nselected item values",
-          "type": "string[]"
+          "type": "string[]",
+          "default": "[]"
         },
         {
           "name": "query",
-          "description": "Query string applied to combo-box\nSet via internal text-field input",
+          "description": "Query string applied to combo-box\nSet via internal input",
           "type": "string | null"
         },
         {
-          "name": "label",
+          "name": "label (readonly)",
           "description": "Label of selected value",
-          "type": "string"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "readonly",
           "attribute": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "attribute": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "name",
           "attribute": "name",
           "description": "Set name of the element",
           "type": "string",
-          "default": "\"''\""
+          "default": "\"\""
         }
       ],
       "events": [
@@ -200,6 +209,31 @@
         {
           "name": "opened-changed",
           "description": "Dispatched when opened state changes"
+        },
+        {
+          "name": "animationiteration"
+        }
+      ],
+      "methods": [
+        {
+          "name": "onInputInput",
+          "description": "",
+          "params": [
+            {
+              "name": "event",
+              "type": "InputEvent"
+            }
+          ]
+        },
+        {
+          "name": "onInputChange",
+          "description": "",
+          "params": [
+            {
+              "name": "event",
+              "type": "InputEvent"
+            }
+          ]
         }
       ]
     }

package/lib/combo-box/custom-elements.md

@@ -0,0 +1,42 @@
+# ef-combo-box
+
+Combines a popup with a filterable selection list
+
+## Properties
+
+| Property            | Attribute             | Type                        | Default                      | Description                                      |
+|---------------------|-----------------------|-----------------------------|------------------------------|--------------------------------------------------|
+| `clears`            | `clears`              | `boolean`                   | false                        | Show clears button                               |
+| `data`              |                       | `ComboBoxData<T>`           | []                           | Data array to be displayed                       |
+| `disabled`          | `disabled`            | `boolean`                   | false                        | Set disabled state                               |
+| `error`             | `error`               | `boolean`                   | false                        | Set state to error                               |
+| `filter`            |                       | `ComboBoxFilter<T> \| null` | "defaultFilter<T>(this)"     | Custom filter for static data<br />Set this to null when data is filtered externally, eg XHR |
+| `freeText`          | `free-text`           | `boolean`                   | false                        | Allow to enter any value                         |
+| `label (readonly)`  |                       | `string`                    | ""                           | Label of selected value                          |
+| `multiple`          | `multiple`            | `boolean`                   | false                        | Multiple selection mode                          |
+| `name`              | `name`                | `string`                    | ""                           | Set name of the element                          |
+| `opened`            | `opened`              | `boolean`                   | false                        | Track opened state of popup                      |
+| `placeholder`       | `placeholder`         | `string`                    | ""                           | Placeholder for input field                      |
+| `query`             |                       | `string \| null`            | null                         | Query string applied to combo-box<br />Set via internal input |
+| `queryDebounceRate` | `query-debounce-rate` | `number`                    |                              | Control query rate, defaults to 0                |
+| `readonly`          | `readonly`            | `boolean`                   | false                        | Set readonly state                               |
+| `renderer`          |                       | `ComboBoxRenderer`          | "new ComboBoxRenderer(this)" | Renderer used to render list item elements       |
+| `value`             | `value`               | `string`                    | ""                           | Returns the first selected item value.<br />Use `values` when multiple selection mode is enabled. |
+| `values`            |                       | `string[]`                  | []                           | Returns a values collection of the currently<br />selected item values |
+| `warning`           | `warning`             | `boolean`                   | false                        | Set state to warning                             |
+
+## Methods
+
+| Method          | Type                 |
+|-----------------|----------------------|
+| `onInputChange` | `(event: any): void` |
+| `onInputInput`  | `(event: any): void` |
+
+## Events
+
+| Event                | Description                          |
+|----------------------|--------------------------------------|
+| `animationiteration` |                                      |
+| `opened-changed`     | Dispatched when opened state changes |
+| `query-changed`      | Dispatched when query changes        |
+| `value-changed`      | Dispatched when value changes        |

package/lib/combo-box/helpers/filter.d.ts

@@ -1,7 +1,7 @@
-import { DataItem } from '@refinitiv-ui/utils';
-import { ComboBox } from '../index';
-import { ComboBoxFilter } from './types';
-import { ItemData } from '../../item';
+import type { DataItem } from '@refinitiv-ui/utils/lib/collection';
+import type { ComboBox } from '../index';
+import type { ComboBoxFilter } from './types';
+import type { ItemData } from '../../item';
 /**
  * Default filter used by combo box
  * @param el ComboBox instance to filter

package/lib/combo-box/helpers/filter.js

@@ -27,4 +27,3 @@ export const defaultFilter = (el) => {
         return result;
     };
 };
-//# sourceMappingURL=filter.js.map

package/lib/combo-box/helpers/keyboard-event.js

@@ -17,4 +17,3 @@ export class CustomKeyboardEvent extends Event {
         this.metaKey = eventInitDict.metaKey;
     }
 }
-//# sourceMappingURL=keyboard-event.js.map

package/lib/combo-box/helpers/renderer.d.ts

@@ -0,0 +1,8 @@
+import { Renderer } from '../../list/renderer.js';
+/**
+ * Renders list items as `ef-item` elements.
+ * Extends its behaviour from ListRenderer.
+ */
+export declare class ComboBoxRenderer extends Renderer {
+    constructor(context?: unknown);
+}

package/lib/combo-box/helpers/renderer.js

@@ -0,0 +1,24 @@
+import { ListRenderer } from '../../list/index.js';
+import { Renderer } from '../../list/renderer.js';
+/**
+ * Renders list items as `ef-item` elements.
+ * Extends its behaviour from ListRenderer.
+ */
+export class ComboBoxRenderer extends Renderer {
+    constructor(context) {
+        const listRenderer = new ListRenderer(context);
+        super((item, composer, element) => {
+            // Extending renderer from listRenderer
+            element = listRenderer(item, composer, element);
+            const value = composer.getItemPropertyValue(item, 'value');
+            // Using value as id for `aria-activedescendant` in combobox
+            if (value && element.id !== value) {
+                element.id = value;
+            }
+            else if (!value && element.id) {
+                element.removeAttribute('id');
+            }
+            return element;
+        });
+    }
+}

package/lib/combo-box/helpers/types.d.ts

@@ -1,5 +1,5 @@
-import { DataItem } from '@refinitiv-ui/utils';
-import { ItemData } from '../../item';
+import type { DataItem } from '@refinitiv-ui/utils/lib/collection';
+import type { ItemData } from '../../item';
 /**
  * Predicate callback
  * Matches item against filter function

package/lib/combo-box/helpers/types.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=types.js.map