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

package/lib/tab-bar/index.js

@@ -5,14 +5,18 @@ 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 { tweenAnimate } from './helpers/animate.js';
+import { Tab } from '../tab/index.js';
 import '../button/index.js';
 const BAR_TRAVEL_DISTANCE = 150; // scroll distance
 /**
  * Container for tabs
+ *
+ * @fires value-changed - Fired when the `value` changes.
  */
 let TabBar = class TabBar extends ResponsiveElement {
     constructor() {
         super(...arguments);
+        this.defaultRole = 'tablist';
         /**
          * Specify tab's horizontal alignment
          */
@@ -25,6 +29,11 @@ let TabBar = class TabBar extends ResponsiveElement {
          * Use to switch from horizontal to vertical layout.
          */
         this.vertical = false;
+        /**
+         * Internal value of tab bar.
+         * Controlled by public setter and getter
+         */
+        this._value = '';
     }
     /**
      * Element version number
@@ -52,6 +61,23 @@ let TabBar = class TabBar extends ResponsiveElement {
       }
     `;
     }
+    /**
+     * Value of tab-bar, derived from value of an active tab.
+     * @param value Element value
+     * @default -
+     */
+    set value(value) {
+        value = typeof value === 'string' ? value : String(value);
+        const oldValue = this._value;
+        if (value !== oldValue && this.isValidValue(value)) {
+            this._value = value;
+            this.activateTab(value);
+            this.requestUpdate('value', oldValue);
+        }
+    }
+    get value() {
+        return this._value;
+    }
     /**
      * Called after the element’s DOM has been updated the first time.
      * register scroll event on content element to toggle scroll button
@@ -68,6 +94,8 @@ let TabBar = class TabBar extends ResponsiveElement {
                 this.toggleScrollButton(this.content.clientWidth);
             }, 66); // equal 15 fps for compatibility
         });
+        this.addEventListener('tap', this.onTap);
+        this.addEventListener('keydown', this.onKeyDown);
     }
     /**
      * Called when the element’s DOM has been updated and rendered
@@ -75,16 +103,9 @@ let TabBar = class TabBar extends ResponsiveElement {
      * @returns {void}
      */
     updated(changedProperties) {
-        /* istanbul ignore else */
         if (changedProperties.has('level')) {
             this.setLevel();
         }
-        if (changedProperties.has('vertical')) {
-            // if tab bar changed from horizontal to vertical
-            if (this.vertical) {
-                this.hideScrollButtons();
-            }
-        }
         super.updated(changedProperties);
     }
     /**
@@ -100,54 +121,132 @@ let TabBar = class TabBar extends ResponsiveElement {
         }
     }
     /**
-     * Hide all scroll buttons
-     * @returns {void}
+     * 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
      */
-    hideScrollButtons() {
-        this.leftBtn.style.setProperty('display', 'none');
-        this.rightBtn.style.setProperty('display', 'none');
+    isValidValue(value) {
+        const tabList = this.getFocusableTabs();
+        return tabList.some(tab => this.getTabValue(tab) === value);
     }
     /**
-     * Hide/Show scroll button when element is overflow.
-     * @param elementWidth width of element
+     * When the slot changes, set the level, toggle the scroll button, and set the value
      * @returns {void}
      */
-    toggleScrollButton(elementWidth) {
-        const { scrollLeft, scrollWidth } = this.content;
-        if (this.vertical) {
+    onSlotChange() {
+        const tabList = this.getFocusableTabs();
+        if (tabList.length < 1) {
             return;
         }
-        // handle left button
-        if (scrollLeft > 0) {
-            this.leftBtn.style.setProperty('display', 'flex');
+        this.setLevel();
+        // get tab value from active tab
+        const activeTab = tabList.find(tab => tab.active) || tabList[0];
+        if (activeTab) {
+            this.value = this.getTabValue(activeTab);
+        }
+        this.manageTabIndex();
+    }
+    /**
+     * Mark tab as active
+     * @param value value of tab to select
+     * @returns {void}
+     */
+    activateTab(value) {
+        if (!value) {
+            return;
         }
-        else {
-            this.leftBtn.style.setProperty('display', 'none');
+        let hasActiveTab = false;
+        const tabList = this.getTabElements(); // get all tab elements include disabled tab
+        tabList.forEach(tab => {
+            const tabValue = this.getTabValue(tab);
+            // only mark tab as active once
+            if (tabValue === value && !hasActiveTab && !tab.disabled) {
+                tab.active = true;
+                hasActiveTab = true;
+            }
+            else {
+                tab.active = false;
+            }
+        });
+    }
+    /**
+     * Set tab value and fires `tab-changed` event
+     * @param event - Event
+     * @returns {void}
+     */
+    onTap(event) {
+        if (event.defaultPrevented) {
+            return;
         }
-        // handle right button
-        if (Math.floor(scrollWidth - scrollLeft) > Math.round(elementWidth)) {
-            this.rightBtn.style.setProperty('display', 'flex');
+        const element = event.target;
+        if (element instanceof Tab) {
+            const tabValue = this.getTabValue(element);
+            if (tabValue !== this.value) {
+                this.value = this.getTabValue(element);
+                this.notifyPropertyChange('value', tabValue);
+            }
         }
-        else {
-            this.rightBtn.style.setProperty('display', 'none');
+    }
+    /**
+     * Get the value of a tab
+     * @param tab - The tab element.
+     * @returns The value of the tab.
+     */
+    getTabValue(tab) {
+        return tab.value || (tab.hasAttribute('value') ? '' : this.getTabLabel(tab));
+    }
+    /**
+     * Return the tab's label, or its textContent, or an empty string
+     * @param tab - The tab element.
+     * @returns The tab label.
+     */
+    getTabLabel(tab) {
+        return tab.label || tab.textContent || '';
+    }
+    /**
+     * Get Tab elements from slot
+     * @returns the array of Tab
+     */
+    getTabElements() {
+        const tabs = [];
+        for (const child of this.children) {
+            if (child instanceof Tab) {
+                tabs.push(child);
+            }
         }
+        return tabs;
+    }
+    /**
+     * Get focusable tab elements
+     * @returns the array of focusable tab
+     */
+    getFocusableTabs() {
+        return this.getTabElements().filter(tab => !tab.disabled);
     }
     /**
      * Set tab level attribute accordingly
      * @returns {void}
      */
     setLevel() {
-        const tabList = this.querySelectorAll('ef-tab');
-        tabList.forEach((tab) => {
+        const tabList = this.getTabElements(); // get all tab elements include disabled tab
+        tabList === null || tabList === void 0 ? void 0 : tabList.forEach((tab) => {
             tab.level = this.level;
         });
     }
     /**
-     * Detects when slot changes
+     * Hide/Show scroll button when element is overflow.
+     * @param elementWidth width of element
      * @returns {void}
      */
-    onSlotChange() {
-        this.setLevel();
+    toggleScrollButton(elementWidth) {
+        if (this.vertical) {
+            return;
+        }
+        const { scrollLeft, scrollWidth } = this.content;
+        const leftBtnStyle = scrollLeft > 0 ? 'flex' : 'none';
+        const rightBtnStyle = scrollWidth - scrollLeft - elementWidth > 1 ? 'flex' : 'none';
+        this.leftBtn.style.setProperty('display', leftBtnStyle);
+        this.rightBtn.style.setProperty('display', rightBtnStyle);
     }
     /**
      * Update scroll position when clicked on left button
@@ -177,6 +276,114 @@ let TabBar = class TabBar extends ResponsiveElement {
         }
         tweenAnimate({ target: this.content, startPosition: scrollLeft, endPosition });
     }
+    /**
+     * Focus and set active to tab
+     * @param tab - The element that was clicked.
+     * @return {void}
+     */
+    focusAndSetActiveTab(tab) {
+        tab.focus();
+        tab.scrollIntoView({ block: 'nearest' });
+        this.value = this.getTabValue(tab);
+    }
+    /**
+     * Navigate to first focusable tab of the tab bar
+     * @returns {void}
+     */
+    first() {
+        const tabList = this.getFocusableTabs();
+        if (tabList.length <= 0) {
+            return;
+        }
+        this.focusAndSetActiveTab(tabList[0]);
+        this.rovingTabIndex(tabList[0], tabList);
+    }
+    /**
+     * Navigate to last focusable tab of the tab bar
+     * @returns {void}
+     */
+    last() {
+        const tabList = this.getFocusableTabs();
+        if (tabList.length <= 0) {
+            return;
+        }
+        const lastTab = tabList[tabList.length - 1];
+        this.focusAndSetActiveTab(lastTab);
+        this.rovingTabIndex(lastTab, tabList);
+    }
+    /**
+     * Navigate to next or previous focusable tab
+     * @param direction up/next; down/previous
+     * @returns {void}
+     */
+    navigateToSibling(direction) {
+        const tabList = this.getFocusableTabs();
+        if (tabList.length <= 0) {
+            return;
+        }
+        const focusedTabIndex = tabList.findIndex(tab => tab === document.activeElement);
+        const nextTab = direction === 'next'
+            ? tabList[focusedTabIndex + 1] || tabList[0]
+            : tabList[focusedTabIndex - 1] || tabList[tabList.length - 1];
+        this.focusAndSetActiveTab(nextTab);
+        this.rovingTabIndex(nextTab, tabList);
+    }
+    /**
+     * Handles key down event
+     * @param event Key down event object
+     * @returns {void}
+     */
+    onKeyDown(event) {
+        if (event.defaultPrevented) {
+            return;
+        }
+        switch (event.key) {
+            case 'Right':
+            case 'Down':
+            case 'ArrowRight':
+            case 'ArrowDown':
+                this.navigateToSibling('next');
+                break;
+            case 'Left':
+            case 'Up':
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                this.navigateToSibling('previous');
+                break;
+            case 'Home':
+                this.first();
+                break;
+            case 'End':
+                this.last();
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+    }
+    /**
+     * 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}
+     */
+    rovingTabIndex(target, tabList) {
+        tabList.forEach((tab) => {
+            tab.tabIndex = -1;
+        });
+        target.tabIndex = 0;
+    }
+    /**
+     * Set tabIndex to all tabs
+     * @returns {void}
+     */
+    manageTabIndex() {
+        const tabList = this.getFocusableTabs();
+        if (tabList && tabList.length > 0) {
+            const focusedTabIndex = tabList.findIndex(tab => tab.active);
+            this.rovingTabIndex(tabList[focusedTabIndex], tabList);
+        }
+    }
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.
@@ -184,11 +391,11 @@ let TabBar = class TabBar extends ResponsiveElement {
      */
     render() {
         return html `
-    <ef-button icon="left" part="left-btn" @tap=${this.handleScrollLeft}></ef-button>
-      <div part="content">
-        <slot @slotchange=${this.onSlotChange}></slot>
-      </div>
-    <ef-button icon="right" part="right-btn" @tap=${this.handleScrollRight}></ef-button>
+      ${!this.vertical ? html `<ef-button tabIndex="-1" icon="left" part="left-btn" @tap=${this.handleScrollLeft}></ef-button>` : null}
+        <div part="content">
+          <slot @slotchange=${this.onSlotChange}></slot>
+        </div>
+      ${!this.vertical ? html `<ef-button tabIndex="-1" icon="right" part="right-btn" @tap=${this.handleScrollRight}></ef-button>` : null}
     `;
     }
 };
@@ -201,6 +408,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], TabBar.prototype, "vertical", void 0);
+__decorate([
+    property({ type: String, attribute: false })
+], TabBar.prototype, "value", null);
 __decorate([
     query('[part="content"')
 ], TabBar.prototype, "content", void 0);

package/lib/version.js

@@ -1 +1 @@
-export const VERSION = '5.12.0-dev.0';
+export const VERSION = '5.12.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinitiv-ui/elements",
-  "version": "5.12.0-dev.0",
+  "version": "5.12.0",
   "description": "Element Framework Elements",
   "author": "Refinitiv",
   "license": "Apache-2.0",
@@ -590,13 +590,17 @@
     "lint": "node cli lint",
     "lint:fix": "node cli lint --fix",
     "prepublishOnly": "node scripts/release",
-    "api-analyzer": "node ../../scripts/release/api-analyzer.js",
-    "version": "node ../../scripts/version"
+    "api-analyzer": "node ../../scripts/release/api-analyzer.js"
   },
   "dependencies": {
     "@refinitiv-ui/browser-sparkline": "1.1.7",
-    "@refinitiv-ui/halo-theme": "^5.4.4-dev.0",
-    "@refinitiv-ui/solar-theme": "^5.6.3-dev.0",
+    "@refinitiv-ui/core": "^5.4.1",
+    "@refinitiv-ui/halo-theme": "^5.5.0",
+    "@refinitiv-ui/i18n": "^5.2.6",
+    "@refinitiv-ui/phrasebook": "^5.4.1",
+    "@refinitiv-ui/solar-theme": "^5.7.0",
+    "@refinitiv-ui/translate": "^5.3.1",
+    "@refinitiv-ui/utils": "^5.1.2",
     "@types/chart.js": "^2.9.31",
     "chart.js": "~2.9.4",
     "d3-interpolate": "^3.0.1",
@@ -605,24 +609,12 @@
     "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@refinitiv-ui/core": "^5.4.1-dev.0",
-    "@refinitiv-ui/demo-block": "^5.1.8-dev.0",
-    "@refinitiv-ui/i18n": "^5.2.7-dev.0",
-    "@refinitiv-ui/phrasebook": "^5.4.2-dev.0",
-    "@refinitiv-ui/test-helpers": "^5.1.3-dev.0",
-    "@refinitiv-ui/translate": "^5.3.1-dev.0",
-    "@refinitiv-ui/utils": "^5.1.2-dev.0",
+    "@refinitiv-ui/demo-block": "^5.1.8",
+    "@refinitiv-ui/test-helpers": "^5.1.2",
     "@types/d3-interpolate": "^3.0.1"
   },
-  "peerDependencies": {
-    "@refinitiv-ui/core": "^5.4.1-dev.0",
-    "@refinitiv-ui/i18n": "^5.2.7-dev.0",
-    "@refinitiv-ui/phrasebook": "^5.4.2-dev.0",
-    "@refinitiv-ui/translate": "^5.3.1-dev.0",
-    "@refinitiv-ui/utils": "^5.1.2-dev.0"
-  },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "593b957791e180fd1167f4045027ccc011143290"
+  "gitHead": "5ee75ad2727753f4fc973377a008d6228de3aab9"
 }