@refinitiv-ui/elements 7.0.0 → 7.0.2

package/lib/slider/utils.d.ts

@@ -1,16 +1,16 @@
 /**
-  * Set prevent default action and stop bubbles event
-  * @param event event mouse or touch
-  * @returns {void}
-  */
+ * Set prevent default action and stop bubbles event
+ * @param event event mouse or touch
+ * @returns {void}
+ */
 declare const preventDefault: (event: Event) => Event;
 /**
-   * Return value that never exceed the maximum boundary
-   * @param value value for check clamp
-   * @param min max value
-   * @param max min value
-   * @returns number between two numbers
-   */
+ * Return value that never exceed the maximum boundary
+ * @param value value for check clamp
+ * @param min max value
+ * @param max min value
+ * @returns number between two numbers
+ */
 declare const clamp: (value: number, min: number, max: number) => string;
 /**
  * Check if number is a decimal number

package/lib/slider/utils.js

@@ -1,20 +1,20 @@
 /**
-  * Set prevent default action and stop bubbles event
-  * @param event event mouse or touch
-  * @returns {void}
-  */
+ * Set prevent default action and stop bubbles event
+ * @param event event mouse or touch
+ * @returns {void}
+ */
 const preventDefault = (event) => {
     event.preventDefault();
     event.stopPropagation();
     return event;
 };
 /**
-   * Return value that never exceed the maximum boundary
-   * @param value value for check clamp
-   * @param min max value
-   * @param max min value
-   * @returns number between two numbers
-   */
+ * Return value that never exceed the maximum boundary
+ * @param value value for check clamp
+ * @param min max value
+ * @param max min value
+ * @returns number between two numbers
+ */
 const clamp = function (value, min, max) {
     return Math.max(min, Math.min(value, max)).toString();
 };

package/lib/sparkline/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { CSSResultGroup, PropertyValues, ResponsiveElement, TemplateResult, ElementSize } from '@refinitiv-ui/core';
+import { CSSResultGroup, ElementSize, PropertyValues, ResponsiveElement, TemplateResult } from '@refinitiv-ui/core';
 import '@refinitiv-ui/browser-sparkline';
 import type { BrowserSparklineChart } from '@refinitiv-ui/browser-sparkline';
 import type { ThemeConfig } from '@refinitiv-ui/browser-sparkline/lib/browserSparklineCanvas';

package/lib/sparkline/index.js

@@ -1,11 +1,11 @@
 import { __decorate } from "tslib";
-import { css, ResponsiveElement, html } from '@refinitiv-ui/core';
+import { ResponsiveElement, css, html } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { query } from '@refinitiv-ui/core/decorators/query.js';
-import { VERSION } from '../version.js';
-import { color } from '@refinitiv-ui/utils/color.js';
 import '@refinitiv-ui/browser-sparkline';
+import { color } from '@refinitiv-ui/utils/color.js';
+import { VERSION } from '../version.js';
 let Sparkline = class Sparkline extends ResponsiveElement {
     constructor() {
         super(...arguments);
@@ -145,13 +145,14 @@ let Sparkline = class Sparkline extends ResponsiveElement {
         display: block;
       }
 
-      browser-sparkline-chart, browser-sparkline-canvas {
+      browser-sparkline-chart,
+      browser-sparkline-canvas {
         width: 100%;
         height: 100%;
         display: block;
       }
 
-      [part=chart] {
+      [part='chart'] {
         height: 100%;
       }
     `;
@@ -162,9 +163,7 @@ let Sparkline = class Sparkline extends ResponsiveElement {
      * @return Render template
      */
     render() {
-        return html `
-      <browser-sparkline-chart part="chart" id="sparkline"></browser-sparkline-chart>
-    `;
+        return html ` <browser-sparkline-chart part="chart" id="sparkline"></browser-sparkline-chart> `;
     }
 };
 __decorate([

package/lib/swing-gauge/helpers.js

@@ -75,7 +75,7 @@ const draw = (drawData, drawCtx, drawParams) => {
             ctx.setLineDash([5, 3]);
         }
         ctx.moveTo(data.width / 2, data.height - data.size * data.gaugeLowerBound);
-        ctx.lineTo(data.width / 2, data.height - (data.size * data.gaugeUpperBound) + style.strokeWidth);
+        ctx.lineTo(data.width / 2, data.height - data.size * data.gaugeUpperBound + style.strokeWidth);
         ctx.strokeStyle = style.centerlineColor;
         ctx.stroke();
         ctx.restore();
@@ -89,7 +89,7 @@ const elasticOut = ((amplitude, period) => {
             return time;
         }
         const s = (period / pi2) * Math.asin(1 / amplitude);
-        return (amplitude * Math.pow(2, -10 * time) * Math.sin(((time - s) * pi2) / period) + 1);
+        return amplitude * Math.pow(2, -10 * time) * Math.sin(((time - s) * pi2) / period) + 1;
     };
 })(1.2, 0.5);
 const textWidth = (drawCtx, text, fontSize, fontFamily) => {

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

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { ResponsiveElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import { CSSResultGroup, PropertyValues, ResponsiveElement, TemplateResult } from '@refinitiv-ui/core';
 import '../canvas/index.js';
 import '../label/index.js';
 import type { SwingGaugeCanvasSize, SwingGaugeValueFormatter } from './types';
@@ -47,12 +47,12 @@ export declare class SwingGauge extends ResponsiveElement {
      */
     duration: number;
     /**
-    * Primary value legend
-    */
+     * Primary value legend
+     */
     primaryLegend: string;
     /**
-    * Secondary value legend
-    */
+     * Secondary value legend
+     */
     secondaryLegend: string;
     /**
      * Custom value formatter
@@ -74,36 +74,36 @@ export declare class SwingGauge extends ResponsiveElement {
     private primaryLineRadian;
     private secondaryLineRadian;
     /**
-    * Data requires to draw swing gauge
-    */
+     * Data requires to draw swing gauge
+     */
     private data;
     /**
-    * Internal sizes and scales
-    */
+     * Internal sizes and scales
+     */
     private width;
     private height;
     private size;
     private lineLength;
     private scale;
     /**
-    * Current fill percentage
-    */
+     * Current fill percentage
+     */
     private fillPercentage;
     /**
-    * Keeps previous percentage calculation to avoid re-rendering the same value
-    */
+     * Keeps previous percentage calculation to avoid re-rendering the same value
+     */
     private previousFillPercentage;
     /**
-    * This for keep line number of label for calculate new radius
-    */
+     * This for keep line number of label for calculate new radius
+     */
     private labelLineNumber;
     /**
-    * Get primary percentage
-    */
+     * Get primary percentage
+     */
     private get primaryPercentage();
     /**
-    * Get secondary percentage
-    */
+     * Get secondary percentage
+     */
     private get secondaryPercentage();
     /**
      * Check width and height are valid

package/lib/swing-gauge/index.js

@@ -1,15 +1,15 @@
 import { __decorate } from "tslib";
-import { ResponsiveElement, css, html, WarningNotice } from '@refinitiv-ui/core';
+import { ResponsiveElement, WarningNotice, css, html } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { query } from '@refinitiv-ui/core/decorators/query.js';
 import { state } from '@refinitiv-ui/core/decorators/state.js';
 import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
-import { VERSION } from '../version.js';
 import '../canvas/index.js';
 import '../label/index.js';
-import { helpers as canvasHelper } from './helpers.js';
+import { VERSION } from '../version.js';
 import { DefaultStyle, Segment, TextType } from './const.js';
+import { helpers as canvasHelper } from './helpers.js';
 /**
  * Constants from swing-gauge default specs
  */
@@ -53,12 +53,12 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
          */
         this.duration = 1000;
         /**
-        * Primary value legend
-        */
+         * Primary value legend
+         */
         this.primaryLegend = '';
         /**
-        * Secondary value legend
-        */
+         * Secondary value legend
+         */
         this.secondaryLegend = '';
         /**
          * Custom value formatter
@@ -80,28 +80,28 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
         this.primaryLineRadian = PRIMARY_RADIAN;
         this.secondaryLineRadian = SECONDARY_RADIAN;
         /**
-        * Data requires to draw swing gauge
-        */
+         * Data requires to draw swing gauge
+         */
         this.data = null;
         /**
-        * Internal sizes and scales
-        */
+         * Internal sizes and scales
+         */
         this.width = 0;
         this.height = 0;
         this.size = 0;
         this.lineLength = 60;
         this.scale = 1;
         /**
-        * Current fill percentage
-        */
+         * Current fill percentage
+         */
         this.fillPercentage = 0;
         /**
-        * Keeps previous percentage calculation to avoid re-rendering the same value
-        */
+         * Keeps previous percentage calculation to avoid re-rendering the same value
+         */
         this.previousFillPercentage = 0;
         /**
-        * This for keep line number of label for calculate new radius
-        */
+         * This for keep line number of label for calculate new radius
+         */
         this.labelLineNumber = 1;
         /**
          * Style for primary container
@@ -139,46 +139,50 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
         display: block;
         height: 200px;
       }
-      :host [part=container] {
+      :host [part='container'] {
         display: flex;
         flex-direction: column;
         height: 100%;
       }
-      :host [part=canvas-container] {
+      :host [part='canvas-container'] {
         position: relative;
         flex: 1;
       }
-      :host [part=canvas] {
+      :host [part='canvas'] {
         height: 100%;
       }
-      :host [part=primary-legend], [part=secondary-legend] {
+      :host [part='primary-legend'],
+      [part='secondary-legend'] {
         text-align: left;
         display: flex;
       }
-      :host [part=primary-label], [part=primary-value] {
+      :host [part='primary-label'],
+      [part='primary-value'] {
         text-align: left;
       }
-      :host [part=secondary-label], [part=secondary-value] {
+      :host [part='secondary-label'],
+      [part='secondary-value'] {
         text-align: right;
       }
-      :host [part=legend-container-outer] {
+      :host [part='legend-container-outer'] {
         width: 60%;
         margin: 0 auto;
         text-align: center;
       }
-      :host [part=legend-container-inner] {
+      :host [part='legend-container-inner'] {
         max-width: 100%;
         display: inline-block;
       }
-      :host [part=primary-legend-symbol], [part=secondary-legend-symbol] {
+      :host [part='primary-legend-symbol'],
+      [part='secondary-legend-symbol'] {
         display: inline-block;
         flex-shrink: 0;
       }
-      :host [part=primary-container] {
+      :host [part='primary-container'] {
         position: absolute;
         text-align: left;
       }
-      :host [part=secondary-container] {
+      :host [part='secondary-container'] {
         position: absolute;
         text-align: right;
       }
@@ -215,14 +219,14 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
         return this._secondaryValue;
     }
     /**
-    * Get primary percentage
-    */
+     * Get primary percentage
+     */
     get primaryPercentage() {
         return this.getPercentage(this.primaryValue);
     }
     /**
-    * Get secondary percentage
-    */
+     * Get secondary percentage
+     */
     get secondaryPercentage() {
         return this.getPercentage(this.secondaryValue);
     }
@@ -273,8 +277,9 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
      */
     update(changedProperties) {
         super.update(changedProperties);
-        if (changedProperties.has('primaryValue') || changedProperties.has('secondaryValue')
-            || (this.primaryValue === 0 && this.secondaryValue === 0)) {
+        if (changedProperties.has('primaryValue') ||
+            changedProperties.has('secondaryValue') ||
+            (this.primaryValue === 0 && this.secondaryValue === 0)) {
             this.canvas.autoloop = true;
             this.renderCanvas('frame');
             this.animateCanvas();
@@ -285,9 +290,11 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
         if (changedProperties.has('valueFormatter')) {
             this.calculateValueFontSize();
         }
-        if (changedProperties.has('primaryValue') || changedProperties.has('secondaryValue')
-            || changedProperties.has('primaryLabel') || changedProperties.has('secondaryLabel')
-            || changedProperties.has('valueFormatter')) {
+        if (changedProperties.has('primaryValue') ||
+            changedProperties.has('secondaryValue') ||
+            changedProperties.has('primaryLabel') ||
+            changedProperties.has('secondaryLabel') ||
+            changedProperties.has('valueFormatter')) {
             this.updateGaugePositions();
         }
     }
@@ -328,7 +335,8 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
      */
     easeTo(to, from, time) {
         const diff = (this.duration - (time - performance.now())) / this.duration;
-        this.fillPercentage = from + (to - from) * canvasHelper.elasticOut(diff > 1 ? 1 : diff < 0 ? 0 : diff) || 0;
+        this.fillPercentage =
+            from + (to - from) * canvasHelper.elasticOut(diff > 1 ? 1 : diff < 0 ? 0 : diff) || 0;
         if (this.fillPercentage !== to) {
             this.cancelFrame(this.requestedAnimationID);
             this.requestedAnimationID = this.onFrame(() => this.easeTo(to, from, time));
@@ -408,7 +416,7 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
             const reverseScale = 1 - this.scale;
             // increase the offset by 25%, this for buffer to make label have some space from bottom
             this.linePointerOffset = (containerHeight / gaugeHeight) * reverseScale * 1.25;
-            this.primaryLineRadian = PRIMARY_RADIAN + DEFAULT_OFFSET + (OVERFLOW_OFFSET * reverseScale);
+            this.primaryLineRadian = PRIMARY_RADIAN + DEFAULT_OFFSET + OVERFLOW_OFFSET * reverseScale;
             this.secondaryLineRadian = 3 - this.primaryLineRadian;
         }
         const primaryPosLine = this.getPositionStyle(Segment.PRIMARY, this.primaryLineRadian, this.linePointerOffset, 0);
@@ -528,7 +536,7 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
             const offset = DEFAULT_OFFSET * reverseScale;
             this.primaryLineRadian = PRIMARY_RADIAN + offset;
             this.secondaryLineRadian = SECONDARY_RADIAN - offset;
-            this.linePointerOffset = LINE_POINTER_OFFSET + (0.4 * (1 - this.scale));
+            this.linePointerOffset = LINE_POINTER_OFFSET + 0.4 * (1 - this.scale);
         }
         this.primaryLineRadian = this.primaryLineRadian > 1.3 ? 1.3 : this.primaryLineRadian;
         this.secondaryLineRadian = this.primaryLineRadian > 1.7 ? 1.7 : this.secondaryLineRadian;
@@ -558,7 +566,8 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
             minFontSize = MIN_LABEL_FONT_SIZE;
             // buffer for word wrap
             widthScale = 1.1;
-            longerLabel = this.primaryLabel.length > this.secondaryLabel.length ? this.primaryLabel : this.secondaryLabel;
+            longerLabel =
+                this.primaryLabel.length > this.secondaryLabel.length ? this.primaryLabel : this.secondaryLabel;
             fontSize = Math.ceil(this.scale * this.canvas.height * GAUGE_LABEL_FONT_SCALE);
         }
         else {
@@ -596,7 +605,10 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
         if (!this.canvas.ctx) {
             return;
         }
-        this.labelStyle = { maxWidth: `${this.lineLength}px`, fontSize: `${this.calculateFontSize(this.canvas.ctx, TextType.LABEL)}px` };
+        this.labelStyle = {
+            maxWidth: `${this.lineLength}px`,
+            fontSize: `${this.calculateFontSize(this.canvas.ctx, TextType.LABEL)}px`
+        };
     }
     /**
      * Update value font size
@@ -606,7 +618,10 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
         if (!this.canvas.ctx) {
             return;
         }
-        this.valueStyle = { maxWidth: `${this.lineLength}px`, fontSize: `${this.calculateFontSize(this.canvas.ctx, TextType.VALUE)}px` };
+        this.valueStyle = {
+            maxWidth: `${this.lineLength}px`,
+            fontSize: `${this.calculateFontSize(this.canvas.ctx, TextType.VALUE)}px`
+        };
     }
     /**
      * Compute percentage of value
@@ -617,7 +632,7 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
         if (value === 0) {
             return 0;
         }
-        return 100 * value / (this.primaryValue + this.secondaryValue);
+        return (100 * value) / (this.primaryValue + this.secondaryValue);
     }
     /**
      * Handles canvas resize
@@ -636,11 +651,10 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
     get legendTemplate() {
         return this.primaryLegend.length > 0 || this.secondaryLegend.length > 0
             ? html `<div part="legend-container-outer">
-              <div part="legend-container-inner">
-                ${this.primaryLegendTemplate}
-                ${this.secondaryLegendTemplate}
-              </div>
-            </div>`
+          <div part="legend-container-inner">
+            ${this.primaryLegendTemplate} ${this.secondaryLegendTemplate}
+          </div>
+        </div>`
             : null;
     }
     /**
@@ -650,9 +664,11 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
     get primaryLegendTemplate() {
         return this.primaryLegend
             ? html `<div part="primary-legend">
-              <span part="primary-legend-symbol"></span>
-              <ef-label max-line="${MAX_LEGEND_LINE}" line-clamp="${MAX_LEGEND_LINE}">${this.primaryLegend}</ef-label>
-            </div>`
+          <span part="primary-legend-symbol"></span>
+          <ef-label max-line="${MAX_LEGEND_LINE}" line-clamp="${MAX_LEGEND_LINE}"
+            >${this.primaryLegend}</ef-label
+          >
+        </div>`
             : null;
     }
     /**
@@ -662,9 +678,11 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
     get secondaryLegendTemplate() {
         return this.secondaryLegend
             ? html `<div part="secondary-legend">
-              <span part="secondary-legend-symbol"></span>
-              <ef-label max-line="${MAX_LEGEND_LINE}" line-clamp="${MAX_LEGEND_LINE}">${this.secondaryLegend}</ef-label>
-            </div>`
+          <span part="secondary-legend-symbol"></span>
+          <ef-label max-line="${MAX_LEGEND_LINE}" line-clamp="${MAX_LEGEND_LINE}"
+            >${this.secondaryLegend}</ef-label
+          >
+        </div>`
             : null;
     }
     render() {
@@ -674,38 +692,30 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
         <div part="canvas-container">
           <ef-canvas part="canvas" @resize=${this.onCanvasResize}></ef-canvas>
           <div part="primary-container" style=${styleMap(this.primaryContainerStyle)}>
-            ${this.primaryLabel ? html `
-              <ef-label
-                part="primary-label"
-                max-line="${MAX_LABEL_LINE}"
-                line-clamp="${MAX_LABEL_LINE}"
-                style=${styleMap(this.labelStyle)}
-                >${this.primaryLabel}
-              </ef-label><br>`
+            ${this.primaryLabel
+            ? html ` <ef-label
+                    part="primary-label"
+                    max-line="${MAX_LABEL_LINE}"
+                    line-clamp="${MAX_LABEL_LINE}"
+                    style=${styleMap(this.labelStyle)}
+                    >${this.primaryLabel} </ef-label
+                  ><br />`
             : null}
-            <ef-label
-              part="primary-value"
-              truncate=""
-              line-clamp="1"
-              style=${styleMap(this.valueStyle)}
+            <ef-label part="primary-value" truncate="" line-clamp="1" style=${styleMap(this.valueStyle)}
               >${this.valueFormatter(this.primaryPercentage, this.primaryValue)}</ef-label
             >
           </div>
           <div part="secondary-container" style=${styleMap(this.secondaryContainerStyle)}>
-            ${this.secondaryLabel ? html `
-              <ef-label
-                part="secondary-label"
-                max-line="${MAX_LABEL_LINE}"
-                line-clamp="${MAX_LABEL_LINE}"
-                style=${styleMap(this.labelStyle)}
-                >${this.secondaryLabel}
-              </ef-label><br>`
+            ${this.secondaryLabel
+            ? html ` <ef-label
+                    part="secondary-label"
+                    max-line="${MAX_LABEL_LINE}"
+                    line-clamp="${MAX_LABEL_LINE}"
+                    style=${styleMap(this.labelStyle)}
+                    >${this.secondaryLabel} </ef-label
+                  ><br />`
             : null}
-            <ef-label
-              part="secondary-value"
-              truncate=""
-              line-clamp="1"
-              style=${styleMap(this.valueStyle)}
+            <ef-label part="secondary-value" truncate="" line-clamp="1" style=${styleMap(this.valueStyle)}
               >${this.valueFormatter(this.secondaryPercentage, this.secondaryValue)}</ef-label
             >
           </div>

package/lib/tab/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { TemplateResult, CSSResultGroup, ControlElement, PropertyValues } from '@refinitiv-ui/core';
+import { CSSResultGroup, ControlElement, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import '../icon/index.js';
 import '../label/index.js';
 /**

package/lib/tab/index.js

@@ -1,13 +1,13 @@
 import { __decorate } from "tslib";
-import { html, css, ControlElement } from '@refinitiv-ui/core';
+import { ControlElement, css, html } from '@refinitiv-ui/core';
+import { triggerResize } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { state } from '@refinitiv-ui/core/decorators/state.js';
 import { isSlotEmpty } from '@refinitiv-ui/utils/is-slot-empty.js';
-import { triggerResize } from '@refinitiv-ui/core';
-import { VERSION } from '../version.js';
 import '../icon/index.js';
 import '../label/index.js';
+import { VERSION } from '../version.js';
 /**
  * A building block for individual tab
  * @attr {boolean} disabled - Set disabled state
@@ -153,11 +153,13 @@ let Tab = class Tab extends ControlElement {
      * @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;
+        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
@@ -167,13 +169,7 @@ let Tab = class Tab extends ControlElement {
         if (!this.label || this.isSlotHasContent) {
             return null;
         }
-        return html `
-      <ef-label
-        part="label"
-        .lineClamp=${this.getLineClamp()}>
-        ${this.label}
-      </ef-label>
-    `;
+        return html ` <ef-label part="label" .lineClamp=${this.getLineClamp()}> ${this.label} </ef-label> `;
     }
     /**
      * Create ef-label template when subLabel is true
@@ -183,13 +179,7 @@ let Tab = class Tab extends ControlElement {
         if (!this.subLabel || this.isSlotHasContent) {
             return null;
         }
-        return html `
-      <ef-label
-      part="sub-label"
-      .lineClamp=${this.getLineClamp()}>
-        ${this.subLabel}
-      </ef-label>
-    `;
+        return html ` <ef-label part="sub-label" .lineClamp=${this.getLineClamp()}> ${this.subLabel} </ef-label> `;
     }
     /**
      * A `TemplateResult` that will be used
@@ -199,11 +189,10 @@ let Tab = class Tab extends ControlElement {
     render() {
         return html `
       ${this.icon ? html `<ef-icon icon=${this.icon} part="icon"></ef-icon>` : null}
-        <div part="label-container">
-          ${this.LabelTemplate}
-          ${this.SubLabelTemplate}
-          <slot @slotchange="${this.onSlotChange}"></slot>
-        </div>
+      <div part="label-container">
+        ${this.LabelTemplate} ${this.SubLabelTemplate}
+        <slot @slotchange="${this.onSlotChange}"></slot>
+      </div>
       ${this.CloseTemplate}
     `;
     }