@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
792 lines (787 loc) • 51.3 kB
JavaScript
import { r as registerInstance, h, g as getElement, c as createEvent, H as Host } from './index-aa8afca4.js';
import { g as guid } from './guid-09142681.js';
import { g as getKey } from './key-ec82f942.js';
import { h as hasLabel } from './dom-466af3c7.js';
/**
* Math.sign not supported in IE
*/
function sign(x) {
return x < 0 ? -1 : 1;
}
/**
* Calculate slope of the tangents
* uses Steffen interpolation as it's monotonic
* http://jrwalsh1.github.io/posts/interpolations/
*/
function slope(p0, p1, p2) {
const dx = p1[0] - p0[0];
const dx1 = p2[0] - p1[0];
const dy = p1[1] - p0[1];
const dy1 = p2[1] - p1[1];
const m = dy / (dx || (dx1 < 0 && 0));
const m1 = dy1 / (dx1 || (dx < 0 && 0));
const p = (m * dx1 + m1 * dx) / (dx + dx1);
return (sign(m) + sign(m1)) * Math.min(Math.abs(m), Math.abs(m1), 0.5 * Math.abs(p)) || 0;
}
/**
* Calculate slope for just one tangent (single-sided)
*/
function slopeSingle(p0, p1, m) {
const dx = p1[0] - p0[0];
const dy = p1[1] - p0[1];
return dx ? ((3 * dy) / dx - m) / 2 : m;
}
/**
* Given two points and their tangent slopes,
* calculate the bezier handle coordinates and return draw command.
*
* Translates Hermite Spline to Beziér curve:
* stackoverflow.com/questions/42574940/
*/
function bezier(p0, p1, m0, m1, t) {
const [x0, y0] = p0;
const [x1, y1] = p1;
const dx = (x1 - x0) / 3;
const h1 = t([x0 + dx, y0 + dx * m0]).join(",");
const h2 = t([x1 - dx, y1 - dx * m1]).join(",");
const p = t([x1, y1]).join(",");
return `C ${h1} ${h2} ${p}`;
}
/**
* Generate a function which will translate a point
* from the data coordinate space to svg viewbox oriented pixels
*/
function translate({ width, height, min, max }) {
const rangeX = max[0] - min[0];
const rangeY = max[1] - min[1];
return (point) => {
const x = (point[0] / rangeX) * width;
const y = height - (point[1] / rangeY) * height;
return [x, y];
};
}
/**
* Get the min and max values from the dataset
*/
function range(data) {
const [startX, startY] = data[0];
const min = [startX, startY];
const max = [startX, startY];
return data.reduce(({ min, max }, [x, y]) => ({
min: [Math.min(min[0], x), Math.min(min[1], y)],
max: [Math.max(max[0], x), Math.max(max[1], y)]
}), { min, max });
}
/**
* Generate drawing commands for an area graph
* returns a string can can be passed directly to a path element's `d` attribute
*/
function area({ data, min, max, t }) {
if (data.length === 0) {
return "";
}
// important points for beginning and ending the path
const [startX, startY] = t(data[0]);
const [minX, minY] = t(min);
const [maxX] = t(max);
// keep track of previous slope/points
let m;
let p0;
let p1;
// iterate over data points, calculating command for each
const commands = data.reduce((acc, point, i) => {
p0 = data[i - 2];
p1 = data[i - 1];
if (i > 1) {
const m1 = slope(p0, p1, point);
const m0 = m === undefined ? slopeSingle(p0, p1, m1) : m;
const command = bezier(p0, p1, m0, m1, t);
m = m1;
return `${acc} ${command}`;
}
return acc;
}, `M ${minX},${minY} L ${minX},${startY} L ${startX},${startY}`);
// close the path
const last = data[data.length - 1];
const end = bezier(p1, last, m, slopeSingle(p1, last, m), t);
return `${commands} ${end} L ${maxX},${minY} Z`;
}
const calciteGraphCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}.svg{fill:currentColor;stroke:transparent;margin:0;padding:0;display:block}";
const CalciteGraph = class {
constructor(hostRef) {
registerInstance(this, hostRef);
//--------------------------------------------------------------------------
//
// Properties
//
//--------------------------------------------------------------------------
/**
* Array of tuples describing a single data point ([x, y])
* These data points should be sorted by x-axis value
*/
this.data = [];
/** Width of graph in pixels*/
this.width = 300;
/** Width of graph in pixels*/
this.height = 100;
//--------------------------------------------------------------------------
//
// Private State/Props
//
//--------------------------------------------------------------------------
this.maskId = `calcite-graph-mask-${guid()}`;
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
render() {
const { data, width, height, highlightMax, highlightMin } = this;
const id = this.maskId;
// if we have no data, return empty svg
if (!data || data.length === 0) {
return (h("svg", { class: "svg", height: height, preserveAspectRatio: "none", viewBox: `0 0 ${width} ${height}`, width: width }));
}
const { min, max } = range(data);
const t = translate({ min, max, width, height });
const [hMinX] = t([highlightMin, max[1]]);
const [hMaxX] = t([highlightMax, max[1]]);
const areaPath = area({ data, min, max, t });
return (h("svg", { class: "svg", height: height, preserveAspectRatio: "none", viewBox: `0 0 ${width} ${height}`, width: width }, highlightMin !== undefined ? (h("svg", { class: "svg", height: height, preserveAspectRatio: "none", viewBox: `0 0 ${width} ${height}`, width: width }, h("mask", { height: "100%", id: `${id}1`, width: "100%", x: "0%", y: "0%" }, h("path", { d: `
M 0,0
L ${hMinX - 1},0
L ${hMinX - 1},${height}
L 0,${height}
Z
`, fill: "white" })), h("mask", { height: "100%", id: `${id}2`, width: "100%", x: "0%", y: "0%" }, h("path", { d: `
M ${hMinX + 1},0
L ${hMaxX - 1},0
L ${hMaxX - 1},${height}
L ${hMinX + 1}, ${height}
Z
`, fill: "white" })), h("mask", { height: "100%", id: `${id}3`, width: "100%", x: "0%", y: "0%" }, h("path", { d: `
M ${hMaxX + 1},0
L ${width},0
L ${width},${height}
L ${hMaxX + 1}, ${height}
Z
`, fill: "white" })), h("path", { class: "graph-path", d: areaPath, mask: `url(#${id}1)` }), h("path", { class: "graph-path--highlight", d: areaPath, mask: `url(#${id}2)` }), h("path", { class: "graph-path", d: areaPath, mask: `url(#${id}3)` }))) : (h("path", { class: "graph-path", d: areaPath }))));
}
get el() { return getElement(this); }
};
CalciteGraph.style = calciteGraphCss;
const calciteSliderCss = "@charset \"UTF-8\";@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:block}.container{display:block;padding:7px 0;margin:7px 0;position:relative}:host([disabled]){opacity:var(--calcite-ui-opacity-disabled);pointer-events:none}:host([disabled]) .track__range,:host([disabled]) .tick--active{background-color:var(--calcite-ui-text-3)}:host([disabled]) .graph .graph-path--highlight{fill:var(--calcite-ui-text-3)}:host([label-handles]) .container,:host([precise]:not([precise=false])) .container{margin-top:21px}:host([label-ticks]),:host([precise]:not([precise=false])) .container--range{margin-bottom:21px}:host([precise]:not([precise=false])[label-handles]) .container{margin-top:35px}:host([precise]:not([precise=false])[label-handles]) .container--range{margin-bottom:35px}.thumb{position:absolute;border:none;background:transparent;cursor:pointer;font-family:inherit;z-index:2;outline:none;padding:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-webkit-transform:translate(7px, -8px);transform:translate(7px, -8px)}.thumb .handle__label{font-size:0.75rem;line-height:1.5;font-weight:500;line-height:1;color:var(--calcite-ui-text-2);margin-bottom:5px}.thumb .handle__label.static,.thumb .handle__label.transformed{opacity:0;position:absolute;top:0;bottom:0}.thumb .handle__label--minValue.hyphen::after{content:\"—\";display:inline-block;width:1em}.thumb .handle{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;height:14px;width:14px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:100%;background-color:var(--calcite-ui-foreground-1);-webkit-box-shadow:0 0 0 2px var(--calcite-ui-text-3) inset;box-shadow:0 0 0 2px var(--calcite-ui-text-3) inset;-webkit-transition:border 0.25s ease, background-color 0.25s ease, -webkit-box-shadow 0.25s ease;transition:border 0.25s ease, background-color 0.25s ease, -webkit-box-shadow 0.25s ease;transition:border 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;transition:border 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease, -webkit-box-shadow 0.25s ease}.thumb .handle-extension{width:2px;height:7px;background-color:var(--calcite-ui-text-3)}.thumb:hover .handle{-webkit-box-shadow:0 0 0 3px var(--calcite-ui-brand) inset;box-shadow:0 0 0 3px var(--calcite-ui-brand) inset}.thumb:hover .handle-extension{background-color:var(--calcite-ui-brand)}.thumb:focus .handle{outline:2px solid var(--calcite-ui-brand);outline-offset:2px;outline-offset:2px}.thumb:focus .handle-extension{background-color:var(--calcite-ui-brand)}.thumb--minValue{-webkit-transform:translate(-7px, -8px);transform:translate(-7px, -8px)}:host([label-handles]) .thumb{-webkit-transform:translate(50%, -25px);transform:translate(50%, -25px)}:host([label-handles]) .thumb--minValue{-webkit-transform:translate(-50%, -25px);transform:translate(-50%, -25px)}:host([has-histogram][label-handles]) .thumb{-webkit-transform:translate(50%, -8px);transform:translate(50%, -8px)}:host([has-histogram][label-handles]) .thumb .handle__label{margin-bottom:unset;margin-top:5px}:host([has-histogram][label-handles]) .thumb--minValue{-webkit-transform:translate(-50%, -8px);transform:translate(-50%, -8px)}:host([precise]:not([precise=false])) .thumb{-webkit-transform:translate(7px, -21px);transform:translate(7px, -21px)}:host([precise]:not([precise=false])) .thumb--minValue{-webkit-transform:translate(-7px, -2px);transform:translate(-7px, -2px)}:host([precise]:not([precise=false])) .thumb--minValue .handle__label{margin-bottom:unset;margin-top:5px}:host([has-histogram][precise]:not([precise=false])) .thumb{-webkit-transform:translate(7px, -2px);transform:translate(7px, -2px)}:host([has-histogram][precise]:not([precise=false])) .thumb--minValue{-webkit-transform:translate(-50%, -2px);transform:translate(-50%, -2px)}:host([ticks][precise]:not([precise=false])) .thumb{-webkit-transform:translate(7px, -20px);transform:translate(7px, -20px)}:host([ticks][precise]:not([precise=false])) .thumb--minValue{-webkit-transform:translate(-7px, -3px);transform:translate(-7px, -3px)}:host([has-histogram][ticks][precise]:not([precise=false])) .thumb{-webkit-transform:translate(7px, -3px);transform:translate(7px, -3px)}:host([has-histogram][ticks][precise]:not([precise=false])) .thumb--minValue{-webkit-transform:translate(-50%, -3px);transform:translate(-50%, -3px)}:host([label-handles][precise]:not([precise=false])) .thumb{-webkit-transform:translate(50%, -38px);transform:translate(50%, -38px)}:host([label-handles][precise]:not([precise=false])) .thumb--minValue{-webkit-transform:translate(-50%, -2px);transform:translate(-50%, -2px)}:host([has-histogram][label-handles][precise]:not([precise=false])) .thumb{-webkit-transform:translate(50%, -2px);transform:translate(50%, -2px)}:host([has-histogram][label-handles][precise]:not([precise=false])) .thumb--minValue{-webkit-transform:translate(-50%, -2px);transform:translate(-50%, -2px)}:host([ticks][label-handles][precise]:not([precise=false])) .thumb{-webkit-transform:translate(50%, -37px);transform:translate(50%, -37px)}:host([ticks][label-handles][precise]:not([precise=false])) .thumb--minValue{-webkit-transform:translate(-50%, -3px);transform:translate(-50%, -3px)}:host([has-histogram][ticks][label-handles][precise]:not([precise=false])) .thumb{-webkit-transform:translate(50%, -3px);transform:translate(50%, -3px)}:host([has-histogram][ticks][label-handles][precise]:not([precise=false])) .thumb--minValue{-webkit-transform:translate(-50%, -3px);transform:translate(-50%, -3px)}.thumb:focus,.thumb--active{z-index:3}.thumb:focus .handle,.thumb--active .handle{background-color:var(--calcite-ui-brand);-webkit-box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16)}.thumb:hover.thumb--precise:after,.thumb:focus.thumb--precise:after,.thumb--active.thumb--precise:after{background-color:var(--calcite-ui-brand)}.track{height:2px;border-radius:0;z-index:1;background-color:var(--calcite-ui-border-2);-webkit-transition:all 250ms ease-in;transition:all 250ms ease-in;position:relative}.track__range{position:absolute;top:0;height:2px;background-color:var(--calcite-ui-brand)}.container--range .track__range:hover{cursor:ew-resize}.container--range .track__range:after{content:\"\";position:absolute;top:-5px;width:100%;height:14px}.tick{position:absolute;top:-2px;width:2px;height:4px;left:var(--calcite-ui-border-1-offset);margin-left:-2px;border:1px solid var(--calcite-ui-foreground-1);background-color:var(--calcite-ui-border-1)}.tick--active{background-color:var(--calcite-ui-brand)}.tick__label{position:absolute;font-size:0.75rem;line-height:1.5;font-weight:500;color:var(--calcite-ui-text-2);width:4em;margin:14px -2em;text-align:center;display:block;pointer-events:none}.tick__label--min{left:0;margin:14px -3px;text-align:left;-webkit-transition:opacity 150ms;transition:opacity 150ms}.tick__label--max{left:unset;right:0;margin:14px -3px;text-align:right;-webkit-transition:opacity 50ms;transition:opacity 50ms}:host([has-histogram][label-handles]) .tick__label--min,:host([has-histogram][label-handles]) .tick__label--max{margin:6px -3px;font-weight:300;color:var(--calcite-ui-text-3)}:host([has-histogram][precise]:not([precise=false])) .tick__label--min,:host([has-histogram][precise]:not([precise=false])) .tick__label--max{margin:6px -3px;font-weight:300;color:var(--calcite-ui-text-3)}.graph{width:100%;height:48px;position:relative;color:var(--calcite-ui-foreground-2)}.graph svg{position:absolute;width:100%;height:48px}.graph .graph-path--highlight{fill:var(--calcite-ui-brand);opacity:0.25}";
const CalciteSlider = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.calciteSliderChange = createEvent(this, "calciteSliderChange", 7);
this.calciteSliderUpdate = createEvent(this, "calciteSliderUpdate", 7);
//--------------------------------------------------------------------------
//
// Properties
//
//--------------------------------------------------------------------------
/** Disable and gray out the slider */
this.disabled = false;
/** Minimum selectable value */
this.min = 0;
/** Maximum selectable value */
this.max = 100;
/** Currently selected number (if single select) */
this.value = null;
/** When true, enables snap selection along the step interval */
this.snap = false;
/** Interval to move on up/down keys */
this.step = 1;
/** Indicates if a histogram is present */
this.hasHistogram = false;
//--------------------------------------------------------------------------
//
// Private State/Props
//
//--------------------------------------------------------------------------
/** @internal */
this.guid = `calcite-slider-${guid()}`;
/** @internal */
this.isRange = false;
/** @internal */
this.tickValues = [];
/** @internal */
this.activeProp = "value";
/** @internal */
this.minMaxValueRange = null;
/** @internal */
this.minValueDragRange = null;
/** @internal */
this.maxValueDragRange = null;
}
histogramWatcher(newHistogram) {
this.hasHistogram = !!newHistogram;
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
componentWillLoad() {
this.isRange = !!(this.maxValue || this.maxValue === 0);
this.tickValues = this.generateTickValues();
this.value = this.bound(this.value);
if (this.snap) {
this.value = this.getClosestStep(this.value);
}
if (this.histogram) {
this.hasHistogram = true;
}
this.emitChange();
}
componentDidRender() {
if (this.labelHandles) {
this.adjustHostObscuredHandleLabel("value");
if (this.isRange) {
this.adjustHostObscuredHandleLabel("minValue");
if (!(this.precise && this.isRange && !this.hasHistogram)) {
this.hyphenateCollidingRangeHandleLabels();
}
}
}
this.hideObscuredBoundingTickLabels();
}
render() {
const id = this.el.id || this.guid;
const min = this.minValue || this.min;
const max = this.maxValue || this.value;
const maxProp = this.isRange ? "maxValue" : "value";
const value = this[maxProp];
const left = `${this.getUnitInterval(min) * 100}%`;
const right = `${100 - this.getUnitInterval(max) * 100}%`;
const handle = (h("button", { "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
thumb: true,
"thumb--value": true,
"thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp
}, disabled: this.disabled, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onMouseDown: () => this.dragStart(maxProp), onTouchStart: (e) => this.dragStart(maxProp, e), ref: (el) => (this.maxHandle = el), role: "slider", style: { right } }, h("div", { class: "handle" })));
const labeledHandle = (h("button", { "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
thumb: true,
"thumb--value": true,
"thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp
}, disabled: this.disabled, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onMouseDown: () => this.dragStart(maxProp), onTouchStart: (e) => this.dragStart(maxProp, e), ref: (el) => (this.maxHandle = el), role: "slider", style: { right } }, h("span", { "aria-hidden": "true", class: "handle__label handle__label--value" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value static" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value transformed" }, value ? value.toLocaleString() : value), h("div", { class: "handle" })));
const histogramLabeledHandle = (h("button", { "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
thumb: true,
"thumb--value": true,
"thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp
}, disabled: this.disabled, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onMouseDown: () => this.dragStart(maxProp), onTouchStart: (e) => this.dragStart(maxProp, e), ref: (el) => (this.maxHandle = el), role: "slider", style: { right } }, h("div", { class: "handle" }), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value static" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value transformed" }, value ? value.toLocaleString() : value)));
const preciseHandle = (h("button", { "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
thumb: true,
"thumb--value": true,
"thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
"thumb--precise": true
}, disabled: this.disabled, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onMouseDown: () => this.dragStart(maxProp), onTouchStart: (e) => this.dragStart(maxProp, e), ref: (el) => (this.maxHandle = el), role: "slider", style: { right } }, h("div", { class: "handle" }), h("div", { class: "handle-extension" })));
const histogramPreciseHandle = (h("button", { "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
thumb: true,
"thumb--value": true,
"thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
"thumb--precise": true
}, disabled: this.disabled, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onMouseDown: () => this.dragStart(maxProp), onTouchStart: (e) => this.dragStart(maxProp, e), ref: (el) => (this.maxHandle = el), role: "slider", style: { right } }, h("div", { class: "handle-extension" }), h("div", { class: "handle" })));
const labeledPreciseHandle = (h("button", { "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
thumb: true,
"thumb--value": true,
"thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
"thumb--precise": true
}, disabled: this.disabled, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onMouseDown: () => this.dragStart(maxProp), onTouchStart: (e) => this.dragStart(maxProp, e), ref: (el) => (this.maxHandle = el), role: "slider", style: { right } }, h("span", { "aria-hidden": "true", class: "handle__label handle__label--value" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value static" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value transformed" }, value ? value.toLocaleString() : value), h("div", { class: "handle" }), h("div", { class: "handle-extension" })));
const histogramLabeledPreciseHandle = (h("button", { "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
thumb: true,
"thumb--value": true,
"thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
"thumb--precise": true
}, disabled: this.disabled, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onMouseDown: () => this.dragStart(maxProp), onTouchStart: (e) => this.dragStart(maxProp, e), ref: (el) => (this.maxHandle = el), role: "slider", style: { right } }, h("div", { class: "handle-extension" }), h("div", { class: "handle" }), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value static" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value transformed" }, value ? value.toLocaleString() : value)));
const minHandle = (h("button", { "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
thumb: true,
"thumb--minValue": true,
"thumb--active": this.dragProp === "minValue"
}, disabled: this.disabled, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onMouseDown: () => this.dragStart("minValue"), onTouchStart: (e) => this.dragStart("minValue", e), ref: (el) => (this.minHandle = el), role: "slider", style: { left } }, h("div", { class: "handle" })));
const minLabeledHandle = (h("button", { "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
thumb: true,
"thumb--minValue": true,
"thumb--active": this.dragProp === "minValue"
}, disabled: this.disabled, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onMouseDown: () => this.dragStart("minValue"), onTouchStart: (e) => this.dragStart("minValue", e), ref: (el) => (this.minHandle = el), role: "slider", style: { left } }, h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue" }, this.minValue && this.minValue.toLocaleString()), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue static" }, this.minValue && this.minValue.toLocaleString()), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue transformed" }, this.minValue && this.minValue.toLocaleString()), h("div", { class: "handle" })));
const minHistogramLabeledHandle = (h("button", { "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
thumb: true,
"thumb--minValue": true,
"thumb--active": this.dragProp === "minValue"
}, disabled: this.disabled, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onMouseDown: () => this.dragStart("minValue"), onTouchStart: (e) => this.dragStart("minValue", e), ref: (el) => (this.minHandle = el), role: "slider", style: { left } }, h("div", { class: "handle" }), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue" }, this.minValue && this.minValue.toLocaleString()), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue static" }, this.minValue && this.minValue.toLocaleString()), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue transformed" }, this.minValue && this.minValue.toLocaleString())));
const minPreciseHandle = (h("button", { "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
thumb: true,
"thumb--minValue": true,
"thumb--active": this.dragProp === "minValue",
"thumb--precise": true
}, disabled: this.disabled, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onMouseDown: () => this.dragStart("minValue"), onTouchStart: (e) => this.dragStart("minValue", e), ref: (el) => (this.minHandle = el), role: "slider", style: { left } }, h("div", { class: "handle-extension" }), h("div", { class: "handle" })));
const minLabeledPreciseHandle = (h("button", { "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
thumb: true,
"thumb--minValue": true,
"thumb--active": this.dragProp === "minValue",
"thumb--precise": true
}, disabled: this.disabled, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onMouseDown: () => this.dragStart("minValue"), onTouchStart: (e) => this.dragStart("minValue", e), ref: (el) => (this.minHandle = el), role: "slider", style: { left } }, h("div", { class: "handle-extension" }), h("div", { class: "handle" }), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue" }, this.minValue && this.minValue.toLocaleString()), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue static" }, this.minValue && this.minValue.toLocaleString()), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue transformed" }, this.minValue && this.minValue.toLocaleString())));
return (h(Host, { id: id }, h("div", { class: { container: true, "container--range": this.isRange } }, this.renderGraph(), h("div", { class: "track" }, h("div", { class: "track__range", onMouseDown: () => this.dragStart("minMaxValue"), onTouchStart: (e) => this.dragStart("minMaxValue", e), style: { left, right } }), h("div", { class: "ticks" }, this.tickValues.map((tick) => (h("span", { class: {
tick: true,
"tick--active": tick >= min && tick <= max
}, style: {
left: `${this.getUnitInterval(tick) * 100}%`
} }, this.renderTickLabel(tick)))))), !this.precise && !this.labelHandles && this.isRange && minHandle, !this.hasHistogram &&
!this.precise &&
this.labelHandles &&
this.isRange &&
minLabeledHandle, this.precise && !this.labelHandles && this.isRange && minPreciseHandle, this.precise && this.labelHandles && this.isRange && minLabeledPreciseHandle, this.hasHistogram &&
!this.precise &&
this.labelHandles &&
this.isRange &&
minHistogramLabeledHandle, !this.precise && !this.labelHandles && handle, !this.hasHistogram && !this.precise && this.labelHandles && labeledHandle, !this.hasHistogram && this.precise && !this.labelHandles && preciseHandle, this.hasHistogram && this.precise && !this.labelHandles && histogramPreciseHandle, !this.hasHistogram && this.precise && this.labelHandles && labeledPreciseHandle, this.hasHistogram && !this.precise && this.labelHandles && histogramLabeledHandle, this.hasHistogram && this.precise && this.labelHandles && histogramLabeledPreciseHandle)));
}
renderGraph() {
return this.histogram ? (h("div", { class: "graph" }, h("calcite-graph", { data: this.histogram, height: 48, highlightMax: this.isRange ? this.maxValue : this.value, highlightMin: this.isRange ? this.minValue : this.min, width: 300 }))) : null;
}
renderTickLabel(tick) {
const isMinTickLabel = tick === this.min;
const isMaxTickLabel = tick === this.max;
const tickLabel = (h("span", { class: {
tick__label: true,
"tick__label--min": isMinTickLabel,
"tick__label--max": isMaxTickLabel
} }, tick.toLocaleString()));
if (this.labelTicks && !this.hasHistogram && !this.isRange) {
return tickLabel;
}
if (this.labelTicks &&
!this.hasHistogram &&
this.isRange &&
!this.precise &&
!this.labelHandles) {
return tickLabel;
}
if (this.labelTicks &&
!this.hasHistogram &&
this.isRange &&
!this.precise &&
this.labelHandles) {
return tickLabel;
}
if (this.labelTicks &&
!this.hasHistogram &&
this.isRange &&
this.precise &&
(isMinTickLabel || isMaxTickLabel)) {
return tickLabel;
}
if (this.labelTicks && this.hasHistogram && !this.precise && !this.labelHandles) {
return tickLabel;
}
if (this.labelTicks &&
this.hasHistogram &&
this.precise &&
!this.labelHandles &&
(isMinTickLabel || isMaxTickLabel)) {
return tickLabel;
}
if (this.labelTicks &&
this.hasHistogram &&
!this.precise &&
this.labelHandles &&
(isMinTickLabel || isMaxTickLabel)) {
return tickLabel;
}
if (this.labelTicks &&
this.hasHistogram &&
this.precise &&
this.labelHandles &&
(isMinTickLabel || isMaxTickLabel)) {
return tickLabel;
}
return null;
}
//--------------------------------------------------------------------------
//
// Event Listeners
//
//--------------------------------------------------------------------------
handleLabelFocus(e) {
if (e.detail.interactedEl !== this.el && hasLabel(e.detail.labelEl, this.el)) {
this.setFocus();
}
}
keyDownHandler(e) {
const value = this[this.activeProp];
switch (getKey(e.key)) {
case "ArrowUp":
case "ArrowRight":
e.preventDefault();
this[this.activeProp] = this.bound(value + this.step, this.activeProp);
this.emitChange();
break;
case "ArrowDown":
case "ArrowLeft":
e.preventDefault();
this[this.activeProp] = this.bound(value - this.step, this.activeProp);
this.emitChange();
break;
case "PageUp":
if (this.pageStep) {
e.preventDefault();
this[this.activeProp] = this.bound(value + this.pageStep, this.activeProp);
this.emitChange();
}
break;
case "PageDown":
if (this.pageStep) {
e.preventDefault();
this[this.activeProp] = this.bound(value - this.pageStep, this.activeProp);
this.emitChange();
}
break;
case "Home":
e.preventDefault();
this[this.activeProp] = this.bound(this.min, this.activeProp);
this.emitChange();
break;
case "End":
e.preventDefault();
this[this.activeProp] = this.bound(this.max, this.activeProp);
this.emitChange();
break;
// prevent activation keys from firing a click event
case "Enter":
case " ":
e.preventDefault();
break;
}
}
mouseHandler(event) {
const x = event.clientX || event.pageX;
const position = this.translate(x);
let prop = "value";
if (this.isRange) {
const inRange = position >= this.minValue && position <= this.maxValue;
if (inRange && this.lastDragProp === "minMaxValue") {
prop = "minMaxValue";
}
else {
const closerToMax = Math.abs(this.maxValue - position) < Math.abs(this.minValue - position);
prop = closerToMax ? "maxValue" : "minValue";
}
}
this[prop] = this.bound(position, prop);
this.dragStart(prop);
if (event.type === "click") {
this.dragEnd();
this.emitChange();
switch (prop) {
default:
case "maxValue":
this.maxHandle.focus();
break;
case "minValue":
this.minHandle.focus();
break;
case "minMaxValue":
break;
}
}
}
//--------------------------------------------------------------------------
//
// Public Methods
//
//--------------------------------------------------------------------------
async setFocus() {
const handle = this.minHandle ? this.minHandle : this.maxHandle;
handle.focus();
}
//--------------------------------------------------------------------------
//
// Private Methods
//
//--------------------------------------------------------------------------
generateTickValues() {
const ticks = [];
let current = this.min;
while (this.ticks && current < this.max + this.ticks) {
ticks.push(current);
current = current + this.ticks;
}
return ticks;
}
dragStart(prop, e) {
if (e) {
e.preventDefault();
}
if (this.dragListener) {
this.dragEnd();
}
this.dragProp = prop;
this.lastDragProp = this.dragProp;
this.activeProp = prop;
this.dragListener = this.dragListener || this.dragUpdate.bind(this);
document.addEventListener("mousemove", this.dragListener);
document.addEventListener("touchmove", this.dragListener, {
capture: false
});
document.addEventListener("mouseup", this.dragEnd.bind(this));
document.addEventListener("touchend", this.dragEnd.bind(this), false);
document.addEventListener("touchcancel", this.dragEnd.bind(this));
}
dragUpdate(e) {
e.preventDefault();
e.stopPropagation();
if (this.dragProp) {
const value = this.translate(e.clientX || e.pageX);
if (this.isRange && this.dragProp === "minMaxValue") {
if (this.minValueDragRange && this.maxValueDragRange && this.minMaxValueRange) {
const newMinValue = value - this.minValueDragRange;
const newMaxValue = value + this.maxValueDragRange;
if (newMaxValue <= this.max &&
newMinValue >= this.min &&
newMaxValue - newMinValue === this.minMaxValueRange) {
this.minValue = this.bound(newMinValue, "minValue");
this.maxValue = this.bound(newMaxValue, "maxValue");
}
}
else {
this.minValueDragRange = value - this.minValue;
this.maxValueDragRange = this.maxValue - value;
this.minMaxValueRange = this.maxValue - this.minValue;
}
}
else {
this[this.dragProp] = this.bound(value, this.dragProp);
}
this.emitChange();
}
}
emitChange() {
this.calciteSliderChange.emit();
this.calciteSliderUpdate.emit();
}
dragEnd() {
this.dragProp = null;
document.removeEventListener("mousemove", this.dragListener);
document.removeEventListener("touchmove", this.dragListener);
this.minValueDragRange = null;
this.maxValueDragRange = null;
this.minMaxValueRange = null;
}
/**
* If number is outside range, constrain to min or max
* @internal
*/
bound(num, prop) {
num = Math.min(num, this.max);
num = Math.max(num, this.min);
// ensure that maxValue and minValue don't swap positions
if (prop === "maxValue") {
num = Math.max(num, this.minValue);
}
if (prop === "minValue") {
num = Math.min(num, this.maxValue);
}
return num;
}
/**
* Translate a pixel position to value along the range
* @internal
*/
translate(x) {
const range = this.max - this.min;
const { left, width } = this.el.getBoundingClientRect();
const percent = (x - left) / width;
let value = this.bound(this.min + range * percent);
if (this.snap && this.step) {
value = this.getClosestStep(value);
}
return value;
}
/**
* Get closest allowed value along stepped values
* @internal
*/
getClosestStep(num) {
num = this.bound(num);
if (this.step) {
const step = Math.round(num / this.step) * this.step;
num = this.bound(step);
}
return num;
}
getFontSizeForElement(element) {
return Number(window.getComputedStyle(element).getPropertyValue("font-size").match(/\d+/)[0]);
}
/**
* Get position of value along range as fractional value
* @return {number} number in the unit interval [0,1]
* @internal
*/
getUnitInterval(num) {
num = this.bound(num);
const range = this.max - this.min;
return (num - this.min) / range;
}
adjustHostObscuredHandleLabel(name) {
const label = this.el.shadowRoot.querySelector(`.handle__label--${name}`);
const labelStatic = this.el.shadowRoot.querySelector(`.handle__label--${name}.static`);
const labelTransformed = this.el.shadowRoot.querySelector(`.handle__label--${name}.transformed`);
const labelStaticOffset = this.getHostOffset(labelStatic.getBoundingClientRect().left, labelStatic.getBoundingClientRect().right);
label.style.transform = `translateX(${labelStaticOffset}px)`;
labelTransformed.style.transform = `translateX(${labelStaticOffset}px)`;
}
hyphenateCollidingRangeHandleLabels() {
const minValueLabel = this.el.shadowRoot.querySelector(`.handle__label--minValue`);
const minValueLabelStatic = this.el.shadowRoot.querySelector(`.handle__label--minValue.static`);
const minValueLabelTransformed = this.el.shadowRoot.querySelector(`.handle__label--minValue.transformed`);
const minValueLabelStaticHostOffset = this.getHostOffset(minValueLabelStatic.getBoundingClientRect().left, minValueLabelStatic.getBoundingClientRect().right);
const valueLabel = this.el.shadowRoot.querySelector(`.handle__label--value`);
const valueLabelStatic = this.el.shadowRoot.querySelector(`.handle__label--value.static`);
const valueLabelTransformed = this.el.shadowRoot.querySelector(`.handle__label--value.transformed`);
const valueLabelStaticHostOffset = this.getHostOffset(valueLabelStatic.getBoundingClientRect().left, valueLabelStatic.getBoundingClientRect().right);
const labelFontSize = this.getFontSizeForElement(minValueLabel);
const labelTransformedOverlap = this.getRangeLabelOverlap(minValueLabelTransformed, valueLabelTransformed);
if (labelTransformedOverlap > 0) {
minValueLabel.classList.add("hyphen");
if (valueLabelStaticHostOffset === 0 && minValueLabelStaticHostOffset === 0) {
// Neither handle overlaps the host boundary
let minValueLabelTranslate = labelTransformedOverlap / 2 - labelFontSize / 2;
if (Math.sign(minValueLabelTranslate) === -1) {
minValueLabelTranslate = Math.abs(minValueLabelTranslate);
}
else {
minValueLabelTranslate = -minValueLabelTranslate;
}
const minValueLabelTransformedHostOffset = this.getHostOffset(minValueLabelTransformed.getBoundingClientRect().left +
minValueLabelTranslate -
labelFontSize / 2, minValueLabelTransformed.getBoundingClientRect().right +
minValueLabelTranslate -
labelFontSize / 2);
let valueLabelTranslate = labelTransformedOverlap / 2;
const valueLabelTransformedHostOffset = this.getHostOffset(valueLabelTransformed.getBoundingClientRect().left + valueLabelTranslate, valueLabelTransformed.getBoundingClientRect().right + valueLabelTranslate);
if (minValueLabelTransformedHostOffset !== 0) {
minValueLabelTranslate = minValueLabelTranslate + minValueLabelTransformedHostOffset;
valueLabelTranslate = valueLabelTranslate + minValueLabelTransformedHostOffset;
}
if (valueLabelTransformedHostOffset !== 0) {
minValueLabelTranslate = minValueLabelTranslate + valueLabelTransformedHostOffset;
valueLabelTranslate = valueLabelTranslate + valueLabelTransformedHostOffset;
}
minValueLabel.style.transform = `translateX(${minValueLabelTranslate}px)`;
minValueLabelTransformed.style.transform = `translateX(${minValueLabelTranslate - labelFontSize / 2}px)`;
valueLabel.style.transform = `translateX(${valueLabelTranslate}px)`;
valueLabelTransformed.style.transform = `translateX(${valueLabelTranslate}px)`;
}
else if (minValueLabelStaticHostOffset !== 0 &&
(Math.sign(valueLabelStaticHostOffset) === 0 || Math.sign(valueLabelStaticHostOffset) === 1)) {
// minValueLabel overlaps host boundary on the left side
minValueLabel.style.transform = `translateX(${minValueLabelStaticHostOffset + labelFontSize / 2}px)`;
valueLabel.style.transform = `translateX(${labelTransformedOverlap + valueLabelStaticHostOffset}px)`;
valueLabelTransformed.style.transform = `translateX(${labelTransformedOverlap + valueLabelStaticHostOffset}px)`;
}
else if (valueLabelStaticHostOffset !== 0) {
// valueLabel overlaps host boundary on the right side
let minValueLabelTranslate = Math.abs(minValueLabelStaticHostOffset) + labelTransformedOverlap - labelFontSize / 2;
if (Math.sign(minValueLabelTranslate) === -1) {
minValueLabelTranslate = Math.abs(minValueLabelTranslate);
}
else {
minValueLabelTranslate = -minValueLabelTranslate;
}
minValueLabel.style.transform = `translateX(${minValueLabelTranslate}px)`;
minValueLabelTransformed.style.transform = `translateX(${minValueLabelTranslate - labelFontSize / 2}px)`;
}
}
else {
minValueLabel.classList.remove("hyphen");
minValueLabel.style.transform = `translateX(${minValueLabelStaticHostOffset}px)`;
minValueLabelTransformed.style.transform = `translateX(${minValueLabelStaticHostOffset}px)`;
valueLabel.style.transform = `translateX(${valueLabelStaticHostOffset}px)`;
valueLabelTransformed.style.transform = `translateX(${valueLabelStaticHostOffset}px)`;
}
}
/**
* Hides bounding tick labels that are obscured by either handle.
*/
hideObscuredBoundingTickLabels() {
if (!this.hasHistogram && !this.isRange && !this.labelHandles && !this.precise) {
return;
}
if (!this.hasHistogram && !this.isRange && this.labelHandles && !this.precise) {
return;
}
if (!this.hasHistogram && !this.isRange && !this.labelHandles && this.precise) {
return;
}
if (!this.hasHistogram && !this.isRange && this.labelHandles && this.precise) {
return;
}
if (!this.hasHistogram && this.isRange && !this.precise) {
return;
}
if (this.hasHistogram && !this.precise && !this.labelHandles) {
return;
}
const minHandle = this.el.shadowRoot.querySelector(".thumb--minValue");
const maxHandle = this.el.shadowRoot.querySelector(".thumb--value");
const minTickLabel = this.el.shadowRoot.querySelector(".tick__label--min");
const maxTickLabel = this.el.shadowRoot.querySelector(".tick__label--max");
if (!minHandle && maxHandle && minTickLabel && maxTickLabel) {
if (this.isMinTickLabelObscured(minTickLabel, maxHandle)) {
minTickLabel.style.opacity = "0";
}
else {
minTickLabel.style.opacity = "1";
}
if (this.isMaxTickLabelObscured(maxTickLabel, maxHandle)) {
maxTickLabel.style.opacity = "0";
}
else {
maxTickLabel.style.opacity = "1";
}
}
if (minHandle && maxHandle && minTickLabel && maxTickLabel) {
if (this.isMinTickLabelObscured(minTickLabel, minHandle) ||
this.isMinTickLabelObscured(minTickLabel, maxHandle)) {
minTickLabel.style.opacity = "0";
}
else {
minTickLabel.style.opacity = "1";
}
if (this.isMaxTickLabelObscured(maxTickLabel, minHandle) ||
(this.isMaxTickLabelObscured(maxTickLabel, maxHandle) && this.hasHistogram)) {
maxTickLabel.style.opacity = "0";
}
else {
maxTickLabel.style.opacity = "1";
}
}
}
/**
* Returns an integer representing the number of pixels to offset on the left or right side based on desired position behavior.
* @internal
*/
getHostOffset(leftBounds, rightBounds) {
const hostBounds = this.el.getBoundingClientRect();
if (leftBounds + 7 < hostBounds.left) {
const offset = hostBounds.left - leftBounds - 7;
return offset;
}
if (rightBounds - 7 > hostBounds.right) {
const offset = -(rightBounds - hostBounds.right) + 7;
return offset;
}
return 0;
}
/**
* Returns an integer representing the number of pixels that the two given span elements are overlapping, taking into account
* a space in between the two spans equal to the font-size set on them to account for the space needed to render a hyphen.
* @param minValueLabel
* @param valueLabel
*/
getRangeLabelOverlap(minValueLabel, valueLabel) {
const minValueLabelBounds = minValueLabel.getBoundingClientRect();
const valueLabelBounds = valueLabel.getBoundingClientRect();
const minValueLabelFontSize = this.getFontSizeForElement(minValueLabel);
const