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

package/lib/swing-gauge/index.js

@@ -1,764 +0,0 @@
-import { __decorate } from "tslib";
-import { ResponsiveElement, css, html, WarningNotice } 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 { query } from '@refinitiv-ui/core/lib/decorators/query.js';
-import { state } from '@refinitiv-ui/core/lib/decorators/state.js';
-import { styleMap } from '@refinitiv-ui/core/lib/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 { DefaultStyle, Segment, TextType } from './const.js';
-/**
- * Constants from swing-gauge default specs
- */
-const GAUGE_WIDTH_SCALE = 0.4;
-const GAUGE_HEIGHT_SCALE = 0.8;
-const GAUGE_UPPER_BOUND = GAUGE_HEIGHT_SCALE + GAUGE_WIDTH_SCALE / 2;
-const GAUGE_LOWER_BOUND = GAUGE_HEIGHT_SCALE - GAUGE_WIDTH_SCALE / 2;
-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;
-const GAUGE_VALUE_FONT_SCALE = 0.18;
-const MIN_LABEL_FONT_SIZE = 12;
-const MIN_VALUE_FONT_SIZE = 15;
-const MAX_LABEL_LINE = 3;
-const MAX_VALUE_LINE = 1;
-const MAX_LEGEND_LINE = 2;
-/**
- * Data visualisation showing the percentage between two values
- */
-let SwingGauge = class SwingGauge extends ResponsiveElement {
-    constructor() {
-        super(...arguments);
-        this._primaryValue = 0;
-        /**
-         * Primary label
-         */
-        this.primaryLabel = '';
-        this._secondaryValue = 0;
-        /**
-         * Secondary label
-         */
-        this.secondaryLabel = '';
-        /**
-         * Animation duration in milliseconds
-         */
-        this.duration = 1000;
-        /**
-        * Primary value legend
-        */
-        this.primaryLegend = '';
-        /**
-        * Secondary value legend
-        */
-        this.secondaryLegend = '';
-        /**
-         * Custom value formatter
-         * @type {SwingGaugeValueFormatter}
-         */
-        this.valueFormatter = this.defaultValueFormatter;
-        /**
-         * Controls swing gauge animations
-         */
-        this.onFrame = requestAnimationFrame.bind(window);
-        this.cancelFrame = cancelAnimationFrame.bind(window);
-        this.requestedAnimationID = 0;
-        this.gaugeWidthScale = GAUGE_WIDTH_SCALE;
-        this.gaugeHeightScale = GAUGE_HEIGHT_SCALE;
-        this.gaugeUpperBound = GAUGE_UPPER_BOUND;
-        this.gaugeLowerBound = GAUGE_LOWER_BOUND;
-        this.linePointerOffset = LINE_POINTER_OFFSET;
-        this.pointPointerOffset = POINT_POINTER_OFFSET;
-        this.primaryLineRadian = PRIMARY_RADIAN;
-        this.secondaryLineRadian = SECONDARY_RADIAN;
-        /**
-        * Data requires to draw swing gauge
-        */
-        this.data = null;
-        /**
-        * Internal sizes and scales
-        */
-        this.width = 0;
-        this.height = 0;
-        this.size = 0;
-        this.lineLength = 60;
-        this.scale = 1;
-        /**
-        * Current fill percentage
-        */
-        this.fillPercentage = 0;
-        /**
-        * 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
-         */
-        this.primaryContainerStyle = {};
-        /**
-         * Style for secondary container
-         */
-        this.secondaryContainerStyle = {};
-        /**
-         * Style for label
-         */
-        this.labelStyle = {};
-        /**
-         * Style for both values
-         */
-        this.valueStyle = {};
-    }
-    /**
-     * Element version number
-     * @returns version number
-     */
-    static get version() {
-        return VERSION;
-    }
-    /**
-     * 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;
-        height: 200px;
-      }
-      :host [part=container] {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-      }
-      :host [part=canvas-container] {
-        position: relative;
-        flex: 1;
-      }
-      :host [part=canvas] {
-        height: 100%;
-      }
-      :host [part=primary-legend], [part=secondary-legend] {
-        text-align: left;
-        display: flex;
-      }
-      :host [part=primary-label], [part=primary-value] {
-        text-align: left;
-      }
-      :host [part=secondary-label], [part=secondary-value] {
-        text-align: right;
-      }
-      :host [part=legend-container-outer] {
-        width: 60%;
-        margin: 0 auto;
-        text-align: center;
-      }
-      :host [part=legend-container-inner] {
-        max-width: 100%;
-        display: inline-block;
-      }
-      :host [part=primary-legend-symbol], [part=secondary-legend-symbol] {
-        display: inline-block;
-        flex-shrink: 0;
-      }
-      :host [part=primary-container] {
-        position: absolute;
-        text-align: left;
-      }
-      :host [part=secondary-container] {
-        position: absolute;
-        text-align: right;
-      }
-    `;
-    }
-    /**
-     * Primary value
-     * @param value primary value
-     */
-    set primaryValue(value) {
-        value = this.validateNumber(value, 'primary-value');
-        const oldValue = this._primaryValue;
-        if (oldValue !== value) {
-            this._primaryValue = value;
-            this.requestUpdate('primaryValue', oldValue);
-        }
-    }
-    get primaryValue() {
-        return this._primaryValue;
-    }
-    /**
-     * Secondary value
-     * @param value secondary value
-     */
-    set secondaryValue(value) {
-        value = this.validateNumber(value, 'secondary-value');
-        const oldValue = this._secondaryValue;
-        if (oldValue !== value) {
-            this._secondaryValue = value;
-            this.requestUpdate('secondaryValue', oldValue);
-        }
-    }
-    get secondaryValue() {
-        return this._secondaryValue;
-    }
-    /**
-    * Get primary percentage
-    */
-    get primaryPercentage() {
-        return this.getPercentage(this.primaryValue);
-    }
-    /**
-    * Get secondary percentage
-    */
-    get secondaryPercentage() {
-        return this.getPercentage(this.secondaryValue);
-    }
-    /**
-     * Check width and height are valid
-     * @returns if size is valid
-     */
-    get hasValidSize() {
-        return this.offsetWidth > 0 && this.offsetHeight > 0 && this.canvas.width > 0 && this.canvas.height > 0;
-    }
-    /**
-     * Get default value format
-     * @param value A value on each side of swing gauge
-     * @returns default value format
-     */
-    defaultValueFormatter(value) {
-        return `${value.toFixed(2)}%`;
-    }
-    /**
-     * Getter size of component
-     * @type {SwingGaugeCanvasSize}
-     * @returns return size of canvas
-     */
-    get canvasSize() {
-        return {
-            width: this.offsetWidth,
-            height: this.offsetHeight
-        };
-    }
-    /**
-     * Validate number
-     * @protected
-     * @param value number that want to validate
-     * @param propName name of property
-     * @returns {number} valid number
-     */
-    validateNumber(value, propName) {
-        if (typeof value === 'number' && !isNaN(value) && isFinite(value) && value >= 0) {
-            return value;
-        }
-        new WarningNotice(`${this.localName} : The specified value "${value}" of ${propName} property is not valid. Default value will be used instead.`).show();
-        return 0;
-    }
-    /**
-     * On update lifecycle
-     * @param changedProperties changed properties
-     * @returns {void}
-     */
-    update(changedProperties) {
-        super.update(changedProperties);
-        if (changedProperties.has('primaryValue') || changedProperties.has('secondaryValue')
-            || (this.primaryValue === 0 && this.secondaryValue === 0)) {
-            this.canvas.autoloop = true;
-            this.renderCanvas('frame');
-            this.animateCanvas();
-        }
-        if (changedProperties.has('primaryLabel') || changedProperties.has('secondaryLabel')) {
-            this.calculateLabelFontSize();
-        }
-        if (changedProperties.has('valueFormatter')) {
-            this.calculateValueFontSize();
-        }
-        if (changedProperties.has('primaryValue') || changedProperties.has('secondaryValue')
-            || changedProperties.has('primaryLabel') || changedProperties.has('secondaryLabel')
-            || changedProperties.has('valueFormatter')) {
-            this.updateGaugePositions();
-        }
-    }
-    /**
-     * Handles when component disconnected
-     * @returns {void}
-     */
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        if (this.requestedAnimationID) {
-            this.cancelFrame(this.requestedAnimationID);
-        }
-    }
-    /**
-     * Calls easing based on both left and right values
-     * @param primaryValue primary value
-     * @param secondaryValue secondary value
-     * @returns {void}
-     */
-    ease(primaryValue, secondaryValue) {
-        let to = 0.5;
-        let from = this.fillPercentage;
-        if (primaryValue > 0 || secondaryValue > 0) {
-            to = primaryValue / (primaryValue + secondaryValue);
-        }
-        // this for prevent gauge not render when 'to' and 'from' are 0
-        if (primaryValue === 0 && from === 0) {
-            from = 0.1;
-        }
-        this.easeTo(to, from, performance.now() + this.duration);
-    }
-    /**
-     * Eases the fill percentage
-     * @param to ease to value
-     * @param from ease from value
-     * @param time ease time
-     * @returns {void}
-     */
-    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;
-        if (this.fillPercentage !== to) {
-            this.cancelFrame(this.requestedAnimationID);
-            this.requestedAnimationID = this.onFrame(() => this.easeTo(to, from, time));
-        }
-        else {
-            this.canvas.autoloop = false;
-        }
-        this.renderCanvas('frame', true);
-    }
-    /**
-     * Restart the animation, re-render the canvas
-     * @returns {void}
-     */
-    animateCanvas() {
-        this.ease(this.primaryValue, this.secondaryValue);
-    }
-    /**
-     * Render chart
-     * @param onDraw drawing type
-     * @param isFrameUpdated Optional called by on frame event
-     * @returns {void}
-     */
-    renderCanvas(onDraw, isFrameUpdated) {
-        const percentageChanged = this.previousFillPercentage !== this.fillPercentage;
-        const canRender = this.hasValidSize && percentageChanged;
-        if ((isFrameUpdated && !canRender) || !this.hasValidSize) {
-            return;
-        }
-        this.width = this.canvas.width;
-        this.height = this.canvas.height;
-        const min = this.width > this.height ? this.height : this.width;
-        const max = this.width > this.height ? this.width : this.height;
-        this.size = Math.floor(max / this.scale < min ? max / this.scale : min);
-        const canvasSize = { width: this.width, height: this.height };
-        // Prevent draw frame unnecessary recalculate position and draw data
-        if (!isFrameUpdated) {
-            this.data = this.getData();
-        }
-        else if (this.data !== null) {
-            this.data.fillPercentage = this.fillPercentage;
-        }
-        const clear = () => {
-            if (!this.canvas.ctx) {
-                return;
-            }
-            canvasHelper.clear(canvasSize, this.canvas.ctx);
-        };
-        this.canvas.addEventListener(onDraw, clear, { once: true });
-        const draw = () => {
-            if (!this.canvas.ctx) {
-                return;
-            }
-            canvasHelper.draw(this.data === null ? this.getData() : this.data, this.canvas.ctx, {
-                strokeWidth: Math.ceil(this.scale * this.size * 0.005),
-                primaryColor: this.getComputedVariable('--primary-color', DefaultStyle.PRIMARY_GAUGE_COLOR),
-                secondaryColor: this.getComputedVariable('--secondary-color', DefaultStyle.SECONDARY_GAUGE_COLOR),
-                borderColor: this.getComputedVariable('--border-color', DefaultStyle.BOREDER_COLOR),
-                centerline: `${this.getComputedVariable('--center-line', DefaultStyle.CENTER_LINE_STYLE)}`.trim(),
-                centerlineOpacity: this.getComputedVariable('--center-line-opacity', DefaultStyle.CENTER_LINE_OPACITY),
-                centerlineColor: this.getComputedVariable('--center-line-color', DefaultStyle.CENTER_LINE_COLOR)
-            });
-        };
-        this.canvas.addEventListener(onDraw, draw, { once: true });
-        // Set this for comparison when deciding if we should paint
-        this.previousFillPercentage = this.fillPercentage;
-    }
-    /**
-     * Get computed swing-gauge data for drawing
-     * @returns swing-gauge data
-     */
-    getData() {
-        // 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);
-        const secondaryPosLine = this.getPositionStyle(Segment.SECONDARY, this.secondaryLineRadian, this.linePointerOffset, 0);
-        const secondaryPosPoint = this.getPositionStyle(Segment.SECONDARY, SECONDARY_RADIAN, this.pointPointerOffset, 0);
-        return {
-            width: this.width,
-            height: this.height,
-            size: this.size,
-            fillPercentage: this.fillPercentage,
-            gaugeWidthScale: this.gaugeWidthScale,
-            gaugeHeightScale: this.gaugeHeightScale,
-            gaugeUpperBound: this.gaugeUpperBound,
-            gaugeLowerBound: this.gaugeLowerBound,
-            lineLength: this.lineLength,
-            offsetLeftPrimaryLine: this.getValueFromStyle(primaryPosLine.left),
-            offsetTopPrimaryLine: this.getValueFromStyle(primaryPosLine.top),
-            offsetLeftPrimaryPoint: this.getValueFromStyle(primaryPosPoint.left),
-            offsetTopPrimaryPoint: this.getValueFromStyle(primaryPosPoint.top),
-            offsetLeftSecondaryLine: this.getValueFromStyle(secondaryPosLine.left),
-            offsetTopSecondaryLine: this.getValueFromStyle(secondaryPosLine.top),
-            offsetLeftSecondaryPoint: this.getValueFromStyle(secondaryPosPoint.left),
-            offsetTopSecondaryPoint: this.getValueFromStyle(secondaryPosPoint.top)
-        };
-    }
-    /**
-     * Get number from CSS declaration value
-     * @param styleValue value of CSS declaration
-     * @returns number without CSS unit
-     */
-    getValueFromStyle(styleValue) {
-        return Number(styleValue === null || styleValue === void 0 ? void 0 : styleValue.replace('px', ''));
-    }
-    /**
-     * Compute and update style of containers and labels
-     * @returns {void}
-     */
-    updateGaugePositions() {
-        if (!this.hasValidSize) {
-            return;
-        }
-        const primaryPosition = this.getPositionStyle(Segment.PRIMARY, this.primaryLineRadian, this.linePointerOffset, -this.lineLength);
-        const secondaryPosition = this.getPositionStyle(Segment.SECONDARY, this.secondaryLineRadian, this.linePointerOffset, 0);
-        this.primaryContainerStyle = Object.assign({ width: `${this.lineLength}px` }, primaryPosition);
-        this.secondaryContainerStyle = Object.assign({ width: `${this.lineLength}px` }, secondaryPosition);
-        // position container over line pointer
-        if (this.primaryPercentage < GAUGE_PERCENTAGE_THRESHOLD) {
-            delete this.primaryContainerStyle.top;
-            this.primaryContainerStyle.bottom = '5px';
-        }
-        if (this.secondaryPercentage < GAUGE_PERCENTAGE_THRESHOLD || this.secondaryValue === 0) {
-            delete this.secondaryContainerStyle.top;
-            this.secondaryContainerStyle.bottom = '5px';
-        }
-    }
-    /**
-     * Compute position style
-     * @param segment primary or secondary
-     * @param maxRadian max radian
-     * @param radiusOffset radius offset from gauge upper bound
-     * @param offset line length offset
-     * @returns position style
-     */
-    getPositionStyle(segment, maxRadian, radiusOffset, offset) {
-        let radius = this.size * (1 + radiusOffset) * this.scale;
-        let radianValue;
-        if (segment === Segment.PRIMARY) {
-            radianValue = this.primaryPercentage >= GAUGE_PERCENTAGE_THRESHOLD ? maxRadian : 1;
-        }
-        else {
-            radianValue = this.secondaryPercentage >= GAUGE_PERCENTAGE_THRESHOLD ? maxRadian : 0;
-        }
-        // reduce line length when line is on the bottom of canvas
-        if ((radianValue === 1 || radianValue === 0) && radiusOffset > 0.1) {
-            radius = this.size * (1 + this.pointPointerOffset) * this.scale;
-        }
-        const radian = radianValue * Math.PI;
-        const left = `${Math.round(this.width / 2 + Math.cos(radian) * radius) + offset}px`;
-        const top = `${Math.round(this.height + Math.sin(radian) * radius)}px`;
-        return { left: left, top: top };
-    }
-    /**
-     * Scales canvas variables making it responsive before painting
-     * @returns {void}
-     */
-    calculateCanvasSize() {
-        const lineLength = this.canvas.height * 0.75;
-        const bestWidth = 2 * (GAUGE_UPPER_BOUND + LINE_POINTER_OFFSET) * this.canvas.height + 2 * lineLength;
-        const ratio = bestWidth / this.canvas.height;
-        this.scale = 1;
-        if (this.canvas.width < bestWidth) {
-            const width = this.canvas.width;
-            const bestHeight = width / ratio;
-            this.scale = bestHeight / this.canvas.height;
-        }
-        this.scale = this.scale < 0.1 ? 0.1 : this.scale;
-        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;
-        this.gaugeLowerBound = this.scale * GAUGE_LOWER_BOUND;
-        this.primaryLineRadian = PRIMARY_RADIAN;
-        this.secondaryLineRadian = SECONDARY_RADIAN;
-        this.linePointerOffset = LINE_POINTER_OFFSET;
-        this.pointPointerOffset = POINT_POINTER_OFFSET;
-        if (this.scale < 1) {
-            // 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));
-        }
-        this.primaryLineRadian = this.primaryLineRadian > 1.3 ? 1.3 : this.primaryLineRadian;
-        this.secondaryLineRadian = this.primaryLineRadian > 1.7 ? 1.7 : this.secondaryLineRadian;
-    }
-    /**
-     * Calculate and update font sizes on canvas
-     * @returns {void}
-     */
-    updateFontSize() {
-        this.calculateLabelFontSize();
-        this.calculateValueFontSize();
-    }
-    /**
-     * Calculate label or value font size
-     * @param ctx canvas context
-     * @param textType text type
-     * @returns {number} font size
-     */
-    calculateFontSize(ctx, textType) {
-        let maxLine;
-        let minFontSize;
-        let widthScale;
-        let fontSize;
-        let longerLabel;
-        if (textType === TextType.LABEL) {
-            maxLine = MAX_LABEL_LINE;
-            minFontSize = MIN_LABEL_FONT_SIZE;
-            // buffer for word wrap
-            widthScale = 1.1;
-            longerLabel = this.primaryLabel.length > this.secondaryLabel.length ? this.primaryLabel : this.secondaryLabel;
-            fontSize = Math.ceil(this.scale * this.canvas.height * GAUGE_LABEL_FONT_SCALE);
-        }
-        else {
-            maxLine = MAX_VALUE_LINE;
-            minFontSize = MIN_VALUE_FONT_SIZE;
-            widthScale = 1;
-            const primaryValue = String(this.valueFormatter(this.primaryPercentage, this.primaryValue));
-            const secondaryValue = String(this.valueFormatter(this.secondaryPercentage, this.secondaryValue));
-            longerLabel = primaryValue.length > secondaryValue.length ? primaryValue : secondaryValue;
-            fontSize = Math.ceil(this.scale * this.canvas.height * GAUGE_VALUE_FONT_SCALE);
-        }
-        let textWidth = canvasHelper.textWidth(ctx, longerLabel, fontSize, getComputedStyle(this).fontFamily);
-        let numberOfLines = Math.ceil(textWidth / this.lineLength);
-        if (numberOfLines > maxLine) {
-            numberOfLines = maxLine;
-        }
-        if (textType === TextType.LABEL) {
-            this.labelLineNumber = numberOfLines;
-        }
-        do {
-            fontSize -= 1;
-            if (fontSize < minFontSize) {
-                fontSize = minFontSize;
-                break;
-            }
-            textWidth = canvasHelper.textWidth(ctx, longerLabel, fontSize, getComputedStyle(this).fontFamily);
-        } while (textWidth * widthScale > this.lineLength * numberOfLines);
-        return fontSize;
-    }
-    /**
-     * Update label font size
-     * @returns {void}
-     */
-    calculateLabelFontSize() {
-        if (!this.canvas.ctx) {
-            return;
-        }
-        this.labelStyle = { maxWidth: `${this.lineLength}px`, fontSize: `${this.calculateFontSize(this.canvas.ctx, TextType.LABEL)}px` };
-    }
-    /**
-     * Update value font size
-     * @returns {void}
-     */
-    calculateValueFontSize() {
-        if (!this.canvas.ctx) {
-            return;
-        }
-        this.valueStyle = { maxWidth: `${this.lineLength}px`, fontSize: `${this.calculateFontSize(this.canvas.ctx, TextType.VALUE)}px` };
-    }
-    /**
-     * Compute percentage of value
-     * @param value value of primary or secondary
-     * @returns percentage of value
-     */
-    getPercentage(value) {
-        if (value === 0) {
-            return 0;
-        }
-        return 100 * value / (this.primaryValue + this.secondaryValue);
-    }
-    /**
-     * Handles canvas resize
-     * @returns {void}
-     */
-    onCanvasResize() {
-        this.calculateCanvasSize();
-        this.updateFontSize();
-        this.renderCanvas('resize');
-        this.updateGaugePositions();
-    }
-    /**
-     * Renders legend container
-     * @returns {TemplateResult} Legend template or null
-     */
-    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>`
-            : null;
-    }
-    /**
-     * Renders primary legend if property present
-     * @returns {TemplateResult} Primary legend template or null
-     */
-    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>`
-            : null;
-    }
-    /**
-     * Renders secondary legend if property present
-     * @returns {TemplateResult} Secondary legend template or null
-     */
-    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>`
-            : null;
-    }
-    render() {
-        return html `
-      <div part="container">
-        ${this.legendTemplate}
-        <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>`
-            : null}
-            <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>`
-            : null}
-            <ef-label
-              part="secondary-value"
-              truncate=""
-              line-clamp="1"
-              style=${styleMap(this.valueStyle)}
-              >${this.valueFormatter(this.secondaryPercentage, this.secondaryValue)}</ef-label
-            >
-          </div>
-        </div>
-      </div>
-    `;
-    }
-};
-__decorate([
-    property({ attribute: 'primary-value', type: Number })
-], SwingGauge.prototype, "primaryValue", null);
-__decorate([
-    property({ attribute: 'primary-label', type: String })
-], SwingGauge.prototype, "primaryLabel", void 0);
-__decorate([
-    property({ attribute: 'secondary-value', type: Number })
-], SwingGauge.prototype, "secondaryValue", null);
-__decorate([
-    property({ attribute: 'secondary-label', type: String })
-], SwingGauge.prototype, "secondaryLabel", void 0);
-__decorate([
-    property({ type: Number })
-], SwingGauge.prototype, "duration", void 0);
-__decorate([
-    property({ type: String, reflect: true, attribute: 'primary-legend' })
-], SwingGauge.prototype, "primaryLegend", void 0);
-__decorate([
-    property({ type: String, reflect: true, attribute: 'secondary-legend' })
-], SwingGauge.prototype, "secondaryLegend", void 0);
-__decorate([
-    property({ type: Function, attribute: false })
-], SwingGauge.prototype, "valueFormatter", void 0);
-__decorate([
-    state()
-], SwingGauge.prototype, "primaryContainerStyle", void 0);
-__decorate([
-    state()
-], SwingGauge.prototype, "secondaryContainerStyle", void 0);
-__decorate([
-    state()
-], SwingGauge.prototype, "labelStyle", void 0);
-__decorate([
-    state()
-], SwingGauge.prototype, "valueStyle", void 0);
-__decorate([
-    query('[part=primary-container]', true)
-], SwingGauge.prototype, "primaryContainer", void 0);
-__decorate([
-    query('[part=secondary-container]', true)
-], SwingGauge.prototype, "secondaryContainer", void 0);
-__decorate([
-    query('[part=legend-container-outer]')
-], SwingGauge.prototype, "legendContainer", void 0);
-__decorate([
-    query('[part=canvas]', true)
-], SwingGauge.prototype, "canvas", void 0);
-SwingGauge = __decorate([
-    customElement('ef-swing-gauge', {
-        alias: 'sapphire-swing-gauge'
-    })
-], SwingGauge);
-export { SwingGauge };