@refinitiv-ui/elements 7.6.2 → 7.8.0

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

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import { CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import { TemplateMap } from '@refinitiv-ui/core/directives/template-map.js';
 import '@refinitiv-ui/phrasebook/locale/en/password-field.js';
 import { Translate } from '@refinitiv-ui/translate';
@@ -49,6 +49,16 @@ export declare class PasswordField extends TextField {
      * Defines whether password is visible or not
      */
     private isPasswordVisible;
+    /**
+     * live region content presenting password field visibility state
+     */
+    private liveRegionContent;
+    /**
+     * A `CSSResultGroup` that will be used to style the host,
+     * slotted children and the internal template of the element.
+     * @returns CSS template
+     */
+    static get styles(): CSSResultGroup;
     /**
      * Called when the element’s DOM has been updated and rendered for the first time
      * @param changedProperties Properties that has changed
@@ -76,6 +86,18 @@ export declare class PasswordField extends TextField {
      * @returns {void}
      */
     protected renderIcon(): TemplateResult | null;
+    /**
+     * update live region content describing password visibility state
+     * @param event event trigging live region content update
+     * @return void
+     */
+    protected updateLiveRegionContent(event: Event): void;
+    /**
+     * Handle tap events of toggle password icon
+     * @param event custom event
+     * @returns {void}
+     */
+    protected onTogglePasswordTap(event: CustomEvent): void;
     /**
      * Toggles password visibility state
      * @return void

package/lib/password-field/index.js

@@ -1,9 +1,10 @@
 import { __decorate } from "tslib";
-import { html } from '@refinitiv-ui/core';
+import { html, unsafeCSS } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { state } from '@refinitiv-ui/core/decorators/state.js';
 import '@refinitiv-ui/phrasebook/locale/en/password-field.js';
 import { translate } from '@refinitiv-ui/translate';
+import { VISUALLY_HIDDEN_STYLE } from '@refinitiv-ui/utils/accessibility.js';
 import '../icon/index.js';
 import { TextField } from '../text-field/index.js';
 import { deregisterOverflowTooltip } from '../tooltip/index.js';
@@ -49,6 +50,18 @@ let PasswordField = class PasswordField extends TextField {
          * Defines whether password is visible or not
          */
         this.isPasswordVisible = false;
+        /**
+         * live region content presenting password field visibility state
+         */
+        this.liveRegionContent = '';
+    }
+    /**
+     * A `CSSResultGroup` that will be used to style the host,
+     * slotted children and the internal template of the element.
+     * @returns CSS template
+     */
+    static get styles() {
+        return [super.styles, unsafeCSS(VISUALLY_HIDDEN_STYLE)];
     }
     /**
      * Called when the element’s DOM has been updated and rendered for the first time
@@ -95,14 +108,40 @@ let PasswordField = class PasswordField extends TextField {
         part="icon"
         role="button"
         tabindex="0"
-        aria-label="${this.isPasswordVisible ? this.t('HIDE_PASSWORD') : this.t('SHOW_PASSWORD')}"
+        aria-pressed="${this.isPasswordVisible}"
+        aria-label="${this.t('SHOW_PASSWORD')}"
         icon=${this.isPasswordVisible ? 'eye-off' : 'eye'}
         ?readonly="${this.readonly}"
         ?disabled="${this.disabled}"
-        @tap="${this.togglePasswordVisibility}"
+        @tap="${this.onTogglePasswordTap}"
+        @focus="${this.updateLiveRegionContent}"
+        @blur="${this.updateLiveRegionContent}"
       ></ef-icon>
+      <div part="live-region" aria-live="polite" class="visually-hidden">${this.liveRegionContent}</div>
     `;
     }
+    /**
+     * update live region content describing password visibility state
+     * @param event event trigging live region content update
+     * @return void
+     */
+    updateLiveRegionContent(event) {
+        this.liveRegionContent =
+            event.type === 'blur'
+                ? ''
+                : this.isPasswordVisible
+                    ? this.t('SHOW_PASSWORD_ON')
+                    : this.t('SHOW_PASSWORD_OFF');
+    }
+    /**
+     * Handle tap events of toggle password icon
+     * @param event custom event
+     * @returns {void}
+     */
+    onTogglePasswordTap(event) {
+        this.togglePasswordVisibility();
+        this.updateLiveRegionContent(event);
+    }
     /**
      * Toggles password visibility state
      * @return void
@@ -117,6 +156,9 @@ __decorate([
 __decorate([
     state()
 ], PasswordField.prototype, "isPasswordVisible", void 0);
+__decorate([
+    state()
+], PasswordField.prototype, "liveRegionContent", void 0);
 PasswordField = __decorate([
     customElement('ef-password-field')
 ], PasswordField);

package/lib/pill/custom-elements.json

@@ -19,7 +19,7 @@
         },
         {
           "name": "active",
-          "description": "Add to pill for active state",
+          "description": "Set active state",
           "type": "boolean",
           "default": "false"
         },
@@ -60,7 +60,7 @@
         {
           "name": "active",
           "attribute": "active",
-          "description": "Add to pill for active state",
+          "description": "Set active state",
           "type": "boolean",
           "default": "false"
         },

package/lib/pill/custom-elements.md

@@ -6,14 +6,14 @@ It is rarely used in the UI but inside other components to visualize multiple it
 
 ## Properties
 
-| Property   | Attribute  | Type      | Default | Description                  |
-|------------|------------|-----------|---------|------------------------------|
-| `active`   | `active`   | `boolean` | false   | Add to pill for active state |
-| `clears`   | `clears`   | `boolean` | false   | Set pill to clearable        |
-| `disabled` | `disabled` | `boolean` | false   | Set disabled state           |
-| `readonly` | `readonly` | `boolean` | false   | Set readonly state           |
-| `toggles`  | `toggles`  | `boolean` | false   | Set pill to toggle mode      |
-| `value`    | `value`    | `string`  | ""      | Value of pill                |
+| Property   | Attribute  | Type      | Default | Description             |
+|------------|------------|-----------|---------|-------------------------|
+| `active`   | `active`   | `boolean` | false   | Set active state        |
+| `clears`   | `clears`   | `boolean` | false   | Set pill to clearable   |
+| `disabled` | `disabled` | `boolean` | false   | Set disabled state      |
+| `readonly` | `readonly` | `boolean` | false   | Set readonly state      |
+| `toggles`  | `toggles`  | `boolean` | false   | Set pill to toggle mode |
+| `value`    | `value`    | `string`  | ""      | Value of pill           |
 
 ## Events
 

package/lib/pill/index.d.ts

@@ -42,7 +42,7 @@ export declare class Pill extends ControlElement {
      */
     toggles: boolean;
     /**
-     * Add to pill for active state
+     * Set active state
      */
     active: boolean;
     /**

package/lib/pill/index.js

@@ -38,7 +38,7 @@ let Pill = class Pill extends ControlElement {
          */
         this.toggles = false;
         /**
-         * Add to pill for active state
+         * Set active state
          */
         this.active = false;
         /**

package/lib/select/custom-elements.json

@@ -19,13 +19,13 @@
         },
         {
           "name": "error",
-          "description": "Set state to error",
+          "description": "Set error state",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "warning",
-          "description": "Set state to warning",
+          "description": "Set warning state",
           "type": "boolean",
           "default": "false"
         },
@@ -40,7 +40,7 @@
         {
           "name": "label (readonly)",
           "description": "Current text content of the selected value",
-          "type": "string"
+          "type": "string | undefined"
         },
         {
           "name": "placeholder",
@@ -59,14 +59,14 @@
         {
           "name": "error",
           "attribute": "error",
-          "description": "Set state to error",
+          "description": "Set error state",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "warning",
           "attribute": "warning",
-          "description": "Set state to warning",
+          "description": "Set warning state",
           "type": "boolean",
           "default": "false"
         },

package/lib/select/custom-elements.md

@@ -5,16 +5,16 @@ providing a fully themeable dropdown element.
 
 ## Properties
 
-| Property           | Attribute     | Type                 | Default | Description                                      |
-|--------------------|---------------|----------------------|---------|--------------------------------------------------|
-| `data`             |               | `SelectData \| null` | null    | Construct the menu from data object. Cannot be used with slotted content |
-| `disabled`         | `disabled`    | `boolean`            | false   | Set disabled state                               |
-| `error`            | `error`       | `boolean`            | false   | Set state to error                               |
-| `label (readonly)` |               | `string`             |         | Current text content of the selected value       |
-| `opened`           | `opened`      | `boolean`            | false   | Toggles the opened state of the list             |
-| `placeholder`      | `placeholder` | `string`             | ""      | Placeholder to display when no value is set      |
-| `value`            |               | `string`             | ""      | Value of the element                             |
-| `warning`          | `warning`     | `boolean`            | false   | Set state to warning                             |
+| Property           | Attribute     | Type                  | Default | Description                                      |
+|--------------------|---------------|-----------------------|---------|--------------------------------------------------|
+| `data`             |               | `SelectData \| null`  | null    | Construct the menu from data object. Cannot be used with slotted content |
+| `disabled`         | `disabled`    | `boolean`             | false   | Set disabled state                               |
+| `error`            | `error`       | `boolean`             | false   | Set error state                                  |
+| `label (readonly)` |               | `string \| undefined` |         | Current text content of the selected value       |
+| `opened`           | `opened`      | `boolean`             | false   | Toggles the opened state of the list             |
+| `placeholder`      | `placeholder` | `string`              | ""      | Placeholder to display when no value is set      |
+| `value`            |               | `string`              | ""      | Value of the element                             |
+| `warning`          | `warning`     | `boolean`             | false   | Set warning state                                |
 
 ## Events
 

package/lib/select/index.d.ts

@@ -44,7 +44,7 @@ export declare class Select extends ControlElement implements MultiValue {
      * Current text content of the selected value
      * @readonly
      */
-    get label(): string;
+    get label(): string | undefined;
     /**
      * Current text content of the selected values
      * @ignore
@@ -60,11 +60,11 @@ export declare class Select extends ControlElement implements MultiValue {
      */
     opened: boolean;
     /**
-     * Set state to error
+     * Set error state
      */
     error: boolean;
     /**
-     * Set state to warning
+     * Set warning state
      */
     warning: boolean;
     /**

package/lib/select/index.js

@@ -69,11 +69,11 @@ let Select = class Select extends ControlElement {
          */
         this.opened = false;
         /**
-         * Set state to error
+         * Set error state
          */
         this.error = false;
         /**
-         * Set state to warning
+         * Set warning state
          */
         this.warning = false;
         /**
@@ -828,7 +828,7 @@ let Select = class Select extends ControlElement {
      * @returns Label
      */
     get labelText() {
-        return this.multiple ? this.labels.join(LABEL_SEPARATOR) : this.label;
+        return this.multiple ? this.labels.join(LABEL_SEPARATOR) : this.label || '';
     }
     /**
      * Calculating whether the placeholder should be hidden

package/lib/sidebar-layout/index.d.ts

@@ -1,7 +1,7 @@
 import { JSXInterface } from '../jsx';
 import { BasicElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
-import '../layout/index.js';
 import type { Layout } from '../layout';
+import '../layout/index.js';
 /**
  * Provides an app layout with sidebar.
  * There are 4 sections that can be slotted a component in.

package/lib/slider/custom-elements.json

@@ -19,7 +19,7 @@
         },
         {
           "name": "max",
-          "description": "Slider maximum value of slider.",
+          "description": "Set maximum value of slider.",
           "type": "string",
           "default": "\"100\""
         },
@@ -95,7 +95,7 @@
         {
           "name": "max",
           "attribute": "max",
-          "description": "Slider maximum value of slider.",
+          "description": "Set maximum value of slider.",
           "type": "string",
           "default": "\"100\""
         },

package/lib/slider/custom-elements.md

@@ -8,7 +8,7 @@ Allows users to make selections from a range of values
 |------------------|--------------------|----------------------------|---------|--------------------------------------------------|
 | `disabled`       | `disabled`         | `boolean`                  | false   | Set disabled state                               |
 | `from`           | `from`             | `string`                   | "0"     | Uses with `range`. Low value of slider in range mode. |
-| `max`            | `max`              | `string`                   | "100"   | Slider maximum value of slider.                  |
+| `max`            | `max`              | `string`                   | "100"   | Set maximum value of slider.                     |
 | `min`            | `min`              | `string`                   | "0"     | Set minimum value of slider.                     |
 | `minRange`       | `min-range`        | `string`                   | "0"     | Uses with `range`. Set minimum allowance value (distance) between `from` and `to`. |
 | `range`          | `range`            | `boolean`                  | false   | Set slider to range mode. Instead of a single value, slider will provide `from` and `to`. |

package/lib/slider/index.d.ts

@@ -52,7 +52,7 @@ export declare class Slider extends ControlElement {
      */
     min: string;
     /**
-     * Slider maximum value of slider.
+     * Set maximum value of slider.
      */
     max: string;
     /**

package/lib/slider/index.js

@@ -242,7 +242,7 @@ let Slider = class Slider extends ControlElement {
          */
         this.min = '0';
         /**
-         * Slider maximum value of slider.
+         * Set maximum value of slider.
          */
         this.max = '100';
         /**

package/lib/swing-gauge/custom-elements.json

@@ -8,7 +8,8 @@
         {
           "name": "primary-value",
           "description": "Primary value",
-          "type": "number"
+          "type": "number",
+          "default": "\"0\""
         },
         {
           "name": "primary-label",
@@ -19,7 +20,8 @@
         {
           "name": "secondary-value",
           "description": "Secondary value",
-          "type": "number"
+          "type": "number",
+          "default": "\"0\""
         },
         {
           "name": "secondary-label",
@@ -51,7 +53,8 @@
           "name": "primaryValue",
           "attribute": "primary-value",
           "description": "Primary value",
-          "type": "number"
+          "type": "number",
+          "default": "\"0\""
         },
         {
           "name": "primaryLabel",
@@ -64,7 +67,8 @@
           "name": "secondaryValue",
           "attribute": "secondary-value",
           "description": "Secondary value",
-          "type": "number"
+          "type": "number",
+          "default": "\"0\""
         },
         {
           "name": "secondaryLabel",

package/lib/swing-gauge/custom-elements.md

@@ -10,8 +10,8 @@ Data visualisation showing the percentage between two values
 | `duration`              | `duration`         | `number`                   | 1000                    | Animation duration in milliseconds |
 | `primaryLabel`          | `primary-label`    | `string`                   | ""                      | Primary label                      |
 | `primaryLegend`         | `primary-legend`   | `string`                   | ""                      | Primary value legend               |
-| `primaryValue`          | `primary-value`    | `number`                   |                         | Primary value                      |
+| `primaryValue`          | `primary-value`    | `number`                   | "0"                     | Primary value                      |
 | `secondaryLabel`        | `secondary-label`  | `string`                   | ""                      | Secondary label                    |
 | `secondaryLegend`       | `secondary-legend` | `string`                   | ""                      | Secondary value legend             |
-| `secondaryValue`        | `secondary-value`  | `number`                   |                         | Secondary value                    |
+| `secondaryValue`        | `secondary-value`  | `number`                   | "0"                     | Secondary value                    |
 | `valueFormatter`        |                    | `SwingGaugeValueFormatter` | "defaultValueFormatter" | Custom value formatter             |

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

@@ -24,6 +24,7 @@ export declare class SwingGauge extends ResponsiveElement {
     /**
      * Primary value
      * @param value primary value
+     * @default 0
      */
     set primaryValue(value: number);
     get primaryValue(): number;
@@ -35,6 +36,7 @@ export declare class SwingGauge extends ResponsiveElement {
     /**
      * Secondary value
      * @param value secondary value
+     * @default 0
      */
     set secondaryValue(value: number);
     get secondaryValue(): number;

package/lib/swing-gauge/index.js

@@ -191,6 +191,7 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
     /**
      * Primary value
      * @param value primary value
+     * @default 0
      */
     set primaryValue(value) {
         value = this.validateNumber(value, 'primary-value');
@@ -206,6 +207,7 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
     /**
      * Secondary value
      * @param value secondary value
+     * @default 0
      */
     set secondaryValue(value) {
         value = this.validateNumber(value, 'secondary-value');

package/lib/time-picker/custom-elements.json

@@ -34,8 +34,9 @@
         },
         {
           "name": "value",
-          "description": "Value of the element",
-          "type": "string"
+          "description": "Current time value",
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "readonly",
@@ -86,8 +87,9 @@
         {
           "name": "value",
           "attribute": "value",
-          "description": "Value of the element",
-          "type": "string"
+          "description": "Current time value",
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "readonly",

package/lib/time-picker/custom-elements.md

@@ -9,11 +9,11 @@ Control the time input
 | `amPm`        | `am-pm`        | `boolean`        | false   | Toggles 12hr time display                        |
 | `disabled`    | `disabled`     | `boolean`        | false   | Set disabled state                               |
 | `hours`       | `hours`        | `number \| null` | null    | Hours time segment in 24hr format                |
-| `minutes`     | `minutes`      | `number \| null` |         | Minutes time segment                             |
+| `minutes`     | `minutes`      | `number \| null` | null    | Minutes time segment                             |
 | `readonly`    | `readonly`     | `boolean`        | false   | Set readonly state                               |
-| `seconds`     | `seconds`      | `number \| null` |         | Seconds time segment                             |
+| `seconds`     | `seconds`      | `number \| null` | null    | Seconds time segment                             |
 | `showSeconds` | `show-seconds` | `boolean`        | false   | Flag to show seconds time segment in display.<br />Seconds are automatically shown when `hh:mm:ss` time format is provided as a value. |
-| `value`       | `value`        | `string`         |         | Value of the element                             |
+| `value`       | `value`        | `string`         | ""      | Current time value                               |
 
 ## Methods
 

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

@@ -61,6 +61,7 @@ export declare class TimePicker extends ControlElement {
     /**
      * Minutes time segment
      * @param minutes minutes value
+     * @default null
      * @returns {void}
      */
     set minutes(minutes: number | null);
@@ -72,6 +73,7 @@ export declare class TimePicker extends ControlElement {
     /**
      * Seconds time segment
      * @param seconds seconds value
+     * @default null
      * @returns {void}
      */
     set seconds(seconds: number | null);
@@ -90,8 +92,9 @@ export declare class TimePicker extends ControlElement {
      */
     showSeconds: boolean;
     /**
-     * Value of the element
+     * Current time value
      * @param value Element value
+     * @default -
      */
     set value(value: string);
     get value(): string;

package/lib/time-picker/index.js

@@ -120,6 +120,7 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
     /**
      * Minutes time segment
      * @param minutes minutes value
+     * @default null
      * @returns {void}
      */
     set minutes(minutes) {
@@ -142,6 +143,7 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
     /**
      * Seconds time segment
      * @param seconds seconds value
+     * @default null
      * @returns {void}
      */
     set seconds(seconds) {
@@ -162,8 +164,9 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
         return this._seconds;
     }
     /**
-     * Value of the element
+     * Current time value
      * @param value Element value
+     * @default -
      */
     set value(value) {
         const oldValue = this.value;

package/lib/toggle/custom-elements.json

@@ -7,7 +7,7 @@
       "attributes": [
         {
           "name": "checked-label",
-          "description": "Label of toggle checked",
+          "description": "Label of the checked state",
           "type": "string",
           "default": "\"\""
         },
@@ -40,7 +40,7 @@
         {
           "name": "checkedLabel",
           "attribute": "checked-label",
-          "description": "Label of toggle checked",
+          "description": "Label of the checked state",
           "type": "string",
           "default": "\"\""
         },

package/lib/toggle/custom-elements.md

@@ -4,13 +4,13 @@ Form control that can toggle between 2 states
 
 ## Properties
 
-| Property       | Attribute       | Type      | Default | Description             |
-|----------------|-----------------|-----------|---------|-------------------------|
-| `checked`      | `checked`       | `boolean` | false   | Value of toggle         |
-| `checkedLabel` | `checked-label` | `string`  | ""      | Label of toggle checked |
-| `disabled`     | `disabled`      | `boolean` | false   | Set disabled state      |
-| `label`        | `label`         | `string`  | ""      | Label of toggle         |
-| `readonly`     | `readonly`      | `boolean` | false   | Set readonly state      |
+| Property       | Attribute       | Type      | Default | Description                |
+|----------------|-----------------|-----------|---------|----------------------------|
+| `checked`      | `checked`       | `boolean` | false   | Value of toggle            |
+| `checkedLabel` | `checked-label` | `string`  | ""      | Label of the checked state |
+| `disabled`     | `disabled`      | `boolean` | false   | Set disabled state         |
+| `label`        | `label`         | `string`  | ""      | Label of toggle            |
+| `readonly`     | `readonly`      | `boolean` | false   | Set readonly state         |
 
 ## Events
 

package/lib/toggle/index.d.ts

@@ -19,7 +19,7 @@ export declare class Toggle extends ControlElement {
     static get version(): string;
     protected readonly defaultRole: string | null;
     /**
-     * Label of toggle checked
+     * Label of the checked state
      */
     checkedLabel: string;
     /**

package/lib/toggle/index.js

@@ -29,7 +29,7 @@ let Toggle = class Toggle extends ControlElement {
         super(...arguments);
         this.defaultRole = 'switch';
         /**
-         * Label of toggle checked
+         * Label of the checked state
          */
         this.checkedLabel = '';
         /**

package/lib/tooltip/index.d.ts

@@ -1,10 +1,10 @@
 import { JSXInterface } from '../jsx';
 import { BasicElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import type { OverlayTransitionStyle as TooltipTransitionStyle } from '../overlay';
 import '../overlay/index.js';
 import './elements/title-tooltip.js';
 import { deregister as deregisterOverflowTooltip, register as registerOverflowTooltip } from './helpers/overflow-tooltip.js';
 import { TooltipCondition, TooltipPosition, TooltipRenderer } from './helpers/types.js';
-import type { OverlayTransitionStyle as TooltipTransitionStyle } from '../overlay';
 /**
  * Tooltip displays extra information when the
  * user hovers the pointer over an item.

package/lib/tree/elements/tree-item.d.ts

@@ -2,8 +2,8 @@ import { JSXInterface } from '../../jsx';
 import { ControlElement, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import '../../checkbox/index.js';
 import '../../icon/index.js';
-import { CheckedState } from '../managers/tree-manager.js';
 import type { TreeDataItem } from '../helpers/types';
+import { CheckedState } from '../managers/tree-manager.js';
 /**
  * Displays a tree list item.
  * Groups display expansion arrows.

package/lib/tree/elements/tree.d.ts

@@ -3,9 +3,9 @@ import { PropertyValues, TapEvent } from '@refinitiv-ui/core';
 import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 import { List } from '../../list/index.js';
 import { TreeRenderer } from '../helpers/renderer.js';
+import type { TreeData, TreeDataItem, TreeFilter } from '../helpers/types';
 import { TreeManagerMode } from '../managers/tree-manager.js';
 import './tree-item.js';
-import type { TreeData, TreeDataItem, TreeFilter } from '../helpers/types';
 /**
  * Displays a tree structure
  * to be used for menus and group selections