@refinitiv-ui/elements 5.12.0-dev.0 → 5.12.0

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

@@ -2,24 +2,25 @@ 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 { 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. |

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 {
     /**
@@ -10,6 +12,7 @@ export declare class TabBar extends ResponsiveElement {
      * @returns version number
      */
     static get version(): string;
+    protected readonly defaultRole = "tablist";
     /**
      * A `CSSResultGroup` that will be used
      * to style the host, slotted children
@@ -29,6 +32,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 +70,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}
@@ -85,6 +135,46 @@ export declare class TabBar extends ResponsiveElement {
      * @returns {void}
      */
     private handleScrollRight;
+    /**
+     * Focus and set active to tab
+     * @param tab - The element that was clicked.
+     * @return {void}
+     */
+    private focusAndSetActiveTab;
+    /**
+     * Navigate to first focusable tab of the tab bar
+     * @returns {void}
+     */
+    private first;
+    /**
+     * Navigate to last focusable tab of the tab bar
+     * @returns {void}
+     */
+    private last;
+    /**
+     * Navigate to next or previous focusable tab
+     * @param direction up/next; down/previous
+     * @returns {void}
+     */
+    private navigateToSibling;
+    /**
+     * Handles key down event
+     * @param event Key down event object
+     * @returns {void}
+     */
+    private onKeyDown;
+    /**
+     * Sets the tabindex to -1 for all tabs except the active tab.
+     * @param target the tab to be focused
+     * @param tabList Array of tabs that contains target
+     * @returns {void}
+     */
+    private rovingTabIndex;
+    /**
+     * Set tabIndex to all tabs
+     * @returns {void}
+     */
+    private manageTabIndex;
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.