@refinitiv-ui/elements 5.3.3 → 5.7.0

package/lib/calendar/locales.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/calendar/locales.js

@@ -0,0 +1,40 @@
+import { Phrasebook } from '@refinitiv-ui/phrasebook';
+// 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.
+// 2) first day of week is different. Currently it is not possible to get this info out of Intl object
+const globals = {
+    VIEW_FORMAT: '{includeMonth, select, true {{includeEra, select, true {{ date, date, calendarMonthEra }} other {{ date, date, calendarMonth }}}} other {{ includeEra, select, true {{ date, date, calendarYearEra }} other {{ date, date, calendarYear }}}}}',
+    FIRST_DAY_OF_WEEK: '1'
+};
+const en = globals;
+const enUS = Object.assign(Object.assign({}, en), { FIRST_DAY_OF_WEEK: '0' });
+const enCA = enUS;
+const de = globals;
+const es = globals;
+const fr = globals;
+const frCA = Object.assign(Object.assign({}, fr), { FIRST_DAY_OF_WEEK: '0' });
+const it = globals;
+const ja = globals;
+const ko = Object.assign(Object.assign({}, globals), { FIRST_DAY_OF_WEEK: '0' });
+const pl = globals;
+const ru = globals;
+const th = Object.assign(Object.assign({}, globals), { FIRST_DAY_OF_WEEK: '0' });
+const zh = globals;
+const ar = Object.assign(Object.assign({}, globals), { FIRST_DAY_OF_WEEK: '6' });
+const scope = 'ef-calendar';
+Phrasebook.define('en', scope, en);
+Phrasebook.define('en-CA', scope, enCA);
+Phrasebook.define('en-US', scope, enUS);
+Phrasebook.define('de', scope, de);
+Phrasebook.define('es', scope, es);
+Phrasebook.define('fr', scope, fr);
+Phrasebook.define('fr-CA', scope, frCA);
+Phrasebook.define('it', scope, it);
+Phrasebook.define('ja', scope, ja);
+Phrasebook.define('ko', scope, ko);
+Phrasebook.define('pl', scope, pl);
+Phrasebook.define('ru', scope, ru);
+Phrasebook.define('th', scope, th);
+Phrasebook.define('zh', scope, zh);
+Phrasebook.define('ar', scope, ar);

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/button/themes/halo/dark';
+
+elf.customStyles.define('ef-calendar', ':host{font-style:normal;font-variant:normal;font-weight:400;line-height:normal;text-align:left;text-indent:0;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:normal;outline:0;font-size:12rem;color:#ccc;min-width:196px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:#262626;padding:4px 3px}:host [part=navigation]{padding-bottom:3px}:host [part=btn-next],:host [part=btn-prev],:host [part=btn-view]{margin:0}:host [part=btn-view]{background:0 0;margin-left:16px;border:none;color:inherit;padding:0}:host [part=btn-view]:hover,:host [part=btn-view][focused=visible]{opacity:.8}:host [part=table]{width:100%;background:#262626}:host [part~=row]:not(:first-of-type) [part~=cell] [part~=cell-content]{top:1px}:host [part~=day-name-row]{background-color:#333}:host [part~=cell]{outline:0}:host [part~=cell][disabled] [part~=selection]{opacity:.4}:host [part~=cell][today]{color:#fff}:host [part~=cell][today] [part~=selection]{background:#404040}:host [part~=cell]:not([selected]):not([range]):not([disabled])[idle] [part~=selection]{opacity:.6}:host [part~=cell]:not([today]):not([range]):hover{color:#fff}:host [part~=cell]:hover:not(:active) [part~=selection]{border-color:#334bff}:host [part~=cell]:not([selected]):not([range]):not([today]):hover [part~=selection]{background:#334bff}:host [part~=cell]:not([selected]):not([range]):not([today]):hover:not(:active) [part~=selection]{border-color:#334bff}:host [part~=cell]:not([selected]):not([range]):not([today]):active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range]:hover:not(:active) [part~=selection],:host [part~=cell][selected]:hover:not(:active) [part~=selection],:host [part~=cell][today]:hover:not(:active) [part~=selection]{border-color:#334bff}:host [part~=cell][range]:active [part~=selection],:host [part~=cell][selected]:active [part~=selection],:host [part~=cell][today]:active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range] [part~=selection]{background:rgba(51,75,255,.2)}:host [part~=cell][range][today]{color:#fff}:host [part~=cell][selected]{color:#fff}:host [part~=cell][selected] [part~=selection]{background:#334bff}:host [part~=cell]:not(:first-of-type) [part~=cell-content]{left:1px}:host [part~=cell]:not([tabindex]){pointer-events:none}:host [part~=day-name]{color:#999;font-weight:500}:host [part~=day-name] [part~=cell-content]{background-color:#1a1a1a}:host [part~=cell-content]{background:#0d0d0d;top:0;bottom:0;right:0;left:0}:host [part~=selection]{border:1px solid #0d0d0d}:host([focused=visible]) [part~=cell]:focus [part~=selection]{outline:#334bff solid 1px}:host([disabled]){opacity:.4}');

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/button/themes/halo/light';
+
+elf.customStyles.define('ef-calendar', ':host{font-style:normal;font-variant:normal;font-weight:400;line-height:normal;text-align:left;text-indent:0;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:normal;outline:0;font-size:12rem;color:#0d0d0d;min-width:196px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:#f2f2f2;padding:4px 3px}:host [part=navigation]{padding-bottom:3px}:host [part=btn-next],:host [part=btn-prev],:host [part=btn-view]{margin:0}:host [part=btn-next]:not(:hover):not(:focus):not(:active),:host [part=btn-prev]:not(:hover):not(:focus):not(:active){color:#595959}:host [part=btn-view]{background:0 0;margin-left:16px;border:none;color:inherit;padding:0}:host [part=btn-view]:hover,:host [part=btn-view][focused=visible]{opacity:.8}:host [part=table]{width:100%;background:#e6e6e6}:host [part~=row]:not(:first-of-type) [part~=cell] [part~=cell-content]{top:1px}:host [part~=day-name-row]{background-color:#e6e6e6}:host [part~=cell]{outline:0}:host [part~=cell][disabled] [part~=selection]{opacity:.4}:host [part~=cell][today]{color:#0d0d0d}:host [part~=cell][today] [part~=selection]{background:#d9d9d9}:host [part~=cell]:not([selected]):not([range]):not([disabled])[idle] [part~=selection]{opacity:.6}:host [part~=cell]:not([today]):not([range]):hover{color:#fff}:host [part~=cell]:hover:not(:active) [part~=selection]{border-color:#334bff}:host [part~=cell]:not([selected]):not([range]):not([today]):hover [part~=selection]{background:#334bff}:host [part~=cell]:not([selected]):not([range]):not([today]):hover:not(:active) [part~=selection]{border-color:#334bff}:host [part~=cell]:not([selected]):not([range]):not([today]):active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range]:hover:not(:active) [part~=selection],:host [part~=cell][selected]:hover:not(:active) [part~=selection],:host [part~=cell][today]:hover:not(:active) [part~=selection]{border-color:#334bff}:host [part~=cell][range]:active [part~=selection],:host [part~=cell][selected]:active [part~=selection],:host [part~=cell][today]:active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range] [part~=selection]{background:rgba(51,75,255,.2)}:host [part~=cell][range][today]{color:#fff}:host [part~=cell][selected]{color:#fff}:host [part~=cell][selected] [part~=selection]{background:#334bff}:host [part~=cell]:not(:first-of-type) [part~=cell-content]{left:1px}:host [part~=cell]:not([tabindex]){pointer-events:none}:host [part~=day-name]{color:#737373;font-weight:500}:host [part~=day-name] [part~=cell-content]{background-color:#fafafa}:host [part~=cell-content]{background:#fff;top:0;bottom:0;right:0;left:0}:host [part~=selection]{border:1px solid #fff}:host([focused=visible]) [part~=cell]:focus [part~=selection]{outline:#334bff solid 1px}:host([disabled]){opacity:.4}');

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/button/themes/solar/charcoal';
+
+elf.customStyles.define('ef-calendar', ':host{font-style:normal;font-variant:normal;font-weight:400;line-height:normal;text-align:left;text-indent:0;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:normal;outline:0;font-size:13rem;color:#c2c2c2;min-width:224px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:#3c3c42;padding:4px}:host [part=navigation]{padding-bottom:4px}:host [part=btn-next],:host [part=btn-prev],:host [part=btn-view]{margin:0}:host [part=btn-view]{background:0 0;color:inherit;box-shadow:none;margin-left:15px;padding:0}:host [part=btn-view]:not([focused=visible]){border:none}:host [part=table]{width:100%;box-shadow:0 0 0 1px #000;background:#212124}:host [part~=row]:not(:last-of-type){box-shadow:0 1px 0 0 #0a0a0a}:host [part~=row]:not(:first-of-type) [part~=cell] [part~=selection]{top:1px}:host [part~=cell]{outline:0}:host [part~=cell]:not(:last-of-type){box-shadow:1px 0 0 0 #0a0a0a}:host [part~=cell][disabled] [part~=selection]{opacity:.4}:host [part~=cell][today]{color:#f93}:host [part~=cell][today] [part~=selection]{background:#3c3c42}:host [part~=cell]:not([selected]):not([range]):not([disabled])[idle] [part~=selection]{opacity:.6}:host [part~=cell]:not([selected]):not([range]):focus [part~=selection],:host [part~=cell]:not([selected]):not([range]):hover [part~=selection]{background:#3c3c42;color:#e2e2e2}:host [part~=cell]:not([selected]):not([range]):focus [part~=selection]{outline:#f93 dotted 1px}:host [part~=cell][range] [part~=selection]{background:rgba(255,153,51,.2)}:host [part~=cell][range][today]{color:#f93}:host [part~=cell][selected]{color:#000}:host [part~=cell][selected] [part~=selection]{background:#f93}:host [part~=cell]:not(:first-of-type) [part~=selection]{left:1px}:host [part~=cell]:not([tabindex]){pointer-events:none}:host [part~=day-name]{background-color:#151516;color:#666570;font-size:10px;font-weight:700}:host [part~=selection]{top:0;bottom:0;right:0;left:0}:host([disabled]){opacity:.4}');

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/button/themes/solar/pearl';
+
+elf.customStyles.define('ef-calendar', ':host{font-style:normal;font-variant:normal;font-weight:400;line-height:normal;text-align:left;text-indent:0;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:normal;outline:0;font-size:13rem;color:#484848;min-width:224px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:#fff;padding:4px}:host [part=navigation]{padding-bottom:4px}:host [part=btn-next],:host [part=btn-prev],:host [part=btn-view]{margin:0}:host [part=btn-view]{background:0 0;color:inherit;box-shadow:none;margin-left:15px;padding:0}:host [part=btn-view]:not([focused=visible]){border:none}:host [part=table]{width:100%;box-shadow:0 0 0 1px #a9afba;background:#fff}:host [part~=row]:not(:last-of-type){box-shadow:0 1px 0 0 #d5d8db}:host [part~=row]:not(:first-of-type) [part~=cell] [part~=selection]{top:1px}:host [part~=cell]{outline:0}:host [part~=cell]:not(:last-of-type){box-shadow:1px 0 0 0 #d5d8db}:host [part~=cell][disabled] [part~=selection]{opacity:.4}:host [part~=cell][today]{color:#fff}:host [part~=cell][today] [part~=selection]{background:#acafb5}:host [part~=cell]:not([selected]):not([range]):not([disabled])[idle] [part~=selection]{opacity:.6}:host [part~=cell]:not([selected]):not([range]):focus [part~=selection],:host [part~=cell]:not([selected]):not([range]):hover [part~=selection]{background:#e4e8ed;color:#000}:host [part~=cell]:not([selected]):not([range]):focus [part~=selection]{outline:#ee7600 dotted 1px}:host [part~=cell][range] [part~=selection]{background:rgba(255,153,51,.2)}:host [part~=cell][range][today]{color:#f93}:host [part~=cell][selected]{color:#fff}:host [part~=cell][selected] [part~=selection]{background:#f93}:host [part~=cell]:not(:first-of-type) [part~=selection]{left:1px}:host [part~=cell]:not([tabindex]){pointer-events:none}:host [part~=day-name]{background-color:#e4e8ed;color:#6e6e78;font-size:10px;font-weight:700}:host [part~=selection]{top:0;bottom:0;right:0;left:0}:host([disabled]){opacity:.4}');

package/lib/calendar/types.d.ts

@@ -0,0 +1,29 @@
+import { RenderView } from './constants.js';
+export interface CellSelectionModel {
+    selected?: boolean;
+    range?: boolean;
+    rangeFrom?: boolean;
+    rangeTo?: boolean;
+    firstDate?: boolean;
+    lastDate?: boolean;
+}
+export interface Cell extends CellSelectionModel {
+    view: RenderView;
+    text?: string;
+    value?: string;
+    disabled?: boolean;
+    idle?: boolean;
+    now?: boolean;
+}
+export declare type CalendarFilter = (value: string) => boolean;
+export declare type Comparator = (value: string, compare: string) => boolean;
+export interface CellDivElement extends HTMLDivElement, Cell {
+    value?: string;
+    disabled?: boolean;
+    idle?: boolean;
+    selected?: boolean;
+    range?: boolean;
+}
+export declare type Row = {
+    cells: Cell[];
+};

package/lib/calendar/types.js

@@ -0,0 +1 @@
+export {};

package/lib/calendar/utils.d.ts

@@ -0,0 +1,42 @@
+import { TranslateParams } from '@refinitiv-ui/i18n';
+export declare type MonthInfo = {
+    days: number;
+    month: number;
+    year: number;
+};
+/**
+ * Get information about number of days, month number and year from date object
+ * @param value Date string
+ * @returns Month information object
+ */
+declare const monthInfo: (value: string) => 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

@@ -0,0 +1,119 @@
+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
+ * @returns Month information object
+ */
+const monthInfo = (value) => {
+    const segment = toDateSegment(value);
+    const year = segment.year;
+    const month = segment.month;
+    return {
+        days: getDaysInMonth(year, month),
+        month,
+        year
+    };
+};
+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

@@ -0,0 +1,69 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-canvas",
+      "description": "A Component uses to draw graphics on a web page,\nit works similarly to the normal HTML5 Canvas element.",
+      "attributes": [
+        {
+          "name": "autoloop",
+          "description": "Starts an automatic animation loop.\nEnabling the frame event.",
+          "type": "boolean"
+        }
+      ],
+      "properties": [
+        {
+          "name": "autoloop",
+          "attribute": "autoloop",
+          "description": "Starts an automatic animation loop.\nEnabling the frame event.",
+          "type": "boolean"
+        },
+        {
+          "name": "canvas",
+          "description": "Html canvas element",
+          "type": "HTMLCanvasElement"
+        },
+        {
+          "name": "ctx",
+          "description": "Alias of context",
+          "type": "CanvasRenderingContext2D | null"
+        },
+        {
+          "name": "context",
+          "description": "The 2 dimensional context of the canvas, used for drawing",
+          "type": "CanvasRenderingContext2D | null"
+        },
+        {
+          "name": "width",
+          "description": "Width of canvas",
+          "type": "number",
+          "default": "0"
+        },
+        {
+          "name": "height",
+          "description": "Height of canvas",
+          "type": "number",
+          "default": "0"
+        }
+      ],
+      "events": [
+        {
+          "name": "frame",
+          "description": "dispatched when next Frame event occurs when autoloop is set to true"
+        }
+      ],
+      "methods": [
+        {
+          "name": "getContext",
+          "description": "Return context of canvas,\nsupport only 2D mode",
+          "params": [
+            {
+              "name": "mode",
+              "description": "mode of canvas's context"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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  | Modifiers | Type                               | Default | Description                                      |
+|------------|------------|-----------|------------------------------------|---------|--------------------------------------------------|
+| `autoloop` | `autoloop` |           | `boolean`                          |         | 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

@@ -0,0 +1,100 @@
+import { JSXInterface } from '../jsx';
+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.
+ * @fires frame - dispatched when next Frame event occurs when autoloop is set to true
+ */
+export declare class Canvas extends ResponsiveElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * A `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @return CSS template
+     */
+    static get styles(): CSSResultGroup;
+    width: number;
+    height: number;
+    private frameId;
+    private _autoloop;
+    constructor();
+    /**
+     * Starts an automatic animation loop.
+     * Enabling the frame event.
+     */
+    get autoloop(): boolean;
+    set autoloop(val: boolean);
+    /**
+     * Html canvas element
+     * @type {HTMLCanvasElement}
+     */
+    get canvas(): HTMLCanvasElement;
+    /**
+     * Alias of context
+     * @type {CanvasRenderingContext2D | null}
+     */
+    get ctx(): CanvasRenderingContext2D | null;
+    /**
+     * The 2 dimensional context of the canvas, used for drawing
+     * @type {CanvasRenderingContext2D | null}
+     */
+    get context(): CanvasRenderingContext2D | null;
+    /**
+     * Request an animation frame
+     * @return {void}
+     */
+    private loop;
+    /**
+     * Dispatch frame event
+     * @param timestamp timestamp
+     * @return {void}
+     */
+    protected fireFrame(timestamp: number): void;
+    /**
+     * Updated canvas size
+     * @param width width of canvas
+     * @param height height of canvas
+     * @return {void}
+     */
+    private resizeCanvas;
+    /**
+     * Return context of canvas,
+     * support only 2D mode
+     * @param {string} mode mode of canvas's context
+     * @return context of canvas
+     */
+    getContext(mode: string): CanvasRenderingContext2D | null;
+    /**
+     * private method but can't override
+     * access modifiers in typescript.
+     * @ignore
+     * @param size element dimensions
+     * @returns {void}
+     */
+    resizedCallback(size: ElementSize): void;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-canvas': Canvas;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-canvas': Partial<Canvas> | JSXInterface.HTMLAttributes<Canvas>;
+    }
+  }
+}
+
+export {};

package/lib/canvas/index.js

@@ -0,0 +1,172 @@
+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.
+ * @fires frame - dispatched when next Frame event occurs when autoloop is set to true
+ */
+let Canvas = class Canvas extends ResponsiveElement {
+    constructor() {
+        super();
+        this.frameId = 0;
+        this.width = 0;
+        this.height = 0;
+        this._autoloop = false;
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * A `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @return CSS template
+     */
+    static get styles() {
+        return css `
+      :host {
+        display: block;
+        position: relative;
+        overflow: hidden;
+      }
+      canvas {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      }
+    `;
+    }
+    /**
+     * Starts an automatic animation loop.
+     * Enabling the frame event.
+     */
+    get autoloop() {
+        return this._autoloop;
+    }
+    set autoloop(val) {
+        const oldValue = this._autoloop;
+        this._autoloop = val;
+        this.requestUpdate('autoloop', oldValue);
+        this.loop();
+    }
+    /**
+     * Html canvas element
+     * @type {HTMLCanvasElement}
+     */
+    get canvas() {
+        var _a;
+        return (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('canvas');
+    }
+    /**
+     * Alias of context
+     * @type {CanvasRenderingContext2D | null}
+     */
+    get ctx() {
+        /* istanbul ignore if  */
+        if (!this.canvas) {
+            return null;
+        }
+        return this.canvas.getContext('2d');
+    }
+    /**
+     * The 2 dimensional context of the canvas, used for drawing
+     * @type {CanvasRenderingContext2D | null}
+     */
+    get context() {
+        return this.ctx;
+    }
+    /**
+     * Request an animation frame
+     * @return {void}
+     */
+    loop() {
+        if (this.autoloop) {
+            this.frameId = requestAnimationFrame(this.fireFrame.bind(this));
+        }
+    }
+    /**
+     * Dispatch frame event
+     * @param timestamp timestamp
+     * @return {void}
+     */
+    fireFrame(timestamp) {
+        cancelAnimationFrame(this.frameId);
+        /**
+         * Frame fires next frame event when autoloop is set to true.
+         */
+        this.dispatchEvent(new CustomEvent('frame', {
+            detail: { timestamp },
+            bubbles: false
+        }));
+        this.loop();
+    }
+    /**
+     * Updated canvas size
+     * @param width width of canvas
+     * @param height height of canvas
+     * @return {void}
+     */
+    resizeCanvas(width, height) {
+        const dpr = window.devicePixelRatio || 1;
+        this.width = width;
+        this.height = height;
+        this.canvas.width = Math.floor(width * dpr);
+        this.canvas.height = Math.floor(height * dpr);
+        this.canvas.style.width = `${width}px`;
+        this.canvas.style.height = `${height}px`;
+        if (this.ctx) {
+            this.ctx.scale(dpr, dpr);
+        }
+    }
+    /**
+     * Return context of canvas,
+     * support only 2D mode
+     * @param {string} mode mode of canvas's context
+     * @return context of canvas
+     */
+    getContext(mode) {
+        if (mode === '2d') {
+            return this.canvas.getContext(mode);
+        }
+        console.warn('ef-canvas does not support the mode ' + mode); // eslint-disable-line
+        return null;
+    }
+    /**
+     * private method but can't override
+     * access modifiers in typescript.
+     * @ignore
+     * @param size element dimensions
+     * @returns {void}
+     */
+    resizedCallback(size) {
+        this.resizeCanvas(size.width, size.height);
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    render() {
+        return html `
+      <canvas id="canvas"></canvas>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Canvas.prototype, "autoloop", null);
+Canvas = __decorate([
+    customElement('ef-canvas', {
+        alias: 'sapphire-canvas'
+    })
+], Canvas);
+export { Canvas };

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-canvas', '');

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-canvas', '');

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-canvas', '');

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-canvas', '');