(window.webpackJsonpvtex_styleguide_9_146_13=window.webpackJsonpvtex_styleguide_9_146_13||[]).push([["Slider"],{0:function(e,t){e.exports=React},13:function(e,t){e.exports=Classnames},1432:function(e,t,a){"use strict";a.r(t),function(e){var t=a(8);a.p=Object(t.getPublicPath)("vtex.styleguide@9.146.13");var r=Object(t.register)((function(){return a(1532)}),e,"vtex.styleguide@9.146.13","vtex.styleguide@9.x","Slider");r.renderHotReload,r.setupHMR}.call(this,a(16)(e))},1532:function(e,t,a){"use strict";a.r(t);var r=a(29),n=a(4),o=a(5),s=a(12),l=a(6),i=a(7),u=a(1),c=a(9),p=a(0),d=a.n(p),f=a(13),v=a.n(f);function g(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,r)}return a}function h(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?g(Object(a),!0).forEach((function(t){Object(c.a)(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):g(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function b(e){var t=e.onDragStart,a=e.position,r=e.active,n=e.disabled,o=e.value,s=e.displayPopup,l=e.formatValue,i=e.offset,u=e.icon,c=v()("vtex-slider__selector-container absolute pointer",r?"z-2":"z-1","left"===a?"left-0":"right-0"),p="left"===a?{transform:"translateX(".concat(i,"px) translateX(-50%)")}:{transform:"translateX(-".concat(i,"px) translateX(50%)")},f="vtex-slider__selector br-100 bg-action-primary flex justify-center items-center"+(r&&!n?" bg-action-primary":""),g="vtex-slider__selector-tooltip flex justify-center items-center relative ph3 pv2 br2 t-small ba "+(r?"vtex-slider__tooltip--active bg-action-primary white b--action-primary":"bg-base b--muted-2 c-muted-1");return d.a.createElement("div",{className:c,onMouseDown:t(a),onTouchStart:t(a),style:h(h({},p),{},{willChange:"transform",top:6.5})},(r||s)&&d.a.createElement("div",{className:"absolute pb4",style:{left:"50%",bottom:"100%"}},d.a.createElement("div",{className:g,style:{left:"-50%"}},l(o))),d.a.createElement("div",{className:f,style:{height:"0.75rem",width:"0.75rem",boxShadow:"-1px 1px 3px rgba(0, 0, 0, 0.15)"}},u))}function m(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,r)}return a}function y(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?m(Object(a),!0).forEach((function(t){Object(c.a)(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):m(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function O(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}();return function(){var a,r=Object(u.a)(e);if(t){var n=Object(u.a)(this).constructor;a=Reflect.construct(r,arguments,n)}else a=r.apply(this,arguments);return Object(i.a)(this,a)}}b.defaultProps={active:!1,disabled:!1,value:0,className:"",displayPopup:!1,icon:null};var j=["mouseup","pointerup","touchend"],w={mousedown:"mousemove",touchstart:"touchmove",pointerdown:"pointermove"};function D(e,t){return Math.round(e/t)*t}function E(e){return e.targetTouches&&e.targetTouches.length>0?e.targetTouches[0].pageX:e.pageX}function _(e){return"Escape"===e.key||27===e.keyCode}var x=function(e){Object(l.a)(a,e);var t=O(a);function a(){var e;Object(n.a)(this,a);for(var r=arguments.length,o=new Array(r),l=0;l<r;l++)o[l]=arguments[l];return e=t.call.apply(t,[this].concat(o)),Object(c.a)(Object(s.a)(e),"sliderRef",d.a.createRef()),Object(c.a)(Object(s.a)(e),"state",{dragging:null,translate:{left:0,right:0},values:{left:e.props.defaultValues&&e.props.defaultValues.length>0?e.props.defaultValues[0]:e.props.min,right:e.props.range&&e.props.defaultValues&&e.props.defaultValues.length>=2?e.props.defaultValues[1]:e.props.max}}),Object(c.a)(Object(s.a)(e),"updateLayout",(function(){e.updatePositionForValue(e.state.values.left,"left"),e.updatePositionForValue(e.state.values.right,"right")})),Object(c.a)(Object(s.a)(e),"getValueForPercent",(function(t,a){var r,n=e.props,o=n.min,s=n.max,l=n.step,i=n.range,u=o+t*(s-o);return(r=u!==o&&u!==s?D(u,l):u)<o?r=o:r>s&&(r=s),i?("left"===a&&r>=e.state.values.right?r=e.state.values.right-l:"right"===a&&r<=e.state.values.left&&(r=e.state.values.left+l),r):r})),Object(c.a)(Object(s.a)(e),"getTranslateValueForInputValue",(function(t,a){var r=e.props,n=r.max,o=r.min,s=e.sliderRef.current.getBoundingClientRect(),l=(t-o)/(n-o)*s.width;return"right"===a&&(l=s.width-l),l})),Object(c.a)(Object(s.a)(e),"handleSliderMouseDown",(function(t){var a,r=e.sliderRef.current.getBoundingClientRect(),n=E(t)-r.left,o=e.state.translate.left,s=r.width-e.state.translate.right;a=!e.props.range||Math.abs(o-n)<Math.abs(s-n)?"left":"right",e.handleDragStart(a)(t)})),Object(c.a)(Object(s.a)(e),"handleDragStart",(function(t){return function(a){if(a.stopPropagation(),!e.props.disabled&&!e.state.dragging){e.setState({dragging:t}),e.valuesBeforeDrag_=e.state.values,a.persist();var r=e.handleDrag(t);e.cancelDragEvent_=function(){e.valuesBeforeDrag_=void 0,j.forEach((function(e){return document.body.removeEventListener(e,n)})),document.body.removeEventListener(w[a.type],r),document.body.removeEventListener("keydown",e.handleKeyDown)};var n=function(){e.cancelDragEvent_(),e.handleDragEnd()};j.forEach((function(e){return document.body.addEventListener(e,n)})),document.body.addEventListener(w[a.type],r),document.body.addEventListener("keydown",e.handleKeyDown),e.updatePositionFromEvent(a,t)}}})),Object(c.a)(Object(s.a)(e),"updatePositionFromEvent",(function(t,a){var r=e.sliderRef.current.getBoundingClientRect(),n=(E(t)-r.left)/r.width,o=e.getValueForPercent(n,a);e.updatePositionForValue(o,a)})),Object(c.a)(Object(s.a)(e),"handleDrag",(function(t){return function(a){a.preventDefault(),e.updatePositionFromEvent(a,t)}})),Object(c.a)(Object(s.a)(e),"updatePositionForValue",(function(t,a){var r=e.getTranslateValueForInputValue(t,a);requestAnimationFrame((function(){e.setState((function(e){return{values:y(y({},e.values),{},Object(c.a)({},a,t)),translate:y(y({},e.translate),{},Object(c.a)({},a,r))}}))}))})),Object(c.a)(Object(s.a)(e),"handleDragEnd",(function(){e.setState({dragging:null}),e.cancelDragEvent_=void 0,e.props.range?e.props.onChange([e.state.values.left,e.state.values.right]):e.props.onChange([e.state.values.left])})),Object(c.a)(Object(s.a)(e),"handleKeyDown",(function(t){_(t)&&e.state.dragging&&(e.setState({dragging:!1,values:e.valuesBeforeDrag_}),e.cancelDragEvent_(),e.cancelDragEvent=void 0,e.updateLayout())})),e}return Object(o.a)(a,[{key:"componentDidUpdate",value:function(e){var t=this;e.min===this.props.min&&e.max===this.props.max||this.setState((function(e){var a,r;return{translate:{left:0,right:0},values:{left:null!==(a=e.values.left)&&void 0!==a?a:t.props.min,right:null!==(r=e.values.right)&&void 0!==r?r:t.props.max}}}),this.updateLayout);var a=e.values||[],n=Object(r.a)(a,2),o=n[0],s=n[1],l=this.props.values||[],i=Object(r.a)(l,2),u=i[0],c=i[1],p=this.state.values,d=p.left,f=p.right;o===u&&s===c||u===d&&c===f||this.setState((function(e){return y(y({},e),{},{values:{left:u,right:c}})}),(function(){t.updateLayout(),t.props.onChange([t.state.values.left,t.state.values.right])}))}},{key:"componentDidMount",value:function(){window.addEventListener("resize",this.updateLayout),this.props.defaultValues&&this.props.defaultValues.length>0&&this.updateLayout()}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.updateLayout),this.cancelDragEvent_&&(this.cancelDragEvent_(),this.cancelDragEvent_=void 0)}},{key:"render",value:function(){var e=this.props,t=e.disabled,a=e.alwaysShowCurrentValue,r=e.formatValue,n=e.range,o=e.handleIcon,s=this.state.translate,l=s.left,i=s.right,u=this.valuesBeforeDrag_?this.valuesBeforeDrag_.left:this.state.values.left,c=this.valuesBeforeDrag_?this.valuesBeforeDrag_.right:this.state.values.right,p=n?{left:l,right:i}:{left:0,width:l};return d.a.createElement("div",{className:"vtex-slider-container"},d.a.createElement("div",{className:"vtex-slider w-100 relative pointer",style:{height:24,MozUserSelect:"none",msUserSelect:"none",WebkitUserSelect:"none",userSelect:"none"},onMouseDown:this.handleSliderMouseDown,onTouchStart:this.handleSliderMouseDown},d.a.createElement("div",{ref:this.sliderRef,className:"vtex-slider__base w-100 bg-muted-4 absolute br-pill overflow-hidden",style:{height:"0.25rem",top:"0.7rem"}},d.a.createElement("div",{className:"vtex-slider__base-internal absolute h-100 "+(t?"bg-muted-4":"bg-action-primary"),style:p})),d.a.createElement(b,{offset:l,onDragStart:this.handleDragStart,position:"left",active:"left"===this.state.dragging,displayPopup:a,value:this.state.values.left,formatValue:r,icon:o}),n&&d.a.createElement(b,{offset:i,onDragStart:this.handleDragStart,position:"right",active:"right"===this.state.dragging,displayPopup:a,value:this.state.values.right,formatValue:r,icon:o})),d.a.createElement("div",{className:"vtex-slider__values-container flex justify-end"},d.a.createElement("label",{className:"vtex-slider__left-value t-small c-muted-1"},r(u)),n&&d.a.createElement("label",{className:"vtex-slider__right-value t-small c-muted-1"},d.a.createElement("span",{className:"vtex-slider__dash mh2"},"–"),r(c))))}}]),a}(p.Component);x.defaultProps={min:0,max:10,step:1,onChange:function(){},alwaysShowCurrentValue:!1,formatValue:function(e){return e},range:!1,handleIcon:null};t.default=x}},[[1432,"common"]]]);