"use strict";function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,_toPropertyKey(r.key),r)}}function _createClass(e,t,n){return t&&_defineProperties(e.prototype,t),n&&_defineProperties(e,n),Object.defineProperty(e,"prototype",{writable:!1}),e}function _toPropertyKey(e){e=_toPrimitive(e,"string");return"symbol"==_typeof(e)?e:e+""}function _toPrimitive(e,t){if("object"!=_typeof(e)||!e)return e;var n=e[Symbol.toPrimitive];if(void 0===n)return("string"===t?String:Number)(e);n=n.call(e,t||"default");if("object"!=_typeof(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}function _callSuper(e,t,n){return t=_getPrototypeOf(t),_possibleConstructorReturn(e,_isNativeReflectConstruct()?Reflect.construct(t,n||[],_getPrototypeOf(e).constructor):t.apply(e,n))}function _possibleConstructorReturn(e,t){if(t&&("object"===_typeof(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(e)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&_setPrototypeOf(e,t)}function _wrapNativeSuper(e){var n="function"==typeof Map?new Map:void 0;return(_wrapNativeSuper=function(e){if(null===e||!_isNativeFunction(e))return e;if("function"!=typeof e)throw new TypeError("Super expression must either be null or a function");if(void 0!==n){if(n.has(e))return n.get(e);n.set(e,t)}function t(){return _construct(e,arguments,_getPrototypeOf(this).constructor)}return t.prototype=Object.create(e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),_setPrototypeOf(t,e)})(e)}function _construct(e,t,n){var r;return _isNativeReflectConstruct()?Reflect.construct.apply(null,arguments):((r=[null]).push.apply(r,t),t=new(e.bind.apply(e,r)),n&&_setPrototypeOf(t,n.prototype),t)}function _isNativeReflectConstruct(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(_isNativeReflectConstruct=function(){return!!e})()}function _isNativeFunction(t){try{return-1!==Function.toString.call(t).indexOf("[native code]")}catch(e){return"function"==typeof t}}function _setPrototypeOf(e,t){return(_setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e})(e,t)}function _getPrototypeOf(e){return(_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var cssHelpers=Object.freeze({sliderBackgroundColor:"tomato",sliderBorderColor:"#8b8b8b",sliderBorderRadius:"4px",sliderCircleSize:20,sliderCircleBackgroundColor:"#ffffff",sliderCircleFocusColor:"#0074cc",sliderCommonSize:"0.5em"}),constants=Object.freeze({MIN:"min",MAX:"max",SLIDER_ID:"minMaxSlider",MIN_LABEL_ID:"minLabel",MAX_LABEL_ID:"maxLabel",RANGE_STOPPED_EVENTS:["mouseup","touchend","keyup"],CUSTOM_EVENT_TO_EMIT_NAME:"range-changed",RANGE_INPUT_DATA_LABEL_MIN:"data-range-input-label-min",RANGE_INPUT_DATA_LABEL_MAX:"data-range-input-label-max"}),template=document.createElement("template"),SimpleRange=(template.innerHTML="\n <style>\n .min-max-slider { \n position: relative;\n width: 100%;\n text-align: center;\n }\n \n .min-max-slider > label {\n position: absolute;\n left: -10000px;\n top: auto;\n width: 1px;\n height: 1px;\n overflow: hidden;\n }\n \n .min-max-slider > .legend {\n display: flex;\n justify-content: space-between;\n }\n \n .min-max-slider > .range-input {\n --sliderCircleSize: ".concat(cssHelpers.sliderCircleSize,"px;\n --sliderColor: ").concat(cssHelpers.sliderCircleBackgroundColor,";\n --sliderBorderColor: ").concat(cssHelpers.sliderBorderColor,";\n --sliderFocusBorderColor: ").concat(cssHelpers.sliderCircleFocusColor,";\n --sliderCircleBorder: 1px solid var(--sliderBorderColor);\n --sliderCircleFocusBorder: 2px solid var(--sliderFocusBorderColor);\n cursor: pointer;\n position: absolute;\n -webkit-appearance: none;\n appearance: none;\n outline: none !important;\n background: transparent;\n background-image: linear-gradient(to bottom, transparent 0%, transparent 30%, ").concat(cssHelpers.sliderBackgroundColor," 30%, ").concat(cssHelpers.sliderBackgroundColor," 60%, transparent 60%, transparent 100%);\n }\n \n .min-max-slider > .range-input::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: var(--sliderCircleSize);\n height: var(--sliderCircleSize);\n background-color: var(--sliderColor);\n cursor: pointer;\n border: var(--sliderCircleBorder);\n border-radius: 100%;\n }\n \n .min-max-slider > .range-input::-moz-range-thumb {\n width: var(--sliderCircleSize);\n height: var(--sliderCircleSize);\n background-color: var(--sliderColor);\n cursor: pointer;\n border: var(--sliderCircleBorder);\n border-radius: 100%;\n } \n \n .min-max-slider > .range-input::-webkit-slider-runnable-track, \n .min-max-slider > .range-input::-moz-range-track {\n cursor: pointer;\n }\n \n .min-max-slider > .range-input:focus::-webkit-slider-thumb {\n /* Accessible border on focus */\n border: var(--sliderCircleFocusBorder);\n }\n\n .min-max-slider > .range-input:focus::-moz-range-thumb {\n /* Accessible border on focus */\n border: var(--sliderCircleFocusBorder);\n }\n \n span.value {\n --labelBeforeContent: '';\n --labelAfterContent: '';\n --labelFontSize: 16px;\n --labelFontWeight: bold;\n font-size: var(--labelFontSize);\n font-weight: var(--labelFontWeight);\n height: auto;\n display: inline-block;\n }\n\n span.value::before {\n content: var(--labelBeforeContent);\n }\n\n span.value::after {\n content: var(--labelAfterContent);\n }\n\n .range-input-dash-icon {\n padding: 0 ").concat(cssHelpers.sliderCommonSize,";\n }\n\n .range-input-label {\n border: 1px solid ").concat(cssHelpers.sliderBorderColor,";\n border-radius: ").concat(cssHelpers.sliderBorderRadius,";\n padding: ").concat(cssHelpers.sliderCommonSize,';\n }\n </style>\n \n <div id="').concat(constants.SLIDER_ID,'" class="min-max-slider"></div>\n'),function(){function e(){var t;return _classCallCheck(this,e),(t=_callSuper(this,e)).emitRangeSelection=function(){return t.emitRange()},t.onRangeInput=function(e){return t.update(e.target)},t.attachShadow({mode:"open"}),t.shadowRoot.appendChild(template.content.cloneNode(!0)),t}return _inherits(e,_wrapNativeSuper(HTMLElement)),_createClass(e,[{key:"sliderId",get:function(){return this.getAttribute("id")}},{key:"minRange",get:function(){return parseInt(this.getAttribute("min-range"))||parseInt(this.getAttribute("min"))||0},set:function(e){this.setAttribute("min-range",e),this.setAttribute("min",e)}},{key:"maxRange",get:function(){return parseInt(this.getAttribute("max-range"))||parseInt(this.getAttribute("max"))||1},set:function(e){this.setAttribute("max-range",e),this.setAttribute("max",e)}},{key:"presetMin",get:function(){return parseInt(this.getAttribute("preset-min"))},set:function(e){this.setAttribute("preset-min",e)}},{key:"presetMax",get:function(){return parseInt(this.getAttribute("preset-max"))},set:function(e){this.setAttribute("preset-max",e)}},{key:"numberOfLegendItemsToShow",get:function(){var e=parseInt(this.getAttribute("number-of-legend-items-to-show"));return e&&1<e?e:2}},{key:"hideLegend",get:function(){return this.hasAttribute("hide-legend")}},{key:"hideLabel",get:function(){return this.hasAttribute("hide-label")}},{key:"inputsForLabels",get:function(){return this.hasAttribute("inputs-for-labels")}},{key:"sliderColor",get:function(){return this.getAttribute("slider-color")}},{key:"circleColor",get:function(){return this.getAttribute("circle-color")}},{key:"circleBorderColor",get:function(){return this.getAttribute("circle-border-color")}},{key:"circleFocusBorderColor",get:function(){return this.getAttribute("circle-focus-border-color")}},{key:"circleBorder",get:function(){return this.getAttribute("circle-border")}},{key:"circleFocusBorder",get:function(){return this.getAttribute("circle-focus-border")}},{key:"circleSize",get:function(){return this.getAttribute("circle-size")}},{key:"labelAfterContent",get:function(){return this.getAttribute("label-after")}},{key:"labelBeforeContent",get:function(){return this.getAttribute("label-before")}},{key:"labelFontWeight",get:function(){return this.getAttribute("label-font-weight")}},{key:"labelFontSize",get:function(){return this.getAttribute("label-font-size")}},{key:"eventNameToEmitOnChange",get:function(){return this.getAttribute("event-name-to-emit-on-change")||constants.CUSTOM_EVENT_TO_EMIT_NAME}},{key:"emitEventOnUpdate",get:function(){return this.hasAttribute("emit-event-on-update")}},{key:"numberLocale",get:function(){return this.getAttribute("number-locale")}},{key:"attributeChangedCallback",value:function(e,t,n){switch(e){case"min-label":n&&(r=this.getEl(constants.MIN_LABEL_ID))&&(r.innerText=n,this.init());break;case"max-label":var r;n&&(r=this.getEl(constants.MAX_LABEL_ID))&&(r.innerText=n,this.init());break;case"min-range":case"min":isNaN(n)||t===n||(this.minRange=n,this.init());break;case"max-range":case"max":isNaN(n)||t===n||(this.maxRange=n,this.init());break;case"preset-min":isNaN(n)||t===n||(this.presetMin=n,this.init());break;case"preset-max":isNaN(n)||t===n||(this.presetMax=n,this.init())}}},{key:"connectedCallback",value:function(){this.init(),new ResizeObserver(this.onResize(this)).observe(this.shadowRoot.querySelector(".min-max-slider"))}},{key:"disconnectedCallback",value:function(){var e=this.getEl(constants.SLIDER_ID),t=e.querySelector("#".concat(constants.MIN)),t=(this.removeEventListeners(t,constants.RANGE_STOPPED_EVENTS,this.emitRangeSelection,!1),this.removeEventListeners(t,["input"],this.onRangeInput,!1),e.querySelector("#".concat(constants.MAX)));this.removeEventListeners(t,constants.RANGE_STOPPED_EVENTS,this.emitRangeSelection,!1),this.removeEventListeners(t,["input"],this.onRangeInput,!1),this.inputsForLabels&&(t=e.querySelector("[".concat(constants.RANGE_INPUT_DATA_LABEL_MIN,"]")),e=e.querySelector("[".concat(constants.RANGE_INPUT_DATA_LABEL_MAX,"]")),this.removeEventListeners(t,["input"],this.onRangeInput,!1),this.removeEventListeners(e,["input"],this.onRangeInput,!1),this.removeEventListeners(t,["blur"],this.emitRangeSelection,!1),this.removeEventListeners(e,["blur"],this.emitRangeSelection,!1))}},{key:"dispatchCustomEvent",value:function(e,t){(e||window).dispatchEvent(t)}},{key:"addMultipleEventListeners",value:function(t,e,n){e.forEach(function(e){return t.addEventListener(e,n)})}},{key:"removeEventListeners",value:function(t,e,n,r){e.forEach(function(e){t.removeEventListener(e,n,r)})}},{key:"getAverage",value:function(e,t){return Math.floor((e+t)/2)}},{key:"getEl",value:function(e){return this.shadowRoot.getElementById(e)}},{key:"init",value:function(){var e=this.getEl(constants.SLIDER_ID),t=(this.setInitialSliderState(e),this.setupStyles(),e.querySelector("#".concat(constants.MIN))),n=e.querySelector("#".concat(constants.MAX));this.setupPresetValues(t,n),this.createLabels(e,t),this.createLegend(e),this.draw(e,this.getAverage(this.presetMin||this.minRange,this.presetMax||this.maxRange)),t.addEventListener("input",this.onRangeInput),n.addEventListener("input",this.onRangeInput),this.addMultipleEventListeners(t,constants.RANGE_STOPPED_EVENTS,this.emitRangeSelection),this.addMultipleEventListeners(n,constants.RANGE_STOPPED_EVENTS,this.emitRangeSelection),this.setupResetFunctionality(),this.setupRangeSetFunctionality()}},{key:"onResize",value:function(t){return function(e){e=e[0].target;t.update(e.querySelector(".range-input"))}}},{key:"setInitialSliderState",value:function(e){e.innerHTML='\n <label id="'.concat(constants.MIN_LABEL_ID,'" for="').concat(constants.MIN,'">Minimum</label> \n <input id="').concat(constants.MIN,'" class="range-input" name="').concat(constants.MIN,'" type="range" step="1" />\n <label id="').concat(constants.MAX_LABEL_ID,'" for="').concat(constants.MAX,'">Maximum</label>\n <input id="').concat(constants.MAX,'" class="range-input" name="').concat(constants.MAX,'" type="range" step="1" />\n ')}},{key:"setupPresetValues",value:function(e,t){var n=this.presetMin&&this.presetMin<this.presetMax?this.presetMin:this.minRange,r=this.presetMax&&this.presetMax>this.presetMin?this.presetMax:this.maxRange;e.setAttribute("data-value",n),t.setAttribute("data-value",r),e.value=n,t.value=r}},{key:"setupResetFunctionality",value:function(){var t=this;document.addEventListener("range-reset",function(e){e.detail&&e.detail.sliderId&&e.detail.sliderId!==t.sliderId||(t.presetMin=t.minRange,t.presetMax=t.maxRange,t.init())})}},{key:"setupRangeSetFunctionality",value:function(){var t=this;document.addEventListener("range-set",function(e){e.detail&&e.detail.minValue&&e.detail.maxValue&&e.detail.sliderId?e.detail.sliderId===t.sliderId&&(t.presetMin=e.detail.minValue,t.presetMax=e.detail.maxValue):console.error("Simple Range Error: range-set was called without providing all of the\n required values. The event must contain the minValue, maxValue, and the\n sliderId. Additionally, the slider must have an id attribute on the\n component itself.")})}},{key:"emitRange",value:function(){var e=this.getEl(constants.SLIDER_ID),t=e.querySelector("#".concat(constants.MIN)),n=e.querySelector("#".concat(constants.MAX));this.dispatchCustomEvent(e,new CustomEvent(this.eventNameToEmitOnChange,{bubbles:!0,composed:!0,detail:{sliderId:this.sliderId,minRangeValue:Math.floor(t.getAttribute("data-value")),maxRangeValue:Math.floor(n.getAttribute("data-value"))}}))}},{key:"draw",value:function(e,t){var n,r=e.querySelector("#".concat(constants.MIN)),i=(r.setAttribute(constants.MIN,this.minRange),r.setAttribute(constants.MAX,t),e.querySelector("#".concat(constants.MAX))),o=(i.setAttribute(constants.MIN,t),i.setAttribute(constants.MAX,this.maxRange),e.offsetWidth),s=cssHelpers.sliderCircleSize,t=(r.style.width="".concat(parseInt(s+(t-this.minRange)/(this.maxRange-this.minRange)*(o-2*s)),"px"),i.style.width="".concat(parseInt(s+(this.maxRange-t)/(this.maxRange-this.minRange)*(o-2*s)),"px"),r.style.left="0px",i.style.left="".concat(parseInt(r.style.width),"px"),e.querySelector(".lower")),o=r.offsetHeight;this.hideLabel||(s=this.inputsForLabels?t.offsetHeight+5:t.offsetHeight,r.style.top="".concat(s,"px"),i.style.top="".concat(s,"px"),o+=s),this.hideLegend||(s=e.querySelector(".legend"),n=this.inputsForLabels?r.offsetHeight+5:r.offsetHeight,s.style.paddingTop="".concat(n,"px"),o+=+s.offsetHeight),e.style.height="".concat(o,"px"),i.value=i.getAttribute("data-value"),r.value=r.getAttribute("data-value"),this.hideLabel||(n=e.querySelector(".upper"),this.inputsForLabels?(t.value=r.getAttribute("data-value"),n.value=i.getAttribute("data-value")):this.numberLocale?(t.innerHTML=parseInt(r.getAttribute("data-value")).toLocaleString(this.numberLocale),n.innerHTML=parseInt(i.getAttribute("data-value")).toLocaleString(this.numberLocale)):(t.innerHTML=r.getAttribute("data-value"),n.innerHTML=i.getAttribute("data-value")))}},{key:"update",value:function(e){var t=e.parentElement,n=e.hasAttribute(constants.RANGE_INPUT_DATA_LABEL_MIN)||e.hasAttribute(constants.RANGE_INPUT_DATA_LABEL_MAX)?(r="[".concat(constants.RANGE_INPUT_DATA_LABEL_MIN,"]"),"[".concat(constants.RANGE_INPUT_DATA_LABEL_MAX,"]")):(r="#".concat(constants.MIN),"#".concat(constants.MAX)),r=t.querySelector(r),n=t.querySelector(n),r=Math.floor(parseInt(r.value)),n=Math.floor(parseInt(n.value));this.isValidRangeSelection(e,r,n)&&(t.querySelector("#".concat(constants.MIN)).setAttribute("data-value",r),t.querySelector("#".concat(constants.MAX)).setAttribute("data-value",n),this.draw(t,this.getAverage(r,n)),this.emitEventOnUpdate)&&this.emitRange()}},{key:"isValidRangeSelection",value:function(e,t,n){var r=this;return this.inputsForLabels?e.hasAttribute(constants.RANGE_INPUT_DATA_LABEL_MIN)||e.getAttribute("id")===constants.MIN?function(e){return r.minRange&&e<r.maxRange&&e<n}:n>this.minRange&&n<=this.maxRange&&t<n:t!==n}},{key:"setupStyles",value:function(){var t=this;this.shadowRoot.querySelectorAll(".min-max-slider > .range-input").forEach(function(e){t.sliderColor&&(e.style.backgroundImage="linear-gradient(to bottom, transparent 0%, transparent 30%, ".concat(t.sliderColor," 30%, ").concat(t.sliderColor," 60%, transparent 60%, transparent 100%)")),t.circleColor&&e.style.setProperty("--sliderColor",t.circleColor),t.circleBorderColor&&e.style.setProperty("--sliderBorderColor",t.circleBorderColor),t.circleFocusBorderColor&&e.style.setProperty("--sliderFocusBorderColor",t.circleFocusBorderColor),t.circleBorder&&e.style.setProperty("--sliderCircleBorder",t.circleBorder),t.circleFocusBorder&&e.style.setProperty("--sliderCircleFocusBorder",t.circleFocusBorder),t.circleSize&&e.style.setProperty("--sliderCircleSize",t.circleSize)})}},{key:"createLegend",value:function(e){if(!this.hideLegend){for(var t=document.createElement("div"),n=(t.classList.add("legend"),[]),r=0;r<this.numberOfLegendItemsToShow;r++){n[r]=document.createElement("div");var i=Math.round(this.minRange+r/(this.numberOfLegendItemsToShow-1)*(this.maxRange-this.minRange)),i=this.numberLocale?i.toLocaleString(this.numberLocale):i.toString();n[r].appendChild(document.createTextNode(i)),t.appendChild(n[r])}e.appendChild(t)}}},{key:"setupLabelStyles",value:function(n,r){function e(e,t){n.style.setProperty(e,t),r.style.setProperty(e,t)}this.labelAfterContent&&e("--labelAfterContent","'".concat(this.labelAfterContent,"'")),this.labelBeforeContent&&e("--labelBeforeContent","'".concat(this.labelBeforeContent,"'")),this.labelFontWeight&&e("--labelFontWeight",this.labelFontWeight),this.labelFontSize&&e("--labelFontSize",this.labelFontSize)}},{key:"createLabels",value:function(e,t){var n,r,i;this.hideLabel||(i=this.inputsForLabels?"input":"span",n=document.createElement(i),r=document.createElement(i),n.classList.add("range-".concat(i,"-label"),"lower","value"),r.classList.add("range-".concat(i,"-label"),"upper","value"),this.setupLabelStyles(n,r),this.inputsForLabels?(n.value=this.minRange,r.value=this.maxRange,n.setAttribute("type","number"),n.setAttribute(constants.MAX,this.minRange),n.setAttribute(constants.MAX,this.maxRange),n.setAttribute(constants.RANGE_INPUT_DATA_LABEL_MIN,""),r.setAttribute("type","number"),r.setAttribute(constants.MIN,this.minRange),r.setAttribute(constants.MAX,this.maxRange),r.setAttribute(constants.RANGE_INPUT_DATA_LABEL_MAX,""),n.addEventListener("input",this.onRangeInput),r.addEventListener("input",this.onRangeInput),n.addEventListener("blur",this.emitRangeSelection),r.addEventListener("blur",this.emitRangeSelection)):(n.appendChild(document.createTextNode(this.minRange)),r.appendChild(document.createTextNode(this.maxRange))),e.insertBefore(n,t.previousElementSibling),e.insertBefore(r,t.previousElementSibling),(i=document.createElement("i")).classList.add("range-input-dash-icon"),i.setAttribute("aria-hidden",!0),i.innerHTML="&#65123",e.insertBefore(i,t.previousElementSibling.previousElementSibling))}}],[{key:"observedAttributes",get:function(){return["min-label","max-label","min-range","max-range","min","max","preset-min","preset-max"]}}])}());window.customElements.define("range-selector",SimpleRange);