@refinitiv-ui/elements 5.5.0 → 5.8.1

package/lib/button/index.d.ts

@@ -1,6 +1,6 @@
 import { JSXInterface } from '../jsx';
 import { ControlElement, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
-import '../icon';
+import '../icon/index.js';
 /**
  * Use button for actions in forms, dialogs,
  * and more with support for different states and styles.
@@ -14,6 +14,7 @@ export declare class Button extends ControlElement {
      * @returns version number
      */
     static get version(): string;
+    protected readonly defaultRole = "button";
     /**
      * Customises text alignment when specified alongside `icon` property
      * Value can be `before` or `after`
@@ -51,6 +52,17 @@ export declare class Button extends ControlElement {
      * Get native label element from shadow roots
      */
     private labelElement;
+    /**
+     * Aria indicating state of toggle button
+     * @ignore
+     */
+    ariaPressed: string;
+    /**
+    * Updates the element
+    * @param changedProperties Properties that has changed
+    * @returns {void}
+    */
+    protected update(changedProperties: PropertyValues): void;
     /**
      * the lifecycle method called when properties changed first time
      * @param changedProperties properties it's the Map object which has the updated properties
@@ -62,18 +74,6 @@ export declare class Button extends ControlElement {
      * @returns {void}
      */
     private onDefaultSlotChangeHandler;
-    /**
-     * Handle keydown event
-     * @param event the keyboard event
-     * @returns {void}
-     */
-    private onKeyUpHandler;
-    /**
-     * Check key names
-     * @param key the keyboard key
-     * @returns true if space or enter pressed
-     */
-    private isReturnOrSpaceKey;
     /**
      * Handle active property, when toggles is true
      * @returns {void}

package/lib/button/index.js

@@ -1,13 +1,21 @@
-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 { __decorate } from "tslib";
+import { ControlElement, html } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { VERSION } from '../version.js';
+import { registerOverflowTooltip } from '../tooltip/index.js';
+import '../icon/index.js';
+/**
+ * Return the attribute that converted from the property
+ * Prevent empty string that reflected to attribute
+ * @private
+ * @param value value from the property
+ * @returns string converted to attribute
+ */
+const emptyStringToNull = function (value) {
+    return value || null;
 };
-import { ControlElement, customElement, html, property, query } from '@refinitiv-ui/core';
-import { VERSION } from '..';
-import '../icon';
-import { registerOverflowTooltip } from '../tooltip';
 /**
  * Use button for actions in forms, dialogs,
  * and more with support for different states and styles.
@@ -18,6 +26,7 @@ import { registerOverflowTooltip } from '../tooltip';
 let Button = class Button extends ControlElement {
     constructor() {
         super(...arguments);
+        this.defaultRole = 'button';
         /**
          * Customises text alignment when specified alongside `icon` property
          * Value can be `before` or `after`
@@ -51,6 +60,11 @@ let Button = class Button extends ControlElement {
          * Use by theme to detect when no content inside button
          */
         this.empty = false;
+        /**
+         * Aria indicating state of toggle button
+         * @ignore
+         */
+        this.ariaPressed = '';
     }
     /**
      * Element version number
@@ -59,6 +73,17 @@ let Button = class Button extends ControlElement {
     static get version() {
         return VERSION;
     }
+    /**
+    * Updates the element
+    * @param changedProperties Properties that has changed
+    * @returns {void}
+    */
+    update(changedProperties) {
+        if (changedProperties.has('active') && this.toggles || changedProperties.has('toggles') && this.toggles) {
+            this.ariaPressed = String(this.active);
+        }
+        super.update(changedProperties);
+    }
     /**
      * the lifecycle method called when properties changed first time
      * @param changedProperties properties it's the Map object which has the updated properties
@@ -69,7 +94,6 @@ let Button = class Button extends ControlElement {
         this.addEventListener('tap', this.toggleActive);
         this.addEventListener('tapstart', this.setPressed);
         this.addEventListener('tapend', this.unsetPressed);
-        this.addEventListener('keyup', this.onKeyUpHandler);
         this.emptyComputed();
         registerOverflowTooltip(this.labelElement, () => this.textContent);
     }
@@ -80,27 +104,6 @@ let Button = class Button extends ControlElement {
     onDefaultSlotChangeHandler() {
         this.emptyComputed();
     }
-    /**
-     * Handle keydown event
-     * @param event the keyboard event
-     * @returns {void}
-     */
-    onKeyUpHandler(event) {
-        if (this.isReturnOrSpaceKey(event.key)) {
-            this.click();
-        }
-    }
-    /**
-     * Check key names
-     * @param key the keyboard key
-     * @returns true if space or enter pressed
-     */
-    isReturnOrSpaceKey(key) {
-        return key === ' '
-            || key === 'Spacebar'
-            || key === 'Enter'
-            || key === 'Return';
-    }
     /**
      * Handle active property, when toggles is true
      * @returns {void}
@@ -205,6 +208,13 @@ __decorate([
 __decorate([
     query('[part="label"]')
 ], Button.prototype, "labelElement", void 0);
+__decorate([
+    property({ type: String,
+        reflect: true,
+        attribute: 'aria-pressed',
+        converter: { toAttribute: emptyStringToNull } // TODO: Remove after typescript update to allow nullable for ARIAMixin
+    })
+], Button.prototype, "ariaPressed", void 0);
 Button = __decorate([
     customElement('ef-button', {
         alias: 'coral-button'

package/lib/button-bar/custom-elements.md

@@ -0,0 +1,9 @@
+# ef-button-bar
+
+Used to display multiple buttons to create a list of commands bar.
+
+## Properties
+
+| Property  | Attribute | Type      | Default | Description                                      |
+|-----------|-----------|-----------|---------|--------------------------------------------------|
+| `managed` | `managed` | `boolean` | false   | Manages user interaction, only allowing one toggle button to be active at any one time. |

package/lib/button-bar/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
+import { BasicElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
 /**
  * Used to display multiple buttons to create a list of commands bar.
  */
@@ -10,12 +10,12 @@ export declare class ButtonBar extends BasicElement {
      */
     static get version(): string;
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * Manages user interaction, only allowing one toggle button to be active at any one time.
      */

package/lib/button-bar/index.js

@@ -1,12 +1,10 @@
-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 { VERSION } from '../';
-import { Button } from '../button';
+import { __decorate } from "tslib";
+import { BasicElement, html, css } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { VERSION } from '../version.js';
+import { Button } from '../button/index.js';
 /**
  * Used to display multiple buttons to create a list of commands bar.
  */
@@ -26,7 +24,7 @@ let ButtonBar = class ButtonBar extends BasicElement {
         return VERSION;
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template

package/lib/calendar/constants.d.ts

@@ -0,0 +1,22 @@
+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;
+};

package/lib/calendar/constants.js

@@ -0,0 +1,23 @@
+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
+};

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,10 +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';
-export { CalendarFilter };
+import type { CalendarFilter } from './types';
+import './locales.js';
+import '../button/index.js';
+export type { CalendarFilter };
 /**
  * Standard calendar element
  *
@@ -26,12 +26,12 @@ export declare class Calendar extends ControlElement implements MultiValue {
      */
     static get version(): string;
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     private _min;
     /**
     * Set minimum date
@@ -78,6 +78,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;
@@ -101,6 +102,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[];

package/lib/calendar/index.js

@@ -1,36 +1,16 @@
-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 { ControlElement, html, css, customElement, property, ifDefined, WarningNotice } from '@refinitiv-ui/core';
-import '../button';
-import { DateFormat, format, utcFormat, utcParse, isValidDate, isWeekend, isAfter, isBefore, addMonths, subMonths, isToday, isThisMonth, isThisYear, isSameDay, isSameMonth, isSameYear, toDateSegment } from '@refinitiv-ui/utils';
-import { monthInfo } from './utils';
-import './locales';
-import { weekdaysNames, monthsNames, formatLocaleDate, ViewFormatTranslateParams } from './locales';
+import { __decorate } from "tslib";
+import { ControlElement, html, css, WarningNotice } 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 { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
+import { VERSION } from '../version.js';
+import { isIE } from '@refinitiv-ui/utils/lib/browser.js';
+import { DateFormat, format, utcFormat, utcParse, isValidDate, isWeekend, isAfter, isBefore, addMonths, subMonths, isToday, isThisMonth, isThisYear, isSameDay, isSameMonth, isSameYear, toDateSegment } from '@refinitiv-ui/utils/lib/date.js';
+import { monthInfo, weekdaysNames, monthsNames, formatLocaleDate, ViewFormatTranslateParams } from './utils.js';
 import { translate, getLocale, TranslatePropertyKey } from '@refinitiv-ui/translate';
-import { RenderView } from './types';
-import { VERSION } from '..';
-const isIE = (/Trident/g).test(navigator.userAgent) || (/MSIE/g).test(navigator.userAgent);
-const FIRST_DAY_OF_WEEK = 0; // 0 for Sunday
-const YEARS_PER_YEAR_VIEW = 16; /* must be a square number */
-const DAY_VIEW = {
-    rowCount: 6,
-    columnCount: 7,
-    totalCount: 6 * 7
-};
-const YEAR_VIEW = {
-    rowCount: 4,
-    columnCount: 4,
-    totalCount: 4 * 4
-};
-const MONTH_VIEW = {
-    rowCount: 4,
-    columnCount: 4,
-    totalCount: 4 * 4
-};
+import { RenderView, FIRST_DAY_OF_WEEK, YEARS_PER_YEAR_VIEW, DAY_VIEW, YEAR_VIEW, MONTH_VIEW } from './constants.js';
+import './locales.js';
+import '../button/index.js';
 /**
  * Standard calendar element
  *
@@ -93,7 +73,7 @@ let Calendar = class Calendar extends ControlElement {
         return VERSION;
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
@@ -169,7 +149,7 @@ let Calendar = class Calendar extends ControlElement {
         }
         if (oldMin !== min) {
             this._min = min;
-            void this.requestUpdate('min', oldMin);
+            this.requestUpdate('min', oldMin);
         }
     }
     get min() {
@@ -188,7 +168,7 @@ let Calendar = class Calendar extends ControlElement {
         }
         if (oldMax !== max) {
             this._max = max;
-            void this.requestUpdate('max', oldMax);
+            this.requestUpdate('max', oldMax);
         }
     }
     get max() {
@@ -207,7 +187,7 @@ let Calendar = class Calendar extends ControlElement {
         const oldView = this._view;
         if (oldView !== view) {
             this._view = view;
-            void this.requestUpdate('view', oldView);
+            this.requestUpdate('view', oldView);
         }
     }
     get view() {
@@ -219,13 +199,14 @@ let Calendar = class Calendar extends ControlElement {
      * 0 - for Sunday, 6 - for Saturday
      * @param firstDayOfWeek The first day of the week
      * @type {number | null}
+     * @default null
      */
     set firstDayOfWeek(firstDayOfWeek) {
         firstDayOfWeek %= 7;
         const oldFirstDayOfWeek = this._firstDayOfWeek;
         if (oldFirstDayOfWeek !== firstDayOfWeek) {
             this._firstDayOfWeek = firstDayOfWeek;
-            void this.requestUpdate('firstDayOfWeek', oldFirstDayOfWeek);
+            this.requestUpdate('firstDayOfWeek', oldFirstDayOfWeek);
         }
     }
     get firstDayOfWeek() {
@@ -246,13 +227,14 @@ let Calendar = class Calendar extends ControlElement {
      * Set multiple selected values
      * @param values Values to set
      * @type {string[]}
+     * @default []
      */
     set values(values) {
         const oldValues = this._values;
         const newValues = this.filterAndWarnInvalidValues(values);
         if (oldValues.toString() !== newValues.toString()) {
             this._values = newValues;
-            void this.requestUpdate('values', oldValues);
+            this.requestUpdate('values', oldValues);
         }
     }
     get values() {

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 {};