@refinitiv-ui/elements 5.3.1-next.9 → 5.3.4

package/lib/overlay-menu/helpers/uuid.js

@@ -0,0 +1,13 @@
+import { uuid } from '@refinitiv-ui/utils';
+const id = uuid();
+let counter = 0;
+/**
+ * Get a semi-unique id
+ * This is probably the fastest way to do it
+ * @returns an id
+ */
+const getId = () => {
+    counter += 1;
+    return `${id}${counter}`;
+};
+export { getId };

package/lib/overlay-menu/index.d.ts

@@ -364,7 +364,7 @@ export declare class OverlayMenu extends Overlay {
      */
     protected render(): TemplateResult;
 }
-//# sourceMappingURL=index.d.ts.map
+
 declare global {
   interface HTMLElementTagNameMap {
     'ef-overlay-menu': OverlayMenu;

package/lib/overlay-menu/index.js

@@ -6,13 +6,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var OverlayMenu_1;
 import { html, css, customElement, property, ifDefined, WarningNotice } from '@refinitiv-ui/core';
-import { AnimationTaskRunner, CollectionComposer, uuid } from '@refinitiv-ui/utils';
+import { AnimationTaskRunner, CollectionComposer } from '@refinitiv-ui/utils';
 import '../icon';
 import '../item';
 import { Item } from '../item';
 import { Overlay } from '../overlay';
+import { getId } from './helpers/uuid';
 import { OpenedMenusManager } from './managers/menu-manager';
-import { VERSION } from '../version';
+import { VERSION } from '../';
 /**
  * Overlay that supports single-level and multi-level menus
  * @fires item-trigger - Dispatched when user clicks on item
@@ -812,7 +813,7 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
         menu.transitionStyle = this.transitionStyle;
         menu.noCancelOnOutsideClick = true;
         menu.compact = this.compact;
-        menu.id = uuid();
+        menu.id = getId();
         return menu;
     }
     /**
@@ -918,4 +919,3 @@ OverlayMenu = OverlayMenu_1 = __decorate([
     })
 ], OverlayMenu);
 export { OverlayMenu };
-//# sourceMappingURL=index.js.map

package/lib/overlay-menu/managers/menu-manager.d.ts

@@ -96,4 +96,3 @@ declare abstract class OpenedMenusManager {
     static clear(): void;
 }
 export { OpenedMenusManager };
-//# sourceMappingURL=menu-manager.d.ts.map

package/lib/overlay-menu/managers/menu-manager.js

@@ -238,4 +238,3 @@ OpenedMenusManager.registry = new Set();
 OpenedMenusManager.crossMenu = new Map();
 OpenedMenusManager.overlayStack = [];
 export { OpenedMenusManager };
-//# sourceMappingURL=menu-manager.js.map

package/lib/pagination/helpers/types.d.ts

@@ -7,4 +7,3 @@ export declare type PageInfo = {
     totalCount: number;
     pageSize: number;
 };
-//# sourceMappingURL=types.d.ts.map

package/lib/pagination/helpers/types.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=types.js.map

package/lib/pagination/index.d.ts

@@ -191,7 +191,7 @@ export declare class Pagination extends BasicElement {
      */
     protected render(): TemplateResult;
 }
-//# sourceMappingURL=index.d.ts.map
+
 declare global {
   interface HTMLElementTagNameMap {
     'ef-pagination': Pagination;

package/lib/pagination/index.js

@@ -11,7 +11,7 @@ import '../button';
 import '../button-bar';
 import '../layout';
 import '../text-field';
-import { VERSION } from '../version';
+import { VERSION } from '../';
 /**
  * Used to control and navigate through multiple pages
  * @fires page-changed - Fired when the `page` property is changed
@@ -398,4 +398,3 @@ Pagination = __decorate([
     })
 ], Pagination);
 export { Pagination };
-//# sourceMappingURL=index.js.map

package/lib/panel/index.d.ts

@@ -32,7 +32,7 @@ export declare class Panel extends BasicElement {
      */
     protected render(): TemplateResult;
 }
-//# sourceMappingURL=index.d.ts.map
+
 declare global {
   interface HTMLElementTagNameMap {
     'ef-panel': Panel;

package/lib/panel/index.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { BasicElement, html, customElement, property, css } from '@refinitiv-ui/core';
-import { VERSION } from '../version';
+import { VERSION } from '../';
 /**
  * A container for components.
  * It provides a standard background color and padding, depends on theme.
@@ -75,4 +75,3 @@ Panel = __decorate([
     })
 ], Panel);
 export { Panel };
-//# sourceMappingURL=index.js.map

package/lib/password-field/index.d.ts

@@ -124,7 +124,7 @@ export declare class PasswordField extends ControlElement {
      */
     private togglePasswordVisibility;
 }
-//# sourceMappingURL=index.d.ts.map
+
 declare global {
   interface HTMLElementTagNameMap {
     'ef-password-field': PasswordField;

package/lib/password-field/index.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { ControlElement, css, customElement, html, ifDefined, property, query } from '@refinitiv-ui/core';
 import { preload } from '../icon';
 import '../icon';
-import { VERSION } from '../version';
+import { VERSION } from '../';
 const hasChanged = (newVal, oldVal) => oldVal === undefined ? false : newVal !== oldVal;
 const isIE = (/Trident/g).test(navigator.userAgent);
 let isEyeOffPreloadRequested = false;
@@ -256,4 +256,3 @@ PasswordField = __decorate([
     })
 ], PasswordField);
 export { PasswordField };
-//# sourceMappingURL=index.js.map

package/lib/pill/index.d.ts

@@ -81,7 +81,7 @@ export declare class Pill extends ControlElement {
      */
     private clear;
 }
-//# sourceMappingURL=index.d.ts.map
+
 declare global {
   interface HTMLElementTagNameMap {
     'ef-pill': Pill;

package/lib/pill/index.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { ControlElement, css, customElement, html, property, query } from '@refinitiv-ui/core';
-import { VERSION } from '../version';
+import { VERSION } from '../';
 import '../icon';
 /**
  * A small button style component
@@ -160,4 +160,3 @@ Pill = __decorate([
     })
 ], Pill);
 export { Pill };
-//# sourceMappingURL=index.js.map

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

@@ -66,7 +66,7 @@ export declare class ProgressBar extends BasicElement {
      */
     protected render(): TemplateResult;
 }
-//# sourceMappingURL=index.d.ts.map
+
 declare global {
   interface HTMLElementTagNameMap {
     'ef-progress-bar': ProgressBar;

package/lib/progress-bar/index.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { css, html, property, customElement, styleMap, BasicElement } from '@refinitiv-ui/core';
-import { VERSION } from '../version';
+import { VERSION } from '../';
 /**
  * Data visualisation component,
  * showing a simple percentage bar.
@@ -157,4 +157,3 @@ ProgressBar = __decorate([
     })
 ], ProgressBar);
 export { ProgressBar };
-//# sourceMappingURL=index.js.map

package/lib/radio-button/index.d.ts

@@ -90,7 +90,7 @@ export declare class RadioButton extends ControlElement {
      */
     protected render(): TemplateResult;
 }
-//# sourceMappingURL=index.d.ts.map
+
 declare global {
   interface HTMLElementTagNameMap {
     'ef-radio-button': RadioButton;

package/lib/radio-button/index.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, css, customElement, property, ControlElement, query } from '@refinitiv-ui/core';
-import { VERSION } from '../version';
+import { VERSION } from '../';
 import { registerOverflowTooltip } from '../tooltip';
 import { applyRegistry, removeFromRegistry, getRadioGroup } from './radio-button-registry';
 /**
@@ -193,4 +193,3 @@ RadioButton = __decorate([
     })
 ], RadioButton);
 export { RadioButton };
-//# sourceMappingURL=index.js.map

package/lib/radio-button/radio-button-registry.d.ts

@@ -19,4 +19,3 @@ declare const applyRegistry: (radio: RadioButton) => void;
  */
 declare const getRadioGroup: (radio: RadioButton) => RadioButton[];
 export { applyRegistry, removeFromRegistry, getRadioGroup };
-//# sourceMappingURL=radio-button-registry.d.ts.map

package/lib/radio-button/radio-button-registry.js

@@ -38,4 +38,3 @@ const getRadioGroup = (radio) => {
     return registry.filter(radio => radio.name === groupName);
 };
 export { applyRegistry, removeFromRegistry, getRadioGroup };
-//# sourceMappingURL=radio-button-registry.js.map

package/lib/rating/index.d.ts

@@ -75,7 +75,7 @@ export declare class Rating extends BasicElement {
      */
     protected render(): TemplateResult;
 }
-//# sourceMappingURL=index.d.ts.map
+
 declare global {
   interface HTMLElementTagNameMap {
     'ef-rating': Rating;

package/lib/rating/index.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { BasicElement, html, css, customElement, property, queryAll, repeat } from '@refinitiv-ui/core';
-import { VERSION } from '../version';
+import { VERSION } from '../';
 /**
  * Star visualisation component that is generally used for ranking
  * @fires value-changed - Fired when the `value` changes.
@@ -156,4 +156,3 @@ Rating = __decorate([
     })
 ], Rating);
 export { Rating };
-//# sourceMappingURL=index.js.map

package/lib/search-field/index.d.ts

@@ -118,7 +118,7 @@ export declare class SearchField extends ControlElement {
      */
     private notifyIcon;
 }
-//# sourceMappingURL=index.d.ts.map
+
 declare global {
   interface HTMLElementTagNameMap {
     'ef-search-field': SearchField;

package/lib/search-field/index.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { ControlElement, css, customElement, html, ifDefined, property, query } from '@refinitiv-ui/core';
-import { VERSION } from '../version';
+import { VERSION } from '../';
 import '../icon';
 const hasChanged = (newVal, oldVal) => oldVal === undefined ? false : newVal !== oldVal;
 const isIE = (/Trident/g).test(navigator.userAgent);
@@ -252,4 +252,3 @@ SearchField = __decorate([
     })
 ], SearchField);
 export { SearchField };
-//# sourceMappingURL=index.js.map

package/lib/select/helpers/types.d.ts

@@ -1,4 +1,3 @@
 import { ItemData } from '../../item';
 export declare type SelectData = ItemData[];
 export declare type SelectDataItem = ItemData;
-//# sourceMappingURL=types.d.ts.map

package/lib/select/helpers/types.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=types.js.map

package/lib/select/index.d.ts

@@ -372,7 +372,7 @@ export declare class Select extends ControlElement implements MultiValue {
      */
     protected render(): TemplateResult;
 }
-//# sourceMappingURL=index.d.ts.map
+
 declare global {
   interface HTMLElementTagNameMap {
     'ef-select': Select;

package/lib/select/index.js

@@ -10,7 +10,7 @@ import { Item } from '../item';
 import '../item';
 import '../icon';
 import { CollectionComposer, TimeoutTaskRunner, AnimationTaskRunner } from '@refinitiv-ui/utils';
-import { VERSION } from '../version';
+import { VERSION } from '../';
 /**
  * Key direction
  */
@@ -940,4 +940,3 @@ Select = __decorate([
     })
 ], Select);
 export { Select };
-//# sourceMappingURL=index.js.map

package/lib/sidebar-layout/index.d.ts

@@ -53,7 +53,7 @@ export declare class SidebarLayout extends BasicElement {
      */
     protected updated(changedProperties: PropertyValues): void;
 }
-//# sourceMappingURL=index.d.ts.map
+
 declare global {
   interface HTMLElementTagNameMap {
     'ef-sidebar-layout': SidebarLayout;

package/lib/sidebar-layout/index.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { BasicElement, html, css, customElement, property, ifDefined, query } from '@refinitiv-ui/core';
 import '../layout';
-import { VERSION } from '../version';
+import { VERSION } from '../';
 /**
  * Provides an app layout with sidebar.
  * There are 4 sections that can be slotted a component in.
@@ -133,4 +133,3 @@ SidebarLayout = __decorate([
     })
 ], SidebarLayout);
 export { SidebarLayout };
-//# sourceMappingURL=index.js.map

package/lib/slider/index.d.ts

@@ -393,7 +393,7 @@ export declare class Slider extends ControlElement {
      */
     protected render(): TemplateResult;
 }
-//# sourceMappingURL=index.d.ts.map
+
 declare global {
   interface HTMLElementTagNameMap {
     'ef-slider': Slider;

package/lib/slider/index.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, css, ControlElement, customElement, property, styleMap, query, WarningNotice } from '@refinitiv-ui/core';
-import { VERSION } from '../version';
+import { VERSION } from '../';
 import '../number-field';
 var SliderNameType;
 (function (SliderNameType) {
@@ -1186,4 +1186,3 @@ Slider = __decorate([
     })
 ], Slider);
 export { Slider };
-//# sourceMappingURL=index.js.map

package/lib/sparkline/index.d.ts

@@ -91,7 +91,7 @@ export declare class Sparkline extends ResponsiveElement {
      */
     protected render(): TemplateResult;
 }
-//# sourceMappingURL=index.d.ts.map
+
 declare global {
   interface HTMLElementTagNameMap {
     'ef-sparkline': Sparkline;

package/lib/sparkline/index.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { css, customElement, property, ResponsiveElement, html, query } from '@refinitiv-ui/core';
 import { color } from '@refinitiv-ui/utils';
 import '@refinitiv-ui/browser-sparkline';
-import { VERSION } from '../version';
+import { VERSION } from '../';
 let Sparkline = class Sparkline extends ResponsiveElement {
     constructor() {
         super(...arguments);
@@ -186,4 +186,3 @@ Sparkline = __decorate([
     })
 ], Sparkline);
 export { Sparkline };
-//# sourceMappingURL=index.js.map

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

@@ -20,4 +20,3 @@ declare enum DefaultStyle {
     CENTER_LINE_OPACITY = "0.6"
 }
 export { Segment, DefaultStyle, CenterLineStyle, TextType };
-//# sourceMappingURL=const.d.ts.map

package/lib/swing-gauge/const.js

@@ -24,4 +24,3 @@ var DefaultStyle;
     DefaultStyle["CENTER_LINE_OPACITY"] = "0.6";
 })(DefaultStyle || (DefaultStyle = {}));
 export { Segment, DefaultStyle, CenterLineStyle, TextType };
-//# sourceMappingURL=const.js.map

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

@@ -6,4 +6,3 @@ declare const helpers: {
     textWidth: (drawCtx: CanvasRenderingContext2D, text: string, fontSize: number, fontFamily: string) => number;
 };
 export { helpers };
-//# sourceMappingURL=helpers.d.ts.map

package/lib/swing-gauge/helpers.js

@@ -54,7 +54,7 @@ const draw = (drawData, drawCtx, drawParams) => {
     ctx.lineWidth = style.strokeWidth;
     ctx.strokeStyle = style.borderColor;
     ctx.beginPath();
-    ctx.arc(data.width / 2, data.height, data.size * data.gaugeUpperBound - style.strokeWidth / 2, 0, 2 * Math.PI);
+    ctx.arc(data.width / 2, data.height, data.size * data.gaugeUpperBound, 0, 2 * Math.PI);
     ctx.strokeStyle = style.borderColor;
     ctx.stroke();
     ctx.beginPath();
@@ -103,4 +103,3 @@ const helpers = {
     textWidth
 };
 export { helpers };
-//# sourceMappingURL=helpers.js.map

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

@@ -72,7 +72,6 @@ export declare class SwingGauge extends ResponsiveElement {
     private pointPointerOffset;
     private primaryLineRadian;
     private secondaryLineRadian;
-    private linePointerOffsetOverflow;
     /**
     * Data requires to draw swing gauge
     */
@@ -85,7 +84,6 @@ export declare class SwingGauge extends ResponsiveElement {
     private size;
     private lineLength;
     private scale;
-    private overflowScale;
     /**
     * Current fill percentage
     */
@@ -95,6 +93,10 @@ export declare class SwingGauge extends ResponsiveElement {
     */
     private previousFillPercentage;
     /**
+    * This for keep line number of label for calculate new radius
+    */
+    private labelLineNumber;
+    /**
     * Get primary percentage
     */
     private get primaryPercentage();
@@ -276,7 +278,7 @@ export declare class SwingGauge extends ResponsiveElement {
     private get secondaryLegendTemplate();
     render(): TemplateResult;
 }
-//# sourceMappingURL=index.d.ts.map
+
 declare global {
   interface HTMLElementTagNameMap {
     'ef-swing-gauge': SwingGauge;

package/lib/swing-gauge/index.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { ResponsiveElement, css, customElement, property, html, styleMap, query, state, WarningNotice } from '@refinitiv-ui/core';
-import { VERSION } from '../version';
+import { VERSION } from '../';
 import '../canvas';
 import '../label';
 import { helpers as canvasHelper } from './helpers';
@@ -21,6 +21,8 @@ const PRIMARY_RADIAN = 1.25;
 const SECONDARY_RADIAN = 1.75;
 const LINE_POINTER_OFFSET = 0.3;
 const POINT_POINTER_OFFSET = 0.1;
+const DEFAULT_OFFSET = 0.05;
+const OVERFLOW_OFFSET = 0.08;
 // When either value is below this threshold, the label position changes
 const GAUGE_PERCENTAGE_THRESHOLD = 30;
 const GAUGE_LABEL_FONT_SCALE = 0.14;
@@ -76,7 +78,6 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
         this.pointPointerOffset = POINT_POINTER_OFFSET;
         this.primaryLineRadian = PRIMARY_RADIAN;
         this.secondaryLineRadian = SECONDARY_RADIAN;
-        this.linePointerOffsetOverflow = LINE_POINTER_OFFSET;
         /**
         * Data requires to draw swing gauge
         */
@@ -87,9 +88,8 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
         this.width = 0;
         this.height = 0;
         this.size = 0;
-        this.lineLength = 50;
+        this.lineLength = 60;
         this.scale = 1;
-        this.overflowScale = 0.1;
         /**
         * Current fill percentage
         */
@@ -98,6 +98,10 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
         * 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.labelLineNumber = 1;
         /**
          * Style for primary container
          */
@@ -394,49 +398,21 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
      * @returns swing-gauge data
      */
     getData() {
-        let primaryPosLine = this.getPositionStyle(Segment.PRIMARY, this.primaryLineRadian, this.linePointerOffset, 0);
+        // Recalculate radius to prevent container overflow
+        const gaugeHeight = this.size * this.gaugeHeightScale;
+        const containerHeight = this.labelLineNumber * MIN_LABEL_FONT_SIZE + MIN_VALUE_FONT_SIZE;
+        if (containerHeight > gaugeHeight) {
+            // The value of 'reverseScale' increases as the value of 'scale' decreases.
+            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.secondaryLineRadian = 3 - this.primaryLineRadian;
+        }
+        const primaryPosLine = this.getPositionStyle(Segment.PRIMARY, this.primaryLineRadian, this.linePointerOffset, 0);
         const primaryPosPoint = this.getPositionStyle(Segment.PRIMARY, PRIMARY_RADIAN, this.pointPointerOffset, 0);
-        let secondaryPosLine = this.getPositionStyle(Segment.SECONDARY, this.secondaryLineRadian, this.linePointerOffset, 0);
+        const secondaryPosLine = this.getPositionStyle(Segment.SECONDARY, this.secondaryLineRadian, this.linePointerOffset, 0);
         const secondaryPosPoint = this.getPositionStyle(Segment.SECONDARY, SECONDARY_RADIAN, this.pointPointerOffset, 0);
-        // Recalculate radian to prevent container overflow
-        let primaryHeight = 0;
-        if (this.primaryContainer.children[0]) {
-            primaryHeight += this.primaryContainer.children[0].offsetHeight;
-        }
-        if (this.primaryContainer.children[1]) {
-            primaryHeight += this.primaryContainer.children[1].offsetHeight;
-        }
-        const primarySpace = this.height - this.getValueFromStyle(primaryPosLine.top);
-        const primaryOverflow = primarySpace < primaryHeight && this.primaryPercentage >= GAUGE_PERCENTAGE_THRESHOLD && primarySpace > 0 && primaryHeight > 0;
-        let secondaryHeight = 0;
-        if (this.secondaryContainer.children[0]) {
-            secondaryHeight += this.secondaryContainer.children[0].offsetHeight;
-        }
-        if (this.secondaryContainer.children[1]) {
-            secondaryHeight += this.secondaryContainer.children[1].offsetHeight;
-        }
-        const secondarySpace = this.height - this.getValueFromStyle(secondaryPosLine.top);
-        const secondaryOverflow = secondarySpace < secondaryHeight && this.secondaryPercentage >= GAUGE_PERCENTAGE_THRESHOLD && secondarySpace > 0 && secondaryHeight > 0;
-        if (primaryOverflow || secondaryOverflow) {
-            let containerHeight = primaryHeight;
-            let containerHeightOverflow = primarySpace;
-            let containerWidth = (this.width / 2) - this.getValueFromStyle(primaryPosLine.left);
-            if ((!primaryOverflow && secondaryOverflow)
-                || (primaryOverflow && secondaryOverflow && secondaryHeight > primaryHeight)) {
-                containerHeight = secondaryHeight;
-                containerHeightOverflow = secondarySpace;
-                containerWidth = this.getValueFromStyle(secondaryPosLine.left) - (this.width / 2);
-            }
-            // Prevents container overflow
-            const oldRadius = Math.sqrt(Math.pow(containerHeightOverflow, 2) + Math.pow(containerWidth, 2));
-            const newRadius = Math.sqrt(Math.pow(containerHeight, 2) + Math.pow(containerWidth, 2));
-            this.linePointerOffset *= Math.pow(2, newRadius / oldRadius);
-            this.linePointerOffset = this.linePointerOffset > 4 ? 4 : this.linePointerOffset;
-            this.linePointerOffsetOverflow = this.linePointerOffset;
-            this.overflowScale = this.scale;
-            primaryPosLine = this.getPositionStyle(Segment.PRIMARY, this.primaryLineRadian, this.linePointerOffset, 0);
-            secondaryPosLine = this.getPositionStyle(Segment.SECONDARY, this.secondaryLineRadian, this.linePointerOffset, 0);
-        }
         return {
             width: this.width,
             height: this.height,
@@ -528,7 +504,7 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
             this.scale = bestHeight / this.canvas.height;
         }
         this.scale = this.scale < 0.1 ? 0.1 : this.scale;
-        this.lineLength = this.scale * lineLength < 50 ? 50 : this.scale * lineLength;
+        this.lineLength = this.scale * lineLength;
         this.gaugeWidthScale = this.scale * GAUGE_WIDTH_SCALE;
         this.gaugeHeightScale = this.scale * GAUGE_HEIGHT_SCALE;
         this.gaugeUpperBound = this.scale * GAUGE_UPPER_BOUND;
@@ -538,13 +514,13 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
         this.linePointerOffset = LINE_POINTER_OFFSET;
         this.pointPointerOffset = POINT_POINTER_OFFSET;
         if (this.scale < 1) {
-            const offset = 0.05 * (1 - this.scale);
+            // The value of 'reverseScale' increases as the value of 'scale' decreases.
+            // This mean when scale down the offset will grow up
+            const reverseScale = 1 - this.scale;
+            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));
-            if (this.scale <= this.overflowScale) {
-                this.linePointerOffset = this.linePointerOffsetOverflow;
-            }
         }
         this.primaryLineRadian = this.primaryLineRadian > 1.3 ? 1.3 : this.primaryLineRadian;
         this.secondaryLineRadian = this.primaryLineRadian > 1.7 ? 1.7 : this.secondaryLineRadian;
@@ -591,6 +567,9 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
         if (numberOfLines > maxLine) {
             numberOfLines = maxLine;
         }
+        if (textType === TextType.LABEL) {
+            this.labelLineNumber = numberOfLines;
+        }
         do {
             fontSize -= 1;
             if (fontSize < minFontSize) {
@@ -781,4 +760,3 @@ SwingGauge = __decorate([
     })
 ], SwingGauge);
 export { SwingGauge };
-//# sourceMappingURL=index.js.map

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

@@ -32,4 +32,3 @@ interface SwingGaugeCanvasSize {
     height: number;
 }
 export { SwingGaugeData, SwingGaugeStyle, SwingGaugeCanvasSize, SwingGaugeValueFormatter };
-//# sourceMappingURL=types.d.ts.map

package/lib/swing-gauge/types.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=types.js.map

package/lib/tab/index.d.ts

@@ -102,7 +102,7 @@ export declare class Tab extends ControlElement {
      */
     protected render(): TemplateResult;
 }
-//# sourceMappingURL=index.d.ts.map
+
 declare global {
   interface HTMLElementTagNameMap {
     'ef-tab': Tab;