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

package/lib/interactive-chart/index.js

@@ -1,20 +1,22 @@
-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;
-};
 var InteractiveChart_1;
-import { ResponsiveElement, html, css, customElement, property, query } from '@refinitiv-ui/core';
-import { color as parseColor } from '@refinitiv-ui/utils';
+import { __decorate } from "tslib";
+import { ResponsiveElement, html, css, DeprecationNotice } 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 { VERSION } from '../version.js';
+import { color as parseColor } from '@refinitiv-ui/utils/lib/color.js';
 import { createChart as chart } from 'lightweight-charts';
-import '../tooltip';
+import '../tooltip/index.js';
+import { LegendStyle } from './helpers/types.js';
+import { merge } from './helpers/merge.js';
 const NOT_AVAILABLE_DATA = 'N/A';
 const NO_DATA_POINT = '--';
 /**
  * A charting component that allows you to create several use cases of financial chart.
  * By lightweight-charts library.
  * @slot legend - Slot to use for implementing custom legend.
+ * @fires initialized - Dispatched when chart is initialized
  */
 let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends ResponsiveElement {
     constructor() {
@@ -33,10 +35,14 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
          */
         this.disabledJumpButton = false;
         /**
-         * Set legend style i.e. `horizontal`, `vertical`. Default is `vertical`.
+         * Deprecation noticed, used to display a warning message
+         * when deprecated features are used.
+        */
+        this.deprecationNotice = new DeprecationNotice('`legendstyle` attribute and property are deprecated. Use `legend-style` for attribute and `legendStyle` property instead.');
+        /**
+         * @ignore
+         * Array of series instances in chart
          */
-        this.legendStyle = 'vertical';
-        /** Array of series instances in chart */
         this.seriesList = [];
         this.jumpButtonInitialized = false;
         this.legendInitialized = false;
@@ -104,6 +110,29 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
             }
         };
     }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * Set legend style i.e. `horizontal`, `vertical`.
+     * @param {LegendStyle} value legend style value
+     * @type {"vertical" | "horizontal"} type of legend style
+     * @default vertical
+     **/
+    set legendStyle(value) {
+        const oldValue = this.legendStyle;
+        if (oldValue !== value) {
+            this._legendStyle = value;
+            this.requestUpdate('legend-style', oldValue);
+        }
+    }
+    get legendStyle() {
+        return this._legendStyle || this.deprecatedLegendStyle || LegendStyle.vertical;
+    }
     /**
      * @returns return config of property component
      */
@@ -129,8 +158,11 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
         if (changedProperties.has('disabledJumpButton')) {
             this.onJumpButtonChange(this.disabledJumpButton);
         }
-        if (changedProperties.has('legendStyle')) {
-            const oldLegendStyle = changedProperties.get('legendStyle');
+        if (changedProperties.has('deprecatedLegendStyle') || changedProperties.has('legend-style')) {
+            if (changedProperties.has('deprecatedLegendStyle')) {
+                this.deprecationNotice.show();
+            }
+            const oldLegendStyle = (changedProperties.get('legend-style') || changedProperties.get('deprecatedLegendStyle'));
             this.onLegendStyleChange(this.legendStyle, oldLegendStyle);
         }
     }
@@ -457,7 +489,7 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
                     this.internalConfig.series[index].seriesOptions = seriesThemeOptions;
                 }
                 else {
-                    this.mergeObjects(seriesOptions, seriesThemeOptions);
+                    merge(seriesOptions, seriesThemeOptions);
                 }
             }
         }
@@ -506,7 +538,7 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
                     }
                 }
             };
-            this.mergeObjects(chartOptions, chartThemeOptions);
+            merge(chartOptions, chartThemeOptions);
             if (!config.options) {
                 this.chart.applyOptions(chartThemeOptions);
             }
@@ -780,20 +812,20 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
      */
     createTextPrice(rowLegend, price, priceColor, index) {
         var _a;
-        // Uses price formatter if provided
-        const formatter = this.internalConfig.series[index].hasOwnProperty('legendPriceFormatter') ? this.internalConfig.series[index].legendPriceFormatter : null;
-        price = (formatter ? formatter(price) : price);
+        const formatter = this.internalConfig.series[index].legendPriceFormatter;
+        // Formats legend only when formatter and data point are provided
+        const formattedPrice = !!formatter && price !== NO_DATA_POINT ? formatter(price) : price;
         // Create text price after chart has rendered
         if (this.isHTMLElement(rowLegend)) {
             rowLegend.setAttribute('data-color', priceColor);
-            this.createSpan(rowLegend, price);
+            this.createSpan(rowLegend, formattedPrice);
         }
         // Handle update text price when mouse crosshairMove in chart
         else if (this.isNodeListElement(rowLegend)) {
             const symbolElem = rowLegend[index].children[0];
             const spanIndex = ((_a = symbolElem.getAttribute('class')) === null || _a === void 0 ? void 0 : _a.indexOf('symbol')) === 0 ? 1 : 0;
             const rowLegendElem = rowLegend[index];
-            rowLegendElem.children[spanIndex].textContent = `${price}`;
+            rowLegendElem.children[spanIndex].textContent = `${formattedPrice}`;
             rowLegendElem.children[spanIndex].style.color = `${priceColor}`;
         }
     }
@@ -979,31 +1011,7 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
         return colors;
     }
     /**
-     * Merges properties of one object into another.
-     * @param a Object to merge into
-     * @param b Object to merge from
-     * @param force Force apply the change
-     * @param record Record of objects, to check for circular references
-     * @returns {void}
-     */
-    mergeObjects(a, b, force = false, record = []) {
-        let value;
-        let isObject;
-        /* eslint-disable @typescript-eslint/no-explicit-any */
-        Object.keys(b).forEach(key => {
-            value = b[key];
-            isObject = value && typeof value === 'object' && value.toString() === '[object Object]';
-            if (!(key in a) || (!isObject && force)) {
-                a[key] = b[key];
-            }
-            if (isObject && !record.includes(value)) {
-                record.push(b[key]);
-                this.mergeObjects(a[key], b[key], force, record);
-            }
-        });
-    }
-    /**
-    * A `CSSResult` that will be used
+    * A `CSSResultGroup` that will be used
     * to style the host, slotted children
     * and the internal template of the element.
     * @return CSS template
@@ -1032,8 +1040,8 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
         <div part="jump-button"></div>
       </div>
       <div part="branding-container" title="" tooltip="Powered by Trading View">
-        <svg viewBox="0 0 33 19" part="branding">
-          <path d="M29.0317379,7.38247569 C29.5989701,8.20545373 29.9478191,9.19057395 29.9946037,10.2541551 C31.7452105,10.8703835 33,12.5386559 33,14.5 C33,16.9852814 30.9852814,19 28.5,19 L6,19 C4.35376245,19 2.86237543,18.3370061 1.7782826,17.2634619 L11.3238065,9.70658883 C11.6743726,9.89384408 12.0747893,10 12.5,10 C12.8814296,10 13.242908,9.91457903 13.5663489,9.76182351 L18.1165746,13.743271 C18.0408521,13.9819846 18,14.2362216 18,14.5 C18,15.8807119 19.1192881,17 20.5,17 C21.8807119,17 23,15.8807119 23,14.5 C23,14.1775704 22.9389612,13.8693971 22.8278086,13.586405 L29.0317379,7.38247569 Z M27.6175243,5.96826213 L21.413595,12.1721914 C21.1306029,12.0610388 20.8224296,12 20.5,12 C20.1185704,12 19.757092,12.085421 19.4336511,12.2381765 L14.8834254,8.25672903 C14.9591479,8.01801537 15,7.76377844 15,7.5 C15,6.11928813 13.8807119,5 12.5,5 C11.1192881,5 10,6.11928813 10,7.5 C10,7.72070771 10.0286003,7.93473545 10.082297,8.13857926 L0.609477485,15.6378947 C0.219150823,14.8417652 0,13.9464753 0,13 C0,9.6862915 2.6862915,7 6,7 C6.02064279,7 6.04126123,7.00010425 6.06185483,7.00031224 C6.55381427,3.0538495 9.92027475,0 14,0 C17.6455896,0 20.7216389,2.43849213 21.6860468,5.77337533 C22.5093073,5.28219823 23.4716982,5 24.5,5 C25.6574983,5 26.7314831,5.35756404 27.6175243,5.96826213 Z"></path>
+        <svg width="33" height="19" viewBox="0 0 611 314"  part="branding">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M341 124C375.242 124 403 96.2417 403 62C403 27.7583 375.242 0 341 0C306.758 0 279 27.7583 279 62C279 96.2417 306.758 124 341 124ZM481 314H337L467 4H611L481 314ZM124 4H248V128V314H124V128H0V4H124Z"/>
         </svg>
       </div>
       <div part="chart"></div>
@@ -1060,8 +1068,11 @@ __decorate([
     property({ type: Boolean, reflect: true, attribute: 'disabled-jump-button' })
 ], InteractiveChart.prototype, "disabledJumpButton", void 0);
 __decorate([
-    property({ type: String, reflect: true, attribute: 'legendstyle' })
-], InteractiveChart.prototype, "legendStyle", void 0);
+    property({ type: String, attribute: 'legendstyle' })
+], InteractiveChart.prototype, "deprecatedLegendStyle", void 0);
+__decorate([
+    property({ type: String, attribute: 'legend-style' })
+], InteractiveChart.prototype, "legendStyle", null);
 __decorate([
     query('[part=chart]', true)
 ], InteractiveChart.prototype, "chartContainer", void 0);
@@ -1080,4 +1091,3 @@ InteractiveChart = InteractiveChart_1 = __decorate([
     })
 ], InteractiveChart);
 export { InteractiveChart };
-//# sourceMappingURL=index.js.map

package/lib/item/custom-elements.json

@@ -58,7 +58,7 @@
           "name": "disabled",
           "description": "Set disabled state.",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "properties": [
@@ -114,12 +114,12 @@
           "type": "string | null"
         },
         {
-          "name": "highlightable",
+          "name": "highlightable (readonly)",
           "description": "Return true if the item can be highlighted. True if not disabled and type is Text",
           "type": "boolean"
         },
         {
-          "name": "isTruncated",
+          "name": "isTruncated (readonly)",
           "description": "Getter returning if the label is truncated",
           "type": "boolean"
         },
@@ -135,7 +135,7 @@
           "attribute": "disabled",
           "description": "Set disabled state.",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "slots": [

package/lib/item/custom-elements.md

@@ -0,0 +1,29 @@
+# ef-item
+
+Used as a basic building block to compose complex custom elements,
+additionally it can be used by applications
+to create simple menus or navigation panels.
+
+## Properties
+
+| Property                   | Attribute     | Type               | Default | Description                                      |
+|----------------------------|---------------|--------------------|---------|--------------------------------------------------|
+| `disabled`                 | `disabled`    | `boolean`          | false   | Set disabled state.                              |
+| `for`                      | `for`         | `string \| null`   | null    | Specifies which element an item is bound to      |
+| `highlightable (readonly)` |               | `boolean`          |         | Return true if the item can be highlighted. True if not disabled and type is Text |
+| `highlighted`              | `highlighted` | `boolean`          | false   | Highlight the item                               |
+| `icon`                     | `icon`        | `string \| null`   | null    | Set the icon name from the ef-icon list          |
+| `isTruncated (readonly)`   |               | `boolean`          |         | Getter returning if the label is truncated       |
+| `label`                    | `label`       | `string \| null`   | null    | The text for the label indicating the meaning of the item.<br />By having both `label` and content, `label` always takes priority |
+| `multiple`                 | `multiple`    | `boolean`          | false   | Is the item part of a multiple selection         |
+| `selected`                 | `selected`    | `boolean`          | false   | Indicates that the item is selected              |
+| `subLabel`                 | `sub-label`   | `string \| null`   | null    | The`subLabel` property represents the text beneath the label. |
+| `type`                     | `type`        | `ItemType \| null` | null    | If defined value can be `text`, `header` or `divider` |
+| `value`                    | `value`       | `string`           | ""      | The content of this attribute represents the value of the item. |
+
+## Slots
+
+| Name    | Description                                      |
+|---------|--------------------------------------------------|
+| `left`  | Used to render the content on the left of the label. |
+| `right` | Used to render the content on the right of the label. |

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

@@ -1,4 +1,4 @@
-import { DataItem } from '@refinitiv-ui/utils';
+import type { DataItem } from '@refinitiv-ui/utils/lib/collection.js';
 export declare type ItemType = 'text' | 'header' | 'divider';
 interface CommonItem extends DataItem {
     /**

package/lib/item/helpers/types.js

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

package/lib/item/index.d.ts

@@ -1,8 +1,8 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, CSSResult, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
-import '../icon';
-import '../checkbox';
-import { ItemType } from './helpers/types';
+import { ControlElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import type { ItemType } from './helpers/types';
+import '../icon/index.js';
+import '../checkbox/index.js';
 export * from './helpers/types';
 /**
  * Used as a basic building block to compose complex custom elements,
@@ -10,7 +10,7 @@ export * from './helpers/types';
  * to create simple menus or navigation panels.
  *
  * @attr {string} value - The content of this attribute represents the value of the item.
- * @prop {string} [value=] - The content of this attribute represents the value of the item.
+ * @prop {string} [value=""] - The content of this attribute represents the value of the item.
  *
  * @attr {boolean} disabled - Set disabled state.
  * @prop {boolean} [disabled=false] - Set disabled state.
@@ -20,10 +20,16 @@ export * from './helpers/types';
  */
 export declare class Item extends ControlElement {
     /**
-     * @returns `CSSResult` that will be used to style the host,
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * `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;
     /**
      * The text for the label indicating the meaning of the item.
      * By having both `label` and content, `label` always takes priority
@@ -38,10 +44,19 @@ export declare class Item extends ControlElement {
      * Set the icon name from the ef-icon list
      */
     icon: string | null;
+    private _selected;
     /**
      * Indicates that the item is selected
+     * @param value selected value
+     * @default false
+     */
+    set selected(value: boolean);
+    get selected(): boolean;
+    /**
+     * Aria indicating current select state
+     * @ignore
      */
-    selected: boolean;
+    ariaSelected: string;
     /**
      * Is the item part of a multiple selection
      */
@@ -139,4 +154,6 @@ declare global {
       'ef-item': Partial<Item> | JSXInterface.ControlHTMLAttributes<Item>;
     }
   }
-}
+}
+
+export {};

package/lib/item/index.js

@@ -1,12 +1,11 @@
-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 { ControlElement, css, customElement, html, property, query } from '@refinitiv-ui/core';
-import '../icon';
-import '../checkbox';
+import { __decorate } from "tslib";
+import { ControlElement, css, html } 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 { VERSION } from '../version.js';
+import '../icon/index.js';
+import '../checkbox/index.js';
 export * from './helpers/types';
 const isAllWhitespaceTextNode = (node) => {
     var _a;
@@ -19,7 +18,7 @@ const isAllWhitespaceTextNode = (node) => {
  * to create simple menus or navigation panels.
  *
  * @attr {string} value - The content of this attribute represents the value of the item.
- * @prop {string} [value=] - The content of this attribute represents the value of the item.
+ * @prop {string} [value=""] - The content of this attribute represents the value of the item.
  *
  * @attr {boolean} disabled - Set disabled state.
  * @prop {boolean} [disabled=false] - Set disabled state.
@@ -44,10 +43,12 @@ let Item = class Item extends ControlElement {
          * Set the icon name from the ef-icon list
          */
         this.icon = null;
+        this._selected = false;
         /**
-         * Indicates that the item is selected
+         * Aria indicating current select state
+         * @ignore
          */
-        this.selected = false;
+        this.ariaSelected = 'false';
         /**
          * Is the item part of a multiple selection
          */
@@ -76,12 +77,20 @@ let Item = class Item extends ControlElement {
         this.checkSlotChildren = (event) => {
             const slot = event.target;
             this.isSlotEmpty = !slot.assignedNodes().filter(node => !this.isIgnorable(node)).length;
-            void this.requestUpdate();
+            this.requestUpdate();
         };
     }
     /**
-     * @returns `CSSResult` that will be used to style the host,
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * `CSSResultGroup` that will be used to style the host,
      * slotted children and the internal template of the element.
+     * @returns CSS template
      */
     static get styles() {
         return css `
@@ -105,6 +114,22 @@ let Item = class Item extends ControlElement {
       }
     `;
     }
+    /**
+     * Indicates that the item is selected
+     * @param value selected value
+     * @default false
+     */
+    set selected(value) {
+        const oldValue = this._selected;
+        if (oldValue !== value) {
+            this._selected = value;
+            this.ariaSelected = String(value);
+            void this.requestUpdate('selected', oldValue);
+        }
+    }
+    get selected() {
+        return this._selected;
+    }
     /**
      * @param node that should be checked
      * @returns whether node can be ignored.
@@ -220,7 +245,10 @@ __decorate([
 ], Item.prototype, "icon", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], Item.prototype, "selected", void 0);
+], Item.prototype, "selected", null);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'aria-selected' })
+], Item.prototype, "ariaSelected", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Item.prototype, "multiple", void 0);
@@ -242,4 +270,3 @@ Item = __decorate([
     })
 ], Item);
 export { Item };
-//# sourceMappingURL=index.js.map

package/lib/label/custom-elements.json

@@ -6,14 +6,10 @@
       "description": "Displays a text with alternative truncation",
       "attributes": [
         {
-          "name": "truncate",
-          "description": "Enable shortening the slot content",
-          "type": "\"\" | \"center\" | null | undefined"
-        },
-        {
-          "name": "max-line",
+          "name": "line-clamp",
           "description": "Limit the number of lines before truncating",
-          "type": "null"
+          "type": "number",
+          "default": "0"
         },
         {
           "name": "error",
@@ -30,16 +26,11 @@
       ],
       "properties": [
         {
-          "name": "truncate",
-          "attribute": "truncate",
-          "description": "Enable shortening the slot content",
-          "type": "\"\" | \"center\" | null | undefined"
-        },
-        {
-          "name": "maxLine",
-          "attribute": "max-line",
+          "name": "lineClamp",
+          "attribute": "line-clamp",
           "description": "Limit the number of lines before truncating",
-          "type": "null"
+          "type": "number",
+          "default": "0"
         },
         {
           "name": "error",

package/lib/label/custom-elements.md

@@ -0,0 +1,11 @@
+# ef-label
+
+Displays a text with alternative truncation
+
+## Properties
+
+| Property    | Attribute    | Type      | Default | Description                                 |
+|-------------|--------------|-----------|---------|---------------------------------------------|
+| `error`     | `error`      | `boolean` | false   | Set state to error                          |
+| `lineClamp` | `line-clamp` | `number`  | 0       | Limit the number of lines before truncating |
+| `warning`   | `warning`    | `boolean` | false   | Set state to warning                        |