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

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

@@ -0,0 +1,198 @@
+import { JSXInterface } from '../jsx';
+import { TemplateResult, CSSResultGroup, PropertyValues, ResponsiveElement, ElementSize } from '@refinitiv-ui/core';
+import '../button/index.js';
+/**
+ * Container for tabs
+ *
+ * @fires value-changed - Fired when the `value` changes.
+ */
+export declare class TabBar extends ResponsiveElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    protected readonly defaultRole = "tablist";
+    /**
+     * 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 tab's horizontal alignment
+     */
+    alignment: 'left' | 'center' | 'right';
+    /**
+     * Use level styling from theme
+     */
+    level: '1' | '2' | '3';
+    /**
+     * 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;
+    private isScrolling;
+    /**
+     * Called after the element’s DOM has been updated the first time.
+     * register scroll event on content element to toggle scroll button
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * Called when the element’s DOM has been updated and rendered
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
+    protected updated(changedProperties: PropertyValues): void;
+    /**
+     * private method but can't override
+     * access modifiers in typescript.
+     * @ignore
+     * @param size element dimensions
+     * @returns {void}
+     */
+    resizedCallback(size: ElementSize): 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
+     */
+    private isValidValue;
+    /**
+     * When the slot changes, set the level, toggle the scroll button, and set the value
+     * @returns {void}
+     */
+    private onSlotChange;
+    /**
+     * Mark tab as active
+     * @param value value of tab to select
+     * @returns {void}
+     */
+    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;
+    /**
+     * Hide/Show scroll button when element is overflow.
+     * @param elementWidth width of element
+     * @returns {void}
+     */
+    private toggleScrollButton;
+    /**
+     * Update scroll position when clicked on left button
+     * @returns {void}
+     */
+    private handleScrollLeft;
+    /**
+     * Update scroll position when clicked on right button
+     * @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.
+     * @return Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-tab-bar': TabBar;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-tab-bar': Partial<TabBar> | JSXInterface.HTMLAttributes<TabBar>;
+    }
+  }
+}
+
+export {};

package/lib/tab-bar/index.js

@@ -0,0 +1,428 @@
+import { __decorate } from "tslib";
+import { html, css, ResponsiveElement } 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 { 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
+         */
+        this.alignment = 'left';
+        /**
+         * Use level styling from theme
+         */
+        this.level = '1';
+        /**
+         * 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
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * 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: flex;
+      }
+      :host([alignment=center]) {
+        justify-content: center;
+      }
+      :host([alignment=right]) {
+        justify-content: flex-end;
+      }
+    `;
+    }
+    /**
+     * 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
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.content.addEventListener('scroll', () => {
+            // Clear our timeout throughout the scroll
+            window.clearTimeout(this.isScrolling);
+            // Set a timeout to run after scrolling ends
+            this.isScrolling = window.setTimeout(() => {
+                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
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
+    updated(changedProperties) {
+        if (changedProperties.has('level')) {
+            this.setLevel();
+        }
+        super.updated(changedProperties);
+    }
+    /**
+     * private method but can't override
+     * access modifiers in typescript.
+     * @ignore
+     * @param size element dimensions
+     * @returns {void}
+     */
+    resizedCallback(size) {
+        if (!this.vertical) {
+            this.toggleScrollButton(size.width);
+        }
+    }
+    /**
+     * 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
+     */
+    isValidValue(value) {
+        const tabList = this.getFocusableTabs();
+        return tabList.some(tab => this.getTabValue(tab) === value);
+    }
+    /**
+     * When the slot changes, set the level, toggle the scroll button, and set the value
+     * @returns {void}
+     */
+    onSlotChange() {
+        const tabList = this.getFocusableTabs();
+        if (tabList.length < 1) {
+            return;
+        }
+        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;
+        }
+        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;
+        }
+        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);
+            }
+        }
+    }
+    /**
+     * 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.getTabElements(); // get all tab elements include disabled tab
+        tabList === null || tabList === void 0 ? void 0 : tabList.forEach((tab) => {
+            tab.level = this.level;
+        });
+    }
+    /**
+     * Hide/Show scroll button when element is overflow.
+     * @param elementWidth width of element
+     * @returns {void}
+     */
+    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
+     * @returns {void}
+     */
+    handleScrollLeft() {
+        const { scrollLeft } = this.content;
+        const availableScrollLeft = scrollLeft;
+        let endPosition = scrollLeft - BAR_TRAVEL_DISTANCE;
+        // If the space available is less than one half lots of our desired distance, just move to the leftest
+        if (availableScrollLeft < BAR_TRAVEL_DISTANCE * 1.5) {
+            endPosition = 0;
+        }
+        tweenAnimate({ target: this.content, startPosition: scrollLeft, endPosition });
+    }
+    /**
+     * Update scroll position when clicked on right button
+     * @returns {void}
+     */
+    handleScrollRight() {
+        const { scrollLeft, scrollWidth, clientWidth } = this.content;
+        const availableScrollRight = scrollWidth - (scrollLeft + clientWidth);
+        let endPosition = scrollLeft + BAR_TRAVEL_DISTANCE;
+        // If the space available is less than one half lots of our desired distance, just move the whole amount
+        if (availableScrollRight < BAR_TRAVEL_DISTANCE * 1.5) {
+            endPosition = scrollLeft + availableScrollRight;
+        }
+        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.
+     * @return Render template
+     */
+    render() {
+        return html `
+      ${!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}
+    `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], TabBar.prototype, "alignment", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TabBar.prototype, "level", void 0);
+__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);
+__decorate([
+    query('[part="left-btn"]')
+], TabBar.prototype, "leftBtn", void 0);
+__decorate([
+    query('[part="right-btn"]')
+], TabBar.prototype, "rightBtn", void 0);
+TabBar = __decorate([
+    customElement('ef-tab-bar', {
+        alias: 'coral-tab-bar'
+    })
+], TabBar);
+export { TabBar };

package/lib/tab-bar/themes/halo/dark/index.js

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/tab/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/button/themes/halo/dark';
+
+elf.customStyles.define('ef-tab-bar', ':host{position:relative;background-color:#1a1a1a}:host [part=content]{display:flex;overflow:hidden}:host [part=left-btn],:host [part=right-btn]{display:none;position:absolute;height:auto;margin:auto;z-index:2;top:0;bottom:0;background-color:#404040;width:36px;border:none}:host [part=left-btn]:hover,:host [part=right-btn]:hover{background-color:#334bff}:host [part=left-btn]:active,:host [part=right-btn]:active{background-color:#0f1e8a}:host [part=left-btn]:focus:not([focused]),:host [part=left-btn][focused=visible],:host [part=right-btn]:focus:not([focused]),:host [part=right-btn][focused=visible]{background-color:#4158ff}:host [part=left-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=left-btn][focused=visible]:not([active]):not(:hover),:host [part=right-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=right-btn][focused=visible]:not([active]):not(:hover){color:#6678ff;background-color:#404040}:host [part=left-btn]{left:0}:host [part=right-btn]{right:0}:host([vertical]){width:180px;flex-shrink:0}:host([vertical]) [part=content]{flex-direction:column}:host([vertical]) [part=content] ::slotted(ef-tab){justify-content:flex-start;border-bottom:1px solid #404040}:host [part=left-btn]::after,:host [part=right-btn]::after{content:\'\';position:absolute;margin:auto;width:1px;background:#404040;height:70%;top:0;bottom:0}:host([level="1"]) [part=left-btn]::after,:host([level="1"]) [part=right-btn]::after{content:none}:host([level="1"]) [part=left-btn]{border-right:1px solid #0d0d0d}:host([level="1"]) [part=right-btn]{border-left:1px solid #0d0d0d}:host([level="2"]) [part=left-btn]::after,:host([level="3"]) [part=left-btn]::after{right:0}:host([level="2"]) [part=right-btn]::after,:host([level="3"]) [part=right-btn]::after{left:0}:host([level="2"]) [part=left-btn]:not(:active):not(:hover),:host([level="2"]) [part=right-btn]:not(:active):not(:hover){background-color:#262626}:host([level="2"]) [part=left-btn]::after,:host([level="2"]) [part=right-btn]::after{height:70%}:host([level="3"]) [part=left-btn],:host([level="3"]) [part=right-btn]{border-color:transparent}:host([level="3"]) [part=left-btn]:not(:active):not(:hover),:host([level="3"]) [part=right-btn]:not(:active):not(:hover){background-color:#0d0d0d}:host([level="3"]) [part=left-btn]::after,:host([level="3"]) [part=right-btn]::after{height:30%}:host([vertical]) [part=content] ::slotted(ef-tab){border-bottom-color:transparent;border-right:none!important;background:linear-gradient(#1a1a1a,#1a1a1a) left calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#1a1a1a,#1a1a1a) right calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#404040,#404040) center calc(100% + 1px)/100% 1px no-repeat}:host([vertical]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)){background:linear-gradient(#0d0d0d,#0d0d0d) left calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#0d0d0d,#0d0d0d) right calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#404040,#404040) center calc(100% + 1px)/100% 1px no-repeat}:host([vertical]) [part=content] ::slotted(ef-tab:not([active]):not(:active):not(:hover)){background-color:#1a1a1a}:host([vertical]) [part=content] ::slotted(ef-tab:hover){color:#fff;background-color:#334bff}:host([vertical]) [part=content] ::slotted(ef-tab:active){background-color:#0f1e8a}:host([vertical][level="1"]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)),:host([vertical][level="3"]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)){color:#6678ff;background-color:#0d0d0d}');

package/lib/tab-bar/themes/halo/light/index.js

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/tab/themes/halo/light';
+import '@refinitiv-ui/elements/lib/button/themes/halo/light';
+
+elf.customStyles.define('ef-tab-bar', ':host{position:relative;background-color:#f2f2f2}:host [part=content]{display:flex;overflow:hidden}:host [part=left-btn],:host [part=right-btn]{display:none;position:absolute;height:auto;margin:auto;z-index:2;top:0;bottom:0;background-color:#e6e6e6;width:36px;border:none}:host [part=left-btn]:hover,:host [part=right-btn]:hover{background-color:#334bff}:host [part=left-btn]:active,:host [part=right-btn]:active{background-color:#0f1e8a}:host [part=left-btn]:focus:not([focused]),:host [part=left-btn][focused=visible],:host [part=right-btn]:focus:not([focused]),:host [part=right-btn][focused=visible]{background-color:#4158ff}:host [part=left-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=left-btn][focused=visible]:not([active]):not(:hover),:host [part=right-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=right-btn][focused=visible]:not([active]):not(:hover){color:#6678ff;background-color:#e6e6e6}:host [part=left-btn]{left:0}:host [part=right-btn]{right:0}:host([vertical]){width:180px;flex-shrink:0}:host([vertical]) [part=content]{flex-direction:column}:host([vertical]) [part=content] ::slotted(ef-tab){justify-content:flex-start;border-bottom:1px solid #d9d9d9}:host [part=left-btn]::after,:host [part=right-btn]::after{content:\'\';position:absolute;margin:auto;width:1px;background:#d9d9d9;height:70%;top:0;bottom:0}:host([level="1"]) [part=left-btn]::after,:host([level="1"]) [part=right-btn]::after{content:none}:host([level="1"]) [part=left-btn]{border-right:1px solid #fff}:host([level="1"]) [part=right-btn]{border-left:1px solid #fff}:host([level="2"]) [part=left-btn]::after,:host([level="3"]) [part=left-btn]::after{right:0}:host([level="2"]) [part=right-btn]::after,:host([level="3"]) [part=right-btn]::after{left:0}:host([level="2"]) [part=left-btn]:not(:active):not(:hover),:host([level="2"]) [part=right-btn]:not(:active):not(:hover){background-color:#f2f2f2}:host([level="2"]) [part=left-btn]::after,:host([level="2"]) [part=right-btn]::after{height:70%}:host([level="3"]) [part=left-btn],:host([level="3"]) [part=right-btn]{border-color:transparent}:host([level="3"]) [part=left-btn]:not(:active):not(:hover),:host([level="3"]) [part=right-btn]:not(:active):not(:hover){background-color:#fff}:host([level="3"]) [part=left-btn]::after,:host([level="3"]) [part=right-btn]::after{height:30%}:host([vertical]) [part=content] ::slotted(ef-tab){border-bottom-color:transparent;border-right:none!important;background:linear-gradient(#f2f2f2,#f2f2f2) left calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#f2f2f2,#f2f2f2) right calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#d9d9d9,#d9d9d9) center calc(100% + 1px)/100% 1px no-repeat}:host([vertical]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)){background:linear-gradient(#fff,#fff) left calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#fff,#fff) right calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#d9d9d9,#d9d9d9) center calc(100% + 1px)/100% 1px no-repeat}:host([vertical]) [part=content] ::slotted(ef-tab:not([active]):not(:active):not(:hover)){background-color:#f2f2f2}:host([vertical]) [part=content] ::slotted(ef-tab:hover){color:#fff;background-color:#334bff}:host([vertical]) [part=content] ::slotted(ef-tab:active){background-color:#0f1e8a}:host([vertical][level="1"]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)),:host([vertical][level="3"]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)){color:#334bff;background-color:#fff}');

package/lib/tab-bar/themes/solar/charcoal/index.js

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/tab/themes/solar/charcoal';
+import '@refinitiv-ui/elements/lib/button/themes/solar/charcoal';
+
+elf.customStyles.define('ef-tab-bar', ':host{position:relative;background-color:#151516}:host [part=content]{display:flex;overflow:hidden}:host [part=left-btn],:host [part=right-btn]{display:none;position:absolute;height:auto;margin:auto;z-index:2;top:0;bottom:0;background-color:#3c3c42}:host [part=left-btn]:hover,:host [part=right-btn]:hover{background-color:#4a4a4f}:host [part=left-btn]:active,:host [part=right-btn]:active{background-color:#38383d}:host [part=left-btn]:focus:not([focused]),:host [part=left-btn][focused=visible],:host [part=right-btn]:focus:not([focused]),:host [part=right-btn][focused=visible]{background-color:#ffa041}:host [part=left-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=left-btn][focused=visible]:not([active]):not(:hover),:host [part=right-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=right-btn][focused=visible]:not([active]):not(:hover){color:#e2e2e2;background-color:#3c3c42}:host [part=left-btn]{left:0}:host [part=right-btn]{right:0}:host([vertical]){width:180px;flex-shrink:0}:host([vertical]) [part=content]{flex-direction:column}:host([vertical]) [part=content] ::slotted(ef-tab){justify-content:flex-start;border:none;border-bottom:1px solid #000}:host(:not([vertical])) [part=content] ::slotted(ef-tab:first-of-type){border-left:1px solid #000}');

package/lib/tab-bar/themes/solar/pearl/index.js

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/tab/themes/solar/pearl';
+import '@refinitiv-ui/elements/lib/button/themes/solar/pearl';
+
+elf.customStyles.define('ef-tab-bar', ':host{position:relative;background-color:#c2c2c2}:host [part=content]{display:flex;overflow:hidden}:host [part=left-btn],:host [part=right-btn]{display:none;position:absolute;height:auto;margin:auto;z-index:2;top:0;bottom:0;background-color:#fafbfc}:host [part=left-btn]:hover,:host [part=right-btn]:hover{background-color:#fafbfc}:host [part=left-btn]:active,:host [part=right-btn]:active{background-color:#e8e9ea}:host [part=left-btn]:focus:not([focused]),:host [part=left-btn][focused=visible],:host [part=right-btn]:focus:not([focused]),:host [part=right-btn][focused=visible]{background-color:#ffb771}:host [part=left-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=left-btn][focused=visible]:not([active]):not(:hover),:host [part=right-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=right-btn][focused=visible]:not([active]):not(:hover){color:#1d1d1d;background-color:#fafbfc}:host [part=left-btn]{left:0}:host [part=right-btn]{right:0}:host([vertical]){width:180px;flex-shrink:0}:host([vertical]) [part=content]{flex-direction:column}:host([vertical]) [part=content] ::slotted(ef-tab){justify-content:flex-start;border:none;border-bottom:1px solid #a9afba}:host(:not([vertical])) [part=content] ::slotted(ef-tab:first-of-type){border-left:1px solid #a9afba}');