@refinitiv-ui/elements 6.0.0-next.1 → 6.0.0-next.2

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/index.d.ts

@@ -522,6 +522,11 @@ export declare class Autosuggest extends Overlay {
      */
     private calculateContentMaxHeight;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-autosuggest': Autosuggest;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/autosuggest/index.js

@@ -4,7 +4,6 @@ import { css, html } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { query } from '@refinitiv-ui/core/decorators/query.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { unsafeHTML } from '@refinitiv-ui/core/directives/unsafe-html.js';
 import { VERSION } from '../version.js';
 import { AnimationTaskRunner, TimeoutTaskRunner } from '@refinitiv-ui/utils/async.js';
 import { escapeRegExp, itemHighlightable, itemRenderer, queryWordSelect } from './helpers/utils.js';
@@ -653,9 +652,21 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
         if (!moreResults) {
             return null;
         }
+        query = query ? query.toString() : query;
+        const htmlString = [];
+        const pattern = /({0\})/g;
+        let previousIndex = 0;
+        let matches;
+        while ((matches = pattern.exec(moreSearchText)) !== null) {
+            const match = matches[0];
+            const text = moreSearchText.substring(previousIndex, pattern.lastIndex - match.length);
+            htmlString.push(html `${text}<mark>${query}</mark>`);
+            previousIndex = pattern.lastIndex;
+        }
+        htmlString.push(html `${moreSearchText.substring(previousIndex)}`);
         return html `
       <span part="more-results-text">
-        ${unsafeHTML(moreSearchText.replace(/{0\}/g, `<mark>${query ? query.toString() : ''}</mark>`))}
+        ${htmlString}
       </span>
       <span part="more-results-keys" slot="right"><kbd>SHIFT</kbd> + <kbd>ENTER</kbd></span>
     `;

package/lib/button/index.d.ts

@@ -111,6 +111,11 @@ export declare class Button extends ControlElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-button': Button;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/button/index.js

@@ -64,6 +64,7 @@ let Button = class Button extends ControlElement {
      * @returns {void}
      */
     willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
         if (changedProperties.has('active') && this.toggles || changedProperties.has('toggles') && this.toggles) {
             if (this.getAttribute('role') === 'radio') {
                 this.setAttribute('aria-checked', String(this.active));
@@ -72,7 +73,6 @@ let Button = class Button extends ControlElement {
                 this.setAttribute('aria-pressed', String(this.active));
             }
         }
-        super.update(changedProperties);
     }
     /**
      * the lifecycle method called when properties changed first time

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

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

package/lib/calendar/index.d.ts

@@ -396,6 +396,11 @@ export declare class Calendar extends ControlElement implements MultiValue {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-calendar': Calendar;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/canvas/index.d.ts

@@ -85,6 +85,11 @@ export declare class Canvas extends ResponsiveElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-canvas': Canvas;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/card/index.d.ts

@@ -4,6 +4,8 @@ import type { CardConfig } from './helpers/types';
 import '../label/index.js';
 import '../button/index.js';
 import '../overlay-menu/index.js';
+import '@refinitiv-ui/phrasebook/locale/en/card.js';
+import { Translate } from '@refinitiv-ui/translate';
 export type { CardConfig };
 /**
  * A card frame component.
@@ -50,10 +52,18 @@ export declare class Card extends BasicElement {
      * Get button element from shadow root
      */
     private openMenuElement?;
+    /**
+     * Used for translations
+     */
+    protected t: Translate;
     /**
      * Menu data for creating overlay-menu
      */
     private menuData?;
+    /**
+     * Menu open state
+     */
+    private menuOpened;
     /**
      * True if header has slotted content
      */
@@ -84,6 +94,12 @@ export declare class Card extends BasicElement {
      * @returns {void}
      */
     private onFooterSlotChange;
+    /**
+     * Run on overlay menu open changed
+     * @param event overlay menu opened changed event
+     * @returns {void}
+     */
+    private onMenuOpenChanged;
     /**
      * True if card has header
      */
@@ -126,6 +142,11 @@ export declare class Card extends BasicElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-card': Card;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/card/index.js

@@ -9,6 +9,8 @@ import { isSlotEmpty } from '@refinitiv-ui/utils/is-slot-empty.js';
 import '../label/index.js';
 import '../button/index.js';
 import '../overlay-menu/index.js';
+import '@refinitiv-ui/phrasebook/locale/en/card.js';
+import { translate } from '@refinitiv-ui/translate';
 /**
  * A card frame component.
  *
@@ -29,6 +31,10 @@ let Card = class Card extends BasicElement {
          * Set text on the footer
          */
         this.footer = '';
+        /**
+         * Menu open state
+         */
+        this.menuOpened = false;
         /**
          * True if header has slotted content
          */
@@ -91,6 +97,7 @@ let Card = class Card extends BasicElement {
     openMenu() {
         if (this.menuElement && !(this.menuElement.fullyOpened || this.menuElement.transitioning)) {
             this.menuElement.opened = true;
+            this.menuOpened = true;
         }
     }
     /**
@@ -98,8 +105,9 @@ let Card = class Card extends BasicElement {
      * @returns {void}
      */
     closeMenu() {
-        if (this.menuElement) {
+        if (this.menuElement?.opened) {
             this.menuElement.opened = false;
+            this.menuOpened = false;
         }
     }
     /**
@@ -118,6 +126,14 @@ let Card = class Card extends BasicElement {
     onFooterSlotChange(event) {
         this.footerHasContent = isSlotEmpty(event.target);
     }
+    /**
+     * Run on overlay menu open changed
+     * @param event overlay menu opened changed event
+     * @returns {void}
+     */
+    onMenuOpenChanged(event) {
+        this.menuOpened = event.detail.value;
+    }
     /**
      * True if card has header
      */
@@ -157,15 +173,21 @@ let Card = class Card extends BasicElement {
     get menuTemplate() {
         return html `${this.menuData ? html `
       <ef-button
-        @tap="${this.openMenu}"
         part="menu-button"
         icon="more-vertical"
         transparent
+        aria-label=${this.t('OPEN_MENU')}
+        aria-haspopup="true"
+        aria-controls="menu-popup"
+        aria-expanded=${this.menuOpened}
+        @tap=${this.openMenu}
       ></ef-button>
       <ef-overlay-menu
+        id="menu-popup"
         part="menu-popup"
         .data=${this.menuData}
-        position="bottom-end"></ef-overlay-menu>` : undefined}
+        position="bottom-end"
+        @opened-changed=${this.onMenuOpenChanged}></ef-overlay-menu>` : undefined}
     `;
     }
     /**
@@ -226,13 +248,14 @@ __decorate([
     query('[part=menu-button]')
 ], Card.prototype, "openMenuElement", void 0);
 __decorate([
-    state()
-    /**
-     * Menu data for creating emerald-popup-menu
-     */
-    ,
+    translate()
+], Card.prototype, "t", void 0);
+__decorate([
     state()
 ], Card.prototype, "menuData", void 0);
+__decorate([
+    state()
+], Card.prototype, "menuOpened", void 0);
 __decorate([
     state()
 ], Card.prototype, "headerHasContent", void 0);

package/lib/chart/index.d.ts

@@ -171,6 +171,11 @@ export declare class Chart extends BasicElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-chart': Chart;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/checkbox/index.d.ts

@@ -81,6 +81,11 @@ export declare class Checkbox extends ControlElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-checkbox': Checkbox;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/clock/index.d.ts

@@ -305,6 +305,11 @@ export declare class Clock extends ResponsiveElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-clock': Clock;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/collapse/index.d.ts

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

package/lib/color-dialog/elements/color-palettes.d.ts

@@ -36,6 +36,11 @@ export declare class ColorPalettes extends Palettes {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-color-palettes': ColorPalettes;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/color-dialog/elements/grayscale-palettes.d.ts

@@ -51,6 +51,11 @@ export declare class GrayscalePalettes extends Palettes {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-grayscale-palettes': GrayscalePalettes;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/color-dialog/index.d.ts

@@ -216,6 +216,11 @@ export declare class ColorDialog extends Dialog {
      */
     protected get footerRegion(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-color-dialog': ColorDialog;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/color-dialog/index.js

@@ -334,14 +334,15 @@ let ColorDialog = class ColorDialog extends Dialog {
           <ef-color-palettes
             .value=${this.valueModel.value}
             @value-changed=${this.onColorChanged}
-            part="color-palettes">
+            part="color-palettes"
+            aria-hidden="true">
           </ef-color-palettes>
           <ef-grayscale-palettes
             .value=${this.valueModel.value}
             @value-changed=${this.onColorChanged}
             ?allow-nocolor=${this.allowNocolor}
             part="grayscale-palettes"
-            >
+            aria-hidden="true">
           </ef-grayscale-palettes>
         </div>
         <div part="inputs-container">
@@ -351,7 +352,8 @@ let ColorDialog = class ColorDialog extends Dialog {
             backgroundColor: this.valueModel.value || undefined
         })}
             ?no-color=${!this.valueModel.value}></div>
-          <div>${this.t('RED')}&nbsp;:
+          <div>
+            <label for="redInput">${this.t('RED')}&nbsp;:</label>
             <ef-number-field
               .value=${this.valueModel.red}
               @value-changed=${this.onRGBChanged}
@@ -362,7 +364,8 @@ let ColorDialog = class ColorDialog extends Dialog {
               id="redInput"
             ></ef-number-field>
           </div>
-          <div>${this.t('GREEN')}&nbsp;:
+          <div>
+            <label for="greenInput">${this.t('GREEN')}&nbsp;:</label>
             <ef-number-field
               .value=${this.valueModel.green}
               @value-changed=${this.onRGBChanged}
@@ -373,7 +376,8 @@ let ColorDialog = class ColorDialog extends Dialog {
               id="greenInput"
             ></ef-number-field>
           </div>
-          <div>${this.t('BLUE')}&nbsp;:
+          <div>
+            <label for="blueInput">${this.t('BLUE')}&nbsp;:</label>
             <ef-number-field
               .value=${this.valueModel.blue}
               @value-changed=${this.onRGBChanged}
@@ -384,7 +388,8 @@ let ColorDialog = class ColorDialog extends Dialog {
               id="blueInput"
             ></ef-number-field>
           </div>
-          <div>#&nbsp;:
+          <div>
+            <label for="hexInput" aria-label="Hex">#&nbsp;:</label>
             <ef-text-field
               .value=${this.valueModel.hex}
               @value-changed=${this.onHexChanged}

package/lib/combo-box/index.d.ts

@@ -535,6 +535,11 @@ export declare class ComboBox<T extends DataItem = ItemData> extends FormFieldEl
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-combo-box': ComboBox;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/counter/index.d.ts

@@ -75,6 +75,11 @@ export declare class Counter extends BasicElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-counter': Counter;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/datetime-field/index.d.ts

@@ -301,6 +301,11 @@ export declare class DatetimeField extends TextField {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-datetime-field': DatetimeField;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/datetime-picker/index.d.ts

@@ -493,6 +493,11 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-datetime-picker': DatetimePicker;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/dialog/index.d.ts

@@ -197,6 +197,11 @@ export declare class Dialog extends Overlay {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-dialog': Dialog;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/email-field/index.d.ts

@@ -64,6 +64,11 @@ export declare class EmailField extends TextField {
      */
     protected shouldValidateInput(changedProperties: PropertyValues): boolean;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-email-field': EmailField;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/flag/index.d.ts

@@ -80,6 +80,11 @@ export declare class Flag extends BasicElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-flag': Flag;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/header/index.d.ts

@@ -30,6 +30,11 @@ export declare class Header extends BasicElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-header': Header;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/heatmap/index.d.ts

@@ -437,6 +437,11 @@ export declare class Heatmap extends ResponsiveElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-heatmap': Heatmap;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/icon/index.d.ts

@@ -74,6 +74,11 @@ export declare class Icon extends BasicElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-icon': Icon;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/interactive-chart/index.d.ts

@@ -355,6 +355,11 @@ export declare class InteractiveChart extends ResponsiveElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-interactive-chart': InteractiveChart;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/item/index.d.ts

@@ -145,6 +145,11 @@ export declare class Item extends ControlElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-item': Item;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/label/index.d.ts

@@ -86,6 +86,11 @@ export declare class Label extends BasicElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-label': Label;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/layout/index.d.ts

@@ -91,6 +91,11 @@ export declare class Layout extends ResponsiveElement {
       */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-layout': Layout;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/led-gauge/index.d.ts

@@ -128,6 +128,11 @@ export declare class LedGauge extends BasicElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-led-gauge': LedGauge;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/list/index.d.ts

@@ -298,6 +298,11 @@ export declare class List<T extends DataItem = ItemData> extends ControlElement
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-list': List;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/loader/index.d.ts

@@ -11,6 +11,7 @@ export declare class Loader extends BasicElement {
      * @returns version number
      */
     static get version(): string;
+    protected readonly defaultRole: string | null;
     /**
      * Collection of template part names,
      * used to create and theme different loader styles
@@ -25,6 +26,11 @@ export declare class Loader extends BasicElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-loader': Loader;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {