@refinitiv-ui/elements 6.0.0-next.1 → 6.0.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.
 
+# [6.0.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.0.0-next.3...@refinitiv-ui/elements@6.0.0) (2022-06-07)
+
+
+### Bug Fixes
+
+* **clock:** a11y, tick, show-seconds should not pronounce all the time ([#339](https://github.com/Refinitiv/refinitiv-ui/issues/339)) ([b4e51ac](https://github.com/Refinitiv/refinitiv-ui/commit/b4e51ac1a4b181d99ff37cc30980fd4fc55dd426))
+* **clock:** sync interactiveChange code with rating ([#346](https://github.com/Refinitiv/refinitiv-ui/issues/346)) ([6837206](https://github.com/Refinitiv/refinitiv-ui/commit/6837206d9a32a4d05a18fef262e4277e8630c568))
+* **utils:** improve svg security ([#342](https://github.com/Refinitiv/refinitiv-ui/issues/342)) ([ef53c5c](https://github.com/Refinitiv/refinitiv-ui/commit/ef53c5c8918548a0c2aa67a1934ba0823698a9e8))
+
+
+### Features
+
+* **clock:** improve clock accessibility ([#308](https://github.com/Refinitiv/refinitiv-ui/issues/308)) ([c0a9bb0](https://github.com/Refinitiv/refinitiv-ui/commit/c0a9bb04c212b6aa4dbce495bec4faebd9080eaf)), closes [#311](https://github.com/Refinitiv/refinitiv-ui/issues/311)
+* **rating:** add accessibility support ([2a1b7e4](https://github.com/Refinitiv/refinitiv-ui/commit/2a1b7e47199de3c1cca73b0a86150da07612c347))
+* **slider:** add arrow key navigation support and aria attributes ([#299](https://github.com/Refinitiv/refinitiv-ui/issues/299)) ([056a45b](https://github.com/Refinitiv/refinitiv-ui/commit/056a45b56911ed0f7634ea1b4abe38c6392144d4)), closes [#332](https://github.com/Refinitiv/refinitiv-ui/issues/332) [#341](https://github.com/Refinitiv/refinitiv-ui/issues/341)
+* **slider:** add localised label for slider thumb ([#351](https://github.com/Refinitiv/refinitiv-ui/issues/351)) ([ba9cc8d](https://github.com/Refinitiv/refinitiv-ui/commit/ba9cc8d563444dba35a082a3898dc4e8f9235074))
+
+
+
+
+
 ## [5.12.2](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.12.1...@refinitiv-ui/elements@5.12.2) (2022-02-17)
 
 **Note:** Version bump only for package @refinitiv-ui/elements

package/lib/accordion/index.d.ts

@@ -60,6 +60,11 @@ export declare class Accordion extends Collapse {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-accordion': Accordion;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -55,6 +55,11 @@ export declare class AppstateBar extends BasicElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-appstate-bar': AppstateBar;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/autosuggest/custom-elements.json

@@ -7,8 +7,7 @@
       "attributes": [
         {
           "name": "attach",
-          "description": "An HTML Element or CSS selector",
-          "type": "AutosuggestTargetElement | string | null"
+          "description": "An HTML Element or CSS selector"
         },
         {
           "name": "request-on-focus",
@@ -59,16 +58,10 @@
           "type": "100",
           "default": "100"
         },
-        {
-          "name": "defaultMoreSearchText (readonly)",
-          "type": "\"More results for {0}\"",
-          "default": "\"More results for {0}\""
-        },
         {
           "name": "attach",
           "attribute": "attach",
-          "description": "An HTML Element or CSS selector",
-          "type": "AutosuggestTargetElement | string | null"
+          "description": "An HTML Element or CSS selector"
         },
         {
           "name": "requestOnFocus",
@@ -100,8 +93,7 @@
         },
         {
           "name": "query",
-          "description": "An object that represents a query from attach target",
-          "type": "AutosuggestQuery | null"
+          "description": "An object that represents a query from attach target"
         },
         {
           "name": "debounceRate",
@@ -113,19 +105,17 @@
         {
           "name": "renderer",
           "description": "A renderer applied to suggestion.\nBy default a render maps data to item attributes",
-          "type": "AutosuggestRenderer",
-          "default": "\"itemRenderer\""
+          "default": "\"renderer\""
         },
         {
           "name": "highlightable",
           "description": "A function that is applied to every suggestion during the render process\nto say whether the item can be highlighted and selected. Only items that return true are considered.\nBy default the function checks for `item` `highlightable` property.",
-          "type": "AutosuggestHighlightable",
           "default": "\"itemHighlightable\""
         },
         {
           "name": "suggestions",
           "description": "A list of suggestion items",
-          "type": "AutosuggestItem[]",
+          "type": "object",
           "default": "[]"
         },
         {

package/lib/autosuggest/custom-elements.md

@@ -8,20 +8,20 @@ custom rendering, pagination, asynchronous data request, etc.
 
 ## Properties
 
-| Property         | Attribute          | Type                                         | Default                | Description                                      |
-|------------------|--------------------|----------------------------------------------|------------------------|--------------------------------------------------|
-| `attach`         | `attach`           | `AutosuggestTargetElement \| string \| null` | null                   | An HTML Element or CSS selector                  |
-| `debounceRate`   | `debounce-rate`    | `number`                                     | "100"                  | Debounce rate in ms of the filter as a number.<br />Used to throttle the filter rate so as not to trigger unneeded filtering |
-| `highlightable`  |                    | `AutosuggestHighlightable`                   | "itemHighlightable"    | A function that is applied to every suggestion during the render process<br />to say whether the item can be highlighted and selected. Only items that return true are considered.<br />By default the function checks for `item` `highlightable` property. |
-| `htmlRenderer`   | `html-renderer`    | `boolean`                                    | false                  | If set to true, the render function is not called. Instead the wrapper element<br />should populate and destroy suggestion elements. Rendering items manually<br />may have performance benefits in frameworks that use virtual DOM (such as `Vue`, `React`, `hyperHTML` and others) |
-| `loading`        | `loading`          | `boolean`                                    | false                  | If set to true show loading mask                 |
-| `moreResults`    | `more-results`     | `boolean`                                    | false                  | If set to true display 'Has more results' item   |
-| `moreSearchText` | `more-search-text` | `string`                                     | "More results for {0}" | Custom text for More Search                      |
-| `opened`         | `opened`           | `boolean`                                    | false                  | Auto suggest popup's open state                  |
-| `query`          |                    | `AutosuggestQuery \| null`                   | null                   | An object that represents a query from attach target |
-| `renderer`       |                    | `AutosuggestRenderer`                        | "itemRenderer"         | A renderer applied to suggestion.<br />By default a render maps data to item attributes |
-| `requestOnFocus` | `request-on-focus` | `boolean`                                    | false                  | Request suggestions when attach target is focused |
-| `suggestions`    |                    | `AutosuggestItem[]`                          | []                     | A list of suggestion items                       |
+| Property         | Attribute          | Type      | Default                | Description                                      |
+|------------------|--------------------|-----------|------------------------|--------------------------------------------------|
+| `attach`         | `attach`           |           | null                   | An HTML Element or CSS selector                  |
+| `debounceRate`   | `debounce-rate`    | `number`  | "100"                  | Debounce rate in ms of the filter as a number.<br />Used to throttle the filter rate so as not to trigger unneeded filtering |
+| `highlightable`  |                    |           | "itemHighlightable"    | A function that is applied to every suggestion during the render process<br />to say whether the item can be highlighted and selected. Only items that return true are considered.<br />By default the function checks for `item` `highlightable` property. |
+| `htmlRenderer`   | `html-renderer`    | `boolean` | false                  | If set to true, the render function is not called. Instead the wrapper element<br />should populate and destroy suggestion elements. Rendering items manually<br />may have performance benefits in frameworks that use virtual DOM (such as `Vue`, `React`, `hyperHTML` and others) |
+| `loading`        | `loading`          | `boolean` | false                  | If set to true show loading mask                 |
+| `moreResults`    | `more-results`     | `boolean` | false                  | If set to true display 'Has more results' item   |
+| `moreSearchText` | `more-search-text` | `string`  | "More results for {0}" | Custom text for More Search                      |
+| `opened`         | `opened`           | `boolean` | false                  | Auto suggest popup's open state                  |
+| `query`          |                    |           | null                   | An object that represents a query from attach target |
+| `renderer`       |                    |           | "renderer"             | A renderer applied to suggestion.<br />By default a render maps data to item attributes |
+| `requestOnFocus` | `request-on-focus` | `boolean` | false                  | Request suggestions when attach target is focused |
+| `suggestions`    |                    | `object`  | []                     | A list of suggestion items                       |
 
 ## Methods
 

package/lib/autosuggest/helpers/renderer.d.ts

@@ -0,0 +1,8 @@
+import { AutosuggestRenderer } from './types';
+/**
+ * Build item element from data object
+ * @param suggestion Suggestion data
+ * @param query A query data (usually string, but could be any entity )
+ * @returns item
+ */
+export declare const renderer: AutosuggestRenderer;

package/lib/autosuggest/helpers/renderer.js

@@ -0,0 +1,35 @@
+import { uuid } from '@refinitiv-ui/utils/uuid.js';
+import { updateElementContent } from './utils.js';
+/**
+ * Build item element from data object
+ * @param suggestion Suggestion data
+ * @param query A query data (usually string, but could be any entity )
+ * @returns item
+ */
+export const renderer = (suggestion, query) => {
+    if (typeof suggestion !== 'object') {
+        const value = suggestion || '';
+        suggestion = {
+            label: value,
+            value
+        };
+    }
+    const { type, label, title, icon, disabled, value, id } = suggestion;
+    const el = document.createElement('ef-item');
+    const isTextType = !type || type === 'text';
+    const elId = id || (isTextType ? uuid() : '');
+    if (elId) {
+        el.id = elId;
+    }
+    el.tabIndex = -1;
+    el.setAttribute('role', isTextType ? 'option' : 'presentation');
+    el.type = type || null;
+    el.disabled = !!disabled;
+    el.icon = icon || null;
+    el.value = value || label || '';
+    if (title) {
+        el.title = title;
+    }
+    updateElementContent(el, query || '', label || '', el.value);
+    return el;
+};

package/lib/autosuggest/helpers/types.d.ts

@@ -3,7 +3,7 @@ export declare type AutosuggestSelectItemEvent = CustomEvent<{
     query: string;
     suggestion: Suggestion;
 }>;
-export declare type AutosuggestHighlightItem = {
+export declare type AutosuggestHighlightItem = HTMLElement & {
     highlighted: boolean;
 };
 export declare type AutosuggestHighlightItemEvent = CustomEvent<{
@@ -41,6 +41,10 @@ export interface Suggestion {
      * Sort data item into the group.
      */
     group?: string;
+    /**
+     * Suggestion unique id.
+     */
+    id?: string;
 }
 export declare type AutosuggestItem = Suggestion | string | unknown;
 export interface AutosuggestQuery {
@@ -52,3 +56,99 @@ export declare type AutosuggestTargetElement = HTMLElement & {
 export declare type AutosuggestMethodType = 'click' | 'enter' | 'clear' | 'reset' | 'navigation';
 export declare type AutosuggestRenderer = (suggestion: AutosuggestItem, query: AutosuggestQuery | null) => HTMLElement;
 export declare type AutosuggestHighlightable = (suggestion: AutosuggestItem, target: HTMLElement) => boolean;
+/**
+ * @event item-highlight
+ * Fired when an item gets highlighted or highlight is removed
+ */
+export declare type ItemHighlightEvent = CustomEvent<{
+    /**
+     * New highlight target
+     */
+    target: AutosuggestTargetElement | null;
+    /**
+     * New suggestion
+     */
+    suggestion: AutosuggestItem | null;
+    /**
+     * Old highlight target
+     */
+    oldTarget: AutosuggestTargetElement | null;
+    /**
+     * Old suggestion
+     */
+    oldSuggestion: AutosuggestItem | null;
+}>;
+/**
+ * @event add-attach-target-events
+ * Fired when attach has been set.
+ * Add attach target listeners
+ */
+export declare type AddAttachTargetEventsEvent = CustomEvent;
+/**
+ * @event remove-attach-target-events
+ * Fired when attach has been removed.
+ * Remove attach target listeners
+ */
+export declare type RemoveAttachTargetEventsEvent = CustomEvent;
+/**
+ * @event item-select
+ * Fired when an item gets selected
+ */
+export declare type ItemSelectEvent = CustomEvent<{
+    /**
+     * Select method
+     */
+    method: AutosuggestMethodType;
+    /**
+     * Selection target
+     */
+    target: AutosuggestTargetElement;
+    /**
+     * Selected suggestion
+     */
+    suggestion: AutosuggestItem | null;
+    /**
+     * Saved query object
+     */
+    query: AutosuggestQuery | null;
+}>;
+/**
+ * @event suggestions-fetch-requested
+ * Fired when auto suggest requests the data
+ */
+export declare type SuggestionsFetchRequestedEvent = CustomEvent<{
+    /**
+     * Input query
+     */
+    query: AutosuggestQuery | null;
+    /**
+     * The reason to fetch data
+     */
+    reason: AutosuggestReason;
+}>;
+/**
+ * @event suggestions-clear-requested
+ * Fired when auto suggest requests to clear the data.
+ * If used in reactive application, prevent default and set suggestions to []
+ */
+export declare type SuggestionsClearRequestedEvent = CustomEvent;
+/**
+ * @event suggestions-query
+ * Fired when input value has changed and the query must be set.
+ */
+export declare type SuggestionsQueryEvent = CustomEvent<{
+    /**
+     * The reason to request query
+     */
+    reason: AutosuggestReason;
+}>;
+/**
+ * @event suggestions-changed
+ * Fired when suggestions changed
+ */
+export declare type SuggestionsChangedEvent = CustomEvent<{
+    /**
+     * Suggestion Items
+     */
+    value: AutosuggestItem[];
+}>;

package/lib/autosuggest/helpers/utils.d.ts

@@ -1,5 +1,5 @@
 import type { Item } from '../../item';
-import type { AutosuggestHighlightable, AutosuggestRenderer } from './types';
+import { AutosuggestHighlightable } from './types';
 /**
  * Check whether item can be highlighted
  * @param suggestion Suggestion object
@@ -30,10 +30,3 @@ export declare const queryWordSelect: (text: string, query?: string, pattern?: s
  * @return {void}
  */
 export declare const updateElementContent: (el: Item, query: string, label: string, value: string | number) => void;
-/**
- * Build item element from data object
- * @param suggestion Suggestion data
- * @param query A query data (usually string, but could be any entity )
- * @returns item
- */
-export declare const itemRenderer: AutosuggestRenderer;

package/lib/autosuggest/helpers/utils.js

@@ -46,30 +46,3 @@ export const updateElementContent = (el, query, label, value) => {
         el.label = `${value}`;
     }
 };
-/**
- * Build item element from data object
- * @param suggestion Suggestion data
- * @param query A query data (usually string, but could be any entity )
- * @returns item
- */
-export const itemRenderer = (suggestion, query) => {
-    const el = document.createElement('ef-item');
-    if (typeof suggestion === 'object') {
-        const { type, label, title, icon, disabled, value } = suggestion;
-        el.type = type || null;
-        el.disabled = !!disabled;
-        el.icon = icon || null;
-        el.value = value || label || '';
-        if (title) {
-            el.title = title;
-        }
-        updateElementContent(el, query || '', label || '', el.value);
-    }
-    else {
-        const value = suggestion || '';
-        el.label = value;
-        el.value = value;
-        updateElementContent(el, query || '', value, value);
-    }
-    return el;
-};

package/lib/autosuggest/index.d.ts

@@ -1,11 +1,16 @@
 import { JSXInterface } from '../jsx';
 import { CSSResultGroup, ElementSize, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import { TranslateDirective } from '@refinitiv-ui/translate';
 import type { AutosuggestTargetElement, AutosuggestHighlightable, AutosuggestMethodType, AutosuggestQuery, AutosuggestRenderer, AutosuggestReason, AutosuggestItem, AutosuggestSelectItemEvent, AutosuggestHighlightItemEvent } from './helpers/types';
+import { escapeRegExp, itemHighlightable, queryWordSelect } from './helpers/utils.js';
+import { renderer } from './helpers/renderer.js';
 import { Overlay } from '../overlay/index.js';
 import '../loader/index.js';
 import '../item/index.js';
-export type { AutosuggestTargetElement, AutosuggestHighlightable, AutosuggestMethodType, AutosuggestQuery, AutosuggestRenderer, AutosuggestReason, AutosuggestItem } from './helpers/types';
-export { queryWordSelect, itemRenderer, escapeRegExp, itemHighlightable, updateElementContent } from './helpers/utils.js';
+import '@refinitiv-ui/phrasebook/locale/en/autosuggest.js';
+export type { AutosuggestTargetElement, AutosuggestHighlightable, AutosuggestMethodType, AutosuggestQuery, AutosuggestRenderer, AutosuggestReason, AutosuggestItem, ItemHighlightEvent, AddAttachTargetEventsEvent, RemoveAttachTargetEventsEvent, ItemSelectEvent, SuggestionsFetchRequestedEvent, SuggestionsClearRequestedEvent, SuggestionsQueryEvent, SuggestionsChangedEvent } from './helpers/types';
+export { updateElementContent } from './helpers/utils.js';
+export { itemHighlightable, escapeRegExp, queryWordSelect, renderer, renderer as itemRenderer };
 /**
  * Shows suggestions based on users' query.
  * It can be used by attaching to text form control
@@ -34,6 +39,7 @@ export declare class Autosuggest extends Overlay {
      * @returns version number
      */
     static get version(): string;
+    protected readonly defaultRole: string | null;
     /**
      * A `CSSResultGroup` that will be used
      * to style the host, slotted children
@@ -70,10 +76,8 @@ export declare class Autosuggest extends Overlay {
      */
     static ItemHighlightable(suggestion: AutosuggestItem, target: HTMLElement): boolean;
     static readonly defaultDebounceRate = 100;
-    static readonly defaultMoreSearchText = "More results for {0}";
     /**
      * An HTML Element or CSS selector
-     * @type {AutosuggestTargetElement | string | null}
      */
     attach: AutosuggestTargetElement | string | null;
     /**
@@ -95,7 +99,6 @@ export declare class Autosuggest extends Overlay {
     loading: boolean;
     /**
      * An object that represents a query from attach target
-     * @type {AutosuggestQuery | null}
      */
     query: AutosuggestQuery | null;
     /**
@@ -107,19 +110,16 @@ export declare class Autosuggest extends Overlay {
     /**
      * A renderer applied to suggestion.
      * By default a render maps data to item attributes
-     * @type {AutosuggestRenderer}
      */
     renderer: AutosuggestRenderer;
     /**
      * A function that is applied to every suggestion during the render process
      * to say whether the item can be highlighted and selected. Only items that return true are considered.
      * By default the function checks for `item` `highlightable` property.
-     * @type {AutosuggestHighlightable}
      */
     highlightable: AutosuggestHighlightable;
     /**
      * A list of suggestion items
-     * @type {AutosuggestItem[]}
      */
     suggestions: AutosuggestItem[];
     /**
@@ -128,11 +128,15 @@ export declare class Autosuggest extends Overlay {
      * may have performance benefits in frameworks that use virtual DOM (such as `Vue`, `React`, `hyperHTML` and others)
      */
     htmlRenderer: boolean;
+    /**
+     * Autosuggest internal translation strings
+     */
+    protected t: TranslateDirective;
     protected moreResultsItem?: HTMLElement | null;
-    private contentSlot?;
-    private contentElement?;
-    private headerElement?;
-    private footerElement?;
+    private contentSlotRef;
+    private contentElementRef;
+    private headerElementRef;
+    private footerElementRef;
     private suggestionMap;
     protected highlightedItem: HTMLElement | null;
     protected attachTarget: AutosuggestTargetElement | null;
@@ -180,20 +184,6 @@ export declare class Autosuggest extends Overlay {
      * @returns {void}
      */
     resizedCallback(size: ElementSize): void;
-    /**
-     * @returns template of loader if currently query loading
-     */
-    protected get loaderTemplate(): TemplateResult | null;
-    /**
-     * @returns template of moreResults
-     */
-    protected get moreResultsTemplate(): TemplateResult | null;
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return Render template
-     */
-    protected render(): TemplateResult;
     /**
      * Called once after the component is first rendered
      * @param changedProperties map of changed properties with old values
@@ -277,14 +267,12 @@ export declare class Autosuggest extends Overlay {
      * @returns {void}
      */
     protected highlightItem(target?: HTMLElement | null, silent?: boolean): void;
+    private xmlSerializer;
     /**
      * Calculate more search text inner html
-     * @param moreResults True if has more results
-     * @param moreSearchText More search text template
-     * @param query A query
      * @returns innerHTML
      */
-    protected highlightText(moreResults: boolean, moreSearchText: string, query: AutosuggestQuery | null): TemplateResult | null;
+    protected get moreResultsTextTemplate(): TemplateResult | null;
     /**
      * Call this method to request suggestions
      * @private
@@ -391,7 +379,7 @@ export declare class Autosuggest extends Overlay {
      */
     private debounceRateChange;
     /**
-     * fire event and reinit listeners if attach was changed
+     * fire event and re-init listeners if attach was changed
      * @returns {void}
      */
     private attachChangeFrameCallback;
@@ -496,7 +484,6 @@ export declare class Autosuggest extends Overlay {
      * @returns {void}
      */
     private notifySuggestions;
-    private removeChildNode;
     private generateSuggestionsFragment;
     /**
      * Set the width
@@ -509,6 +496,20 @@ export declare class Autosuggest extends Overlay {
      * @returns {void}
      */
     private onItemMousedown;
+    /**
+     * @returns template of loader if currently query loading
+     */
+    protected get loaderTemplate(): TemplateResult | null;
+    /**
+     * @returns template of moreResults
+     */
+    protected get moreResultsTemplate(): TemplateResult | null;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    protected render(): TemplateResult;
     /**
      * IE11 only: Restrict maximum height of content element
      * @param [maxHeight] Maximum height of content element
@@ -522,6 +523,11 @@ export declare class Autosuggest extends Overlay {
      */
     private calculateContentMaxHeight;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-autosuggest': Autosuggest;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {