@internetarchive/histogram-date-range 0.1.5 → 0.1.6-alpha1

package/dist/src/histogram-date-range.js

@@ -1,807 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html, nothing, LitElement, svg, } from 'lit';
-import { property, state, customElement } from 'lit/decorators.js';
-import { live } from 'lit/directives/live.js';
-import dayjs from 'dayjs/esm/index.js';
-import customParseFormat from 'dayjs/esm/plugin/customParseFormat';
-dayjs.extend(customParseFormat);
-import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
-// these values can be overridden via the component's HTML (camelCased) attributes
-const WIDTH = 180;
-const HEIGHT = 40;
-const SLIDER_WIDTH = 10;
-const TOOLTIP_WIDTH = 125;
-const TOOLTIP_HEIGHT = 30;
-const DATE_FORMAT = 'YYYY';
-const MISSING_DATA = 'no data';
-const UPDATE_DEBOUNCE_DELAY_MS = 0;
-// this constant is not set up to be overridden
-const SLIDER_CORNER_SIZE = 4;
-// these CSS custom props can be overridden from the HTML that is invoking this component
-const sliderColor = css `var(--histogramDateRangeSliderColor, #4B65FE)`;
-const selectedRangeColor = css `var(--histogramDateRangeSelectedRangeColor, #DBE0FF)`;
-const barIncludedFill = css `var(--histogramDateRangeBarIncludedFill, #2C2C2C)`;
-const activityIndicatorColor = css `var(--histogramDateRangeActivityIndicator, #2C2C2C)`;
-const barExcludedFill = css `var(--histogramDateRangeBarExcludedFill, #CCCCCC)`;
-const inputBorder = css `var(--histogramDateRangeInputBorder, 0.5px solid #2C2C2C)`;
-const inputWidth = css `var(--histogramDateRangeInputWidth, 35px)`;
-const inputFontSize = css `var(--histogramDateRangeInputFontSize, 1.2rem)`;
-const inputFontFamily = css `var(--histogramDateRangeInputFontFamily, sans-serif)`;
-const tooltipBackgroundColor = css `var(--histogramDateRangeTooltipBackgroundColor, #2C2C2C)`;
-const tooltipTextColor = css `var(--histogramDateRangeTooltipTextColor, #FFFFFF)`;
-const tooltipFontSize = css `var(--histogramDateRangeTooltipFontSize, 1.1rem)`;
-const tooltipFontFamily = css `var(--histogramDateRangeTooltipFontFamily, sans-serif)`;
-let HistogramDateRange = class HistogramDateRange extends LitElement {
-    constructor() {
-        /* eslint-disable lines-between-class-members */
-        super(...arguments);
-        // public reactive properties that can be set via HTML attributes
-        this.width = WIDTH;
-        this.height = HEIGHT;
-        this.sliderWidth = SLIDER_WIDTH;
-        this.tooltipWidth = TOOLTIP_WIDTH;
-        this.tooltipHeight = TOOLTIP_HEIGHT;
-        this.updateDelay = UPDATE_DEBOUNCE_DELAY_MS;
-        this.dateFormat = DATE_FORMAT;
-        this.missingDataMessage = MISSING_DATA;
-        this.minDate = '';
-        this.maxDate = '';
-        this.disabled = false;
-        this.bins = [];
-        // internal reactive properties not exposed as attributes
-        this._tooltipOffset = 0;
-        this._tooltipVisible = false;
-        this._isDragging = false;
-        this._isLoading = false;
-        // non-reactive properties (changes don't auto-trigger re-rendering)
-        this._minSelectedDate = '';
-        this._maxSelectedDate = '';
-        this._minDateMS = 0;
-        this._maxDateMS = 0;
-        this._dragOffset = 0;
-        this._histWidth = 0;
-        this._binWidth = 0;
-        this._histData = [];
-        this._previousDateRange = '';
-        // use arrow functions (rather than standard JS class instance methods) so
-        // that `this` is bound to the histogramDateRange object and not the event
-        // target. for more info see
-        // https://lit-element.polymer-project.org/guide/events#using-this-in-event-listeners
-        this.drag = (e) => {
-            // prevent selecting text or other ranges while dragging, especially in Safari
-            e.preventDefault();
-            if (this.disabled) {
-                return;
-            }
-            this.setDragOffset(e);
-            this._isDragging = true;
-            this.addListeners();
-            this.cancelPendingUpdateEvent();
-        };
-        this.drop = () => {
-            if (this._isDragging) {
-                this.removeListeners();
-                this.beginEmitUpdateProcess();
-            }
-            this._isDragging = false;
-        };
-        /**
-         * Adjust the date range based on slider movement
-         *
-         * @param e PointerEvent from the slider being moved
-         */
-        this.move = (e) => {
-            const newX = e.offsetX - this._dragOffset;
-            const slider = this._currentSlider;
-            if (slider.id === 'slider-min') {
-                this.minSelectedDate = this.translatePositionToDate(this.validMinSliderX(newX));
-            }
-            else {
-                this.maxSelectedDate = this.translatePositionToDate(this.validMaxSliderX(newX));
-            }
-        };
-    }
-    /* eslint-enable lines-between-class-members */
-    disconnectedCallback() {
-        this.removeListeners();
-        super.disconnectedCallback();
-    }
-    updated(changedProps) {
-        // check for changes that would affect bin data calculations
-        if (changedProps.has('bins') ||
-            changedProps.has('minDate') ||
-            changedProps.has('maxDate') ||
-            changedProps.has('minSelectedDate') ||
-            changedProps.has('maxSelectedDate')) {
-            this.handleDataUpdate();
-        }
-    }
-    /**
-     * Set private properties that depend on the attribute bin data
-     *
-     * We're caching these values and not using getters to avoid recalculating all
-     * of the hist data every time the user drags a slider or hovers over a bar
-     * creating a tooltip.
-     */
-    handleDataUpdate() {
-        if (!this.hasBinData) {
-            return;
-        }
-        this._histWidth = this.width - this.sliderWidth * 2;
-        this._minDateMS = this.getMSFromString(this.minDate);
-        this._maxDateMS = this.getMSFromString(this.maxDate);
-        this._binWidth = this._histWidth / this._numBins;
-        this._previousDateRange = this.currentDateRangeString;
-        this._histData = this.calculateHistData();
-        this.minSelectedDate = this.minSelectedDate
-            ? this.minSelectedDate
-            : this.minDate;
-        this.maxSelectedDate = this.maxSelectedDate
-            ? this.maxSelectedDate
-            : this.maxDate;
-        this.requestUpdate();
-    }
-    calculateHistData() {
-        const minValue = Math.min(...this.bins);
-        const maxValue = Math.max(...this.bins);
-        // if there is no difference between the min and max values, use a range of
-        // 1 because log scaling will fail if the range is 0
-        const valueRange = minValue === maxValue ? 1 : Math.log1p(maxValue);
-        const valueScale = this.height / valueRange;
-        const dateScale = this.dateRangeMS / this._numBins;
-        return this.bins.map((v, i) => {
-            return {
-                value: v,
-                // use log scaling for the height of the bar to prevent tall bars from
-                // making the smaller ones too small to see
-                height: Math.floor(Math.log1p(v) * valueScale),
-                binStart: `${this.formatDate(i * dateScale + this._minDateMS)}`,
-                binEnd: `${this.formatDate((i + 1) * dateScale + this._minDateMS)}`,
-            };
-        });
-    }
-    get hasBinData() {
-        return this._numBins > 0;
-    }
-    get _numBins() {
-        if (!this.bins || !this.bins.length) {
-            return 0;
-        }
-        return this.bins.length;
-    }
-    get histogramLeftEdgeX() {
-        return this.sliderWidth;
-    }
-    get histogramRightEdgeX() {
-        return this.width - this.sliderWidth;
-    }
-    /** component's loading (and disabled) state */
-    get loading() {
-        return this._isLoading;
-    }
-    set loading(value) {
-        this.disabled = value;
-        this._isLoading = value;
-    }
-    /** formatted minimum date of selected date range */
-    get minSelectedDate() {
-        return this.formatDate(this.getMSFromString(this._minSelectedDate));
-    }
-    /** updates minSelectedDate if new date is valid */
-    set minSelectedDate(rawDate) {
-        if (!this._minSelectedDate) {
-            // because the values needed to calculate valid max/min values are not
-            // available during the lit init when it's populating properties from
-            // attributes, fall back to just the raw date if nothing is already set
-            this._minSelectedDate = rawDate;
-            return;
-        }
-        const proposedDateMS = this.getMSFromString(rawDate);
-        const isValidDate = !Number.isNaN(proposedDateMS);
-        const isNotTooRecent = proposedDateMS <= this.getMSFromString(this.maxSelectedDate);
-        if (isValidDate && isNotTooRecent) {
-            this._minSelectedDate = this.formatDate(proposedDateMS);
-        }
-        this.requestUpdate();
-    }
-    /** formatted maximum date of selected date range */
-    get maxSelectedDate() {
-        return this.formatDate(this.getMSFromString(this._maxSelectedDate));
-    }
-    /** updates maxSelectedDate if new date is valid */
-    set maxSelectedDate(rawDate) {
-        if (!this._maxSelectedDate) {
-            // because the values needed to calculate valid max/min values are not
-            // available during the lit init when it's populating properties from
-            // attributes, fall back to just the raw date if nothing is already set
-            this._maxSelectedDate = rawDate;
-            return;
-        }
-        const proposedDateMS = this.getMSFromString(rawDate);
-        const isValidDate = !Number.isNaN(proposedDateMS);
-        const isNotTooOld = proposedDateMS >= this.getMSFromString(this.minSelectedDate);
-        if (isValidDate && isNotTooOld) {
-            this._maxSelectedDate = this.formatDate(proposedDateMS);
-        }
-        this.requestUpdate();
-    }
-    /** horizontal position of min date slider */
-    get minSliderX() {
-        const x = this.translateDateToPosition(this.minSelectedDate);
-        return this.validMinSliderX(x);
-    }
-    /** horizontal position of max date slider */
-    get maxSliderX() {
-        const x = this.translateDateToPosition(this.maxSelectedDate);
-        return this.validMaxSliderX(x);
-    }
-    get dateRangeMS() {
-        return this._maxDateMS - this._minDateMS;
-    }
-    showTooltip(e) {
-        if (this._isDragging || this.disabled) {
-            return;
-        }
-        const target = e.currentTarget;
-        const x = target.x.baseVal.value + this.sliderWidth / 2;
-        const dataset = target.dataset;
-        const itemsText = `item${dataset.numItems !== '1' ? 's' : ''}`;
-        const formattedNumItems = Number(dataset.numItems).toLocaleString();
-        this._tooltipOffset =
-            x + (this._binWidth - this.sliderWidth - this.tooltipWidth) / 2;
-        this._tooltipContent = html `
-      ${formattedNumItems} ${itemsText}<br />
-      ${dataset.binStart} - ${dataset.binEnd}
-    `;
-        this._tooltipVisible = true;
-    }
-    hideTooltip() {
-        this._tooltipContent = undefined;
-        this._tooltipVisible = false;
-    }
-    /**
-     * Constrain a proposed value for the minimum (left) slider
-     *
-     * If the value is less than the leftmost valid position, then set it to the
-     * left edge of the histogram (ie the slider width). If the value is greater
-     * than the rightmost valid position (the position of the max slider), then
-     * set it to the position of the max slider
-     */
-    validMinSliderX(newX) {
-        // allow the left slider to go right only to the right slider, even if the
-        // max selected date is out of range
-        const rightLimit = Math.min(this.translateDateToPosition(this.maxSelectedDate), this.histogramRightEdgeX);
-        newX = this.clamp(newX, this.histogramLeftEdgeX, rightLimit);
-        const isInvalid = Number.isNaN(newX) || rightLimit < this.histogramLeftEdgeX;
-        return isInvalid ? this.histogramLeftEdgeX : newX;
-    }
-    /**
-     * Constrain a proposed value for the maximum (right) slider
-     *
-     * If the value is greater than the rightmost valid position, then set it to
-     * the right edge of the histogram (ie histogram width - slider width). If the
-     * value is less than the leftmost valid position (the position of the min
-     * slider), then set it to the position of the min slider
-     */
-    validMaxSliderX(newX) {
-        // allow the right slider to go left only to the left slider, even if the
-        // min selected date is out of range
-        const leftLimit = Math.max(this.histogramLeftEdgeX, this.translateDateToPosition(this.minSelectedDate));
-        newX = this.clamp(newX, leftLimit, this.histogramRightEdgeX);
-        const isInvalid = Number.isNaN(newX) || leftLimit > this.histogramRightEdgeX;
-        return isInvalid ? this.histogramRightEdgeX : newX;
-    }
-    addListeners() {
-        window.addEventListener('pointermove', this.move);
-        window.addEventListener('pointerup', this.drop);
-        window.addEventListener('pointercancel', this.drop);
-    }
-    removeListeners() {
-        window.removeEventListener('pointermove', this.move);
-        window.removeEventListener('pointerup', this.drop);
-        window.removeEventListener('pointercancel', this.drop);
-    }
-    /**
-     * start a timer to emit an update event. this timer can be canceled (and the
-     * event not emitted) if user drags a slider or focuses a date input within
-     * the update delay
-     */
-    beginEmitUpdateProcess() {
-        this.cancelPendingUpdateEvent();
-        this._emitUpdatedEventTimer = setTimeout(() => {
-            if (this.currentDateRangeString === this._previousDateRange) {
-                // don't emit duplicate event if no change since last emitted event
-                return;
-            }
-            this._previousDateRange = this.currentDateRangeString;
-            const options = {
-                detail: {
-                    minDate: this.minSelectedDate,
-                    maxDate: this.maxSelectedDate,
-                },
-                bubbles: true,
-                composed: true,
-            };
-            this.dispatchEvent(new CustomEvent('histogramDateRangeUpdated', options));
-        }, this.updateDelay);
-    }
-    cancelPendingUpdateEvent() {
-        if (this._emitUpdatedEventTimer === undefined) {
-            return;
-        }
-        clearTimeout(this._emitUpdatedEventTimer);
-        this._emitUpdatedEventTimer = undefined;
-    }
-    /**
-     * find position of pointer in relation to the current slider
-     */
-    setDragOffset(e) {
-        this._currentSlider = e.currentTarget;
-        const sliderX = this._currentSlider.id === 'slider-min'
-            ? this.minSliderX
-            : this.maxSliderX;
-        this._dragOffset = e.offsetX - sliderX;
-        // work around Firefox issue where e.offsetX seems to be not based on current
-        // element but on background element
-        if (this._dragOffset > this.sliderWidth ||
-            this._dragOffset < -this.sliderWidth) {
-            this._dragOffset = 0;
-        }
-    }
-    /**
-     * @param x horizontal position of slider
-     * @returns string representation of date
-     */
-    translatePositionToDate(x) {
-        // use Math.ceil to round up to fix case where input like 1/1/2010 would get
-        // translated to 12/31/2009
-        const milliseconds = Math.ceil(((x - this.sliderWidth) * this.dateRangeMS) / this._histWidth);
-        return this.formatDate(this._minDateMS + milliseconds);
-    }
-    /**
-     * Returns slider x-position corresponding to given date
-     *
-     * @param date
-     * @returns x-position of slider
-     */
-    translateDateToPosition(date) {
-        const milliseconds = this.getMSFromString(date);
-        return (this.sliderWidth +
-            ((milliseconds - this._minDateMS) * this._histWidth) / this.dateRangeMS);
-    }
-    /** ensure that the returned value is between minValue and maxValue */
-    clamp(x, minValue, maxValue) {
-        return Math.min(Math.max(x, minValue), maxValue);
-    }
-    handleMinDateInput(e) {
-        const target = e.currentTarget;
-        this.minSelectedDate = target.value;
-        this.beginEmitUpdateProcess();
-    }
-    handleMaxDateInput(e) {
-        const target = e.currentTarget;
-        this.maxSelectedDate = target.value;
-        this.beginEmitUpdateProcess();
-    }
-    handleKeyUp(e) {
-        if (e.key === 'Enter') {
-            const target = e.currentTarget;
-            target.blur();
-            if (target.id === 'date-min') {
-                this.handleMinDateInput(e);
-            }
-            else if (target.id === 'date-max') {
-                this.handleMaxDateInput(e);
-            }
-        }
-    }
-    get currentDateRangeString() {
-        return `${this.minSelectedDate}:${this.maxSelectedDate}`;
-    }
-    getMSFromString(date) {
-        const digitGroupCount = (date.split(/(\d+)/).length - 1) / 2;
-        if (digitGroupCount === 1) {
-            // if there's just a single set of digits, assume it's a year
-            const dateObj = new Date(0, 0); // start at January 1, 1900
-            dateObj.setFullYear(Number(date)); // override year
-            return dateObj.getTime(); // get time in milliseconds
-        }
-        return dayjs(date, [this.dateFormat, DATE_FORMAT]).valueOf();
-    }
-    /**
-     * expand or narrow the selected range by moving the slider nearest the
-     * clicked bar to the outer edge of the clicked bar
-     *
-     * @param e Event click event from a histogram bar
-     */
-    handleBarClick(e) {
-        const dataset = e.currentTarget.dataset;
-        // use the midpoint of the width of the clicked bar to determine which is
-        // the nearest slider
-        const clickPosition = (this.getMSFromString(dataset.binStart) +
-            this.getMSFromString(dataset.binEnd)) /
-            2;
-        const distanceFromMinSlider = Math.abs(clickPosition - this.getMSFromString(this.minSelectedDate));
-        const distanceFromMaxSlider = Math.abs(clickPosition - this.getMSFromString(this.maxSelectedDate));
-        // update the selected range by moving the nearer slider
-        if (distanceFromMinSlider < distanceFromMaxSlider) {
-            this.minSelectedDate = dataset.binStart;
-        }
-        else {
-            this.maxSelectedDate = dataset.binEnd;
-        }
-        this.beginEmitUpdateProcess();
-    }
-    get minSliderTemplate() {
-        // width/height in pixels of curved part of the sliders (like
-        // border-radius); used as part of a SVG quadratic curve. see
-        // https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#curve_commands
-        const cs = SLIDER_CORNER_SIZE;
-        const sliderShape = `
-            M${this.minSliderX},0
-            h-${this.sliderWidth - cs}
-            q-${cs},0 -${cs},${cs}
-            v${this.height - cs * 2}
-            q0,${cs} ${cs},${cs}
-            h${this.sliderWidth - cs}
-          `;
-        return this.generateSliderSVG(this.minSliderX, 'slider-min', sliderShape);
-    }
-    get maxSliderTemplate() {
-        const cs = SLIDER_CORNER_SIZE;
-        const sliderShape = `
-            M${this.maxSliderX},0
-            h${this.sliderWidth - cs}
-            q${cs},0 ${cs},${cs}
-            v${this.height - cs * 2}
-            q0,${cs} -${cs},${cs}
-            h-${this.sliderWidth - cs}
-          `;
-        return this.generateSliderSVG(this.maxSliderX, 'slider-max', sliderShape);
-    }
-    generateSliderSVG(sliderPositionX, id, sliderShape) {
-        // whether the curved part of the slider is facing towards the left (1), ie
-        // minimum, or facing towards the right (-1), ie maximum
-        const k = id === 'slider-min' ? 1 : -1;
-        return svg `
-    <svg
-      id="${id}"
-      class="
-      ${this.disabled ? '' : 'draggable'} 
-      ${this._isDragging ? 'dragging' : ''}"
-      @pointerdown="${this.drag}"
-    >
-      <path d="${sliderShape} z" fill="${sliderColor}" />
-      <rect
-        x="${sliderPositionX - this.sliderWidth * k + this.sliderWidth * 0.4 * k}"
-        y="${this.height / 3}"
-        width="1"
-        height="${this.height / 3}"
-        fill="white"
-      />
-      <rect
-        x="${sliderPositionX - this.sliderWidth * k + this.sliderWidth * 0.6 * k}"
-        y="${this.height / 3}"
-        width="1"
-        height="${this.height / 3}"
-        fill="white"
-      />
-    </svg>
-    `;
-    }
-    get selectedRangeTemplate() {
-        return svg `
-      <rect
-        x="${this.minSliderX}"
-        y="0"
-        width="${this.maxSliderX - this.minSliderX}"
-        height="${this.height}"
-        fill="${selectedRangeColor}"
-      />`;
-    }
-    get histogramTemplate() {
-        const xScale = this._histWidth / this._numBins;
-        const barWidth = xScale - 1;
-        let x = this.sliderWidth; // start at the left edge of the histogram
-        // the stroke-dasharray style below creates a transparent border around the
-        // right edge of the bar, which prevents user from encountering a gap
-        // between adjacent bars (eg when viewing the tooltips or when trying to
-        // extend the range by clicking on a bar)
-        return this._histData.map(data => {
-            const bar = svg `
-        <rect
-          class="bar"
-          style='stroke-dasharray: 0 ${barWidth} ${data.height} ${barWidth} 0 ${data.height};'
-          x="${x}"
-          y="${this.height - data.height}"
-          width="${barWidth}"
-          height="${data.height}"
-          @pointerenter="${this.showTooltip}"
-          @pointerleave="${this.hideTooltip}"
-          @click="${this.handleBarClick}"
-          fill="${x + barWidth >= this.minSliderX && x <= this.maxSliderX
-                ? barIncludedFill
-                : barExcludedFill}"
-          data-num-items="${data.value}"
-          data-bin-start="${data.binStart}"
-          data-bin-end="${data.binEnd}"
-        />`;
-            x += xScale;
-            return bar;
-        });
-    }
-    formatDate(dateMS) {
-        if (Number.isNaN(dateMS)) {
-            return '';
-        }
-        const date = dayjs(dateMS);
-        if (date.year() < 1000) {
-            // years before 1000 don't play well with dayjs custom formatting, so fall
-            // back to displaying only the year
-            return String(date.year());
-        }
-        return date.format(this.dateFormat);
-    }
-    /**
-     * NOTE: we are relying on the lit `live` directive in the template to
-     * ensure that the change to minSelectedDate is noticed and the input value
-     * gets properly re-rendered. see
-     * https://lit.dev/docs/templates/directives/#live
-     */
-    get minInputTemplate() {
-        return html `
-      <input
-        id="date-min"
-        placeholder="${this.dateFormat}"
-        type="text"
-        @focus="${this.cancelPendingUpdateEvent}"
-        @blur="${this.handleMinDateInput}"
-        @keyup="${this.handleKeyUp}"
-        .value="${live(this.minSelectedDate)}"
-        ?disabled="${this.disabled}"
-      />
-    `;
-    }
-    get maxInputTemplate() {
-        return html `
-      <input
-        id="date-max"
-        placeholder="${this.dateFormat}"
-        type="text"
-        @focus="${this.cancelPendingUpdateEvent}"
-        @blur="${this.handleMaxDateInput}"
-        @keyup="${this.handleKeyUp}"
-        .value="${live(this.maxSelectedDate)}"
-        ?disabled="${this.disabled}"
-      />
-    `;
-    }
-    get tooltipTemplate() {
-        return html `
-      <style>
-        #tooltip {
-          width: ${this.tooltipWidth}px;
-          height: ${this.tooltipHeight}px;
-          top: ${-9 - this.tooltipHeight}px;
-          left: ${this._tooltipOffset}px;
-          display: ${this._tooltipVisible ? 'block' : 'none'};
-        }
-        #tooltip:after {
-          left: ${this.tooltipWidth / 2}px;
-        }
-      </style>
-      <div id="tooltip">${this._tooltipContent}</div>
-    `;
-    }
-    get noDataTemplate() {
-        return html `
-      <div class="missing-data-message">${this.missingDataMessage}</div>
-    `;
-    }
-    get activityIndicatorTemplate() {
-        if (!this.loading) {
-            return nothing;
-        }
-        return html `
-      <ia-activity-indicator mode="processing"> </ia-activity-indicator>
-    `;
-    }
-    render() {
-        if (!this.hasBinData) {
-            return this.noDataTemplate;
-        }
-        return html `
-      <div
-        id="container"
-        class="
-          noselect 
-          ${this._isDragging ? 'dragging' : ''}
-        "
-        style="width: ${this.width}px"
-      >
-        ${this.activityIndicatorTemplate} ${this.tooltipTemplate}
-        <div
-          class="inner-container
-          ${this.disabled ? 'disabled' : ''}"
-        >
-          <svg
-            width="${this.width}"
-            height="${this.height}"
-            @pointerleave="${this.drop}"
-          >
-            ${this.selectedRangeTemplate}
-            <svg id="histogram">${this.histogramTemplate}</svg>
-            ${this.minSliderTemplate} ${this.maxSliderTemplate}
-          </svg>
-          <div id="inputs">
-            ${this.minInputTemplate}
-            <div class="dash">-</div>
-            ${this.maxInputTemplate}
-          </div>
-        </div>
-      </div>
-    `;
-    }
-};
-HistogramDateRange.styles = css `
-    .missing-data-message {
-      text-align: center;
-    }
-    #container {
-      margin: 0;
-      touch-action: none;
-      position: relative;
-    }
-    .disabled {
-      opacity: 0.3;
-    }
-    ia-activity-indicator {
-      position: absolute;
-      left: calc(50% - 10px);
-      top: 10px;
-      width: 20px;
-      height: 20px;
-      --activityIndicatorLoadingDotColor: rgba(0, 0, 0, 0);
-      --activityIndicatorLoadingRingColor: ${activityIndicatorColor};
-    }
-
-    /* prevent selection from interfering with tooltip, especially on mobile */
-    /* https://stackoverflow.com/a/4407335/1163042 */
-    .noselect {
-      -webkit-touch-callout: none; /* iOS Safari */
-      -webkit-user-select: none; /* Safari */
-      -moz-user-select: none; /* Old versions of Firefox */
-      -ms-user-select: none; /* Internet Explorer/Edge */
-      user-select: none; /* current Chrome, Edge, Opera and Firefox */
-    }
-    .bar {
-      /* create a transparent border around the hist bars to prevent "gaps" and
-      flickering when moving around between bars. this also helps with handling
-      clicks on the bars, preventing users from being able to click in between
-      bars */
-      stroke: rgba(0, 0, 0, 0);
-      /* ensure transparent stroke wide enough to cover gap between bars */
-      stroke-width: 2px;
-    }
-    .bar:hover {
-      /* highlight currently hovered bar */
-      fill-opacity: 0.7;
-    }
-    .disabled .bar:hover {
-      /* ensure no visual hover interaction when disabled */
-      fill-opacity: 1;
-    }
-    /****** histogram ********/
-    #tooltip {
-      position: absolute;
-      background: ${tooltipBackgroundColor};
-      color: ${tooltipTextColor};
-      text-align: center;
-      border-radius: 3px;
-      padding: 2px;
-      font-size: ${tooltipFontSize};
-      font-family: ${tooltipFontFamily};
-      touch-action: none;
-      pointer-events: none;
-    }
-    #tooltip:after {
-      content: '';
-      position: absolute;
-      margin-left: -5px;
-      top: 100%;
-      /* arrow */
-      border: 5px solid ${tooltipTextColor};
-      border-color: ${tooltipBackgroundColor} transparent transparent
-        transparent;
-    }
-    /****** slider ********/
-    .draggable:hover {
-      cursor: grab;
-    }
-    .dragging {
-      cursor: grabbing !important;
-    }
-    /****** inputs ********/
-    #inputs {
-      display: flex;
-      justify-content: center;
-    }
-    #inputs .dash {
-      position: relative;
-      bottom: -1px;
-    }
-    input {
-      width: ${inputWidth};
-      margin: 0 3px;
-      border: ${inputBorder};
-      border-radius: 2px !important;
-      text-align: center;
-      font-size: ${inputFontSize};
-      font-family: ${inputFontFamily};
-    }
-  `;
-__decorate([
-    property({ type: Number })
-], HistogramDateRange.prototype, "width", void 0);
-__decorate([
-    property({ type: Number })
-], HistogramDateRange.prototype, "height", void 0);
-__decorate([
-    property({ type: Number })
-], HistogramDateRange.prototype, "sliderWidth", void 0);
-__decorate([
-    property({ type: Number })
-], HistogramDateRange.prototype, "tooltipWidth", void 0);
-__decorate([
-    property({ type: Number })
-], HistogramDateRange.prototype, "tooltipHeight", void 0);
-__decorate([
-    property({ type: Number })
-], HistogramDateRange.prototype, "updateDelay", void 0);
-__decorate([
-    property()
-], HistogramDateRange.prototype, "dateFormat", void 0);
-__decorate([
-    property()
-], HistogramDateRange.prototype, "missingDataMessage", void 0);
-__decorate([
-    property()
-], HistogramDateRange.prototype, "minDate", void 0);
-__decorate([
-    property()
-], HistogramDateRange.prototype, "maxDate", void 0);
-__decorate([
-    property({ type: Boolean })
-], HistogramDateRange.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Object })
-], HistogramDateRange.prototype, "bins", void 0);
-__decorate([
-    state()
-], HistogramDateRange.prototype, "_tooltipOffset", void 0);
-__decorate([
-    state()
-], HistogramDateRange.prototype, "_tooltipContent", void 0);
-__decorate([
-    state()
-], HistogramDateRange.prototype, "_tooltipVisible", void 0);
-__decorate([
-    state()
-], HistogramDateRange.prototype, "_isDragging", void 0);
-__decorate([
-    state()
-], HistogramDateRange.prototype, "_isLoading", void 0);
-__decorate([
-    property({ type: Boolean })
-], HistogramDateRange.prototype, "loading", null);
-__decorate([
-    property()
-], HistogramDateRange.prototype, "minSelectedDate", null);
-__decorate([
-    property()
-], HistogramDateRange.prototype, "maxSelectedDate", null);
-HistogramDateRange = __decorate([
-    customElement('histogram-date-range')
-], HistogramDateRange);
-export { HistogramDateRange };
-//# sourceMappingURL=histogram-date-range.js.map