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

package/lib/swing-gauge/themes/halo/dark/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/canvas/themes/halo/dark';
+
+elf.customStyles.define('ef-swing-gauge', ':host{--primary-color:#6678FF;--secondary-color:#FFFFFF;--border-color:#000000;--center-line:solid;--center-line-color:#000000;--center-line-opacity:0.6;--secondary-color:#0D0D0D;--center-line-color:#FFFFFF;--border-color:#6678FF;--center-line:dotted}:host [part=legend-container-outer]{padding-bottom:30px}:host [part=primary-legend],:host [part=secondary-legend]{margin-top:4px;align-items:center}:host [part=primary-legend-symbol],:host [part=secondary-legend-symbol]{border-radius:50%;margin-right:10px;align-self:baseline;margin-top:1px;border:1px solid var(--border-color,#6678ff);height:10px;width:10px}:host [part=primary-legend-symbol]{background-color:var(--primary-color)}:host [part=secondary-legend-symbol]{background-color:var(--secondary-color)}:host [part=primary-value],:host [part=secondary-value]{font-weight:500}');

package/lib/swing-gauge/themes/halo/light/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/canvas/themes/halo/light';
+
+elf.customStyles.define('ef-swing-gauge', ':host{--primary-color:#334BFF;--secondary-color:#0D0D0D;--border-color:#000000;--center-line:solid;--center-line-color:#000000;--center-line-opacity:0.6;--secondary-color:#0D0D0D;--center-line-color:#FFFFFF;--border-color:#334BFF;--center-line:dotted}:host [part=legend-container-outer]{padding-bottom:30px}:host [part=primary-legend],:host [part=secondary-legend]{margin-top:4px;align-items:center}:host [part=primary-legend-symbol],:host [part=secondary-legend-symbol]{border-radius:50%;margin-right:10px;align-self:baseline;margin-top:1px;height:12px;width:12px}:host [part=primary-legend-symbol]{background-color:var(--primary-color)}:host [part=secondary-legend-symbol]{background-color:var(--secondary-color)}:host [part=primary-value],:host [part=secondary-value]{font-weight:500}');

package/lib/swing-gauge/themes/solar/charcoal/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/canvas/themes/solar/charcoal';
+
+elf.customStyles.define('ef-swing-gauge', ':host{--primary-color:#FF9933;--secondary-color:#3780BF;--border-color:#000000;--center-line:solid;--center-line-color:#000000;--center-line-opacity:0.6;--primary-color:#2EB4C9;--secondary-color:#C93C4B;--border-color:#000000;--center-line:solid;--center-line-color:#000000;--center-line-opacity:0.6}:host [part=legend-container-outer]{padding-bottom:30px}:host [part=primary-legend],:host [part=secondary-legend]{margin-top:4px;align-items:center}:host [part=primary-legend-symbol],:host [part=secondary-legend-symbol]{height:12px;width:12px;border-radius:50%;margin-right:10px;align-self:baseline;margin-top:1px}:host [part=primary-legend-symbol]{background-color:var(--primary-color)}:host [part=secondary-legend-symbol]{background-color:var(--secondary-color)}:host [part=primary-value],:host [part=secondary-value]{font-weight:500}');

package/lib/swing-gauge/themes/solar/pearl/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/canvas/themes/solar/pearl';
+
+elf.customStyles.define('ef-swing-gauge', ':host{--primary-color:#EE7600;--secondary-color:#3780BF;--border-color:#000000;--center-line:solid;--center-line-color:#000000;--center-line-opacity:0.6;--primary-color:#2EB4C9;--secondary-color:#C93C4B;--border-color:#000000;--center-line:solid;--center-line-color:#000000;--center-line-opacity:0.6}:host [part=legend-container-outer]{padding-bottom:30px}:host [part=primary-legend],:host [part=secondary-legend]{margin-top:4px;align-items:center}:host [part=primary-legend-symbol],:host [part=secondary-legend-symbol]{height:12px;width:12px;border-radius:50%;margin-right:10px;align-self:baseline;margin-top:1px}:host [part=primary-legend-symbol]{background-color:var(--primary-color)}:host [part=secondary-legend-symbol]{background-color:var(--secondary-color)}:host [part=primary-value],:host [part=secondary-value]{font-weight:500}');

package/lib/swing-gauge/types.d.ts

@@ -0,0 +1,34 @@
+declare type SwingGaugeValueFormatter = (value: number, rawValue?: number) => string | number | undefined;
+interface SwingGaugeData {
+    size: number;
+    width: number;
+    height: number;
+    fillPercentage?: number;
+    gaugeWidthScale: number;
+    gaugeHeightScale: number;
+    gaugeUpperBound: number;
+    gaugeLowerBound: number;
+    lineLength: number;
+    offsetLeftPrimaryLine: number;
+    offsetTopPrimaryLine: number;
+    offsetLeftPrimaryPoint: number;
+    offsetTopPrimaryPoint: number;
+    offsetLeftSecondaryLine: number;
+    offsetTopSecondaryLine: number;
+    offsetLeftSecondaryPoint: number;
+    offsetTopSecondaryPoint: number;
+}
+interface SwingGaugeStyle {
+    strokeWidth: number;
+    primaryColor: string;
+    secondaryColor: string;
+    borderColor: string;
+    centerline: string;
+    centerlineOpacity: string;
+    centerlineColor: string;
+}
+interface SwingGaugeCanvasSize {
+    width: number;
+    height: number;
+}
+export { SwingGaugeData, SwingGaugeStyle, SwingGaugeCanvasSize, SwingGaugeValueFormatter };

package/lib/swing-gauge/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,136 @@
+import { JSXInterface } from '../jsx';
+import { TemplateResult, CSSResultGroup, ControlElement, PropertyValues } from '@refinitiv-ui/core';
+import '../icon/index.js';
+import '../label/index.js';
+/**
+ * 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
+ */
+export declare class Tab extends ControlElement {
+    /**
+     * Element version number
+     * @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
+     */
+    icon: string;
+    /**
+     * Specify tab's label text
+     */
+    label: string;
+    /**
+     * Specify tab's sub-label text
+     */
+    subLabel: string;
+    /**
+     * Specify tab's active status
+     */
+    active: boolean;
+    /**
+     * Set tab to clearable
+     */
+    clears: boolean;
+    /**
+     * Limit the number of lines before truncating
+     */
+    lineClamp: number;
+    /**
+     * Set tab to clearable on hover
+     */
+    clearsOnHover: boolean;
+    /**
+     * Use level styling from theme
+     * @ignore
+     */
+    level: '1' | '2' | '3';
+    /**
+     * True, if there is slotted content
+     */
+    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;
+    /**
+     * 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}
+     */
+    protected willUpdate(changedProperties: PropertyValues): void;
+    /**
+     * Run on default slot slotchange
+     * @param event slotchange
+     * @returns {void}
+     */
+    private onSlotChange;
+    /**
+     * Omitted lineClamp if subLabel is provided
+     * @returns line Clamp value
+     */
+    private getLineClamp;
+    /**
+     * Handles key down event
+     * @param event Key down event object
+     * @returns {void}
+     */
+    private onKeyDown;
+    /**
+     * @param event event from close button
+     * @returns {void}
+     */
+    private handleClickClear;
+    /**
+     * Show Close Button if allow clears
+     * @returns close button template
+     */
+    private get CloseTemplate();
+    /**
+     * Create ef-label template when label is true
+     * @returns Label template
+     */
+    private get LabelTemplate();
+    /**
+     * Create ef-label template when subLabel is true
+     * @returns SubLabel template
+     */
+    private get SubLabelTemplate();
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-tab': Tab;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-tab': Partial<Tab> | JSXInterface.ControlHTMLAttributes<Tab>;
+    }
+  }
+}
+
+export {};

package/lib/tab/index.js

@@ -0,0 +1,236 @@
+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';
+/**
+ * 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
+         */
+        this.icon = '';
+        /**
+         * Specify tab's label text
+         */
+        this.label = '';
+        /**
+         * Specify tab's sub-label text
+         */
+        this.subLabel = '';
+        /**
+         * Specify tab's active status
+         */
+        this.active = false;
+        /**
+         * Set tab to clearable
+         */
+        this.clears = false;
+        /**
+         * Limit the number of lines before truncating
+         */
+        this.lineClamp = 1;
+        /**
+         * Set tab to clearable on hover
+         */
+        this.clearsOnHover = false;
+        /**
+         * Use level styling from theme
+         * @ignore
+         */
+        this.level = '1';
+        /**
+         * True, if there is slotted content
+         */
+        this.isSlotHasContent = false;
+        /**
+         * Run on default slot slotchange
+         * @param event slotchange
+         * @returns {void}
+         */
+        this.onSlotChange = (event) => {
+            const slot = event.target;
+            this.isSlotHasContent = !!slot.assignedNodes().length && isSlotEmpty(slot);
+        };
+    }
+    /**
+     * 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: 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}
+     */
+    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
+     * @returns line Clamp value
+     */
+    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}
+     */
+    handleClickClear(event) {
+        event.stopPropagation();
+        /**
+         * Fires when click on cross occurs
+         */
+        this.dispatchEvent(new CustomEvent('clear'));
+    }
+    /**
+     * Show Close Button if allow clears
+     * @returns close button template
+     */
+    get CloseTemplate() {
+        return this.clears || this.clearsOnHover ? html `
+        <div part="close-container">
+          <ef-icon part="close" icon="cross" @tap="${this.handleClickClear}"></ef-icon>
+        </div>
+      ` : null;
+    }
+    /**
+     * Create ef-label template when label is true
+     * @returns Label template
+     */
+    get LabelTemplate() {
+        if (!this.label || this.isSlotHasContent) {
+            return null;
+        }
+        return html `
+      <ef-label
+        part="label"
+        .lineClamp=${this.getLineClamp()}>
+        ${this.label}
+      </ef-label>
+    `;
+    }
+    /**
+     * Create ef-label template when subLabel is true
+     * @returns SubLabel template
+     */
+    get SubLabelTemplate() {
+        if (!this.subLabel || this.isSlotHasContent) {
+            return null;
+        }
+        return html `
+      <ef-label
+      part="sub-label"
+      .lineClamp=${this.getLineClamp()}>
+        ${this.subLabel}
+      </ef-label>
+    `;
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    render() {
+        return html `
+      ${this.icon ? html `<ef-icon icon=${this.icon} part="icon"></ef-icon>` : null}
+        <div part="label-container">
+          ${this.LabelTemplate}
+          ${this.SubLabelTemplate}
+          <slot @slotchange="${this.onSlotChange}"></slot>
+        </div>
+      ${this.CloseTemplate}
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], Tab.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], Tab.prototype, "label", void 0);
+__decorate([
+    property({ type: String, attribute: 'sub-label' })
+], Tab.prototype, "subLabel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Tab.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Tab.prototype, "clears", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'line-clamp' })
+], Tab.prototype, "lineClamp", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'clears-on-hover' })
+], Tab.prototype, "clearsOnHover", void 0);
+__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'
+    })
+], Tab);
+export { Tab };

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

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/label/themes/halo/dark';
+
+elf.customStyles.define('ef-tab', ':host{cursor:pointer;background-color:#404040;color:#ccc;height:36px;padding:9px 12px;outline:0;font-size:12rem;font-weight:500;transition:120ms;position:relative;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center;justify-content:center;touch-action:manipulation}:host [part=icon]{min-width:1em;font-size:1.5em}:host [part=label-container]{display:flex;align-items:flex-start;flex-direction:column;width:100%;min-width:0}:host(:not([sub-label])) [part=label-container]{align-items:center}:host([icon]) [part=label-container]{padding-left:.3em}:host [part=sub-label]{font-weight:400;font-size:.875em}:host(:not([active]):not(:active):not(:hover)) [part=sub-label]{opacity:.7}:host([sub-label]){height:46px}:host([sub-label]) [part=icon]{font-size:1.8em}:host([sub-label]) [part=close]{font-size:1.25em}:host([sub-label][clears]){padding-right:2.5em}:host([line-clamp="2"]),:host([line-clamp="3"]){height:46px}:host([icon][sub-label]) [part=label-container]{padding-left:.5em}:host([clears]){padding-right:2em}:host [part=close-container]{position:absolute;top:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center}:host [part=close]{margin-right:.5em;min-width:1em;font-size:1em}:host([clears-on-hover]) [part=close]{color:#fff}:host([clears-on-hover]) [part=close-container]{width:2em;opacity:0;transition:120ms;background:#334bff;box-shadow:-1em 0 .75em -.5em #334bff}:host([active]){color:#fff;background-color:#334bff}:host([active]:hover){background-color:#4158ff}:host([active]:hover[clears-on-hover]) [part=close-container]{background-color:#4158ff;box-shadow:-1em 0 .75em -.5em #4158ff}:host([active]:active){background-color:#0f1e8a}:host([active]:active[clears-on-hover]) [part=close-container]{background-color:#0f1e8a;box-shadow:-1em 0 .75em -.5em #0f1e8a}:host([active][disabled]){color:rgba(255,255,255,.5);background-color:rgba(51,75,255,.5)}:host([disabled]){pointer-events:none;color:rgba(204,204,204,.5);background-color:rgba(64,64,64,.5)}:host(:focus:not([focused])),:host([focused=visible]){box-shadow:none;background-color:#4158ff}:host(:focus:not([focused]):not([active]):not(:hover)),:host([focused=visible]:not([active]):not(:hover)){color:#6678ff;background-color:#404040}:host(:hover){color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.8);background-color:#334bff}:host(:hover[clears-on-hover]) [part=close-container]{opacity:1}:host(:active){color:#fff;background-color:#0f1e8a}:host(:active[clears-on-hover]) [part=close-container]{background-color:#0f1e8a;box-shadow:-1em 0 .75em -.5em #0f1e8a}:host([level="1"]){border-right:1px solid #0d0d0d}:host([level="2"]:not(:last-child)){border-right:none}:host([level="2"]:not(:last-child)) [part=label-container]::after{content:\'\';position:absolute;margin:auto;width:1px;background:#404040;height:70%;right:0;top:0;bottom:0;z-index:1}:host([level="2"]:not(:active):not([active]):not(:hover)){background-color:#262626}:host([level="2"][active]:not(:active):not(:hover)){color:#6678ff;background-color:#0d0d0d}:host([level="2"][active]:focus:not([focused])),:host([level="2"][focused=visible]:not(:active):not(:hover)){color:#6678ff}:host([level="3"]){border-bottom:2px solid transparent;color:#ccc;background-color:#0d0d0d}:host([level="3"][clears-on-hover]) [part=close-container]{background:#0d0d0d;box-shadow:-1em 0 .75em -.5em #0d0d0d}:host([level="3"]:focus:not([focused])),:host([level="3"][focused=visible]){color:#fff;background-color:#262626}:host([level="3"]:active),:host([level="3"]:hover),:host([level="3"][active]){color:#fff;background-color:#0d0d0d;border-color:#334bff}:host([level="3"]:active) [part=close-container],:host([level="3"]:hover) [part=close-container],:host([level="3"][active]) [part=close-container]{background:#0d0d0d;box-shadow:-1em 0 .75em -.5em #0d0d0d}:host([level="3"]:active) [part=close],:host([level="3"]:hover) [part=close],:host([level="3"][active]) [part=close]{color:#fff}:host([level="3"]:active){border-color:#0f1e8a}');

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

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
+import '@refinitiv-ui/elements/lib/label/themes/halo/light';
+
+elf.customStyles.define('ef-tab', ':host{cursor:pointer;background-color:#e6e6e6;color:#0d0d0d;height:36px;padding:9px 12px;outline:0;font-size:12rem;font-weight:500;transition:120ms;position:relative;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center;justify-content:center;touch-action:manipulation}:host [part=icon]{min-width:1em;font-size:1.5em}:host [part=label-container]{display:flex;align-items:flex-start;flex-direction:column;width:100%;min-width:0}:host(:not([sub-label])) [part=label-container]{align-items:center}:host([icon]) [part=label-container]{padding-left:.3em}:host [part=sub-label]{font-weight:400;font-size:.875em}:host(:not([active]):not(:active):not(:hover)) [part=sub-label]{opacity:.7}:host([sub-label]){height:46px}:host([sub-label]) [part=icon]{font-size:1.8em}:host([sub-label]) [part=close]{font-size:1.25em}:host([sub-label][clears]){padding-right:2.5em}:host([line-clamp="2"]),:host([line-clamp="3"]){height:46px}:host([icon][sub-label]) [part=label-container]{padding-left:.5em}:host([clears]){padding-right:2em}:host [part=close-container]{position:absolute;top:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center}:host [part=close]{margin-right:.5em;min-width:1em;font-size:1em}:host([clears-on-hover]) [part=close]{color:#fff}:host([clears-on-hover]) [part=close-container]{width:2em;opacity:0;transition:120ms;background:#334bff;box-shadow:-1em 0 .75em -.5em #334bff}:host([active]){color:#fff;background-color:#334bff}:host([active]:hover){background-color:#4158ff}:host([active]:hover[clears-on-hover]) [part=close-container]{background-color:#4158ff;box-shadow:-1em 0 .75em -.5em #4158ff}:host([active]:active){background-color:#0f1e8a}:host([active]:active[clears-on-hover]) [part=close-container]{background-color:#0f1e8a;box-shadow:-1em 0 .75em -.5em #0f1e8a}:host([active][disabled]){color:rgba(255,255,255,.5);background-color:rgba(51,75,255,.5)}:host([disabled]){pointer-events:none;color:rgba(13,13,13,.5);background-color:rgba(230,230,230,.5)}:host(:focus:not([focused])),:host([focused=visible]){box-shadow:none;background-color:#4158ff}:host(:focus:not([focused]):not([active]):not(:hover)),:host([focused=visible]:not([active]):not(:hover)){color:#6678ff;background-color:#e6e6e6}:host(:hover){color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.55);background-color:#334bff}:host(:hover[clears-on-hover]) [part=close-container]{opacity:1}:host(:active){color:#fff;background-color:#0f1e8a}:host(:active[clears-on-hover]) [part=close-container]{background-color:#0f1e8a;box-shadow:-1em 0 .75em -.5em #0f1e8a}:host([level="1"]){border-right:1px solid #fff}:host([level="2"]:not(:last-child)){border-right:none}:host([level="2"]:not(:last-child)) [part=label-container]::after{content:\'\';position:absolute;margin:auto;width:1px;background:#d9d9d9;height:70%;right:0;top:0;bottom:0;z-index:1}:host([level="2"]:not(:active):not([active]):not(:hover)){background-color:#f2f2f2}:host([level="2"][active]:not(:active):not(:hover)){color:#334bff;background-color:#fff}:host([level="2"][active]:focus:not([focused])),:host([level="2"][focused=visible]:not(:active):not(:hover)){color:#6678ff}:host([level="3"]){border-bottom:2px solid transparent;color:#404040;background-color:#fff}:host([level="3"][clears-on-hover]) [part=close-container]{background:#fff;box-shadow:-1em 0 .75em -.5em #fff}:host([level="3"]:focus:not([focused])),:host([level="3"][focused=visible]){color:#0d0d0d;background-color:#f2f2f2}:host([level="3"]:active),:host([level="3"]:hover),:host([level="3"][active]){color:#0d0d0d;background-color:#fff;border-color:#334bff}:host([level="3"]:active) [part=close-container],:host([level="3"]:hover) [part=close-container],:host([level="3"][active]) [part=close-container]{background:#fff;box-shadow:-1em 0 .75em -.5em #fff}:host([level="3"]:active) [part=close],:host([level="3"]:hover) [part=close],:host([level="3"][active]) [part=close]{color:#0d0d0d}:host([level="3"]:active){border-color:#0f1e8a}');

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

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
+import '@refinitiv-ui/elements/lib/label/themes/solar/charcoal';
+
+elf.customStyles.define('ef-tab', ':host{cursor:pointer;background-color:#3c3c42;color:#c2c2c2;height:23px;padding:7px 15px;outline:0;font-size:13rem;font-weight:500;transition:70ms;position:relative;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center;justify-content:center;touch-action:manipulation;border:1px solid #000;border-left:none}:host [part=label-container]{display:flex;align-items:flex-start;flex-direction:column;width:100%;min-width:0}:host(:not([sub-label])) [part=label-container]{align-items:center}:host([icon]) [part=label-container]{padding-left:.3em}:host [part=sub-label]{font-weight:400;font-size:.875em}:host(:not([active]):not(:active):not(:hover)) [part=sub-label]{opacity:.7}:host([sub-label]){height:33px}:host([sub-label]) [part=close]{font-size:1.25em}:host([sub-label][clears]){padding-right:2.5em}:host([line-clamp="2"]),:host([line-clamp="3"]){height:33px}:host([icon][sub-label]) [part=label-container]{padding-left:.5em}:host([clears]){padding-right:2em}:host [part=close-container]{position:absolute;top:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center}:host [part=close]{margin-right:.5em;min-width:1em;font-size:1em}:host([clears-on-hover]) [part=close]{color:#e2e2e2}:host([clears-on-hover]) [part=close-container]{width:2em;opacity:0;transition:70ms;background:#4a4a4f;box-shadow:-1em 0 .75em -.5em #4a4a4f}:host([active]){color:#0a0a0a;background-color:#f93}:host([active]:hover[clears-on-hover]) [part=close-container]{background-color:#ffa041;box-shadow:-1em 0 .75em -.5em #ffa041}:host([active]:active){background-color:#ed8e2f}:host([active]:active[clears-on-hover]) [part=close-container]{background-color:#ed8e2f;box-shadow:-1em 0 .75em -.5em #ed8e2f}:host([active][disabled]){background-color:#ffad5c;color:rgba(10,10,10,.7)}:host([disabled]){pointer-events:none;color:#c2c2c2;background-color:#636368}:host(:focus:not([focused])),:host([focused=visible]){box-shadow:none;background-color:#ffa041}:host(:focus:not([focused]):not([active]):not(:hover)),:host([focused=visible]:not([active]):not(:hover)){color:#e2e2e2;background-color:#3c3c42}:host(:hover){color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9);background-color:#4a4a4f}:host(:hover[clears-on-hover]) [part=close-container]{opacity:1}:host(:active){color:#c2c2c2;background-color:#38383d}:host(:active[clears-on-hover]) [part=close-container]{background-color:#38383d;box-shadow:-1em 0 .75em -.5em #38383d}:host [part=icon]{min-width:1em;font-size:1em}:host([sub-label]) [part=icon]{font-size:1.2em}:host([active]:hover){color:#0a0a0a;background-color:#ffb366}');

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

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
+import '@refinitiv-ui/elements/lib/label/themes/solar/pearl';
+
+elf.customStyles.define('ef-tab', ':host{cursor:pointer;background-color:#fafbfc;color:#505050;height:23px;padding:7px 15px;outline:0;font-size:13rem;font-weight:500;transition:70ms;position:relative;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center;justify-content:center;touch-action:manipulation;border:1px solid #a9afba;border-left:none}:host [part=label-container]{display:flex;align-items:flex-start;flex-direction:column;width:100%;min-width:0}:host(:not([sub-label])) [part=label-container]{align-items:center}:host([icon]) [part=label-container]{padding-left:.3em}:host [part=sub-label]{font-weight:400;font-size:.875em}:host(:not([active]):not(:active):not(:hover)) [part=sub-label]{opacity:.7}:host([sub-label]){height:33px}:host([sub-label]) [part=close]{font-size:1.25em}:host([sub-label][clears]){padding-right:2.5em}:host([line-clamp="2"]),:host([line-clamp="3"]){height:33px}:host([icon][sub-label]) [part=label-container]{padding-left:.5em}:host([clears]){padding-right:2em}:host [part=close-container]{position:absolute;top:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center}:host [part=close]{margin-right:.5em;min-width:1em;font-size:1em}:host([clears-on-hover]) [part=close]{color:#1d1d1d}:host([clears-on-hover]) [part=close-container]{width:2em;opacity:0;transition:70ms;background:#fafbfc;box-shadow:-1em 0 .75em -.5em #fafbfc}:host([active]){color:#505050;background-color:#ffb266}:host([active]:hover[clears-on-hover]) [part=close-container]{background-color:#ffb771;box-shadow:-1em 0 .75em -.5em #ffb771}:host([active]:active){background-color:#eda65f}:host([active]:active[clears-on-hover]) [part=close-container]{background-color:#eda65f;box-shadow:-1em 0 .75em -.5em #eda65f}:host([active][disabled]){color:#a8896a;background-color:#ffc185}:host([disabled]){pointer-events:none;color:#505050;background-color:#fbfcfd}:host(:focus:not([focused])),:host([focused=visible]){box-shadow:none;background-color:#ffb771}:host(:focus:not([focused]):not([active]):not(:hover)),:host([focused=visible]:not([active]):not(:hover)){color:#1d1d1d;background-color:#fafbfc}:host(:hover){color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.6);background-color:#fafbfc}:host(:hover[clears-on-hover]) [part=close-container]{opacity:1}:host(:active){color:#505050;background-color:#e8e9ea}:host(:active[clears-on-hover]) [part=close-container]{background-color:#e8e9ea;box-shadow:-1em 0 .75em -.5em #e8e9ea}:host [part=icon]{min-width:1em;font-size:1em}:host([sub-label]) [part=icon]{font-size:1.2em}:host([active]:hover){color:#505050;background-color:#fc9}');

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/helpers/animate.d.ts

@@ -0,0 +1,16 @@
+interface Configs {
+    target: HTMLElement;
+    startPosition: number;
+    endPosition: number;
+    duration?: number;
+    easing?: string;
+    complete?: () => void;
+}
+declare const ANIMATION_DURATION = 100;
+/**
+ * Common easing equations from https://easings.net
+ * @param configs animate config
+ * @returns {void}
+ */
+declare const tweenAnimate: (configs: Configs) => void;
+export { tweenAnimate, ANIMATION_DURATION };

package/lib/tab-bar/helpers/animate.js

@@ -0,0 +1,53 @@
+var Easings;
+(function (Easings) {
+    Easings["EaseOutQuad"] = "easeOutQuad";
+})(Easings || (Easings = {}));
+const ANIMATION_DURATION = 100; // specifies the length of time an animation should take to complete
+const DEFAULT_EASING = Easings.EaseOutQuad;
+/**
+ * Common easing equations from https://easings.net
+ * @param name type of easing
+ * @returns easing function
+ */
+const functionEasings = {
+    /**
+     * Decelerating to zero velocity
+     * @param time current time or position
+     * @returns easing value
+     */
+    easeOutQuad: (time) => {
+        return time * (2 - time);
+    }
+};
+/**
+ * Common easing equations from https://easings.net
+ * @param configs animate config
+ * @returns {void}
+ */
+const tweenAnimate = (configs) => {
+    let animate;
+    const { target, startPosition, endPosition, duration = ANIMATION_DURATION, easing = DEFAULT_EASING, complete } = configs;
+    if (!target) {
+        throw new TypeError('No target argument passed');
+    }
+    const startTime = 'now' in window.performance ? performance.now() : new Date().getTime();
+    const delta = endPosition - startPosition;
+    const tweenLoop = () => {
+        const currentTime = 'now' in window.performance ? performance.now() : new Date().getTime();
+        const step = Math.min(1, ((currentTime - startTime) / duration));
+        const factor = functionEasings[easing](step); // factor can be a decimal
+        configs.target.scrollLeft = startPosition + delta * factor;
+        if (step < 1 && configs.target.scrollLeft !== endPosition) {
+            animate = requestAnimationFrame(tweenLoop);
+        }
+        else {
+            cancelAnimationFrame(animate);
+            if (typeof complete === 'function') {
+                complete();
+            }
+            return;
+        }
+    };
+    tweenLoop();
+};
+export { tweenAnimate, ANIMATION_DURATION };