@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
1 lines • 33 kB
JavaScript
import{r as t,h as a,g as s,c as i,H as e}from"./p-c5b7f45e.js";import{g as h}from"./p-a4e6e35b.js";import{g as n}from"./p-cebd4de5.js";import{h as l}from"./p-6b4b7af1.js";function r(t){return t<0?-1:1}function o(t,a,s){const i=a[0]-t[0];return i?(3*(a[1]-t[1])/i-s)/2:s}function c(t,a,s,i,e){const[h,n]=t,[l,r]=a,o=(l-h)/3;return`C ${e([h+o,n+o*s]).join(",")} ${e([l-o,r-o*i]).join(",")} ${e([l,r]).join(",")}`}const u=class{constructor(a){t(this,a),this.data=[],this.width=300,this.height=100,this.maskId=`calcite-graph-mask-${h()}`}render(){const{data:t,width:s,height:i,highlightMax:e,highlightMin:h}=this,n=this.maskId;if(!t||0===t.length)return a("svg",{class:"svg",height:i,preserveAspectRatio:"none",viewBox:`0 0 ${s} ${i}`,width:s});const{min:l,max:u}=function(t){const[a,s]=t[0];return t.reduce((({min:t,max:a},[s,i])=>({min:[Math.min(t[0],s),Math.min(t[1],i)],max:[Math.max(a[0],s),Math.max(a[1],i)]})),{min:[a,s],max:[a,s]})}(t),m=function({width:t,height:a,min:s,max:i}){const e=i[0]-s[0],h=i[1]-s[1];return s=>[s[0]/e*t,a-s[1]/h*a]}({min:l,max:u,width:s,height:i}),[d]=m([h,u[1]]),[b]=m([e,u[1]]),p=function({data:t,min:a,max:s,t:i}){if(0===t.length)return"";const[e,h]=i(t[0]),[n,l]=i(a),[u]=i(s);let m,d,b;const p=t.reduce(((a,s,e)=>{if(d=t[e-2],b=t[e-1],e>1){const t=function(t,a,s){const i=a[0]-t[0],e=s[0]-a[0],h=(a[1]-t[1])/(i||e<0&&0),n=(s[1]-a[1])/(e||i<0&&0),l=(h*e+n*i)/(i+e);return(r(h)+r(n))*Math.min(Math.abs(h),Math.abs(n),.5*Math.abs(l))||0}(d,b,s),e=void 0===m?o(d,b,t):m,h=c(d,b,e,t,i);return m=t,`${a} ${h}`}return a}),`M ${n},${l} L ${n},${h} L ${e},${h}`),f=t[t.length-1];return`${p} ${c(b,f,m,o(b,f,m),i)} L ${u},${l} Z`}({data:t,min:l,max:u,t:m});return a("svg",{class:"svg",height:i,preserveAspectRatio:"none",viewBox:`0 0 ${s} ${i}`,width:s},void 0!==h?a("svg",{class:"svg",height:i,preserveAspectRatio:"none",viewBox:`0 0 ${s} ${i}`,width:s},a("mask",{height:"100%",id:`${n}1`,width:"100%",x:"0%",y:"0%"},a("path",{d:`\n M 0,0\n L ${d-1},0\n L ${d-1},${i}\n L 0,${i}\n Z\n `,fill:"white"})),a("mask",{height:"100%",id:`${n}2`,width:"100%",x:"0%",y:"0%"},a("path",{d:`\n M ${d+1},0\n L ${b-1},0\n L ${b-1},${i}\n L ${d+1}, ${i}\n Z\n `,fill:"white"})),a("mask",{height:"100%",id:`${n}3`,width:"100%",x:"0%",y:"0%"},a("path",{d:`\n M ${b+1},0\n L ${s},0\n L ${s},${i}\n L ${b+1}, ${i}\n Z\n `,fill:"white"})),a("path",{class:"graph-path",d:p,mask:`url(#${n}1)`}),a("path",{class:"graph-path--highlight",d:p,mask:`url(#${n}2)`}),a("path",{class:"graph-path",d:p,mask:`url(#${n}3)`})):a("path",{class:"graph-path",d:p}))}get el(){return s(this)}};u.style="@-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 m=class{constructor(a){t(this,a),this.calciteSliderChange=i(this,"calciteSliderChange",7),this.calciteSliderUpdate=i(this,"calciteSliderUpdate",7),this.disabled=!1,this.min=0,this.max=100,this.value=null,this.snap=!1,this.step=1,this.hasHistogram=!1,this.guid=`calcite-slider-${h()}`,this.isRange=!1,this.tickValues=[],this.activeProp="value",this.minMaxValueRange=null,this.minValueDragRange=null,this.maxValueDragRange=null}histogramWatcher(t){this.hasHistogram=!!t}componentWillLoad(){this.isRange=!(!this.maxValue&&0!==this.maxValue),this.tickValues=this.generateTickValues(),this.value=this.bound(this.value),this.snap&&(this.value=this.getClosestStep(this.value)),this.histogram&&(this.hasHistogram=!0),this.emitChange()}componentDidRender(){this.labelHandles&&(this.adjustHostObscuredHandleLabel("value"),this.isRange&&(this.adjustHostObscuredHandleLabel("minValue"),this.precise&&this.isRange&&!this.hasHistogram||this.hyphenateCollidingRangeHandleLabels())),this.hideObscuredBoundingTickLabels()}render(){const t=this.el.id||this.guid,s=this.minValue||this.min,i=this.maxValue||this.value,h=this.isRange?"maxValue":"value",n=this[h],l=100*this.getUnitInterval(s)+"%",r=100-100*this.getUnitInterval(i)+"%",o=a("button",{"aria-label":this.isRange?this.maxLabel:this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":n,class:{thumb:!0,"thumb--value":!0,"thumb--active":"minMaxValue"!==this.lastDragProp&&this.dragProp===h},disabled:this.disabled,onBlur:()=>this.activeProp=null,onFocus:()=>this.activeProp=h,onMouseDown:()=>this.dragStart(h),onTouchStart:t=>this.dragStart(h,t),ref:t=>this.maxHandle=t,role:"slider",style:{right:r}},a("div",{class:"handle"})),c=a("button",{"aria-label":this.isRange?this.maxLabel:this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":n,class:{thumb:!0,"thumb--value":!0,"thumb--active":"minMaxValue"!==this.lastDragProp&&this.dragProp===h},disabled:this.disabled,onBlur:()=>this.activeProp=null,onFocus:()=>this.activeProp=h,onMouseDown:()=>this.dragStart(h),onTouchStart:t=>this.dragStart(h,t),ref:t=>this.maxHandle=t,role:"slider",style:{right:r}},a("span",{"aria-hidden":"true",class:"handle__label handle__label--value"},n?n.toLocaleString():n),a("span",{"aria-hidden":"true",class:"handle__label handle__label--value static"},n?n.toLocaleString():n),a("span",{"aria-hidden":"true",class:"handle__label handle__label--value transformed"},n?n.toLocaleString():n),a("div",{class:"handle"})),u=a("button",{"aria-label":this.isRange?this.maxLabel:this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":n,class:{thumb:!0,"thumb--value":!0,"thumb--active":"minMaxValue"!==this.lastDragProp&&this.dragProp===h},disabled:this.disabled,onBlur:()=>this.activeProp=null,onFocus:()=>this.activeProp=h,onMouseDown:()=>this.dragStart(h),onTouchStart:t=>this.dragStart(h,t),ref:t=>this.maxHandle=t,role:"slider",style:{right:r}},a("div",{class:"handle"}),a("span",{"aria-hidden":"true",class:"handle__label handle__label--value"},n?n.toLocaleString():n),a("span",{"aria-hidden":"true",class:"handle__label handle__label--value static"},n?n.toLocaleString():n),a("span",{"aria-hidden":"true",class:"handle__label handle__label--value transformed"},n?n.toLocaleString():n)),m=a("button",{"aria-label":this.isRange?this.maxLabel:this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":n,class:{thumb:!0,"thumb--value":!0,"thumb--active":"minMaxValue"!==this.lastDragProp&&this.dragProp===h,"thumb--precise":!0},disabled:this.disabled,onBlur:()=>this.activeProp=null,onFocus:()=>this.activeProp=h,onMouseDown:()=>this.dragStart(h),onTouchStart:t=>this.dragStart(h,t),ref:t=>this.maxHandle=t,role:"slider",style:{right:r}},a("div",{class:"handle"}),a("div",{class:"handle-extension"})),d=a("button",{"aria-label":this.isRange?this.maxLabel:this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":n,class:{thumb:!0,"thumb--value":!0,"thumb--active":"minMaxValue"!==this.lastDragProp&&this.dragProp===h,"thumb--precise":!0},disabled:this.disabled,onBlur:()=>this.activeProp=null,onFocus:()=>this.activeProp=h,onMouseDown:()=>this.dragStart(h),onTouchStart:t=>this.dragStart(h,t),ref:t=>this.maxHandle=t,role:"slider",style:{right:r}},a("div",{class:"handle-extension"}),a("div",{class:"handle"})),b=a("button",{"aria-label":this.isRange?this.maxLabel:this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":n,class:{thumb:!0,"thumb--value":!0,"thumb--active":"minMaxValue"!==this.lastDragProp&&this.dragProp===h,"thumb--precise":!0},disabled:this.disabled,onBlur:()=>this.activeProp=null,onFocus:()=>this.activeProp=h,onMouseDown:()=>this.dragStart(h),onTouchStart:t=>this.dragStart(h,t),ref:t=>this.maxHandle=t,role:"slider",style:{right:r}},a("span",{"aria-hidden":"true",class:"handle__label handle__label--value"},n?n.toLocaleString():n),a("span",{"aria-hidden":"true",class:"handle__label handle__label--value static"},n?n.toLocaleString():n),a("span",{"aria-hidden":"true",class:"handle__label handle__label--value transformed"},n?n.toLocaleString():n),a("div",{class:"handle"}),a("div",{class:"handle-extension"})),p=a("button",{"aria-label":this.isRange?this.maxLabel:this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":n,class:{thumb:!0,"thumb--value":!0,"thumb--active":"minMaxValue"!==this.lastDragProp&&this.dragProp===h,"thumb--precise":!0},disabled:this.disabled,onBlur:()=>this.activeProp=null,onFocus:()=>this.activeProp=h,onMouseDown:()=>this.dragStart(h),onTouchStart:t=>this.dragStart(h,t),ref:t=>this.maxHandle=t,role:"slider",style:{right:r}},a("div",{class:"handle-extension"}),a("div",{class:"handle"}),a("span",{"aria-hidden":"true",class:"handle__label handle__label--value"},n?n.toLocaleString():n),a("span",{"aria-hidden":"true",class:"handle__label handle__label--value static"},n?n.toLocaleString():n),a("span",{"aria-hidden":"true",class:"handle__label handle__label--value transformed"},n?n.toLocaleString():n)),f=a("button",{"aria-label":this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":this.minValue,class:{thumb:!0,"thumb--minValue":!0,"thumb--active":"minValue"===this.dragProp},disabled:this.disabled,onBlur:()=>this.activeProp=null,onFocus:()=>this.activeProp="minValue",onMouseDown:()=>this.dragStart("minValue"),onTouchStart:t=>this.dragStart("minValue",t),ref:t=>this.minHandle=t,role:"slider",style:{left:l}},a("div",{class:"handle"})),x=a("button",{"aria-label":this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":this.minValue,class:{thumb:!0,"thumb--minValue":!0,"thumb--active":"minValue"===this.dragProp},disabled:this.disabled,onBlur:()=>this.activeProp=null,onFocus:()=>this.activeProp="minValue",onMouseDown:()=>this.dragStart("minValue"),onTouchStart:t=>this.dragStart("minValue",t),ref:t=>this.minHandle=t,role:"slider",style:{left:l}},a("span",{"aria-hidden":"true",class:"handle__label handle__label--minValue"},this.minValue&&this.minValue.toLocaleString()),a("span",{"aria-hidden":"true",class:"handle__label handle__label--minValue static"},this.minValue&&this.minValue.toLocaleString()),a("span",{"aria-hidden":"true",class:"handle__label handle__label--minValue transformed"},this.minValue&&this.minValue.toLocaleString()),a("div",{class:"handle"})),g=a("button",{"aria-label":this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":this.minValue,class:{thumb:!0,"thumb--minValue":!0,"thumb--active":"minValue"===this.dragProp},disabled:this.disabled,onBlur:()=>this.activeProp=null,onFocus:()=>this.activeProp="minValue",onMouseDown:()=>this.dragStart("minValue"),onTouchStart:t=>this.dragStart("minValue",t),ref:t=>this.minHandle=t,role:"slider",style:{left:l}},a("div",{class:"handle"}),a("span",{"aria-hidden":"true",class:"handle__label handle__label--minValue"},this.minValue&&this.minValue.toLocaleString()),a("span",{"aria-hidden":"true",class:"handle__label handle__label--minValue static"},this.minValue&&this.minValue.toLocaleString()),a("span",{"aria-hidden":"true",class:"handle__label handle__label--minValue transformed"},this.minValue&&this.minValue.toLocaleString())),v=a("button",{"aria-label":this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":this.minValue,class:{thumb:!0,"thumb--minValue":!0,"thumb--active":"minValue"===this.dragProp,"thumb--precise":!0},disabled:this.disabled,onBlur:()=>this.activeProp=null,onFocus:()=>this.activeProp="minValue",onMouseDown:()=>this.dragStart("minValue"),onTouchStart:t=>this.dragStart("minValue",t),ref:t=>this.minHandle=t,role:"slider",style:{left:l}},a("div",{class:"handle-extension"}),a("div",{class:"handle"})),k=a("button",{"aria-label":this.minLabel,"aria-orientation":"horizontal","aria-valuemax":this.max,"aria-valuemin":this.min,"aria-valuenow":this.minValue,class:{thumb:!0,"thumb--minValue":!0,"thumb--active":"minValue"===this.dragProp,"thumb--precise":!0},disabled:this.disabled,onBlur:()=>this.activeProp=null,onFocus:()=>this.activeProp="minValue",onMouseDown:()=>this.dragStart("minValue"),onTouchStart:t=>this.dragStart("minValue",t),ref:t=>this.minHandle=t,role:"slider",style:{left:l}},a("div",{class:"handle-extension"}),a("div",{class:"handle"}),a("span",{"aria-hidden":"true",class:"handle__label handle__label--minValue"},this.minValue&&this.minValue.toLocaleString()),a("span",{"aria-hidden":"true",class:"handle__label handle__label--minValue static"},this.minValue&&this.minValue.toLocaleString()),a("span",{"aria-hidden":"true",class:"handle__label handle__label--minValue transformed"},this.minValue&&this.minValue.toLocaleString()));return a(e,{id:t},a("div",{class:{container:!0,"container--range":this.isRange}},this.renderGraph(),a("div",{class:"track"},a("div",{class:"track__range",onMouseDown:()=>this.dragStart("minMaxValue"),onTouchStart:t=>this.dragStart("minMaxValue",t),style:{left:l,right:r}}),a("div",{class:"ticks"},this.tickValues.map((t=>a("span",{class:{tick:!0,"tick--active":t>=s&&t<=i},style:{left:100*this.getUnitInterval(t)+"%"}},this.renderTickLabel(t)))))),!this.precise&&!this.labelHandles&&this.isRange&&f,!this.hasHistogram&&!this.precise&&this.labelHandles&&this.isRange&&x,this.precise&&!this.labelHandles&&this.isRange&&v,this.precise&&this.labelHandles&&this.isRange&&k,this.hasHistogram&&!this.precise&&this.labelHandles&&this.isRange&&g,!this.precise&&!this.labelHandles&&o,!this.hasHistogram&&!this.precise&&this.labelHandles&&c,!this.hasHistogram&&this.precise&&!this.labelHandles&&m,this.hasHistogram&&this.precise&&!this.labelHandles&&d,!this.hasHistogram&&this.precise&&this.labelHandles&&b,this.hasHistogram&&!this.precise&&this.labelHandles&&u,this.hasHistogram&&this.precise&&this.labelHandles&&p))}renderGraph(){return this.histogram?a("div",{class:"graph"},a("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(t){const s=t===this.min,i=t===this.max,e=a("span",{class:{tick__label:!0,"tick__label--min":s,"tick__label--max":i}},t.toLocaleString());return this.labelTicks&&!this.hasHistogram&&!this.isRange||this.labelTicks&&!this.hasHistogram&&this.isRange&&!this.precise&&!this.labelHandles||this.labelTicks&&!this.hasHistogram&&this.isRange&&!this.precise&&this.labelHandles||this.labelTicks&&!this.hasHistogram&&this.isRange&&this.precise&&(s||i)||this.labelTicks&&this.hasHistogram&&!this.precise&&!this.labelHandles||this.labelTicks&&this.hasHistogram&&this.precise&&!this.labelHandles&&(s||i)||this.labelTicks&&this.hasHistogram&&!this.precise&&this.labelHandles&&(s||i)||this.labelTicks&&this.hasHistogram&&this.precise&&this.labelHandles&&(s||i)?e:null}handleLabelFocus(t){t.detail.interactedEl!==this.el&&l(t.detail.labelEl,this.el)&&this.setFocus()}keyDownHandler(t){const a=this[this.activeProp];switch(n(t.key)){case"ArrowUp":case"ArrowRight":t.preventDefault(),this[this.activeProp]=this.bound(a+this.step,this.activeProp),this.emitChange();break;case"ArrowDown":case"ArrowLeft":t.preventDefault(),this[this.activeProp]=this.bound(a-this.step,this.activeProp),this.emitChange();break;case"PageUp":this.pageStep&&(t.preventDefault(),this[this.activeProp]=this.bound(a+this.pageStep,this.activeProp),this.emitChange());break;case"PageDown":this.pageStep&&(t.preventDefault(),this[this.activeProp]=this.bound(a-this.pageStep,this.activeProp),this.emitChange());break;case"Home":t.preventDefault(),this[this.activeProp]=this.bound(this.min,this.activeProp),this.emitChange();break;case"End":t.preventDefault(),this[this.activeProp]=this.bound(this.max,this.activeProp),this.emitChange();break;case"Enter":case" ":t.preventDefault()}}mouseHandler(t){const a=this.translate(t.clientX||t.pageX);let s="value";if(this.isRange&&(s=a>=this.minValue&&a<=this.maxValue&&"minMaxValue"===this.lastDragProp?"minMaxValue":Math.abs(this.maxValue-a)<Math.abs(this.minValue-a)?"maxValue":"minValue"),this[s]=this.bound(a,s),this.dragStart(s),"click"===t.type)switch(this.dragEnd(),this.emitChange(),s){default:case"maxValue":this.maxHandle.focus();break;case"minValue":this.minHandle.focus();break;case"minMaxValue":}}async setFocus(){(this.minHandle?this.minHandle:this.maxHandle).focus()}generateTickValues(){const t=[];let a=this.min;for(;this.ticks&&a<this.max+this.ticks;)t.push(a),a+=this.ticks;return t}dragStart(t,a){a&&a.preventDefault(),this.dragListener&&this.dragEnd(),this.dragProp=t,this.lastDragProp=this.dragProp,this.activeProp=t,this.dragListener=this.dragListener||this.dragUpdate.bind(this),document.addEventListener("mousemove",this.dragListener),document.addEventListener("touchmove",this.dragListener,{capture:!1}),document.addEventListener("mouseup",this.dragEnd.bind(this)),document.addEventListener("touchend",this.dragEnd.bind(this),!1),document.addEventListener("touchcancel",this.dragEnd.bind(this))}dragUpdate(t){if(t.preventDefault(),t.stopPropagation(),this.dragProp){const a=this.translate(t.clientX||t.pageX);if(this.isRange&&"minMaxValue"===this.dragProp)if(this.minValueDragRange&&this.maxValueDragRange&&this.minMaxValueRange){const t=a-this.minValueDragRange,s=a+this.maxValueDragRange;s<=this.max&&t>=this.min&&s-t===this.minMaxValueRange&&(this.minValue=this.bound(t,"minValue"),this.maxValue=this.bound(s,"maxValue"))}else this.minValueDragRange=a-this.minValue,this.maxValueDragRange=this.maxValue-a,this.minMaxValueRange=this.maxValue-this.minValue;else this[this.dragProp]=this.bound(a,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}bound(t,a){return t=Math.min(t,this.max),t=Math.max(t,this.min),"maxValue"===a&&(t=Math.max(t,this.minValue)),"minValue"===a&&(t=Math.min(t,this.maxValue)),t}translate(t){const a=this.max-this.min,{left:s,width:i}=this.el.getBoundingClientRect();let e=this.bound(this.min+a*((t-s)/i));return this.snap&&this.step&&(e=this.getClosestStep(e)),e}getClosestStep(t){if(t=this.bound(t),this.step){const a=Math.round(t/this.step)*this.step;t=this.bound(a)}return t}getFontSizeForElement(t){return Number(window.getComputedStyle(t).getPropertyValue("font-size").match(/\d+/)[0])}getUnitInterval(t){return((t=this.bound(t))-this.min)/(this.max-this.min)}adjustHostObscuredHandleLabel(t){const a=this.el.shadowRoot.querySelector(`.handle__label--${t}`),s=this.el.shadowRoot.querySelector(`.handle__label--${t}.static`),i=this.el.shadowRoot.querySelector(`.handle__label--${t}.transformed`),e=this.getHostOffset(s.getBoundingClientRect().left,s.getBoundingClientRect().right);a.style.transform=`translateX(${e}px)`,i.style.transform=`translateX(${e}px)`}hyphenateCollidingRangeHandleLabels(){const t=this.el.shadowRoot.querySelector(".handle__label--minValue"),a=this.el.shadowRoot.querySelector(".handle__label--minValue.static"),s=this.el.shadowRoot.querySelector(".handle__label--minValue.transformed"),i=this.getHostOffset(a.getBoundingClientRect().left,a.getBoundingClientRect().right),e=this.el.shadowRoot.querySelector(".handle__label--value"),h=this.el.shadowRoot.querySelector(".handle__label--value.static"),n=this.el.shadowRoot.querySelector(".handle__label--value.transformed"),l=this.getHostOffset(h.getBoundingClientRect().left,h.getBoundingClientRect().right),r=this.getFontSizeForElement(t),o=this.getRangeLabelOverlap(s,n);if(o>0)if(t.classList.add("hyphen"),0===l&&0===i){let a=o/2-r/2;a=-1===Math.sign(a)?Math.abs(a):-a;const i=this.getHostOffset(s.getBoundingClientRect().left+a-r/2,s.getBoundingClientRect().right+a-r/2);let h=o/2;const l=this.getHostOffset(n.getBoundingClientRect().left+h,n.getBoundingClientRect().right+h);0!==i&&(a+=i,h+=i),0!==l&&(a+=l,h+=l),t.style.transform=`translateX(${a}px)`,s.style.transform=`translateX(${a-r/2}px)`,e.style.transform=`translateX(${h}px)`,n.style.transform=`translateX(${h}px)`}else if(0===i||0!==Math.sign(l)&&1!==Math.sign(l)){if(0!==l){let a=Math.abs(i)+o-r/2;a=-1===Math.sign(a)?Math.abs(a):-a,t.style.transform=`translateX(${a}px)`,s.style.transform=`translateX(${a-r/2}px)`}}else t.style.transform=`translateX(${i+r/2}px)`,e.style.transform=`translateX(${o+l}px)`,n.style.transform=`translateX(${o+l}px)`;else t.classList.remove("hyphen"),t.style.transform=`translateX(${i}px)`,s.style.transform=`translateX(${i}px)`,e.style.transform=`translateX(${l}px)`,n.style.transform=`translateX(${l}px)`}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 t=this.el.shadowRoot.querySelector(".thumb--minValue"),a=this.el.shadowRoot.querySelector(".thumb--value"),s=this.el.shadowRoot.querySelector(".tick__label--min"),i=this.el.shadowRoot.querySelector(".tick__label--max");!t&&a&&s&&i&&(s.style.opacity=this.isMinTickLabelObscured(s,a)?"0":"1",i.style.opacity=this.isMaxTickLabelObscured(i,a)?"0":"1"),t&&a&&s&&i&&(s.style.opacity=this.isMinTickLabelObscured(s,t)||this.isMinTickLabelObscured(s,a)?"0":"1",i.style.opacity=this.isMaxTickLabelObscured(i,t)||this.isMaxTickLabelObscured(i,a)&&this.hasHistogram?"0":"1")}getHostOffset(t,a){const s=this.el.getBoundingClientRect();return t+7<s.left?s.left-t-7:a-7>s.right?7-(a-s.right):0}getRangeLabelOverlap(t,a){const s=t.getBoundingClientRect(),i=a.getBoundingClientRect(),e=this.getFontSizeForElement(t),h=s.right+e-i.left;return h>0?h:0}isMinTickLabelObscured(t,a){const s=t.getBoundingClientRect();return a.getBoundingClientRect().left<s.right}isMaxTickLabelObscured(t,a){const s=t.getBoundingClientRect();return a.getBoundingClientRect().right>s.left}get el(){return s(this)}static get watchers(){return{histogram:["histogramWatcher"]}}};m.style='@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}';export{u as calcite_graph,m as calcite_slider}