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

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

@@ -1,3 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

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

package/lib/tab/index.d.ts

@@ -1,118 +0,0 @@
-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

@@ -1,208 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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/helpers/animate.d.ts

@@ -1,16 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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 };

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

@@ -1,108 +0,0 @@
-import { JSXInterface } from '../jsx';
-import { TemplateResult, CSSResultGroup, PropertyValues, ResponsiveElement, ElementSize } from '@refinitiv-ui/core';
-import '../button/index.js';
-/**
- * Container for tabs
- */
-export declare class TabBar extends ResponsiveElement {
-    /**
-     * Element version number
-     * @returns version number
-     */
-    static get version(): string;
-    /**
-     * 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;
-    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;
-    /**
-     * Hide all scroll buttons
-     * @returns {void}
-     */
-    private hideScrollButtons;
-    /**
-     * Hide/Show scroll button when element is overflow.
-     * @param elementWidth width of element
-     * @returns {void}
-     */
-    private toggleScrollButton;
-    /**
-     * Set tab level attribute accordingly
-     * @returns {void}
-     */
-    private setLevel;
-    /**
-     * Detects when slot changes
-     * @returns {void}
-     */
-    private onSlotChange;
-    /**
-     * Update scroll position when clicked on left button
-     * @returns {void}
-     */
-    private handleScrollLeft;
-    /**
-     * Update scroll position when clicked on right button
-     * @returns {void}
-     */
-    private handleScrollRight;
-    /**
-     * 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 {};