@refinitiv-ui/elements 5.10.0 → 5.10.2-build.1841524222.1.59

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/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 { 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 { 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/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 { 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 { 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/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 { 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 { VERSION } from '../version.js';
-import { color } from '@refinitiv-ui/utils/lib/color.js';
+import { color } from '@refinitiv-ui/utils/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/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 { 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 { 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

@@ -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,13 @@ export declare class Tab extends ControlElement {
      * @returns version number
      */
     static get version(): string;
+    /**
+     * 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,18 +61,13 @@ export declare class Tab extends ControlElement {
     /**
      * True, if there is slotted content
      */
-    private isSlotHasChildren;
+    private isSlotHasContent;
     /**
-     * @param node that should be checked
-     * @returns whether node can be ignored.
-     */
-    private isIgnorable;
-    /**
-     * 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
@@ -73,13 +78,6 @@ export declare class Tab extends ControlElement {
      * @returns {void}
      */
     private handleClickClear;
-    /**
-     * 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;
     /**
      * Show Close Button if allow clears
      * @returns close button template

package/lib/tab/index.js

@@ -1,20 +1,20 @@
 import { __decorate } from "tslib";
 import { html, css, ControlElement } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { state } from '@refinitiv-ui/core/decorators/state.js';
+import { isSlotEmpty } from '@refinitiv-ui/utils/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 {
@@ -56,16 +56,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 +75,18 @@ 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
      */
-    isIgnorable(node) {
-        return node.nodeType === document.COMMENT_NODE
-            || isAllWhitespaceTextNode(node);
+    static get styles() {
+        return css `
+      :host {
+        display: inline-flex;
+        flex-shrink: 0;
+      }
+    `;
     }
     /**
      * Omitted lineClamp if subLabel is provided
@@ -101,20 +106,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 +122,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 +138,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 +160,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 +190,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. |

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

@@ -3,6 +3,8 @@ import { TemplateResult, CSSResultGroup, PropertyValues, ResponsiveElement, Elem
 import '../button/index.js';
 /**
  * Container for tabs
+ *
+ * @fires value-changed - Fired when the `value` changes.
  */
 export declare class TabBar extends ResponsiveElement {
     /**
@@ -29,6 +31,18 @@ export declare class TabBar extends ResponsiveElement {
      * Use to switch from horizontal to vertical layout.
      */
     vertical: boolean;
+    /**
+     * Internal value of tab bar.
+     * Controlled by public setter and getter
+     */
+    private _value;
+    /**
+     * Value of tab-bar, derived from value of an active tab.
+     * @param value Element value
+     * @default -
+     */
+    set value(value: string);
+    get value(): string;
     private content;
     private leftBtn;
     private rightBtn;
@@ -55,26 +69,61 @@ export declare class TabBar extends ResponsiveElement {
      */
     resizedCallback(size: ElementSize): void;
     /**
-     * Hide all scroll buttons
+     * Return true if incoming value matches one of the existing tabs
+     * @param value Value to check
+     * @returns true if incoming value matches one of the existing tabs
+     */
+    private isValidValue;
+    /**
+     * When the slot changes, set the level, toggle the scroll button, and set the value
      * @returns {void}
      */
-    private hideScrollButtons;
+    private onSlotChange;
     /**
-     * Hide/Show scroll button when element is overflow.
-     * @param elementWidth width of element
+     * Mark tab as active
+     * @param value value of tab to select
      * @returns {void}
      */
-    private toggleScrollButton;
+    private activateTab;
+    /**
+     * Set tab value and fires `tab-changed` event
+     * @param event - Event
+     * @returns {void}
+     */
+    private onTap;
+    /**
+     * Get the value of a tab
+     * @param tab - The tab element.
+     * @returns The value of the tab.
+     */
+    private getTabValue;
+    /**
+     * Return the tab's label, or its textContent, or an empty string
+     * @param tab - The tab element.
+     * @returns The tab label.
+     */
+    private getTabLabel;
+    /**
+     * Get Tab elements from slot
+     * @returns the array of Tab
+     */
+    private getTabElements;
+    /**
+     * Get focusable tab elements
+     * @returns the array of focusable tab
+     */
+    private getFocusableTabs;
     /**
      * Set tab level attribute accordingly
      * @returns {void}
      */
     private setLevel;
     /**
-     * Detects when slot changes
+     * Hide/Show scroll button when element is overflow.
+     * @param elementWidth width of element
      * @returns {void}
      */
-    private onSlotChange;
+    private toggleScrollButton;
     /**
      * Update scroll position when clicked on left button
      * @returns {void}