@cropper/element-handle/dist/element-handle.esm.min.js

A custom handle element for the Cropper.

const t="undefined"!=typeof window&&void 0!==window.document,e=t?window:{};t&&e.document.documentElement;const s=Number.isNaN||e.isNaN;const o=/([a-z\d])([A-Z])/g;function i(t){return String(t).replace(o,"$1-$2").toLowerCase()}const n=/-[A-z\d]/g;function r(t){return t.replace(n,(t=>t.slice(1).toUpperCase()))}const a={bubbles:!0,cancelable:!0,composed:!0};const c=Promise.resolve();const h=/left|top|width|height/i,l="open",d=new WeakMap,p=new WeakMap,u=new Map,b=e.document&&Array.isArray(e.document.adoptedStyleSheets)&&"replaceSync"in e.CSSStyleSheet.prototype;class m extends HTMLElement{get $sharedStyle(){return(this.themeColor?`:host{--theme-color: ${this.themeColor};}`:"")+":host([hidden]){display:none!important}"}constructor(){var t,e;super(),this.shadowRootMode=l,this.slottable=!0;const s=null===(e=null===(t=Object.getPrototypeOf(this))||void 0===t?void 0:t.constructor)||void 0===e?void 0:e.$name;s&&u.set(s,this.tagName.toLowerCase())}static get observedAttributes(){return["shadow-root-mode","slottable","theme-color"]}attributeChangedCallback(t,e,s){if(Object.is(s,e))return;const o=r(t);let i=s;switch(typeof this[o]){case"boolean":i=null!==s&&"false"!==s;break;case"number":i=Number(s)}switch(this[o]=i,t){case"theme-color":{const t=p.get(this),e=this.$sharedStyle;t&&e&&(b?t.replaceSync(e):t.textContent=e);break}}}$propertyChangedCallback(t,e,o){if(!Object.is(o,e))switch(t=i(t),typeof o){case"boolean":!0===o?this.hasAttribute(t)||this.setAttribute(t,""):this.removeAttribute(t);break;case"number":o=s(o)?"":String(o);default:o?this.getAttribute(t)!==o&&this.setAttribute(t,o):this.removeAttribute(t)}}connectedCallback(){Object.getPrototypeOf(this).constructor.observedAttributes.forEach((t=>{const e=r(t);let s=this[e];(function(t){return void 0===t})(s)||this.$propertyChangedCallback(e,void 0,s),Object.defineProperty(this,e,{enumerable:!0,configurable:!0,get:()=>s,set(t){const o=s;s=t,this.$propertyChangedCallback(e,o,t)}})}));const t=this.attachShadow({mode:this.shadowRootMode||l});if(this.shadowRoot||d.set(this,t),p.set(this,this.$addStyles(this.$sharedStyle)),this.$style&&this.$addStyles(this.$style),this.$template){const e=document.createElement("template");e.innerHTML=this.$template,t.appendChild(e.content)}if(this.slottable){const e=document.createElement("slot");t.appendChild(e)}}disconnectedCallback(){p.has(this)&&p.delete(this),d.has(this)&&d.delete(this)}$getTagNameOf(t){var e;return null!==(e=u.get(t))&&void 0!==e?e:t}$setStyles(t){return Object.keys(t).forEach((e=>{let o=t[e];(function(t){return"number"==typeof t&&!s(t)})(o)&&(o=0!==o&&h.test(e)?`${o}px`:String(o)),this.style[e]=o})),this}$getShadowRoot(){return this.shadowRoot||d.get(this)}$addStyles(t){let e;const s=this.$getShadowRoot();return b?(e=new CSSStyleSheet,e.replaceSync(t),s.adoptedStyleSheets=s.adoptedStyleSheets.concat(e)):(e=document.createElement("style"),e.textContent=t,s.appendChild(e)),e}$emit(t,e,s){return function(t,e,s,o){return t.dispatchEvent(new CustomEvent(e,Object.assign(Object.assign(Object.assign({},a),{detail:s}),o)))}(this,t,e,s)}$nextTick(t){return function(t,e){return e?c.then(t?e.bind(t):e):c}(this,t)}static $define(s,o){var n;"object"==typeof(n=s)&&null!==n&&(o=s,s=""),s||(s=this.$name||this.name),s=i(s),t&&e.customElements&&!e.customElements.get(s)&&customElements.define(s,this,o)}}m.$version="2.0.0";class g extends m{constructor(){super(...arguments),this.$onCanvasCropEnd=null,this.$onCanvasCropStart=null,this.$style=':host{background-color:var(--theme-color);display:block}:host([action=move]),:host([action=select]){height:100%;left:0;position:absolute;top:0;width:100%}:host([action=move]){cursor:move}:host([action=select]){cursor:crosshair}:host([action$=-resize]){background-color:transparent;height:15px;position:absolute;width:15px}:host([action$=-resize]):after{background-color:var(--theme-color);content:"";display:block;height:5px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:5px}:host([action=n-resize]),:host([action=s-resize]){cursor:ns-resize;left:50%;transform:translateX(-50%);width:100%}:host([action=n-resize]){top:-8px}:host([action=s-resize]){bottom:-8px}:host([action=e-resize]),:host([action=w-resize]){cursor:ew-resize;height:100%;top:50%;transform:translateY(-50%)}:host([action=e-resize]){right:-8px}:host([action=w-resize]){left:-8px}:host([action=ne-resize]){cursor:nesw-resize;right:-8px;top:-8px}:host([action=nw-resize]){cursor:nwse-resize;left:-8px;top:-8px}:host([action=se-resize]){bottom:-8px;cursor:nwse-resize;right:-8px}:host([action=se-resize]):after{height:15px;width:15px}@media (pointer:coarse){:host([action=se-resize]):after{height:10px;width:10px}}@media (pointer:fine){:host([action=se-resize]):after{height:5px;width:5px}}:host([action=sw-resize]){bottom:-8px;cursor:nesw-resize;left:-8px}:host([plain]){background-color:transparent}',this.action="none",this.plain=!1,this.slottable=!1,this.themeColor="rgba(51, 153, 255, 0.5)"}static get observedAttributes(){return super.observedAttributes.concat(["action","plain"])}}g.$name="cropper-handle",g.$version="2.0.0";export{g as default};