@refinitiv-ui/elements 5.5.0 → 5.8.1

package/lib/calendar/locales.js

@@ -1,6 +1,4 @@
 import { Phrasebook } from '@refinitiv-ui/phrasebook';
-import { DEFAULT_LOCALE, resolveLocale } from '@refinitiv-ui/i18n';
-import { utcParse } from '@refinitiv-ui/utils';
 // While Intl can support literally all world languages
 // for safety still limit the number of locales, for the following reasons
 // 1) different browsers and OS support different locales, and the result might be different.
@@ -40,105 +38,3 @@ Phrasebook.define('ru', scope, ru);
 Phrasebook.define('th', scope, th);
 Phrasebook.define('zh', scope, zh);
 Phrasebook.define('ar', scope, ar);
-const calendar = {
-    // calendar property is not part of TypeScript Intl.DateTimeFormatOptions,
-    // but is supported by all modern browsers and is required by Intl.DateTimeFormat polyfill
-    calendar: 'gregory',
-    timeZone: 'UTC'
-};
-/**
- * Custom formats for date formatting
- */
-const DateMessageFormats = {
-    date: {
-        calendarMonthEra: Object.assign(Object.assign({}, calendar), { month: 'long', year: 'numeric', era: 'short' }),
-        calendarMonth: Object.assign(Object.assign({}, calendar), { month: 'long', year: 'numeric' }),
-        calendarYearEra: Object.assign(Object.assign({}, calendar), { year: 'numeric', era: 'short' }),
-        calendarYear: Object.assign(Object.assign({}, calendar), { year: 'numeric' })
-    }
-};
-/**
- * Used to format views
- */
-const ViewFormatTranslateParams = {
-    unicodeExtensions: {
-        // while latest Chrome, FF and Intl.DateTimeFormat polyfill support
-        // calendar option to format date,
-        // older browsers as Safari and IE11 need this to be provided as
-        // unicode extension, e.g. lang="th-u-ca-gregory"
-        ca: 'gregory'
-    },
-    formats: DateMessageFormats
-};
-/**
- * Get locale based on provided locale and Phrasebook available locales
- * @param locale locale tag
- * @returns resolved locale
- */
-const getLocale = (locale) => {
-    return resolveLocale(scope, locale) || DEFAULT_LOCALE;
-};
-/**
- * Get a list of weekday abbreviations based on locale
- * @param locale Locale
- * @param [width='short'] Day width
- * @returns The list of weekdays starting from Sunday
- */
-const weekdaysNames = (locale, width = 'narrow') => {
-    locale = getLocale(locale);
-    // we know that Jan 04 1970 is Sunday
-    let day = 4;
-    const date = utcParse({
-        year: 1970,
-        month: 0,
-        day: day
-    });
-    const weekdays = [];
-    while (day < 11) {
-        weekdays.push(date.toLocaleDateString(locale, { weekday: width, timeZone: 'UTC' }));
-        day += 1;
-        date.setUTCDate(day);
-    }
-    return weekdays;
-};
-/**
- * Get a list of months based on locale
- * @param locale Locale
- * @param [width='short'] Month width
- * @returns The list of months starting from January
- */
-const monthsNames = (locale, width = 'short') => {
-    locale = getLocale(locale);
-    let month = 0;
-    const date = utcParse({
-        year: 1970,
-        month,
-        day: 1
-    });
-    const months = [];
-    while (month < 12) {
-        months.push(date.toLocaleDateString(locale, { month: width, timeZone: 'UTC' }));
-        month += 1;
-        date.setUTCMonth(month);
-    }
-    return months;
-};
-/**
- * @deprecated
- * Some old browsers (as IE11) do not support formatting of old dates before BC
- * Instead simply convert the date manually to match Translate function
- * @param date Date
- * @param locale locale
- * @param [includeMonth=false] true to include month
- * @param [includeEra=false] tru to include era descriptor
- * @returns formatted dates
- */
-const formatLocaleDate = (date, locale, includeMonth = false, includeEra = false) => {
-    const monthNames = monthsNames(locale, 'long');
-    locale = getLocale(locale);
-    const year = date.getUTCFullYear();
-    const month = date.getUTCMonth();
-    // BC flags are not supported. Always use English
-    return `${includeMonth ? `${monthNames[month]} ` : ''} ${year > 0 ? year : year === 0 ? '1' : Math.abs(year - 1)}${includeEra ? year <= 0 ? ' BC' : ' AD' : ''}`;
-};
-export { weekdaysNames, monthsNames, formatLocaleDate, ViewFormatTranslateParams };

package/lib/calendar/types.d.ts

@@ -1,8 +1,4 @@
-export declare enum RenderView {
-    DAY = "day",
-    MONTH = "month",
-    YEAR = "year"
-}
+import { RenderView } from './constants.js';
 export interface CellSelectionModel {
     selected?: boolean;
     range?: boolean;

package/lib/calendar/types.js

@@ -1,6 +1 @@
-export var RenderView;
-(function (RenderView) {
-    RenderView["DAY"] = "day";
-    RenderView["MONTH"] = "month";
-    RenderView["YEAR"] = "year";
-})(RenderView || (RenderView = {}));
+export {};

package/lib/calendar/utils.d.ts

@@ -1,3 +1,4 @@
+import { TranslateParams } from '@refinitiv-ui/i18n';
 export declare type MonthInfo = {
     days: number;
     month: number;
@@ -9,4 +10,33 @@ export declare type MonthInfo = {
  * @returns Month information object
  */
 declare const monthInfo: (value: string) => MonthInfo;
-export { monthInfo };
+/**
+ * Get a list of weekday abbreviations based on locale
+ * @param locale Locale
+ * @param [width='short'] Day width
+ * @returns The list of weekdays starting from Sunday
+ */
+declare const weekdaysNames: (locale: string, width?: Intl.DateTimeFormatOptions['weekday']) => string[];
+/**
+ * Get a list of months based on locale
+ * @param locale Locale
+ * @param [width='short'] Month width
+ * @returns The list of months starting from January
+ */
+declare const monthsNames: (locale: string, width?: Intl.DateTimeFormatOptions['month']) => string[];
+/**
+ * @deprecated
+ * Some old browsers (as IE11) do not support formatting of old dates before BC
+ * Instead simply convert the date manually to match Translate function
+ * @param date Date
+ * @param locale locale
+ * @param [includeMonth=false] true to include month
+ * @param [includeEra=false] tru to include era descriptor
+ * @returns formatted dates
+ */
+declare const formatLocaleDate: (date: Date, locale: string, includeMonth?: boolean, includeEra?: boolean) => string;
+/**
+ * Used to format views
+ */
+declare const ViewFormatTranslateParams: TranslateParams;
+export { monthInfo, weekdaysNames, monthsNames, formatLocaleDate, ViewFormatTranslateParams };

package/lib/calendar/utils.js

@@ -1,4 +1,5 @@
-import { toDateSegment, getDaysInMonth } from '@refinitiv-ui/utils';
+import { toDateSegment, getDaysInMonth, utcParse } from '@refinitiv-ui/utils/lib/date.js';
+import { DEFAULT_LOCALE, resolveLocale } from '@refinitiv-ui/i18n';
 /**
  * Get information about number of days, month number and year from date object
  * @param value Date string
@@ -14,4 +15,105 @@ const monthInfo = (value) => {
         year
     };
 };
-export { monthInfo };
+const calendar = {
+    // calendar property is not part of TypeScript Intl.DateTimeFormatOptions,
+    // but is supported by all modern browsers and is required by Intl.DateTimeFormat polyfill
+    calendar: 'gregory',
+    timeZone: 'UTC'
+};
+/**
+ * Custom formats for date formatting
+ */
+const DateMessageFormats = {
+    date: {
+        calendarMonthEra: Object.assign(Object.assign({}, calendar), { month: 'long', year: 'numeric', era: 'short' }),
+        calendarMonth: Object.assign(Object.assign({}, calendar), { month: 'long', year: 'numeric' }),
+        calendarYearEra: Object.assign(Object.assign({}, calendar), { year: 'numeric', era: 'short' }),
+        calendarYear: Object.assign(Object.assign({}, calendar), { year: 'numeric' })
+    }
+};
+/**
+ * Get locale based on provided locale and Phrasebook available locales
+ * @param locale locale tag
+ * @returns resolved locale
+ */
+const getLocale = (locale) => {
+    return resolveLocale('ef-calendar', locale) || DEFAULT_LOCALE;
+};
+/**
+ * Get a list of weekday abbreviations based on locale
+ * @param locale Locale
+ * @param [width='short'] Day width
+ * @returns The list of weekdays starting from Sunday
+ */
+const weekdaysNames = (locale, width = 'narrow') => {
+    locale = getLocale(locale);
+    // we know that Jan 04 1970 is Sunday
+    let day = 4;
+    const date = utcParse({
+        year: 1970,
+        month: 0,
+        day: day
+    });
+    const weekdays = [];
+    while (day < 11) {
+        weekdays.push(date.toLocaleDateString(locale, { weekday: width, timeZone: 'UTC' }));
+        day += 1;
+        date.setUTCDate(day);
+    }
+    return weekdays;
+};
+/**
+ * Get a list of months based on locale
+ * @param locale Locale
+ * @param [width='short'] Month width
+ * @returns The list of months starting from January
+ */
+const monthsNames = (locale, width = 'short') => {
+    locale = getLocale(locale);
+    let month = 0;
+    const date = utcParse({
+        year: 1970,
+        month,
+        day: 1
+    });
+    const months = [];
+    while (month < 12) {
+        months.push(date.toLocaleDateString(locale, { month: width, timeZone: 'UTC' }));
+        month += 1;
+        date.setUTCMonth(month);
+    }
+    return months;
+};
+/**
+ * @deprecated
+ * Some old browsers (as IE11) do not support formatting of old dates before BC
+ * Instead simply convert the date manually to match Translate function
+ * @param date Date
+ * @param locale locale
+ * @param [includeMonth=false] true to include month
+ * @param [includeEra=false] tru to include era descriptor
+ * @returns formatted dates
+ */
+const formatLocaleDate = (date, locale, includeMonth = false, includeEra = false) => {
+    locale = getLocale(locale);
+    const monthNames = monthsNames(locale, 'long');
+    const year = date.getUTCFullYear();
+    const month = date.getUTCMonth();
+    // BC flags are not supported. Always use English
+    return `${includeMonth ? `${monthNames[month]} ` : ''} ${year > 0 ? year : year === 0 ? '1' : Math.abs(year - 1)}${includeEra ? year <= 0 ? ' BC' : ' AD' : ''}`;
+};
+/**
+ * Used to format views
+ */
+const ViewFormatTranslateParams = {
+    unicodeExtensions: {
+        // while latest Chrome, FF and Intl.DateTimeFormat polyfill support
+        // calendar option to format date,
+        // older browsers as Safari and IE11 need this to be provided as
+        // unicode extension, e.g. lang="th-u-ca-gregory"
+        ca: 'gregory'
+    },
+    formats: DateMessageFormats
+};
+export { monthInfo, weekdaysNames, monthsNames, formatLocaleDate, ViewFormatTranslateParams };

package/lib/canvas/custom-elements.json

@@ -8,7 +8,8 @@
         {
           "name": "autoloop",
           "description": "Starts an automatic animation loop.\nEnabling the frame event.",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "properties": [
@@ -16,20 +17,21 @@
           "name": "autoloop",
           "attribute": "autoloop",
           "description": "Starts an automatic animation loop.\nEnabling the frame event.",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
-          "name": "canvas",
+          "name": "canvas (readonly)",
           "description": "Html canvas element",
           "type": "HTMLCanvasElement"
         },
         {
-          "name": "ctx",
+          "name": "ctx (readonly)",
           "description": "Alias of context",
           "type": "CanvasRenderingContext2D | null"
         },
         {
-          "name": "context",
+          "name": "context (readonly)",
           "description": "The 2 dimensional context of the canvas, used for drawing",
           "type": "CanvasRenderingContext2D | null"
         },

package/lib/canvas/custom-elements.md

@@ -0,0 +1,27 @@
+# ef-canvas
+
+A Component uses to draw graphics on a web page,
+it works similarly to the normal HTML5 Canvas element.
+
+## Properties
+
+| Property             | Attribute  | Type                               | Default | Description                                      |
+|----------------------|------------|------------------------------------|---------|--------------------------------------------------|
+| `autoloop`           | `autoloop` | `boolean`                          | false   | Starts an automatic animation loop.<br />Enabling the frame event. |
+| `canvas (readonly)`  |            | `HTMLCanvasElement`                |         | Html canvas element                              |
+| `context (readonly)` |            | `CanvasRenderingContext2D \| null` |         | The 2 dimensional context of the canvas, used for drawing |
+| `ctx (readonly)`     |            | `CanvasRenderingContext2D \| null` |         | Alias of context                                 |
+| `height`             |            | `number`                           | 0       | Height of canvas                                 |
+| `width`              |            | `number`                           | 0       | Width of canvas                                  |
+
+## Methods
+
+| Method       | Type                     | Description                                      |
+|--------------|--------------------------|--------------------------------------------------|
+| `getContext` | `(mode: string): string` | Return context of canvas,<br />support only 2D mode<br /><br />**mode**: mode of canvas's context |
+
+## Events
+
+| Event   | Description                                      |
+|---------|--------------------------------------------------|
+| `frame` | dispatched when next Frame event occurs when autoloop is set to true |

package/lib/canvas/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { ResponsiveElement, TemplateResult, CSSResult, ElementSize } from '@refinitiv-ui/core';
+import { ResponsiveElement, TemplateResult, CSSResultGroup, ElementSize } from '@refinitiv-ui/core';
 /**
  * A Component uses to draw graphics on a web page,
  * it works similarly to the normal HTML5 Canvas element.
@@ -12,12 +12,12 @@ export declare class Canvas extends ResponsiveElement {
      */
     static get version(): string;
     /**
-     * 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;
+    static get styles(): CSSResultGroup;
     width: number;
     height: number;
     private frameId;
@@ -26,6 +26,7 @@ export declare class Canvas extends ResponsiveElement {
     /**
      * Starts an automatic animation loop.
      * Enabling the frame event.
+     * @default false
      */
     get autoloop(): boolean;
     set autoloop(val: boolean);

package/lib/canvas/index.js

@@ -1,11 +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 { ResponsiveElement, html, css, customElement, property } from '@refinitiv-ui/core';
-import { VERSION } from '../';
+import { __decorate } from "tslib";
+import { ResponsiveElement, 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 Component uses to draw graphics on a web page,
  * it works similarly to the normal HTML5 Canvas element.
@@ -27,7 +24,7 @@ let Canvas = class Canvas extends ResponsiveElement {
         return VERSION;
     }
     /**
-     * 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
@@ -51,6 +48,7 @@ let Canvas = class Canvas extends ResponsiveElement {
     /**
      * Starts an automatic animation loop.
      * Enabling the frame event.
+     * @default false
      */
     get autoloop() {
         return this._autoloop;
@@ -58,7 +56,7 @@ let Canvas = class Canvas extends ResponsiveElement {
     set autoloop(val) {
         const oldValue = this._autoloop;
         this._autoloop = val;
-        void this.requestUpdate('autoloop', oldValue);
+        this.requestUpdate('autoloop', oldValue);
         this.loop();
     }
     /**

package/lib/card/custom-elements.json

@@ -35,7 +35,9 @@
         },
         {
           "name": "config",
-          "description": "Set card configurations"
+          "description": "Set card configurations",
+          "type": "CardConfig",
+          "default": "{}"
         }
       ],
       "events": [

package/lib/card/custom-elements.md

@@ -0,0 +1,24 @@
+# ef-card
+
+A card frame component.
+
+## Properties
+
+| Property | Attribute | Type         | Default | Description             |
+|----------|-----------|--------------|---------|-------------------------|
+| `config` |           | `CardConfig` | {}      | Set card configurations |
+| `footer` | `footer`  | `string`     | ""      | Set text on the footer  |
+| `header` | `header`  | `string`     | ""      | Set text on the header  |
+
+## Events
+
+| Event          | Description                       |
+|----------------|-----------------------------------|
+| `item-trigger` | Fired when card menu is selected. |
+
+## Slots
+
+| Name     | Description                                      |
+|----------|--------------------------------------------------|
+| `footer` | Adds slotted content into the footer of the card. |
+| `header` | Adds slotted content into the header of the card. |

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

@@ -1,4 +1,4 @@
-import { OverlayMenuData } from '../../overlay-menu';
+import type { OverlayMenuData } from '../../overlay-menu';
 export declare type CardConfig = {
     /**
     * Configuration for side menu

package/lib/card/index.d.ts

@@ -1,10 +1,10 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
-import '../label';
-import '../button';
-import '../overlay-menu';
-import { CardConfig } from './helpers/types';
-export { CardConfig };
+import { BasicElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import type { CardConfig } from './helpers/types';
+import '../label/index.js';
+import '../button/index.js';
+import '../overlay-menu/index.js';
+export type { CardConfig };
 /**
  * A card frame component.
  *
@@ -20,12 +20,12 @@ export declare class Card extends BasicElement {
      */
     static get version(): string;
     /**
-     * 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.
      * @returns CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     private _config;
     /**
      * Set text on the header
@@ -37,6 +37,8 @@ export declare class Card extends BasicElement {
     footer: string;
     /**
      * Set card configurations
+     * @type {CardConfig}
+     * @default {}
      */
     get config(): CardConfig;
     set config(config: CardConfig);

package/lib/card/index.js

@@ -1,15 +1,14 @@
-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, customElement, property, query, state } from '@refinitiv-ui/core';
-import { isSlotEmpty } from '@refinitiv-ui/utils';
-import '../label';
-import '../button';
-import '../overlay-menu';
-import { VERSION } from '../';
+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 { state } from '@refinitiv-ui/core/lib/decorators/state.js';
+import { VERSION } from '../version.js';
+import { isSlotEmpty } from '@refinitiv-ui/utils/lib/is-slot-empty.js';
+import '../label/index.js';
+import '../button/index.js';
+import '../overlay-menu/index.js';
 /**
  * A card frame component.
  *
@@ -47,7 +46,7 @@ let Card = class Card extends BasicElement {
         return VERSION;
     }
     /**
-     * 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.
      * @returns CSS template
@@ -72,6 +71,8 @@ let Card = class Card extends BasicElement {
     }
     /**
      * Set card configurations
+     * @type {CardConfig}
+     * @default {}
      */
     get config() {
         return this._config;

package/lib/chart/custom-elements.json

@@ -19,7 +19,7 @@
           "type": "ChartConfig"
         },
         {
-          "name": "colors",
+          "name": "colors (readonly)",
           "description": "List of available chart colors",
           "type": "string[]"
         }

package/lib/chart/custom-elements.md

@@ -0,0 +1,16 @@
+# ef-chart
+
+Charting component that use ChartJS library
+
+## Properties
+
+| Property            | Attribute | Type          | Default | Description                                      |
+|---------------------|-----------|---------------|---------|--------------------------------------------------|
+| `colors (readonly)` |           | `string[]`    |         | List of available chart colors                   |
+| `config`            | `config`  | `ChartConfig` | null    | Chart configurations. Same configuration as ChartJS |
+
+## Methods
+
+| Method        | Type                                 | Description                                      |
+|---------------|--------------------------------------|--------------------------------------------------|
+| `updateChart` | `(config?: ChartUpdateProps=): void` | Update all data, title, scales, legends and re-render the chart based on its config<br /><br />**config**: Additional configuration for control an animation in the update process. |

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

@@ -1,2 +1,2 @@
-export * from './legend';
-export * from './merge';
+export * from './legend.js';
+export * from './merge.js';

package/lib/chart/helpers/index.js

@@ -1,2 +1,2 @@
-export * from './legend';
-export * from './merge';
+export * from './legend.js';
+export * from './merge.js';

package/lib/chart/index.d.ts

@@ -1,11 +1,11 @@
 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 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;
@@ -153,12 +153,12 @@ 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}