@refinitiv-ui/elements 5.8.0 → 5.9.0

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.9.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.8.1...@refinitiv-ui/elements@5.9.0) (2021-12-15)
+
+
+### Features
+
+* add named exports to elements, themes and locales to support full backward compatibility ([#114](https://github.com/Refinitiv/refinitiv-ui/issues/114)) ([7d25d50](https://github.com/Refinitiv/refinitiv-ui/commit/7d25d50c649308fc5a17d086e9e01467a0dabfb9))
+* **calendar:** add accessibility ([#73](https://github.com/Refinitiv/refinitiv-ui/issues/73)) ([a2576cc](https://github.com/Refinitiv/refinitiv-ui/commit/a2576cc8a1f0229bb5988af0c9d0bbf8ce7f765c))
+* **combo-box:** improve screen reader support ([#116](https://github.com/Refinitiv/refinitiv-ui/issues/116)) ([f603de1](https://github.com/Refinitiv/refinitiv-ui/commit/f603de1d3b1900875d6903477938ecd21d055531))
+
+
+
+
+
+## [5.8.1](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.8.0...@refinitiv-ui/elements@5.8.1) (2021-12-07)
+
+**Note:** Version bump only for package @refinitiv-ui/elements
+
+
+
+
+
 # [5.8.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.7.0...@refinitiv-ui/elements@5.8.0) (2021-12-03)
 
 

package/lib/calendar/constants.d.ts

@@ -20,3 +20,7 @@ export declare const MONTH_VIEW: {
     columnCount: number;
     totalCount: number;
 };
+/**
+ * A symbol to ensure these locales cannot be overridden
+ */
+export declare const CalendarLocaleScope: string;

package/lib/calendar/constants.js

@@ -1,3 +1,4 @@
+import { uuid } from '@refinitiv-ui/utils/lib/uuid.js';
 export var RenderView;
 (function (RenderView) {
     RenderView["DAY"] = "day";
@@ -21,3 +22,7 @@ export const MONTH_VIEW = {
     columnCount: 4,
     totalCount: 4 * 4
 };
+/**
+ * A symbol to ensure these locales cannot be overridden
+ */
+export const CalendarLocaleScope = uuid();

package/lib/calendar/index.d.ts

@@ -1,10 +1,11 @@
 import { JSXInterface } from '../jsx';
 import { ControlElement, TemplateResult, CSSResultGroup, PropertyValues, MultiValue } from '@refinitiv-ui/core';
 import { TranslateDirective, TranslatePromise } from '@refinitiv-ui/translate';
-import type { CalendarFilter } from './types';
+import { CalendarFilter } from './types';
 import './locales.js';
 import '../button/index.js';
-export type { CalendarFilter };
+import '@refinitiv-ui/phrasebook/lib/locale/en/calendar.js';
+export { CalendarFilter };
 /**
  * Standard calendar element
  *
@@ -25,6 +26,7 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * @returns version number
      */
     static get version(): string;
+    protected readonly defaultRole: string | null;
     /**
      * A `CSSResultGroup` that will be used
      * to style the host, slotted children
@@ -32,6 +34,10 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * @return CSS template
      */
     static get styles(): CSSResultGroup;
+    /**
+     * Reference to the view button
+     */
+    private viewBtnRef;
     private _min;
     /**
     * Set minimum date
@@ -110,25 +116,63 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * Fill head and tail cell dates
      */
     fillCells: boolean;
+    /**
+     * Calendar internal translation strings
+     */
+    protected dateT: TranslateDirective;
+    protected dateTPromise: TranslatePromise;
     /**
      * Used for translations
      */
     protected t: TranslateDirective;
-    protected tPromise: TranslatePromise;
     /**
      * Used for internal navigation between render views
      */
-    private renderView;
-    private isDateAvailable;
+    private _renderView;
+    private get renderView();
+    private set renderView(value);
     /**
-     * Get weekday numbers.
-     * Sort the list based on first day of the week
+     * Used for keyboard navigation when trying
+     * to restore focus on re-render and control navigation
      */
-    private get weekdaysNames();
+    private _activeCellIndex;
+    private get activeCellIndex();
+    private set activeCellIndex(value);
     /**
-     * Get localised month names from January to December
+     * Silently reset cell index without calling request update
+     * @returns {void}
      */
-    private get monthsNames();
+    private resetActiveCellIndex;
+    private navigationGrid;
+    /**
+     * Connected to role. If false, the values are not announced in the screen reader
+     */
+    private announceValues;
+    /**
+     * Get an active element
+     */
+    private get activeElement();
+    /**
+     * Get selectable date button element by index
+     * @param index Cell index
+     * @returns button HTML date button element or null
+     */
+    private getDateButtonByIndex;
+    /**
+     * Get active date button element
+     * @returns button HTML date button element or null
+     */
+    private get activeDateButton();
+    /**
+     * Return true if passed target is HTML
+     * date button element that can be selected
+     * @param target Target to check
+     * @returns isDateButtonElement
+     */
+    private isDateButton;
+    private isDateAvailable;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     /**
      * Perform asynchronous update
      * @returns promise
@@ -140,6 +184,12 @@ export declare class Calendar extends ControlElement implements MultiValue {
     * @returns {void}
     */
     protected update(changedProperties: PropertyValues): void;
+    /**
+     * Called after render life-cycle finished
+     * @param changedProperties Properties which have changed
+     * @return {void}
+     */
+    protected updated(changedProperties: PropertyValues): void;
     /**
      * Run when an element has been first updated
      * @param changedProperties properties that was changed on first update
@@ -198,21 +248,30 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * @returns cell selection model
      */
     private getCellSelection;
+    /**
+     * Set navigation map based on rows
+     * @param rows A collection of rows with cells
+     * @returns {void}
+     */
+    private setNavigationMap;
     /**
      * Run when next button is tapped.
      * Change current view to next view
+     * @param event Next view tap event
      * @returns {void}
      */
     private onNextTap;
     /**
      * Run when previous button is tapped.
      * Change current view to previous view
+     * @param event Previous view tap event
      * @returns {void}
      */
     private onPreviousTap;
     /**
      * Run when change view button is tapped.
      * Switch between views
+     * @param event Render view tap event
      * @returns {void}
      */
     private onRenderViewTap;
@@ -221,7 +280,7 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * @param event Keyboard event
      * @returns {void}
      */
-    private onTableKeyDown;
+    private onKeyDown;
     /**
      * Run when tap event happens ot table.
      * Select the values or switch the view
@@ -229,6 +288,22 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * @returns {void}
      */
     private onTableTap;
+    /**
+     * Navigate over the grid
+     * @param key Navigation direction
+     * @returns navigation promise
+     */
+    private onNavigation;
+    /**
+     * Navigate to the next view
+     * @returns {void}
+     */
+    private toNextView;
+    /**
+     * Navigate to the previous view
+     * @returns {void}
+     */
+    private toPreviousView;
     /**
      * Run when tap event happened on DAY view and the cell has the values
      * Try to select/deselect cell value
@@ -261,13 +336,11 @@ export declare class Calendar extends ControlElement implements MultiValue {
      */
     private get formattedViewRender();
     /**
-     * Render cell content template.
-     * If the cell is selectable (aka has value) add selection part
-     * @param text Text to render
-     * @param selectable True if cell may be selected
-     * @returns template result
+     * Set an active state of the cell based
+     * @param rows A collection of rows with cells
+     * @returns {void}
      */
-    private renderContentBox;
+    private setActiveCell;
     /**
      * Get year view template
      */
@@ -288,6 +361,12 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * Render a view based on the current render view
      */
     private get viewRender();
+    /**
+     * Get cell translate label key based on selected state
+     * @param cell Cell
+     * @returns key Translate label key
+     */
+    private getCellLabelKey;
     /**
      * Render cell template. Cell can be a day, month or year
      * @param cell Cell object
@@ -300,6 +379,16 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * @returns template result
      */
     private renderRows;
+    /**
+     * Render button navigation template
+     * @returns template result
+     */
+    private get buttonNavigationTemplate();
+    /**
+     * A template used to notify currently selected value for screen readers
+     * @returns template result
+     */
+    private get selectionTemplate();
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.