@refinitiv-ui/elements 5.3.3 → 5.7.0

package/lib/tornado-chart/custom-elements.md

@@ -0,0 +1,18 @@
+# ef-tornado-chart
+
+A data visualization that helps to
+show the differences or similarities between values
+
+## Properties
+
+| Property    | Attribute   | Type             | Default | Description                     |
+|-------------|-------------|------------------|---------|---------------------------------|
+| `primary`   | `primary`   | `string \| null` | null    | Primary bar chart legend text   |
+| `secondary` | `secondary` | `string \| null` | null    | Secondary bar chart legend text |
+
+## Slots
+
+| Name     | Description                                      |
+|----------|--------------------------------------------------|
+| `footer` | Any HTML contents to display at chart footer section |
+| `header` | Any HTML contents to display at chart header section |

package/lib/tornado-chart/elements/tornado-chart.d.ts

@@ -0,0 +1,78 @@
+import { JSXInterface } from '../../jsx';
+import { ResponsiveElement, TemplateResult, CSSResultGroup, ElementSize } from '@refinitiv-ui/core';
+import './tornado-item.js';
+/**
+ * A data visualization that helps to
+ * show the differences or similarities between values
+ * @slot header - Any HTML contents to display at chart header section
+ * @slot footer - Any HTML contents to display at chart footer section
+ */
+export declare class TornadoChart extends ResponsiveElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * Primary bar chart legend text
+     */
+    primary: string | null;
+    /**
+     * Secondary bar chart legend text
+     */
+    secondary: string | null;
+    /**
+     * A flag to keep component's responsive state
+     */
+    private isResponsive;
+    /**
+     * True if legend's alignment is vertical
+     */
+    private legendAlignment;
+    /**
+     * Set chart's legend alignment
+     * @param responsive true if items needs to be responsive
+     * @returns {void}
+     */
+    private setLegendAlignment;
+    /**
+     * Set ef-tornado-item's alignment
+     * @param responsive true if items needs to be responsive
+     * @returns {void}
+     */
+    private setItemAlignment;
+    /**
+     * Handles element's resize behavior
+     * @ignore
+     * @param {ElementSize} size size of the element
+     * @returns {void}
+     */
+    resizedCallback(size: ElementSize): void;
+    /**
+     * A `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @return CSS template
+     */
+    static get styles(): CSSResultGroup;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-tornado-chart': TornadoChart;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-tornado-chart': Partial<TornadoChart> | JSXInterface.HTMLAttributes<TornadoChart>;
+    }
+  }
+}
+
+export {};

package/lib/tornado-chart/elements/tornado-chart.js

@@ -0,0 +1,122 @@
+import { __decorate } from "tslib";
+import { ResponsiveElement, html, css } 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 './tornado-item.js';
+/**
+ * A data visualization that helps to
+ * show the differences or similarities between values
+ * @slot header - Any HTML contents to display at chart header section
+ * @slot footer - Any HTML contents to display at chart footer section
+ */
+let TornadoChart = class TornadoChart extends ResponsiveElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Primary bar chart legend text
+         */
+        this.primary = null;
+        /**
+         * Secondary bar chart legend text
+         */
+        this.secondary = null;
+        /**
+         * A flag to keep component's responsive state
+         */
+        this.isResponsive = false;
+        /**
+         * True if legend's alignment is vertical
+         */
+        this.legendAlignment = false;
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * Set chart's legend alignment
+     * @param responsive true if items needs to be responsive
+     * @returns {void}
+     */
+    setLegendAlignment(responsive) {
+        this.legendAlignment = responsive;
+        this.requestUpdate();
+    }
+    /**
+     * Set ef-tornado-item's alignment
+     * @param responsive true if items needs to be responsive
+     * @returns {void}
+     */
+    setItemAlignment(responsive) {
+        this.querySelectorAll('ef-tornado-item').forEach((item) => {
+            item.vertical = responsive;
+        });
+    }
+    /**
+     * Handles element's resize behavior
+     * @ignore
+     * @param {ElementSize} size size of the element
+     * @returns {void}
+     */
+    resizedCallback(size) {
+        const previousResponsiveValue = this.isResponsive;
+        this.isResponsive = size.width < parseInt(this.getComputedVariable('--responsive-width'), 10);
+        // Make changes to DOM only when the responsive state changes
+        if (this.isResponsive !== previousResponsiveValue) {
+            this.setItemAlignment(this.isResponsive);
+            this.setLegendAlignment(this.isResponsive);
+        }
+    }
+    /**
+     * A `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @return CSS template
+     */
+    static get styles() {
+        return css `
+      :host {
+        display: block;
+        --responsive-width: 450;
+      }
+    `;
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    render() {
+        return html `
+      <slot name="header"></slot>
+      <div part="legend" ?vertical=${this.legendAlignment}>
+        <div part="legend-item">
+          <div part="primary-symbol"></div>
+          <div part="primary-label">${this.primary}</div>
+        </div>
+        <div part="legend-item">
+          <div part="secondary-symbol"></div>
+          <div part="secondary-label">${this.secondary}</div>
+        </div>
+      </div>
+      <slot></slot>
+      <slot name="footer"></slot>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TornadoChart.prototype, "primary", void 0);
+__decorate([
+    property({ type: String })
+], TornadoChart.prototype, "secondary", void 0);
+TornadoChart = __decorate([
+    customElement('ef-tornado-chart', {
+        alias: 'sapphire-parity-chart'
+    })
+], TornadoChart);
+export { TornadoChart };

package/lib/tornado-chart/elements/tornado-item.d.ts

@@ -0,0 +1,110 @@
+import { JSXInterface } from '../../jsx';
+import { BasicElement, TemplateResult, CSSResultGroup } from '@refinitiv-ui/core';
+import '../../progress-bar/index.js';
+import '../../layout/index.js';
+/**
+ * A part of <ef-tornado-chart />,
+ * consists mainly of primary, secondary ef-progress-bar and labels.
+ */
+export declare class TornadoItem extends BasicElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * Internal vertical flag value, used only by its getter and setter
+     */
+    private _vertical;
+    /**
+     * Getter for toggling bar chart alignment
+     * @returns {boolean} true if component is in vertical mode
+     */
+    get vertical(): boolean;
+    /**
+     * Setter for toggling bar chart alignment
+     * @param {boolean} value vertical
+     */
+    set vertical(value: boolean);
+    /**
+     * Display highlight styles onto the item
+     */
+    highlighted: boolean;
+    /**
+     * Primary bar chart's value
+     */
+    primaryValue: string | null;
+    /**
+     * Primary bar chart's label
+     */
+    primaryLabel: string | null;
+    /**
+     * Secondary bar chart's value
+     */
+    secondaryValue: string | null;
+    /**
+     * Secondary bar chart's label
+     */
+    secondaryLabel: string | null;
+    /**
+     * A flag to determine container layout state
+     */
+    private isContainer;
+    /**
+     * Primary bar chart alignment
+     */
+    private primaryBarAlignment;
+    /**
+     * Secondary bar chart alignment
+     */
+    private secondaryBarAlignment;
+    /**
+     * Label container's size
+     */
+    private labelLayoutSize;
+    /**
+     * Primary layout flex basis size
+     */
+    private primaryLayoutFlexBasis;
+    /**
+     * Secondary layout flex basis size
+     */
+    private secondaryLayoutFlexBasis;
+    /**
+     * Triggers vertical layout mode
+     * @returns {void}
+     */
+    private showVerticalMode;
+    /**
+     * Triggers horizontal layout mode
+     * @returns {void}
+     */
+    private showHorizontalMode;
+    /**
+     * A `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @return CSS template
+     */
+    static get styles(): CSSResultGroup;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-tornado-item': TornadoItem;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-tornado-item': Partial<TornadoItem> | JSXInterface.HTMLAttributes<TornadoItem>;
+    }
+  }
+}
+
+export {};

package/lib/tornado-chart/elements/tornado-item.js

@@ -0,0 +1,207 @@
+import { __decorate } from "tslib";
+import { BasicElement, html, css } 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 { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
+import { VERSION } from '../../version.js';
+import '../../progress-bar/index.js';
+import '../../layout/index.js';
+/**
+ * A part of <ef-tornado-chart />,
+ * consists mainly of primary, secondary ef-progress-bar and labels.
+ */
+let TornadoItem = class TornadoItem extends BasicElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Internal vertical flag value, used only by its getter and setter
+         */
+        this._vertical = false;
+        /**
+         * Display highlight styles onto the item
+         */
+        this.highlighted = false;
+        /**
+         * Primary bar chart's value
+         */
+        this.primaryValue = null;
+        /**
+         * Primary bar chart's label
+         */
+        this.primaryLabel = null;
+        /**
+         * Secondary bar chart's value
+         */
+        this.secondaryValue = null;
+        /**
+         * Secondary bar chart's label
+         */
+        this.secondaryLabel = null;
+        /**
+         * A flag to determine container layout state
+         */
+        this.isContainer = false;
+        /**
+         * Primary bar chart alignment
+         */
+        this.primaryBarAlignment = 'right';
+        /**
+         * Secondary bar chart alignment
+         */
+        this.secondaryBarAlignment = 'left';
+        /**
+         * Label container's size
+         */
+        this.labelLayoutSize = '25%';
+        /**
+         * Primary layout flex basis size
+         */
+        this.primaryLayoutFlexBasis = '40%';
+        /**
+         * Secondary layout flex basis size
+         */
+        this.secondaryLayoutFlexBasis = '40%';
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * Getter for toggling bar chart alignment
+     * @returns {boolean} true if component is in vertical mode
+     */
+    get vertical() {
+        return this._vertical;
+    }
+    /**
+     * Setter for toggling bar chart alignment
+     * @param {boolean} value vertical
+     */
+    set vertical(value) {
+        const previousValue = this._vertical;
+        if (value === previousValue) {
+            return;
+        }
+        this._vertical = value;
+        /**
+         * Observe when vertical property changes,
+         * then toggle between alignments
+         */
+        if (value) {
+            this.showVerticalMode();
+        }
+        else {
+            this.showHorizontalMode();
+        }
+        this.requestUpdate('vertical', previousValue);
+    }
+    /**
+     * Triggers vertical layout mode
+     * @returns {void}
+     */
+    showVerticalMode() {
+        this.isContainer = true;
+        this.labelLayoutSize = undefined;
+        this.primaryLayoutFlexBasis = undefined;
+        this.secondaryLayoutFlexBasis = undefined;
+        this.primaryBarAlignment = 'left';
+        this.secondaryBarAlignment = 'left';
+    }
+    /**
+     * Triggers horizontal layout mode
+     * @returns {void}
+     */
+    showHorizontalMode() {
+        this.isContainer = false;
+        this.labelLayoutSize = '25%';
+        this.primaryLayoutFlexBasis = '40%';
+        this.secondaryLayoutFlexBasis = '40%';
+        this.primaryBarAlignment = 'right';
+        this.secondaryBarAlignment = 'left';
+    }
+    /**
+     * A `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @return CSS template
+     */
+    static get styles() {
+        return css `
+      :host {
+        display: block;
+      }
+      :host([vertical]) [part=seperator] {
+        display: none;
+      }
+      :host([vertical]) [part=container] {
+        align-items: inherit;
+      }
+      [part=container] {
+        padding: 0;
+        align-items: center;
+      }
+      [part=primary-bar],
+      [part=secondary-bar] {
+        width: 100%;
+      }
+    `;
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    render() {
+        return html `
+      <ef-layout part="container" flex nowrap ?container="${this.isContainer}">
+        <ef-layout flex size="${ifDefined(this.labelLayoutSize)}">
+          <div part="label">
+            <slot></slot>
+          </div>
+        </ef-layout>
+        <ef-layout flex basis="${ifDefined(this.primaryLayoutFlexBasis)}">
+          <ef-progress-bar
+            part="primary-bar"
+            alignment=${this.primaryBarAlignment}
+            label="${ifDefined(this.primaryLabel || undefined)}"
+            value="${ifDefined(this.primaryValue || undefined)}">
+          </ef-progress-bar>
+        </ef-layout>
+        <div part="seperator"></div>
+        <ef-layout flex basis="${ifDefined(this.secondaryLayoutFlexBasis)}">
+          <ef-progress-bar
+            part="secondary-bar"
+            alignment="${this.secondaryBarAlignment}"
+            label="${ifDefined(this.secondaryLabel || undefined)}"
+            value="${ifDefined(this.secondaryValue || undefined)}">
+          </ef-progress-bar>
+        </ef-layout>
+      </ef-layout>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TornadoItem.prototype, "vertical", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TornadoItem.prototype, "highlighted", void 0);
+__decorate([
+    property({ type: String, attribute: 'primary-value' })
+], TornadoItem.prototype, "primaryValue", void 0);
+__decorate([
+    property({ type: String, attribute: 'primary-label' })
+], TornadoItem.prototype, "primaryLabel", void 0);
+__decorate([
+    property({ type: String, attribute: 'secondary-value' })
+], TornadoItem.prototype, "secondaryValue", void 0);
+__decorate([
+    property({ type: String, attribute: 'secondary-label' })
+], TornadoItem.prototype, "secondaryLabel", void 0);
+TornadoItem = __decorate([
+    customElement('ef-tornado-item')
+], TornadoItem);
+export { TornadoItem };

package/lib/tornado-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { TornadoChart } from './elements/tornado-chart.js';
+export { TornadoItem } from './elements/tornado-item.js';

package/lib/tornado-chart/index.js

@@ -0,0 +1,2 @@
+export { TornadoChart } from './elements/tornado-chart.js';
+export { TornadoItem } from './elements/tornado-item.js';

package/lib/tornado-chart/themes/halo/dark/index.js

@@ -0,0 +1,6 @@
+import '@refinitiv-ui/elements/lib/layout/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/progress-bar/themes/halo/dark';
+
+elf.customStyles.define('ef-tornado-chart', ':host{--primary-color:#6678FF;--secondary-color:#6678FF;--responsive-width:450;--primary-color:#6678FF;--secondary-color:#FFFFFF;font-size:12rem}:host [part=legend]{display:flex;justify-content:flex-end;margin-bottom:25px}:host [part=legend-item]{display:inline-flex;overflow:hidden;align-items:center;margin-right:10px}:host [part=legend][vertical]{justify-content:flex-start;flex-wrap:wrap}:host [part=primary-symbol],:host [part=secondary-symbol]{flex:none;width:15px;height:15px;border-radius:1px;margin-right:5px}:host [part=primary-symbol]{background-color:var(--primary-color)}:host [part=secondary-symbol]{background-color:var(--secondary-color)}:host [part=primary-label],:host [part=secondary-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}');
+
+elf.customStyles.define('ef-tornado-item', ':host{margin:0;padding:0 5px;--primary-color:var(\'--primary-color\', #6678FF);--secondary-color:var(\'--secondary-color\', #6678FF)}:host(:hover),:host([highlighted]){background-color:rgba(204,204,204,.05)}:host [part=label]{text-align:left;margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host [part=primary-bar],:host [part=secondary-bar]{width:100%;height:20px}:host [part=primary-bar]{color:var(--primary-color);margin-left:50px}:host [part=secondary-bar]{color:var(--secondary-color);margin-right:50px}:host [part=seperator]{height:30px;border-left:2px solid #404040}:host([highlighted]) [part=label],:host([highlighted]) [part=primary-bar],:host([highlighted]) [part=secondary-bar]{font-weight:700}:host([vertical]){border-left:2px solid #404040;padding-bottom:5px}:host([vertical]) [part=label]{margin:3px}:host([vertical]) [part=seperator]{display:none}:host([vertical]) [part=container]{align-items:inherit}:host([vertical]) [part=primary-bar]{margin:0 50px 0 0}:host([vertical]) [part=secondary-bar]{margin:3px 50px 0 0}');

package/lib/tornado-chart/themes/halo/light/index.js

@@ -0,0 +1,6 @@
+import '@refinitiv-ui/elements/lib/layout/themes/halo/light';
+import '@refinitiv-ui/elements/lib/progress-bar/themes/halo/light';
+
+elf.customStyles.define('ef-tornado-chart', ':host{--primary-color:#334BFF;--secondary-color:#6678FF;--responsive-width:450;--primary-color:#334BFF;--secondary-color:#000000;font-size:12rem}:host [part=legend]{display:flex;justify-content:flex-end;margin-bottom:25px}:host [part=legend-item]{display:inline-flex;overflow:hidden;align-items:center;margin-right:10px}:host [part=legend][vertical]{justify-content:flex-start;flex-wrap:wrap}:host [part=primary-symbol],:host [part=secondary-symbol]{flex:none;width:15px;height:15px;border-radius:1px;margin-right:5px}:host [part=primary-symbol]{background-color:var(--primary-color)}:host [part=secondary-symbol]{background-color:var(--secondary-color)}:host [part=primary-label],:host [part=secondary-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}');
+
+elf.customStyles.define('ef-tornado-item', ':host{margin:0;padding:0 5px;--primary-color:var(\'--primary-color\', #334BFF);--secondary-color:var(\'--secondary-color\', #6678FF)}:host(:hover),:host([highlighted]){background-color:rgba(13,13,13,.05)}:host [part=label]{text-align:left;margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host [part=primary-bar],:host [part=secondary-bar]{width:100%;height:20px}:host [part=primary-bar]{color:var(--primary-color);margin-left:50px}:host [part=secondary-bar]{color:var(--secondary-color);margin-right:50px}:host [part=seperator]{height:30px;border-left:2px solid #d9d9d9}:host([highlighted]) [part=label],:host([highlighted]) [part=primary-bar],:host([highlighted]) [part=secondary-bar]{font-weight:700}:host([vertical]){border-left:2px solid #d9d9d9;padding-bottom:5px}:host([vertical]) [part=label]{margin:3px}:host([vertical]) [part=seperator]{display:none}:host([vertical]) [part=container]{align-items:inherit}:host([vertical]) [part=primary-bar]{margin:0 50px 0 0}:host([vertical]) [part=secondary-bar]{margin:3px 50px 0 0}');

package/lib/tornado-chart/themes/solar/charcoal/index.js

@@ -0,0 +1,6 @@
+import '@refinitiv-ui/elements/lib/layout/themes/solar/charcoal';
+import '@refinitiv-ui/elements/lib/progress-bar/themes/solar/charcoal';
+
+elf.customStyles.define('ef-tornado-chart', ':host{--primary-color:#FF9933;--secondary-color:#b35900;--responsive-width:450;--secondary-color:#BEC3CC;font-size:14rem}:host [part=legend]{display:flex;justify-content:flex-end;margin-bottom:25px}:host [part=legend-item]{display:inline-flex;overflow:hidden;align-items:center;margin-right:10px}:host [part=legend][vertical]{justify-content:flex-start;flex-wrap:wrap}:host [part=primary-symbol],:host [part=secondary-symbol]{flex:none;width:15px;height:15px;border-radius:1px;margin-right:5px}:host [part=primary-symbol]{background-color:var(--primary-color)}:host [part=secondary-symbol]{background-color:var(--secondary-color)}:host [part=primary-label],:host [part=secondary-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}');
+
+elf.customStyles.define('ef-tornado-item', ':host{margin:0;padding:0 5px;--primary-color:var(\'--primary-color\', #FF9933);--secondary-color:var(\'--secondary-color\', #b35900);--secondary-color:var(\'--secondary-color\', #BEC3CC)}:host(:hover),:host([highlighted]){background-color:rgba(194,194,194,.05)}:host [part=label]{text-align:left;margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host [part=primary-bar],:host [part=secondary-bar]{width:100%;height:20px}:host [part=primary-bar]{color:var(--primary-color);margin-left:50px}:host [part=secondary-bar]{color:var(--secondary-color);margin-right:50px}:host [part=seperator]{height:30px;border-left:2px solid #0a0a0a}:host([highlighted]) [part=label],:host([highlighted]) [part=primary-bar],:host([highlighted]) [part=secondary-bar]{font-weight:700}:host([vertical]){border-left:2px solid #0a0a0a;padding-bottom:5px}:host([vertical]) [part=label]{margin:3px}:host([vertical]) [part=seperator]{display:none}:host([vertical]) [part=container]{align-items:inherit}:host([vertical]) [part=primary-bar]{margin:0 50px 0 0}:host([vertical]) [part=secondary-bar]{margin:3px 50px 0 0}');

package/lib/tornado-chart/themes/solar/pearl/index.js

@@ -0,0 +1,6 @@
+import '@refinitiv-ui/elements/lib/layout/themes/solar/pearl';
+import '@refinitiv-ui/elements/lib/progress-bar/themes/solar/pearl';
+
+elf.customStyles.define('ef-tornado-chart', ':host{--primary-color:#EE7600;--secondary-color:#EE7600;--responsive-width:450;--secondary-color:#BEC3CC;font-size:14rem}:host [part=legend]{display:flex;justify-content:flex-end;margin-bottom:25px}:host [part=legend-item]{display:inline-flex;overflow:hidden;align-items:center;margin-right:10px}:host [part=legend][vertical]{justify-content:flex-start;flex-wrap:wrap}:host [part=primary-symbol],:host [part=secondary-symbol]{flex:none;width:15px;height:15px;border-radius:1px;margin-right:5px}:host [part=primary-symbol]{background-color:var(--primary-color)}:host [part=secondary-symbol]{background-color:var(--secondary-color)}:host [part=primary-label],:host [part=secondary-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}');
+
+elf.customStyles.define('ef-tornado-item', ':host{margin:0;padding:0 5px;--primary-color:var(\'--primary-color\', #EE7600);--secondary-color:var(\'--secondary-color\', #EE7600);--secondary-color:var(\'--secondary-color\', #BEC3CC)}:host(:hover),:host([highlighted]){background-color:rgba(72,72,72,.05)}:host [part=label]{text-align:left;margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host [part=primary-bar],:host [part=secondary-bar]{width:100%;height:20px}:host [part=primary-bar]{color:var(--primary-color);margin-left:50px}:host [part=secondary-bar]{color:var(--secondary-color);margin-right:50px}:host [part=seperator]{height:30px;border-left:2px solid #d5d8db}:host([highlighted]) [part=label],:host([highlighted]) [part=primary-bar],:host([highlighted]) [part=secondary-bar]{font-weight:700}:host([vertical]){border-left:2px solid #d5d8db;padding-bottom:5px}:host([vertical]) [part=label]{margin:3px}:host([vertical]) [part=seperator]{display:none}:host([vertical]) [part=container]{align-items:inherit}:host([vertical]) [part=primary-bar]{margin:0 50px 0 0}:host([vertical]) [part=secondary-bar]{margin:3px 50px 0 0}');