(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{34:function(t,e,s){"use strict";s.r(e);var n=s(6),i=s(0);let o,r=t=>t;class a extends n.a{static get properties(){return{active:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:i.a.fromAttribute,toAttributeConverter:i.a.toAttribute},x:{observe:!0,DOM:!0,fromAttributeConverter:i.b.fromAttribute},y:{observe:!0,DOM:!0,fromAttributeConverter:i.b.fromAttribute},pressed:{observe:!0,DOM:!0,reflect:!0,fromAttributeConverter:i.a.fromAttribute,toAttributeConverter:i.a.toAttribute,changedHandler:"_pressedChanged"},_startMouseX:{observe:!0},_startElementX:{observe:!0},_startMouseY:{observe:!0},_startElementY:{observe:!0}}}static get propertiesChangedHandlers(){return{_boundsChanged:["x","y"]}}constructor(){super(),this.active=!1,this.x=.5,this.y=.5,this.pressed=!1,this.addEventListener("mousedown",this._handleMouseDown.bind(this)),window.addEventListener("mousemove",this._handleMouseMove.bind(this)),window.addEventListener("mouseup",this._handleMouseUp.bind(this))}get template(){return Object(n.b)(o||(o=r`
      <style>${0}</style>
      <div></div>
    `),"\n:host,\n:host *,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\na {\n  color: inherit;\n}\n:host(:not(.focus-visible)),\n:host(.focus-visible),\n:host(:not(.focus-visible)) input,\n:host(:not(.focus-visible)) button,\n:host(:not(.focus-visible)) select {\n  outline: none;\n}\n[hidden] {\n  display: none !important;\n}\n:host {\n  display: block;\n}\ndiv {\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\ndiv:before,\ndiv:after {\n  position: absolute;\n  content: '';\n  transition: 0.3s opacity;\n  opacity: 0;\n  z-index: 1;\n}\ndiv:before {\n  width: 2px;\n  top: 0;\n  bottom: 0;\n  background-color: #fff;\n  left: var(--object-position-x);\n  transform: translateX(-50%);\n}\ndiv:after {\n  height: 2px;\n  left: 0;\n  right: 0;\n  background-color: #fff;\n  top: var(--object-position-y);\n  transform: translateY(-50%);\n}\n:host([active]) div {\n  cursor: -webkit-grab;\n}\n:host([pressed]) div:before,\n:host([pressed]) div:after {\n  opacity: 1;\n}\n")}_boundsChanged(){this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:{x:this.x,y:this.y}}})),this.updateStyles("--object-position-x",""+((100*this.x).toFixed(1)+"%")),this.updateStyles("--object-position-y",""+((100*this.y).toFixed(1)+"%"))}_pressedChanged(){this.dispatchEvent(new CustomEvent("pressed-changed",{detail:{value:this.pressed}}))}_handleMouseDown(t){this.active&&(t.preventDefault(),this.pressed=!0,this._startMouseX=t.pageX,this._startMouseY=t.pageY,this._startElementX=this.x||0===this.x?this.x:.5,this._startElementY=this.y||0===this.y?this.y:.5)}_handleMouseMove(t){if(!this.active||!this.pressed)return;const e=this.offsetWidth,s=this.offsetHeight,n=(0-(t.pageX-this._startMouseX))/e,i=(0-(t.pageY-this._startMouseY))/s,o=this._startElementX+n,r=this._startElementY+i;this.x=[o,0,1].sort()[1],this.y=[r,0,1].sort()[1]}_handleMouseUp(){this.active&&(this.pressed=!1)}}window.customElements.define("object-position",a)}}]);
//# sourceMappingURL=0e7e9d25b0a8b8ea000c.js.map