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

package/lib/calendar/locales.d.ts

@@ -1,31 +1 @@
-import { TranslateParams } from '@refinitiv-ui/i18n';
-/**
- * Used to format views
- */
-declare const ViewFormatTranslateParams: TranslateParams;
-/**
- * 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;
-export { weekdaysNames, monthsNames, formatLocaleDate, ViewFormatTranslateParams };
+export {};

package/lib/calendar/locales.js

@@ -1,12 +1,11 @@
 import { Phrasebook } from '@refinitiv-ui/phrasebook';
-import { DEFAULT_LOCALE, resolveLocale } from '@refinitiv-ui/i18n';
-import { utcParse } from '@refinitiv-ui/utils';
+import { CalendarLocaleScope } from './constants.js';
 // 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 }} false {{ date, date, calendarMonth }}}} false {{ includeEra, select, true {{ date, date, calendarYearEra }} false {{ date, date, calendarYear }}}}}',
+    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;
@@ -24,7 +23,7 @@ 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';
+const scope = CalendarLocaleScope;
 Phrasebook.define('en', scope, en);
 Phrasebook.define('en-CA', scope, enCA);
 Phrasebook.define('en-US', scope, enUS);
@@ -40,106 +39,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 };
-//# sourceMappingURL=locales.js.map

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

@@ -1,3 +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 [part~=selection]{border-color:#334bff}:host [part~=cell]:not([selected]):not([range]):not([today]):hover [part~=selection]{border-color:#334bff;background:#334bff}:host [part~=cell][range]:hover [part~=selection],:host [part~=cell][selected]:hover [part~=selection],:host [part~=cell][today]:hover [part~=selection]{border-color:#334bff}: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}');
+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][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]) [part~=selection]:hover{color:#fff}:host [part~=cell]:not(:active) [part~=selection]:hover{border-color:#334bff}:host [part~=cell]:not([selected]):not([range]):not([today]) [part~=selection]:hover{background:#334bff}:host [part~=cell]:not([selected]):not([range]):not([today]):not(:active) [part~=selection]:hover{border-color:#334bff}:host [part~=cell]:not([selected]):not([range]):not([today]):active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range]:not(:active) [part~=selection]:hover,:host [part~=cell][selected]:not(:active) [part~=selection]:hover,:host [part~=cell][today]:not(:active) [part~=selection]:hover{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~=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]{outline:0;border:1px solid #0d0d0d}:host([focused=visible]) [part~=cell] [part~=selection]:focus{outline:#334bff solid 1px}:host([disabled]){opacity:.4}');

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

@@ -1,3 +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 [part~=selection]{border-color:#334bff}:host [part~=cell]:not([selected]):not([range]):not([today]):hover [part~=selection]{border-color:#334bff;background:#334bff}:host [part~=cell][range]:hover [part~=selection],:host [part~=cell][selected]:hover [part~=selection],:host [part~=cell][today]:hover [part~=selection]{border-color:#334bff}: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}');
+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][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]) [part~=selection]:hover{color:#fff}:host [part~=cell]:not(:active) [part~=selection]:hover{border-color:#334bff}:host [part~=cell]:not([selected]):not([range]):not([today]) [part~=selection]:hover{background:#334bff}:host [part~=cell]:not([selected]):not([range]):not([today]):not(:active) [part~=selection]:hover{border-color:#334bff}:host [part~=cell]:not([selected]):not([range]):not([today]):active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range]:not(:active) [part~=selection]:hover,:host [part~=cell][selected]:not(:active) [part~=selection]:hover,:host [part~=cell][today]:not(:active) [part~=selection]:hover{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~=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]{outline:0;border:1px solid #fff}:host([focused=visible]) [part~=cell] [part~=selection]:focus{outline:#334bff solid 1px}:host([disabled]){opacity:.4}');

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

@@ -1,3 +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}');
+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]: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]) [part~=selection]:focus,:host [part~=cell]:not([selected]):not([range]) [part~=selection]:hover{background:#3c3c42;color:#e2e2e2}:host [part~=cell]:not([selected]):not([range]) [part~=selection]:focus{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~=day-name]{background-color:#151516;color:#666570;font-size:10px;font-weight:700}:host [part~=selection]{outline:0;top:0;bottom:0;right:0;left:0}:host([disabled]){opacity:.4}');

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

@@ -1,3 +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}');
+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]: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]) [part~=selection]:focus,:host [part~=cell]:not([selected]):not([range]) [part~=selection]:hover{background:#e4e8ed;color:#000}:host [part~=cell]:not([selected]):not([range]) [part~=selection]:focus{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~=day-name]{background-color:#e4e8ed;color:#6e6e78;font-size:10px;font-weight:700}:host [part~=selection]{outline:0;top:0;bottom:0;right:0;left:0}:host([disabled]){opacity:.4}');

package/lib/calendar/types.d.ts

@@ -1,8 +1,5 @@
-export declare enum RenderView {
-    DAY = "day",
-    MONTH = "month",
-    YEAR = "year"
-}
+import { CellIndex } from '@refinitiv-ui/utils/lib/navigation.js';
+import { RenderView } from './constants.js';
 export interface CellSelectionModel {
     selected?: boolean;
     range?: boolean;
@@ -14,20 +11,22 @@ export interface CellSelectionModel {
 export interface Cell extends CellSelectionModel {
     view: RenderView;
     text?: string;
+    active?: boolean;
     value?: string;
     disabled?: boolean;
     idle?: boolean;
     now?: boolean;
+    index: CellIndex;
 }
 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 interface DateButtonElement extends HTMLDivElement {
+    value: string;
+    index: CellIndex;
 }
-export declare type Row = {
-    cells: Cell[];
+export declare type NavigationDirection = 'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'ArrowDown' | 'Home' | 'End';
+export declare type Row = Cell[];
+export declare type WeekdayName = {
+    narrow: string;
+    long: string;
 };

package/lib/calendar/types.js

@@ -1,7 +1 @@
-export var RenderView;
-(function (RenderView) {
-    RenderView["DAY"] = "day";
-    RenderView["MONTH"] = "month";
-    RenderView["YEAR"] = "year";
-})(RenderView || (RenderView = {}));
-//# sourceMappingURL=types.js.map
+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,6 @@
-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';
+import { CalendarLocaleScope } from './constants.js';
 /**
  * Get information about number of days, month number and year from date object
  * @param value Date string
@@ -14,5 +16,105 @@ const monthInfo = (value) => {
         year
     };
 };
-export { monthInfo };
-//# sourceMappingURL=utils.js.map
+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(CalendarLocaleScope, 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

@@ -3,12 +3,13 @@
   "tags": [
     {
       "name": "ef-canvas",
-      "description": "A Component uses\nto draw graphics on a web page,\nit works similarly to the normal HTML5 Canvas element.",
+      "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"
+          "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"
         },
@@ -49,7 +51,7 @@
       "events": [
         {
           "name": "frame",
-          "description": "Frame fires next frame event when autoloop is set to true."
+          "description": "dispatched when next Frame event occurs when autoloop is set to true"
         }
       ],
       "methods": [

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,18 +1,23 @@
 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,
+ * 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 {
     /**
-     * A `CSSResult` that will be used
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
      */
-    static get styles(): CSSResult;
+    static get styles(): CSSResultGroup;
     width: number;
     height: number;
     private frameId;
@@ -21,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);
@@ -90,4 +96,6 @@ declare global {
       'ef-canvas': Partial<Canvas> | JSXInterface.HTMLAttributes<Canvas>;
     }
   }
-}
+}
+
+export {};

package/lib/canvas/index.js

@@ -1,14 +1,12 @@
-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 { __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,
+ * 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() {
@@ -19,7 +17,14 @@ let Canvas = class Canvas extends ResponsiveElement {
         this._autoloop = false;
     }
     /**
-     * A `CSSResult` that will be used
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
@@ -43,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;
@@ -50,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();
     }
     /**
@@ -165,4 +171,3 @@ Canvas = __decorate([
     })
 ], Canvas);
 export { Canvas };
-//# sourceMappingURL=index.js.map