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

A custom handle element for the Cropper.

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).CropperHandle=e()}(this,(function(){"use strict";const t="undefined"!=typeof window&&void 0!==window.document,e=t?window:{};t&&e.document.documentElement;const o=Number.isNaN||e.isNaN;const s=/([a-z\d])([A-Z])/g;function i(t){return String(t).replace(s,"$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 o=null===(e=null===(t=Object.getPrototypeOf(this))||void 0===t?void 0:t.constructor)||void 0===e?void 0:e.$name;o&&u.set(o,this.tagName.toLowerCase())}static get observedAttributes(){return["shadow-root-mode","slottable","theme-color"]}attributeChangedCallback(t,e,o){if(Object.is(o,e))return;const s=r(t);let i=o;switch(typeof this[s]){case"boolean":i=null!==o&&"false"!==o;break;case"number":i=Number(o)}switch(this[s]=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,s){if(!Object.is(s,e))switch(t=i(t),typeof s){case"boolean":!0===s?this.hasAttribute(t)||this.setAttribute(t,""):this.removeAttribute(t);break;case"number":s=o(s)?"":String(s);default:s?this.getAttribute(t)!==s&&this.setAttribute(t,s):this.removeAttribute(t)}}connectedCallback(){Object.getPrototypeOf(this).constructor.observedAttributes.forEach((t=>{const e=r(t);let o=this[e];(function(t){return void 0===t})(o)||this.$propertyChangedCallback(e,void 0,o),Object.defineProperty(this,e,{enumerable:!0,configurable:!0,get:()=>o,set(t){const s=o;o=t,this.$propertyChangedCallback(e,s,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 s=t[e];(function(t){return"number"==typeof t&&!o(t)})(s)&&(s=0!==s&&h.test(e)?`${s}px`:String(s)),this.style[e]=s})),this}$getShadowRoot(){return this.shadowRoot||d.get(this)}$addStyles(t){let e;const o=this.$getShadowRoot();return b?(e=new CSSStyleSheet,e.replaceSync(t),o.adoptedStyleSheets=o.adoptedStyleSheets.concat(e)):(e=document.createElement("style"),e.textContent=t,o.appendChild(e)),e}$emit(t,e,o){return function(t,e,o,s){return t.dispatchEvent(new CustomEvent(e,Object.assign(Object.assign(Object.assign({},a),{detail:o}),s)))}(this,t,e,o)}$nextTick(t){return function(t,e){return e?c.then(t?e.bind(t):e):c}(this,t)}static $define(o,s){var n;"object"==typeof(n=o)&&null!==n&&(s=o,o=""),o||(o=this.$name||this.name),o=i(o),t&&e.customElements&&!e.customElements.get(o)&&customElements.define(o,this,s)}}m.$version="2.0.0";class f 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"])}}return f.$name="cropper-handle",f.$version="2.0.0",f}));