@refinitiv-ui/elements 5.12.0-alpha.2 → 5.12.2

package/lib/password-field/index.js

@@ -1,11 +1,11 @@
 import { __decorate } from "tslib";
 import { html } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
-import { state } from '@refinitiv-ui/core/decorators/state.js';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { state } from '@refinitiv-ui/core/lib/decorators/state.js';
 import { preload } from '../icon/index.js';
 import { TextField } from '../text-field/index.js';
 import '../icon/index.js';
-import '@refinitiv-ui/phrasebook/locale/en/password-field.js';
+import '@refinitiv-ui/phrasebook/lib/locale/en/password-field.js';
 import { translate } from '@refinitiv-ui/translate';
 let isEyeOffPreloadRequested = false;
 /**

package/lib/pill/index.js

@@ -1,8 +1,8 @@
 import { __decorate } from "tslib";
 import { ControlElement, css, html } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { query } from '@refinitiv-ui/core/decorators/query.js';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
 import { VERSION } from '../version.js';
 import '../icon/index.js';
 /**

package/lib/progress-bar/index.js

@@ -1,8 +1,8 @@
 import { __decorate } from "tslib";
 import { css, html, BasicElement } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { styleMap } from '@refinitiv-ui/core/lib/directives/style-map.js';
 import { VERSION } from '../version.js';
 /**
  * Data visualisation component,

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

@@ -60,11 +60,11 @@ export declare class RadioButton extends ControlElement {
      */
     disconnectedCallback(): void;
     /**
-     * Invoked whenever the element is update
+     * Invoked whenever the element is updated
      * @param changedProperties changed properties
      * @returns {void}
      */
-    protected update(changedProperties: PropertyValues): void;
+    protected updated(changedProperties: PropertyValues): void;
     /**
      * Invoked when the element is first updated
      * @param changedProperties changed properties

package/lib/radio-button/index.js

@@ -1,8 +1,8 @@
 import { __decorate } from "tslib";
 import { html, css, ControlElement } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { query } from '@refinitiv-ui/core/decorators/query.js';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
 import { VERSION } from '../version.js';
 import { registerOverflowTooltip } from '../tooltip/index.js';
 import { applyRegistry, removeFromRegistry, getRadioGroup } from './radio-button-registry.js';
@@ -106,11 +106,11 @@ let RadioButton = class RadioButton extends ControlElement {
         super.disconnectedCallback();
     }
     /**
-     * Invoked whenever the element is update
+     * Invoked whenever the element is updated
      * @param changedProperties changed properties
      * @returns {void}
      */
-    update(changedProperties) {
+    updated(changedProperties) {
         if (this.isConnected && this.hasUpdated && changedProperties.has('name')) {
             applyRegistry(this, changedProperties.get('name'));
         }
@@ -118,7 +118,7 @@ let RadioButton = class RadioButton extends ControlElement {
         if (this.isConnected && this.hasUpdated && (changedProperties.has('checked') || (changedProperties.has('name')))) {
             this.manageGroupState();
         }
-        super.update(changedProperties);
+        super.updated(changedProperties);
     }
     /**
      * Invoked when the element is first updated

package/lib/rating/index.js

@@ -1,9 +1,9 @@
 import { __decorate } from "tslib";
 import { BasicElement, html, css } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { queryAll } from '@refinitiv-ui/core/decorators/query-all.js';
-import { repeat } from '@refinitiv-ui/core/directives/repeat.js';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { queryAll } from '@refinitiv-ui/core/lib/decorators/query-all.js';
+import { repeat } from '@refinitiv-ui/core/lib/directives/repeat.js';
 import { VERSION } from '../version.js';
 /**
  * Star visualisation component that is generally used for ranking

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

@@ -1,10 +1,10 @@
 import { JSXInterface } from '../jsx';
 import { TemplateResult } from '@refinitiv-ui/core';
-import { TemplateMap } from '@refinitiv-ui/core/directives/template-map.js';
+import { TemplateMap } from '@refinitiv-ui/core/lib/directives/template-map.js';
 import '../icon/index.js';
 import { TextField } from '../text-field/index.js';
 import { Translate } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/locale/en/search-field.js';
+import '@refinitiv-ui/phrasebook/lib/locale/en/search-field.js';
 /**
  * Form control to get a search input from users.
  *

package/lib/search-field/index.js

@@ -1,11 +1,11 @@
 import { __decorate } from "tslib";
 import { html } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
-import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
 import '../icon/index.js';
 import { TextField } from '../text-field/index.js';
 import { translate } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/locale/en/search-field.js';
+import '@refinitiv-ui/phrasebook/lib/locale/en/search-field.js';
 /**
  * Form control to get a search input from users.
  *

package/lib/select/index.js

@@ -1,16 +1,16 @@
 import { __decorate } from "tslib";
 import { ControlElement, html, css, FocusedPropertyKey } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { query } from '@refinitiv-ui/core/decorators/query.js';
-import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { styleMap } from '@refinitiv-ui/core/lib/directives/style-map.js';
 import { VERSION } from '../version.js';
 import '../overlay/index.js';
 import '../item/index.js';
 import '../icon/index.js';
 import { Item } from '../item/index.js';
-import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
-import { TimeoutTaskRunner, AnimationTaskRunner } from '@refinitiv-ui/utils/async.js';
+import { CollectionComposer } from '@refinitiv-ui/utils/lib/collection.js';
+import { TimeoutTaskRunner, AnimationTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
 // Observer config for items
 const observerOptions = {
     subtree: true,

package/lib/sidebar-layout/index.js

@@ -1,9 +1,9 @@
 import { __decorate } from "tslib";
 import { BasicElement, html, css } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { query } from '@refinitiv-ui/core/decorators/query.js';
-import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
 import { VERSION } from '../version.js';
 import '../layout/index.js';
 /**

package/lib/slider/index.js

@@ -1,9 +1,9 @@
 import { __decorate } from "tslib";
 import { html, css, ControlElement, WarningNotice } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { query } from '@refinitiv-ui/core/decorators/query.js';
-import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { styleMap } from '@refinitiv-ui/core/lib/directives/style-map.js';
 import { VERSION } from '../version.js';
 import '../number-field/index.js';
 var SliderNameType;
@@ -779,6 +779,10 @@ let Slider = class Slider extends ControlElement {
                 }
             }
         }
+        if (!this.dragging) {
+            // Update internal `valuePrevious` when `value` was programatically set by user.
+            this.valuePrevious = this.value;
+        }
     }
     /**
      * From value observer
@@ -805,6 +809,9 @@ let Slider = class Slider extends ControlElement {
                 }
             }
         }
+        if (!this.dragging) {
+            this.fromPrevious = this.from;
+        }
     }
     /**
      * Return fallback number of the value is invalid
@@ -884,6 +891,9 @@ let Slider = class Slider extends ControlElement {
                 }
             }
         }
+        if (!this.dragging) {
+            this.toPrevious = this.to;
+        }
     }
     /**
      * Step observer

package/lib/sparkline/index.js

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
 import { css, ResponsiveElement, html } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { query } from '@refinitiv-ui/core/decorators/query.js';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
 import { VERSION } from '../version.js';
-import { color } from '@refinitiv-ui/utils/color.js';
+import { color } from '@refinitiv-ui/utils/lib/color.js';
 import '@refinitiv-ui/browser-sparkline';
 let Sparkline = class Sparkline extends ResponsiveElement {
     constructor() {

package/lib/swing-gauge/index.js

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
 import { ResponsiveElement, css, html, WarningNotice } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { query } from '@refinitiv-ui/core/decorators/query.js';
-import { state } from '@refinitiv-ui/core/decorators/state.js';
-import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { state } from '@refinitiv-ui/core/lib/decorators/state.js';
+import { styleMap } from '@refinitiv-ui/core/lib/directives/style-map.js';
 import { VERSION } from '../version.js';
 import '../canvas/index.js';
 import '../label/index.js';

package/lib/tab/custom-elements.json

@@ -52,6 +52,12 @@
           "description": "Set disabled state",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "value",
+          "description": "Tab's value",
+          "type": "string",
+          "default": "\"\""
         }
       ],
       "properties": [
@@ -110,6 +116,13 @@
           "description": "Set disabled state",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "Tab's value",
+          "type": "string",
+          "default": "\"\""
         }
       ],
       "events": [

package/lib/tab/custom-elements.md

@@ -14,6 +14,7 @@ A building block for individual tab
 | `label`         | `label`           | `string`  | ""      | Specify tab's label text                    |
 | `lineClamp`     | `line-clamp`      | `number`  | 1       | Limit the number of lines before truncating |
 | `subLabel`      | `sub-label`       | `string`  | ""      | Specify tab's sub-label text                |
+| `value`         | `value`           | `string`  | ""      | Tab's value                                 |
 
 ## Events
 

package/lib/tab/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { TemplateResult, CSSResultGroup, ControlElement } from '@refinitiv-ui/core';
+import { TemplateResult, CSSResultGroup, ControlElement, PropertyValues } from '@refinitiv-ui/core';
 import '../icon/index.js';
 import '../label/index.js';
 /**
@@ -7,6 +7,9 @@ import '../label/index.js';
  * @attr {boolean} disabled - Set disabled state
  * @prop {boolean} [disabled=false] - Set disabled state
  *
+ * @attr {string} value - Tab's value
+ * @prop {string} [value=""] - Tab's value
+ *
  * @fires clear - Dispatched when click on cross button occurs
  */
 export declare class Tab extends ControlElement {
@@ -15,6 +18,14 @@ export declare class Tab extends ControlElement {
      * @returns version number
      */
     static get version(): string;
+    protected readonly defaultRole = "tab";
+    /**
+     * 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;
     /**
      * Specify icon name to display in tab
      */
@@ -51,35 +62,42 @@ export declare class Tab extends ControlElement {
     /**
      * True, if there is slotted content
      */
-    private isSlotHasChildren;
+    private isSlotHasContent;
+    /**
+     * Called after the element’s DOM has been updated the first time.
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
+    protected firstUpdated(changedProperties: PropertyValues): void;
     /**
-     * @param node that should be checked
-     * @returns whether node can be ignored.
+     * Compute property values that depend on other properties
+     * and are used in the rest of the update process.
+     * @param changedProperties Properties that has changed
+     * @returns {void}
      */
-    private isIgnorable;
+    protected willUpdate(changedProperties: PropertyValues): void;
     /**
-     * Checks slotted children nodes and updates component to refresh label and sub-label templates.
+     * Run on default slot slotchange
      * @param event slotchange
      * @returns {void}
      */
-    private checkSlotChildren;
+    private onSlotChange;
     /**
      * Omitted lineClamp if subLabel is provided
      * @returns line Clamp value
      */
     private getLineClamp;
     /**
-     * @param event event from close button
+     * Handles key down event
+     * @param event Key down event object
      * @returns {void}
      */
-    private handleClickClear;
+    private onKeyDown;
     /**
-     * A `CSSResultGroup` that will be used
-     * to style the host, slotted children
-     * and the internal template of the element.
-     * @returns CSS template
+     * @param event event from close button
+     * @returns {void}
      */
-    static get styles(): CSSResultGroup;
+    private handleClickClear;
     /**
      * Show Close Button if allow clears
      * @returns close button template

package/lib/tab/index.js

@@ -1,25 +1,26 @@
 import { __decorate } from "tslib";
 import { html, css, ControlElement } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { state } from '@refinitiv-ui/core/lib/decorators/state.js';
+import { isSlotEmpty } from '@refinitiv-ui/utils/lib/is-slot-empty.js';
 import { VERSION } from '../version.js';
 import '../icon/index.js';
 import '../label/index.js';
-const isAllWhitespaceTextNode = (node) => {
-    var _a;
-    return node.nodeType === document.TEXT_NODE
-        && !((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim());
-};
 /**
  * A building block for individual tab
  * @attr {boolean} disabled - Set disabled state
  * @prop {boolean} [disabled=false] - Set disabled state
  *
+ * @attr {string} value - Tab's value
+ * @prop {string} [value=""] - Tab's value
+ *
  * @fires clear - Dispatched when click on cross button occurs
  */
 let Tab = class Tab extends ControlElement {
     constructor() {
         super(...arguments);
+        this.defaultRole = 'tab';
         /**
          * Specify icon name to display in tab
          */
@@ -56,16 +57,15 @@ let Tab = class Tab extends ControlElement {
         /**
          * True, if there is slotted content
          */
-        this.isSlotHasChildren = true;
+        this.isSlotHasContent = false;
         /**
-         * Checks slotted children nodes and updates component to refresh label and sub-label templates.
+         * Run on default slot slotchange
          * @param event slotchange
          * @returns {void}
          */
-        this.checkSlotChildren = (event) => {
+        this.onSlotChange = (event) => {
             const slot = event.target;
-            this.isSlotHasChildren = !slot.assignedNodes().filter(node => !this.isIgnorable(node)).length;
-            this.requestUpdate();
+            this.isSlotHasContent = !!slot.assignedNodes().length && isSlotEmpty(slot);
         };
     }
     /**
@@ -76,12 +76,39 @@ let Tab = class Tab extends ControlElement {
         return VERSION;
     }
     /**
-     * @param node that should be checked
-     * @returns whether node can be ignored.
+     * 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 css `
+      :host {
+        display: inline-flex;
+        flex-shrink: 0;
+      }
+    `;
+    }
+    /**
+     * Called after the element’s DOM has been updated the first time.
+     * @param changedProperties Properties that has changed
+     * @returns {void}
      */
-    isIgnorable(node) {
-        return node.nodeType === document.COMMENT_NODE
-            || isAllWhitespaceTextNode(node);
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.addEventListener('keydown', this.onKeyDown);
+    }
+    /**
+     * Compute property values that depend on other properties
+     * and are used in the rest of the update process.
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('active')) {
+            this.setAttribute('aria-selected', this.active ? 'true' : 'false');
+        }
     }
     /**
      * Omitted lineClamp if subLabel is provided
@@ -90,6 +117,19 @@ let Tab = class Tab extends ControlElement {
     getLineClamp() {
         return !this.lineClamp ? 0 : this.subLabel ? 1 : this.lineClamp;
     }
+    /**
+     * Handles key down event
+     * @param event Key down event object
+     * @returns {void}
+     */
+    onKeyDown(event) {
+        if (event.defaultPrevented) {
+            return;
+        }
+        if (event.key === 'Delete' && (this.clears || this.clearsOnHover)) {
+            this.dispatchEvent(new CustomEvent('clear'));
+        }
+    }
     /**
      * @param event event from close button
      * @returns {void}
@@ -101,20 +141,6 @@ let Tab = class Tab extends ControlElement {
          */
         this.dispatchEvent(new CustomEvent('clear'));
     }
-    /**
-     * 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 css `
-      :host {
-        display: inline-flex;
-        flex-shrink: 0;
-      }
-    `;
-    }
     /**
      * Show Close Button if allow clears
      * @returns close button template
@@ -131,7 +157,7 @@ let Tab = class Tab extends ControlElement {
      * @returns Label template
      */
     get LabelTemplate() {
-        if (!this.label || !this.isSlotHasChildren) {
+        if (!this.label || this.isSlotHasContent) {
             return null;
         }
         return html `
@@ -147,7 +173,7 @@ let Tab = class Tab extends ControlElement {
      * @returns SubLabel template
      */
     get SubLabelTemplate() {
-        if (!this.subLabel || !this.isSlotHasChildren) {
+        if (!this.subLabel || this.isSlotHasContent) {
             return null;
         }
         return html `
@@ -169,8 +195,7 @@ let Tab = class Tab extends ControlElement {
         <div part="label-container">
           ${this.LabelTemplate}
           ${this.SubLabelTemplate}
-          <slot @slotchange="${this.checkSlotChildren}">
-          </slot>
+          <slot @slotchange="${this.onSlotChange}"></slot>
         </div>
       ${this.CloseTemplate}
     `;
@@ -200,6 +225,9 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true })
 ], Tab.prototype, "level", void 0);
+__decorate([
+    state()
+], Tab.prototype, "isSlotHasContent", void 0);
 Tab = __decorate([
     customElement('ef-tab', {
         alias: 'coral-tab'

package/lib/tab-bar/custom-elements.json

@@ -45,6 +45,18 @@
           "description": "Use to switch from horizontal to vertical layout.",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "value",
+          "description": "Value of tab-bar, derived from value of an active tab.",
+          "type": "string",
+          "default": "\"\""
+        }
+      ],
+      "events": [
+        {
+          "name": "value-changed",
+          "description": "Fired when the `value` changes."
         }
       ]
     }

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

@@ -8,4 +8,11 @@ Container for tabs
 |-------------|-------------|---------------------------------|---------|--------------------------------------------------|
 | `alignment` | `alignment` | `"left" \| "center" \| "right"` | "left"  | Specify tab's horizontal alignment               |
 | `level`     | `level`     | `"1" \| "2" \| "3"`             | "1"     | Use level styling from theme                     |
+| `value`     |             | `string`                        | ""      | Value of tab-bar, derived from value of an active tab. |
 | `vertical`  | `vertical`  | `boolean`                       | false   | Use to switch from horizontal to vertical layout. |
+
+## Events
+
+| Event           | Description                     |
+|-----------------|---------------------------------|
+| `value-changed` | Fired when the `value` changes. |