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

package/lib/chart/helpers/legend.js

@@ -71,9 +71,8 @@ const getLegendFillStyle = (dataset, usePointStyle, solidFill = false) => {
         return getLegendColorDontUsePointStyle(dataset, solidFill);
     }
 };
-const helpers = {
+const legendHelper = {
     getLegendFillStyle,
     getLegendStrokeStyle
 };
-export { helpers };
-//# sourceMappingURL=legend.js.map
+export { legendHelper };

package/lib/chart/helpers/merge.d.ts

@@ -0,0 +1,15 @@
+declare type UnknownObject = {
+    [key: string]: unknown;
+};
+declare type MergeObject = UnknownObject | Array<unknown>;
+/**
+ * Merge objects recursively
+ *
+ * @param {MergeObject} object The destination object.
+ * @param {MergeObject} sources The source objects.
+ * @param {boolean} force Force merge if a key of destination object is already exists and a value is not object
+ * @param {MergeObject[]} record The record object which record merged objects recursively
+ * @returns voids
+ */
+declare const merge: (object: MergeObject, sources: MergeObject, force?: boolean, record?: Array<unknown>) => void;
+export { merge, MergeObject };

package/lib/chart/helpers/merge.js

@@ -0,0 +1,28 @@
+/**
+ * Merge objects recursively
+ *
+ * @param {MergeObject} object The destination object.
+ * @param {MergeObject} sources The source objects.
+ * @param {boolean} force Force merge if a key of destination object is already exists and a value is not object
+ * @param {MergeObject[]} record The record object which record merged objects recursively
+ * @returns voids
+ */
+const merge = (object, sources, force = false, record = []) => {
+    let value;
+    let isObject;
+    Object.keys(sources).forEach((key, i) => {
+        // Get value and info from merging object
+        value = Array.isArray(sources) ? sources[i] : sources[key];
+        isObject = (value && typeof value === 'object' && value.toString() === '[object Object]');
+        // Merge if found a new key from source or has a force command
+        if (!(key in object) || (force && !isObject)) {
+            object[key] = value;
+        }
+        // Deep merge objects
+        if (isObject && !record.includes(value)) {
+            record.push(value);
+            merge(object[key], value, force, record);
+        }
+    });
+};
+export { merge };

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

@@ -1,25 +1,45 @@
 /// <reference types="chart.js" />
-import type { ElementSize } from '@refinitiv-ui/core';
-export interface ResizeEvent extends CustomEvent {
-    detail: ElementSize;
-}
-export declare type MergeObject = {
-    [key: string]: any;
-};
 export declare type DatasetColors = {
     solid: string | string[];
     opaque: string | string[];
 };
 export declare type ChartDataSetsColor = Chart.ChartColor | Chart.ChartColor[] | Chart.Scriptable<Chart.ChartColor> | undefined;
-export interface ChartConfig extends Chart.ChartConfiguration {
-}
-export interface ChartUpdateProps extends Chart.ChartUpdateProps {
-}
+export declare type ChartConfig = Chart.ChartConfiguration;
+export declare type ChartUpdateProps = Chart.ChartUpdateProps;
 export interface MetaData {
     _chart: Chart;
     _datasetIndex: number;
     _index: number;
-    _view: any;
+    _model: Model;
+    _view: Model;
+    _xScale: Chart.ChartScales;
+    _yScale: Chart.ChartScales;
+    hidden?: boolean;
+}
+interface Model {
+    backgroundColor: string;
+    borderAlign?: Chart.BorderAlignment;
+    borderColor: string;
+    borderWidth?: number;
+    circumference?: number;
+    controlPointNextX: number;
+    controlPointNextY: number;
+    controlPointPreviousX: number;
+    controlPointPreviousY: number;
+    endAngle?: number;
+    hitRadius: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    pointStyle: string;
+    radius: string;
+    skip?: boolean;
+    startAngle?: number;
+    steppedLine?: undefined;
+    tension: number;
+    x: number;
+    y: number;
+    base: number;
+    head: number;
 }
 export interface ChartHelpers {
     draw(): void;
@@ -32,10 +52,18 @@ export interface ChartJS extends Chart {
             defaultColor: string;
             defaultLineHeight: number;
         };
+        scale: {
+            gridLines: {
+                color: string;
+                zeroLineColor: string;
+            };
+        };
         [key: string]: any;
     };
     helpers: {
+        getHoverColor(value: string): string;
         [key: string]: any;
     };
     isDatasetVisible(isDatasetVisible: number): boolean;
 }
+export {};

package/lib/chart/helpers/types.js

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

package/lib/chart/index.d.ts

@@ -1,16 +1,26 @@
 import { JSXInterface } from '../jsx';
 /// <reference types="chart.js" />
-import { BasicElement, PropertyValues, TemplateResult, CSSResult } from '@refinitiv-ui/core';
+import { BasicElement, PropertyValues, TemplateResult, CSSResultGroup } from '@refinitiv-ui/core';
 import 'chart.js/dist/Chart.bundle.min.js';
-import { Header } from '../header';
-import '../header';
-import '../layout';
-import { ChartJS, ChartConfig, ChartUpdateProps, MergeObject, DatasetColors } from './helpers/types';
-export type { ChartConfig };
+import type { ChartJS, ChartConfig, ChartUpdateProps, DatasetColors } from './helpers/types';
+import type { Header } from '../header';
+import '../header/index.js';
+import '../layout/index.js';
+declare global {
+    interface Window {
+        Chart: ChartJS;
+    }
+}
+export type { ChartConfig, ChartUpdateProps };
 /**
- * Charting component that use chartjs library
+ * Charting component that use ChartJS library
  */
 export declare class Chart extends BasicElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
     /**
      * Chart.js object
      */
@@ -31,21 +41,21 @@ export declare class Chart extends BasicElement {
     protected titleElement: Header;
     /**
      * Required properties, needed for chart to work correctly.
-     * @returns {ChartConfig} config
+     * @returns config
      */
     protected get requiredConfig(): ChartConfig;
     /**
      * Safely returns the chart title
-     * @returns {string} chart title
+     * @returns chart title
      */
     protected get chartTitle(): string;
     /**
      * Safely returns a dataset array
-     * @returns {Chart.ChartDataSets[]} dataset array
+     * @returns dataset array
      */
     protected get datasets(): Chart.ChartDataSets[];
     /**
-     * List of avalaible chart colors
+     * List of available chart colors
      * @type {string[]}
      * @returns {string[]} List of available chart colors
      */
@@ -83,7 +93,7 @@ export declare class Chart extends BasicElement {
      * Get as CSS variable and tries to convert it into a usable number
      * @returns {(number|undefined)} The value as a number, or, undefined if NaN.
      */
-    protected cssVarAsNumber(...args: string[] | number[]): number | undefined;
+    protected cssVarAsNumber(...args: string[]): number | undefined;
     /**
      * Generates the legend labels on a given chart
      * @param {ChartJS} chart Chart.js instance
@@ -95,15 +105,6 @@ export declare class Chart extends BasicElement {
      * @returns {void}
      */
     protected mergeConfigs(): void;
-    /**
-     * Merges properties of one object into another.
-     * @param {MergeObject} a Object to merge into
-     * @param {MergeObject} b Object to merge from
-     * @param {boolean} force Force apply the change
-     * @param {object[]} record Record of objects, to check for circular references
-     * @returns {void}
-     */
-    protected mergeObjects(a: MergeObject, b: MergeObject, force?: boolean, record?: object[]): void;
     /**
      * Themes the passed-in configuration object
      * @returns {void}
@@ -136,9 +137,9 @@ export declare class Chart extends BasicElement {
     protected createChart(): void;
     /**
      * Destroys the chart.js object
-     * @returns {void}
+     * @returns True if a chart object has been destroyed
      */
-    protected destroyChart(): void;
+    protected destroyChart(): boolean;
     /**
      * Re-renders the chart based on its config
      * @param {ChartUpdateProps} config Additional configuration object for the update process.
@@ -152,12 +153,17 @@ export declare class Chart extends BasicElement {
      */
     updateChart(config?: ChartUpdateProps): void;
     /**
-     * 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
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
+    /**
+     * Handles resize event of the chart region
+     * @returns {void}
+     */
+    protected onResize(): void;
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.
@@ -176,4 +182,6 @@ declare global {
       'ef-chart': Partial<Chart> | JSXInterface.HTMLAttributes<Chart>;
     }
   }
-}
+}
+
+export {};

package/lib/chart/index.js

@@ -1,17 +1,16 @@
-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, css, query, customElement, property } from '@refinitiv-ui/core';
-import { color as parseColor } from '@refinitiv-ui/utils';
+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 { 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 'chart.js/dist/Chart.bundle.min.js';
-import '../header';
-import '../layout';
-import { helpers as legendHelper } from './helpers/legend';
+import { legendHelper, merge } from './helpers/index.js';
+import '../header/index.js';
+import '../layout/index.js';
 // Register plugins
-import doughnutCenterPlugin from './plugins/doughnut-center-label';
+import doughnutCenterPlugin from './plugins/doughnut-center-label.js';
 window.Chart.pluginService.register(doughnutCenterPlugin);
 const CSS_COLOR_PREFIX = '--chart-color-';
 const CHART_TYPE_OPAQUE = ['line', 'bubble', 'radar', 'polarArea'];
@@ -32,9 +31,10 @@ const ELF_CHART_CONFIG = {
         }
     }
 };
+// eslint-disable-next-line @typescript-eslint/no-unsafe-call
 window.Chart.helpers.merge(DEFAULT_CHART_CONFIG, ELF_CHART_CONFIG);
 /**
- * Charting component that use chartjs library
+ * Charting component that use ChartJS library
  */
 let Chart = class Chart extends BasicElement {
     constructor() {
@@ -54,16 +54,20 @@ let Chart = class Chart extends BasicElement {
          * @returns {Chart.ChartLegendLabelItem[]} Array of label configurations
          */
         this.generateLegendLabels = (chart) => {
-            var _a, _b;
+            var _a, _b, _c, _d;
             if (!((_a = this.config) === null || _a === void 0 ? void 0 : _a.type)) {
                 return [];
             }
+            const chartOption = DEFAULT_CHART_CONFIG[this.config.type];
             if (this.datasets.length
-                && DEFAULT_CHART_CONFIG[this.config.type].legend
+                && chartOption.legend
                 && Array.isArray(this.datasets[0].backgroundColor)) {
-                const legends = DEFAULT_CHART_CONFIG[this.config.type].legend.labels.generateLabels(chart);
-                // Customize for doughnut chart change border color to backgroud color
-                if (['pie', 'doughnut'].includes((_b = this.config) === null || _b === void 0 ? void 0 : _b.type) && this.datasets.length > 1) {
+                let legends = [];
+                if ((_b = chartOption.legend.labels) === null || _b === void 0 ? void 0 : _b.generateLabels) {
+                    legends = (_c = chartOption.legend.labels) === null || _c === void 0 ? void 0 : _c.generateLabels(chart);
+                }
+                // Customize for doughnut chart change border color to background color
+                if (['pie', 'doughnut'].includes((_d = this.config) === null || _d === void 0 ? void 0 : _d.type) && this.datasets.length > 1) {
                     legends.forEach((label) => {
                         label.strokeStyle = label.fillStyle;
                     });
@@ -91,14 +95,21 @@ let Chart = class Chart extends BasicElement {
             });
         };
     }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
     /**
      * Required properties, needed for chart to work correctly.
-     * @returns {ChartConfig} config
+     * @returns config
      */
     get requiredConfig() {
         return {
             options: {
-                responsive: true,
+                responsive: false,
                 maintainAspectRatio: false,
                 title: {
                     display: false
@@ -108,7 +119,7 @@ let Chart = class Chart extends BasicElement {
     }
     /**
      * Safely returns the chart title
-     * @returns {string} chart title
+     * @returns chart title
      */
     get chartTitle() {
         var _a, _b, _c;
@@ -120,14 +131,14 @@ let Chart = class Chart extends BasicElement {
     }
     /**
      * Safely returns a dataset array
-     * @returns {Chart.ChartDataSets[]} dataset array
+     * @returns dataset array
      */
     get datasets() {
         var _a, _b;
         return ((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.datasets) || [];
     }
     /**
-     * List of avalaible chart colors
+     * List of available chart colors
      * @type {string[]}
      * @returns {string[]} List of available chart colors
      */
@@ -135,7 +146,7 @@ let Chart = class Chart extends BasicElement {
         let color;
         let index = 0;
         const colors = [];
-        while ((color = this.getComputedVariable(CSS_COLOR_PREFIX + (index += 1)))) {
+        while ((color = this.getComputedVariable(`${CSS_COLOR_PREFIX}${++index}`))) {
             colors.push(color);
         }
         return colors;
@@ -247,31 +258,8 @@ let Chart = class Chart extends BasicElement {
         if (!this.config) {
             return;
         }
-        this.mergeObjects(this.config, this.themableConfig);
-        this.mergeObjects(this.config, this.requiredConfig, true);
-    }
-    /**
-     * Merges properties of one object into another.
-     * @param {MergeObject} a Object to merge into
-     * @param {MergeObject} b Object to merge from
-     * @param {boolean} force Force apply the change
-     * @param {object[]} record Record of objects, to check for circular references
-     * @returns {void}
-     */
-    mergeObjects(a, b, force = false, record = []) {
-        let value;
-        let isObject;
-        Object.keys(b).forEach(key => {
-            value = b[key];
-            isObject = value && value.toString() === '[object Object]';
-            if (!(key in a) || (force && !isObject)) {
-                a[key] = b[key];
-            }
-            if (isObject && !record.includes(value)) {
-                record.push(b[key]);
-                this.mergeObjects(a[key], b[key], force, record);
-            }
-        });
+        merge(this.config, this.themableConfig);
+        merge(this.config, this.requiredConfig, true);
     }
     /**
      * Themes the passed-in configuration object
@@ -281,7 +269,7 @@ let Chart = class Chart extends BasicElement {
         this.mergeConfigs();
         const extendColorsIfRequired = (currentColors, infoColors) => {
             if (Array.isArray(currentColors) && Array.isArray(infoColors) && currentColors.length < infoColors.length) {
-                this.mergeObjects(currentColors, infoColors);
+                merge(currentColors, infoColors);
             }
         };
         this.datasets.forEach((dataset) => {
@@ -371,24 +359,32 @@ let Chart = class Chart extends BasicElement {
     createChart() {
         const ctx = this.canvas.getContext('2d');
         if (ctx && this.config) {
+            // Are we reusing an old chart canvas?
+            const isReusingCanvas = this.destroyChart();
             // Preparing the resources before create chart
-            this.destroyChart();
             this.decorateConfig();
             this.manageTitle();
             // Create chart
             this.chart = new window.Chart(ctx, this.config);
+            if (isReusingCanvas) {
+                // If we're reusing an old chart canvas, we need to resize it.
+                // Destroying a chart has some strange side-effects on the canvas.
+                this.chart.resize();
+            }
         }
     }
     /**
      * Destroys the chart.js object
-     * @returns {void}
+     * @returns True if a chart object has been destroyed
      */
     destroyChart() {
         if (this.chart) {
             // Destroy the chart
             this.chart.destroy();
             this.chart = null;
+            return true;
         }
+        return false;
     }
     /**
      * Re-renders the chart based on its config
@@ -417,7 +413,7 @@ let Chart = class Chart extends BasicElement {
         this.renderChart(config);
     }
     /**
-     * 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
@@ -455,6 +451,14 @@ let Chart = class Chart extends BasicElement {
       }
     `;
     }
+    /**
+     * Handles resize event of the chart region
+     * @returns {void}
+     */
+    onResize() {
+        var _a;
+        (_a = this.chart) === null || _a === void 0 ? void 0 : _a.resize();
+    }
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.
@@ -464,7 +468,7 @@ let Chart = class Chart extends BasicElement {
         return html `
       <ef-layout flex container>
         <ef-header></ef-header>
-        <ef-layout part="chart">
+        <ef-layout part="chart" @resize="${this.onResize}">
           <canvas id="canvas"></canvas>
         </ef-layout>
       </ef-layout>`;
@@ -485,4 +489,3 @@ Chart = __decorate([
     })
 ], Chart);
 export { Chart };
-//# sourceMappingURL=index.js.map

package/lib/chart/plugins/doughnut-center-label.js

@@ -21,8 +21,8 @@ const drawItemBorder = function (chart, active) {
         const datasets = chart.data.datasets[chartItem._datasetIndex];
         vm.backgroundColor = datasets.backgroundColor[chartItem._index];
         vm.backgroundColor = CHART.helpers.getHoverColor(vm.backgroundColor); // we need to make color bolder
-        vm.borderWidth = datasets.borderWidth || ((_c = (_b = (_a = chart.config.options) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.arc) === null || _c === void 0 ? void 0 : _c.borderWidth);
-        vm.borderColor = getComputedStyle(chart.canvas).getPropertyValue('--doughnut-border-color') || CHART.defaults.global.defaultFontColor;
+        vm.borderWidth = (datasets.borderWidth || ((_c = (_b = (_a = chart.config.options) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.arc) === null || _c === void 0 ? void 0 : _c.borderWidth));
+        vm.borderColor = (getComputedStyle(chart.canvas).getPropertyValue('--doughnut-border-color') || CHART.defaults.global.defaultFontColor);
         const sA = vm.startAngle;
         const eA = vm.endAngle;
         if (ctx) {
@@ -133,10 +133,10 @@ const plugins = {
         for (let i = 0; i < texts.length; i++) {
             let targetFont;
             if (texts[i].bold) {
-                targetFont = 'bold ' + fontSizeToUse * fontSizeHeaderRatio + 'px ' + defaultFontStyle;
+                targetFont = `bold ${fontSizeToUse * fontSizeHeaderRatio}px ${defaultFontStyle || ''}`;
             }
             else {
-                targetFont = fontSizeToUse + 'px ' + defaultFontStyle;
+                targetFont = `${fontSizeToUse}px ${defaultFontStyle || ''}`;
             }
             ctx.font = targetFont;
             let targetText = texts[i].label;
@@ -194,4 +194,3 @@ const plugins = {
     }
 };
 export default plugins;
-//# sourceMappingURL=doughnut-center-label.js.map

package/lib/checkbox/custom-elements.json

@@ -21,13 +21,13 @@
           "name": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "properties": [
@@ -50,14 +50,14 @@
           "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"
         }
       ],
       "events": [

package/lib/checkbox/custom-elements.md

@@ -0,0 +1,18 @@
+# ef-checkbox
+
+Form control for selecting one or several options
+
+## Properties
+
+| Property        | Attribute       | Type      | Default | Description                |
+|-----------------|-----------------|-----------|---------|----------------------------|
+| `checked`       | `checked`       | `boolean` | false   | Value of checkbox          |
+| `disabled`      | `disabled`      | `boolean` | false   | Set disabled state         |
+| `indeterminate` | `indeterminate` | `boolean` | false   | Set state to indeterminate |
+| `readonly`      | `readonly`      | `boolean` | false   | Set readonly state         |
+
+## Events
+
+| Event             | Description                                |
+|-------------------|--------------------------------------------|
+| `checked-changed` | Fired when the `checked` property changes. |

package/lib/checkbox/index.d.ts

@@ -1,6 +1,6 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
-import '../icon';
+import { ControlElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import '../icon/index.js';
 /**
  * Form control for selecting one or several options
  * @fires checked-changed - Fired when the `checked` property changes.
@@ -13,30 +13,43 @@ import '../icon';
  */
 export declare class Checkbox extends ControlElement {
     /**
-     * A `CSSResult` that will be used
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    protected readonly defaultRole: string | null;
+    /**
+     * 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;
+    private _checked;
     /**
      * Value of checkbox
+     * @param value new checked value
+     * @default false
      */
-    checked: boolean;
+    set checked(value: boolean);
+    get checked(): boolean;
+    private _indeterminate;
     /**
      * Set state to indeterminate
+     * @param value new indeterminate value
+     * @default false
      */
-    indeterminate: boolean;
+    set indeterminate(value: boolean);
+    get indeterminate(): boolean;
     /**
-     * Getter for label
+     * Indicates current state of checkbox
+     * @ignore
      */
-    private labelEl;
+    ariaChecked: string;
     /**
-     * Updates the element
-     * @param changedProperties Properties that has changed
-     * @returns {void}
+     * Getter for label
      */
-    protected update(changedProperties: PropertyValues): void;
+    private labelEl;
     /**
      * Called once after the component is first rendered
      * @param changedProperties map of changed properties with old values
@@ -79,4 +92,6 @@ declare global {
       'ef-checkbox': Partial<Checkbox> | JSXInterface.ControlHTMLAttributes<Checkbox>;
     }
   }
-}
+}
+
+export {};