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

package/lib/button-bar/index.js

@@ -1,24 +1,40 @@
-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 } from '@refinitiv-ui/core';
-import { Button } from '../button';
+var ButtonBar_1;
+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 { VERSION } from '../version.js';
+import { Button } from '../button/index.js';
+import { ref, createRef } from '@refinitiv-ui/core/lib/directives/ref.js';
 /**
  * Used to display multiple buttons to create a list of commands bar.
  */
-let ButtonBar = class ButtonBar extends BasicElement {
+let ButtonBar = ButtonBar_1 = class ButtonBar extends BasicElement {
     constructor() {
         super(...arguments);
+        /**
+         * Element's role attribute for accessibility
+         * `role` should be `radiogroup` when it is managed.
+         */
+        this.defaultRole = 'toolbar';
         /**
          * Manages user interaction, only allowing one toggle button to be active at any one time.
          */
         this.managed = false;
+        /**
+         * Default slot
+         */
+        this.defaultSlot = createRef();
     }
     /**
-     * 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
@@ -77,7 +93,131 @@ let ButtonBar = class ButtonBar extends BasicElement {
      */
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
-        this.addEventListener('tap', event => this.onTapHandler(event));
+        this.addEventListener('tap', this.onTapHandler);
+        this.addEventListener('keydown', this.onKeyDown);
+        this.manageTabIndex();
+    }
+    /**
+     * Handles key down event
+     * @param event Key down event object
+     * @returns {void}
+     */
+    onKeyDown(event) {
+        switch (event.key) {
+            case 'Tab':
+                // To prevent inserting button case, make sure there is only one tabIndex=0 in the buttons
+                this.manageTabIndex();
+                break;
+            case ' ':
+            case 'Spacebar':
+            case 'Enter':
+                this.onTapHandler(event);
+                break;
+            case 'Right':
+            case 'ArrowRight':
+                // Prevent calling twice if this component is nested
+                !this.isNested() && this.navigateToSibling('next');
+                break;
+            case 'Down':
+            case 'ArrowDown':
+                // Managed works as role radiogroup so `Up` and `Down` key can navigate among radios in the group
+                this.managed && this.navigateToSibling('next');
+                break;
+            case 'Left':
+            case 'ArrowLeft':
+                !this.isNested() && this.navigateToSibling('previous');
+                break;
+            case 'Up':
+            case 'ArrowUp':
+                this.managed && this.navigateToSibling('previous');
+                break;
+            case 'Home':
+                !this.isNested() && this.first();
+                break;
+            case 'End':
+                !this.isNested() && this.last();
+                break;
+            default:
+                return;
+        }
+    }
+    /**
+     * Navigate to next or previous focusable button
+     * @param direction next | down
+     * @returns {void}
+     */
+    navigateToSibling(direction) {
+        const buttons = this.getFocusableButtons();
+        if (buttons.length <= 0) {
+            return;
+        }
+        const focusedButtonIndex = buttons.findIndex(button => button === document.activeElement);
+        const nextButton = direction === 'next'
+            ? buttons[focusedButtonIndex + 1] || buttons[0]
+            : buttons[focusedButtonIndex - 1] || buttons[buttons.length - 1];
+        nextButton.focus();
+        this.rovingTabIndex(nextButton, buttons);
+    }
+    /**
+     * Navigate to the first focusable button
+     * @returns {void}
+     */
+    first() {
+        const buttons = this.getFocusableButtons();
+        if (buttons.length <= 0) {
+            return;
+        }
+        buttons[0].focus();
+        this.rovingTabIndex(buttons[0], buttons);
+    }
+    /**
+     * Navigate to the last focusable button
+     * @returns {void}
+     */
+    last() {
+        const buttons = this.getFocusableButtons();
+        if (buttons.length <= 0) {
+            return;
+        }
+        buttons[buttons.length - 1].focus();
+        this.rovingTabIndex(buttons[buttons.length - 1], buttons);
+    }
+    /**
+     * Sets the tabindex to -1 for all buttons except the currently focused one.
+     * @param target the button to be focused
+     * @param buttons Array of Buttons that contains target
+     * @returns {void}
+     */
+    rovingTabIndex(target, buttons) {
+        buttons.forEach((button) => {
+            button.tabIndex = -1;
+        });
+        target.tabIndex = 0;
+    }
+    /**
+     * Set tabIndex to all buttons
+     * @returns {void}
+     */
+    manageTabIndex() {
+        if (this.isNested()) {
+            return;
+        }
+        const buttons = this.getFocusableButtons();
+        if (buttons && buttons.length > 0) {
+            // Set tabindex=0 to previous focused button when new button added If not found set it to first button instead
+            let focusedButtonIndex = buttons.findIndex(button => document.activeElement === button);
+            if (focusedButtonIndex === -1) {
+                focusedButtonIndex = 0;
+            }
+            this.rovingTabIndex(buttons[focusedButtonIndex], buttons);
+        }
+    }
+    /**
+     * Check if button bar is nested, a.k.a. has parent button bar
+     * @returns `True` if button bar is nested
+     */
+    isNested() {
+        return this.parentElement instanceof ButtonBar_1;
     }
     /**
      * Handles tap event
@@ -93,6 +233,8 @@ let ButtonBar = class ButtonBar extends BasicElement {
             event.stopPropagation();
             this.manageButtons(target);
         }
+        target.focus();
+        this.rovingTabIndex(target, this.getFocusableButtons());
     }
     /**
      * Get the target Button item and handle it with other managed Button items
@@ -114,8 +256,15 @@ let ButtonBar = class ButtonBar extends BasicElement {
      * @returns the array of Element of the default slot
      */
     getElementsOfSlot() {
-        return this.defaultSlot.assignedNodes()
-            .filter(node => node instanceof Element);
+        var _a;
+        return (_a = this.defaultSlot.value) === null || _a === void 0 ? void 0 : _a.assignedNodes().filter(node => node instanceof Element);
+    }
+    /**
+     * Return the array of Buttons which focusable
+     * @returns the array of focusable Buttons
+     */
+    getFocusableButtons() {
+        return [...this.querySelectorAll('ef-button,coral-button')].filter(button => !button.disabled);
     }
     /**
      * Filter Button classes by the toggles property
@@ -132,19 +281,15 @@ let ButtonBar = class ButtonBar extends BasicElement {
      * @return {TemplateResult}  Render template
      */
     render() {
-        return html `<slot></slot>`;
+        return html `<slot ${ref(this.defaultSlot)} ></slot>`;
     }
 };
 __decorate([
     property({ type: Boolean, reflect: true })
 ], ButtonBar.prototype, "managed", void 0);
-__decorate([
-    query('slot:not([name])')
-], ButtonBar.prototype, "defaultSlot", void 0);
-ButtonBar = __decorate([
+ButtonBar = ButtonBar_1 = __decorate([
     customElement('ef-button-bar', {
         alias: 'coral-split-button'
     })
 ], ButtonBar);
 export { ButtonBar };
-//# sourceMappingURL=index.js.map

package/lib/calendar/constants.d.ts

@@ -0,0 +1,26 @@
+export declare enum RenderView {
+    DAY = "day",
+    MONTH = "month",
+    YEAR = "year"
+}
+export declare const FIRST_DAY_OF_WEEK = 0;
+export declare const YEARS_PER_YEAR_VIEW = 16;
+export declare const DAY_VIEW: {
+    rowCount: number;
+    columnCount: number;
+    totalCount: number;
+};
+export declare const YEAR_VIEW: {
+    rowCount: number;
+    columnCount: number;
+    totalCount: number;
+};
+export declare const MONTH_VIEW: {
+    rowCount: number;
+    columnCount: number;
+    totalCount: number;
+};
+/**
+ * A symbol to ensure these locales cannot be overridden
+ */
+export declare const CalendarLocaleScope: string;

package/lib/calendar/constants.js

@@ -0,0 +1,28 @@
+import { uuid } from '@refinitiv-ui/utils/lib/uuid.js';
+export var RenderView;
+(function (RenderView) {
+    RenderView["DAY"] = "day";
+    RenderView["MONTH"] = "month";
+    RenderView["YEAR"] = "year";
+})(RenderView || (RenderView = {}));
+export const FIRST_DAY_OF_WEEK = 0; // 0 for Sunday
+export const YEARS_PER_YEAR_VIEW = 16; /* must be a square number */
+export const DAY_VIEW = {
+    rowCount: 6,
+    columnCount: 7,
+    totalCount: 6 * 7
+};
+export const YEAR_VIEW = {
+    rowCount: 4,
+    columnCount: 4,
+    totalCount: 4 * 4
+};
+export const MONTH_VIEW = {
+    rowCount: 4,
+    columnCount: 4,
+    totalCount: 4 * 4
+};
+/**
+ * A symbol to ensure these locales cannot be overridden
+ */
+export const CalendarLocaleScope = uuid();

package/lib/calendar/custom-elements.json

@@ -61,7 +61,8 @@
         {
           "name": "values",
           "description": "Set multiple selected values",
-          "type": "string[]"
+          "type": "string[]",
+          "default": "[]"
         },
         {
           "name": "fill-cells",
@@ -73,13 +74,13 @@
           "name": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "properties": [
@@ -154,7 +155,8 @@
           "name": "values",
           "attribute": "values",
           "description": "Set multiple selected values",
-          "type": "string[]"
+          "type": "string[]",
+          "default": "[]"
         },
         {
           "name": "fillCells",
@@ -168,14 +170,14 @@
           "attribute": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "attribute": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "events": [

package/lib/calendar/custom-elements.md

@@ -0,0 +1,35 @@
+# ef-calendar
+
+Standard calendar element
+
+## Properties
+
+| Property         | Attribute           | Type                     | Default | Description                                      |
+|------------------|---------------------|--------------------------|---------|--------------------------------------------------|
+| `disabled`       | `disabled`          | `boolean`                | false   | Set disabled state                               |
+| `fillCells`      | `fill-cells`        | `boolean`                | false   | Fill head and tail cell dates                    |
+| `filter`         |                     | `CalendarFilter \| null` | null    | Custom filter, used for enabling/disabling certain dates |
+| `firstDayOfWeek` | `first-day-of-week` | `number \| null`         | null    | Set the first day of the week.<br />0 - for Sunday, 6 - for Saturday |
+| `max`            | `max`               | `string`                 | ""      | Set maximum date                                 |
+| `min`            | `min`               | `string`                 | ""      | Set minimum date                                 |
+| `multiple`       | `multiple`          | `boolean`                | false   | Set to switch to multiple select mode            |
+| `range`          | `range`             | `boolean`                | false   | Set to switch to range select mode               |
+| `readonly`       | `readonly`          | `boolean`                | false   | Set readonly state                               |
+| `value`          | `value`             | `string`                 | ""      | Current date time value                          |
+| `values`         | `values`            | `string[]`               | []      | Set multiple selected values                     |
+| `view`           | `view`              | `string`                 | ""      | Current calendar view date                       |
+| `weekdaysOnly`   | `weekdays-only`     | `boolean`                | false   | Only enable weekdays                             |
+| `weekendsOnly`   | `weekends-only`     | `boolean`                | false   | Only enable weekends                             |
+
+## Events
+
+| Event           | Description                     |
+|-----------------|---------------------------------|
+| `value-changed` | Fired when the `value` changes. |
+| `view-changed`  | Fired when the `view` changes.  |
+
+## Slots
+
+| Name     | Description                                      |
+|----------|--------------------------------------------------|
+| `footer` | Adds slotted content into the footer of the calendar control |

package/lib/calendar/index.d.ts

@@ -1,9 +1,10 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, TemplateResult, CSSResult, PropertyValues, MultiValue } from '@refinitiv-ui/core';
-import '../button';
-import './locales';
+import { ControlElement, TemplateResult, CSSResultGroup, PropertyValues, MultiValue } from '@refinitiv-ui/core';
 import { TranslateDirective, TranslatePromise } from '@refinitiv-ui/translate';
 import { CalendarFilter } from './types';
+import './locales.js';
+import '../button/index.js';
+import '@refinitiv-ui/phrasebook/lib/locale/en/calendar.js';
 export { CalendarFilter };
 /**
  * Standard calendar element
@@ -21,12 +22,22 @@ export { CalendarFilter };
  */
 export declare class Calendar extends ControlElement implements MultiValue {
     /**
-     * A `CSSResult` that will be used
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    protected readonly defaultRole: string | null;
+    /**
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
+    /**
+     * Reference to the view button
+     */
+    private viewBtnRef;
     private _min;
     /**
     * Set minimum date
@@ -73,6 +84,7 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * 0 - for Sunday, 6 - for Saturday
      * @param firstDayOfWeek The first day of the week
      * @type {number | null}
+     * @default null
      */
     set firstDayOfWeek(firstDayOfWeek: number);
     get firstDayOfWeek(): number;
@@ -96,6 +108,7 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * Set multiple selected values
      * @param values Values to set
      * @type {string[]}
+     * @default []
      */
     set values(values: string[]);
     get values(): string[];
@@ -103,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);
+    /**
+     * Used for keyboard navigation when trying
+     * to restore focus on re-render and control navigation
+     */
+    private _activeCellIndex;
+    private get activeCellIndex();
+    private set activeCellIndex(value);
+    /**
+     * Silently reset cell index without calling request update
+     * @returns {void}
+     */
+    private resetActiveCellIndex;
+    private navigationGrid;
     /**
-     * Get weekday numbers.
-     * Sort the list based on first day of the week
+     * Connected to role. If false, the values are not announced in the screen reader
      */
-    private get weekdaysNames();
+    private announceValues;
     /**
-     * Get localised month names from January to December
+     * Get an active element
      */
-    private get monthsNames();
+    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
@@ -133,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
@@ -191,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;
@@ -214,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
@@ -222,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
@@ -254,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
      */
@@ -281,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
@@ -293,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.
@@ -311,4 +407,6 @@ declare global {
       'ef-calendar': Partial<Calendar> | JSXInterface.ControlHTMLAttributes<Calendar>;
     }
   }
-}
+}
+
+export {};