@refinitiv-ui/elements 5.3.3 → 5.7.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

@@ -0,0 +1,123 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-tab",
+      "description": "A building block for individual tab",
+      "attributes": [
+        {
+          "name": "icon",
+          "description": "Specify icon name to display in tab",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "label",
+          "description": "Specify tab's label text",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "sub-label",
+          "description": "Specify tab's sub-label text",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "active",
+          "description": "Specify tab's active status",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "clears",
+          "description": "Set tab to clearable",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "line-clamp",
+          "description": "Limit the number of lines before truncating",
+          "type": "number",
+          "default": "1"
+        },
+        {
+          "name": "clears-on-hover",
+          "description": "Set tab to clearable on hover",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "icon",
+          "attribute": "icon",
+          "description": "Specify icon name to display in tab",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "Specify tab's label text",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "subLabel",
+          "attribute": "sub-label",
+          "description": "Specify tab's sub-label text",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "active",
+          "attribute": "active",
+          "description": "Specify tab's active status",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "clears",
+          "attribute": "clears",
+          "description": "Set tab to clearable",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "lineClamp",
+          "attribute": "line-clamp",
+          "description": "Limit the number of lines before truncating",
+          "type": "number",
+          "default": "1"
+        },
+        {
+          "name": "clearsOnHover",
+          "attribute": "clears-on-hover",
+          "description": "Set tab to clearable on hover",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "events": [
+        {
+          "name": "clear",
+          "description": "Dispatched when click on cross button occurs"
+        }
+      ]
+    }
+  ]
+}

package/lib/tab/custom-elements.md

@@ -0,0 +1,22 @@
+# ef-tab
+
+A building block for individual tab
+
+## Properties
+
+| Property        | Attribute         | Type      | Default | Description                                 |
+|-----------------|-------------------|-----------|---------|---------------------------------------------|
+| `active`        | `active`          | `boolean` | false   | Specify tab's active status                 |
+| `clears`        | `clears`          | `boolean` | false   | Set tab to clearable                        |
+| `clearsOnHover` | `clears-on-hover` | `boolean` | false   | Set tab to clearable on hover               |
+| `disabled`      | `disabled`        | `boolean` | false   | Set disabled state                          |
+| `icon`          | `icon`            | `string`  | ""      | Specify icon name to display in 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                |
+
+## Events
+
+| Event   | Description                                  |
+|---------|----------------------------------------------|
+| `clear` | Dispatched when click on cross button occurs |

package/lib/tab/index.d.ts

@@ -0,0 +1,118 @@
+import { JSXInterface } from '../jsx';
+import { TemplateResult, CSSResultGroup, ControlElement } 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
+ *
+ * @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;
+    /**
+     * 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 isSlotHasChildren;
+    /**
+     * @param node that should be checked
+     * @returns whether node can be ignored.
+     */
+    private isIgnorable;
+    /**
+     * Checks slotted children nodes and updates component to refresh label and sub-label templates.
+     * @param event slotchange
+     * @returns {void}
+     */
+    private checkSlotChildren;
+    /**
+     * Omitted lineClamp if subLabel is provided
+     * @returns line Clamp value
+     */
+    private getLineClamp;
+    /**
+     * @param event event from close button
+     * @returns {void}
+     */
+    private handleClickClear;
+    /**
+     * A `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @returns CSS template
+     */
+    static get styles(): CSSResultGroup;
+    /**
+     * Show Close Button if allow clears
+     * @returns close button template
+     */
+    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,208 @@
+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 { 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
+ *
+ * @fires clear - Dispatched when click on cross button occurs
+ */
+let Tab = class Tab extends ControlElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * 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.isSlotHasChildren = true;
+        /**
+         * Checks slotted children nodes and updates component to refresh label and sub-label templates.
+         * @param event slotchange
+         * @returns {void}
+         */
+        this.checkSlotChildren = (event) => {
+            const slot = event.target;
+            this.isSlotHasChildren = !slot.assignedNodes().filter(node => !this.isIgnorable(node)).length;
+            this.requestUpdate();
+        };
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * @param node that should be checked
+     * @returns whether node can be ignored.
+     */
+    isIgnorable(node) {
+        return node.nodeType === document.COMMENT_NODE
+            || isAllWhitespaceTextNode(node);
+    }
+    /**
+     * Omitted lineClamp if subLabel is provided
+     * @returns line Clamp value
+     */
+    getLineClamp() {
+        return !this.lineClamp ? 0 : this.subLabel ? 1 : this.lineClamp;
+    }
+    /**
+     * @param event event from close button
+     * @returns {void}
+     */
+    handleClickClear(event) {
+        event.stopPropagation();
+        /**
+         * Fires when click on cross occurs
+         */
+        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
+     */
+    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.isSlotHasChildren) {
+            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.isSlotHasChildren) {
+            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.checkSlotChildren}">
+          </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);
+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

@@ -0,0 +1,52 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-tab-bar",
+      "description": "Container for tabs",
+      "attributes": [
+        {
+          "name": "alignment",
+          "description": "Specify tab's horizontal alignment",
+          "type": "\"left\" | \"center\" | \"right\"",
+          "default": "\"left\""
+        },
+        {
+          "name": "level",
+          "description": "Use level styling from theme",
+          "type": "\"1\" | \"2\" | \"3\"",
+          "default": "\"1\""
+        },
+        {
+          "name": "vertical",
+          "description": "Use to switch from horizontal to vertical layout.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "alignment",
+          "attribute": "alignment",
+          "description": "Specify tab's horizontal alignment",
+          "type": "\"left\" | \"center\" | \"right\"",
+          "default": "\"left\""
+        },
+        {
+          "name": "level",
+          "attribute": "level",
+          "description": "Use level styling from theme",
+          "type": "\"1\" | \"2\" | \"3\"",
+          "default": "\"1\""
+        },
+        {
+          "name": "vertical",
+          "attribute": "vertical",
+          "description": "Use to switch from horizontal to vertical layout.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ]
+    }
+  ]
+}

package/lib/tab-bar/custom-elements.md

@@ -0,0 +1,11 @@
+# ef-tab-bar
+
+Container for tabs
+
+## Properties
+
+| Property    | Attribute   | Type                            | Default | Description                                      |
+|-------------|-------------|---------------------------------|---------|--------------------------------------------------|
+| `alignment` | `alignment` | `"left" \| "center" \| "right"` | "left"  | Specify tab's horizontal alignment               |
+| `level`     | `level`     | `"1" \| "2" \| "3"`             | "1"     | Use level styling from theme                     |
+| `vertical`  | `vertical`  | `boolean`                       | false   | Use to switch from horizontal to vertical layout. |

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 };