@cropper/element - npm Package Compare versions

Comparing version 2.0.0-beta.2 to 2.0.0-beta.3

dist/element.d.ts

@@ -20,3 +20,2 @@ declare class CropperElement extends HTMLElement {
      * Outputs the shadow root of the element.
-     *
      * @returns {ShadowRoot} Returns the shadow root.
@@ -27,3 +26,2 @@ */
      * Adds styles to the shadow root.
-     *
      * @param {string} styles The styles to add.
@@ -35,3 +33,2 @@ * @returns {CSSStyleSheet|HTMLStyleElement} Returns the generated style sheet.
      * Dispatches an event at the element.
-     *
      * @param {string} type The name of the event.
@@ -45,3 +42,2 @@ * @param {*} [detail] The data passed when initializing the event.
      * Defers the callback to be executed after the next DOM update cycle.
-     *
      * @param {Function} [callback] The callback to execute after the next DOM update cycle.
@@ -54,3 +50,2 @@ * @returns {Promise} A promise that resolves to nothing.
      * {@link https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define}
-     *
      * @param {string|object} [name] The element name.
@@ -57,0 +52,0 @@ * @param {object} [options] The element definition options.

dist/element.esm.js

@@ -10,3 +10,2 @@ const IS_BROWSER = typeof window !== 'undefined' && typeof window.document !== 'undefined';
  * Check if the given value is a number.
- *
  * @param {*} value The value to check.
@@ -20,3 +19,2 @@ * @returns {boolean} Returns `true` if the given value is a number, else `false`.
  * Check if the given value is undefined.
- *
  * @param {*} value The value to check.
@@ -30,3 +28,2 @@ * @returns {boolean} Returns `true` if the given value is undefined, else `false`.
  * Check if the given value is an object.
- *
  * @param {*} value - The value to check.
@@ -41,3 +38,2 @@ * @returns {boolean} Returns `true` if the given value is an object, else `false`.
  * Transform the given string from camelCase to kebab-case.
- *
  * @param {string} value The value to transform.
@@ -52,3 +48,2 @@ * @returns {string} Returns the transformed value.
  * Transform the given string from kebab-case to camelCase.
- *
  * @param {string} value The value to transform.
@@ -68,3 +63,2 @@ * @returns {string} Returns the transformed value.
  * {@link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent}
- *
  * @param {EventTarget} target The target of the event.
@@ -82,3 +76,2 @@ * @param {string} type The name of the event.
  * Defers the callback to be executed after the next DOM update cycle.
- *
  * @param {*} [context] The `this` context.
@@ -103,2 +96,5 @@ * @param {Function} [callback] The callback to execute after the next DOM update cycle.
 class CropperElement extends HTMLElement {
+    get $sharedStyle() {
+        return `${this.themeColor ? `:host{--theme-color: ${this.themeColor};}` : ''}${style}`;
+    }
     constructor() {
@@ -114,5 +110,2 @@ var _a, _b;
     }
-    get $sharedStyle() {
-        return `${this.themeColor ? `:host{--theme-color: ${this.themeColor};}` : ''}${style}`;
-    }
     static get observedAttributes() {
@@ -267,3 +260,2 @@ return [
      * Outputs the shadow root of the element.
-     *
      * @returns {ShadowRoot} Returns the shadow root.
@@ -276,3 +268,2 @@ */
      * Adds styles to the shadow root.
-     *
      * @param {string} styles The styles to add.
@@ -298,3 +289,2 @@ * @returns {CSSStyleSheet|HTMLStyleElement} Returns the generated style sheet.
      * Dispatches an event at the element.
-     *
      * @param {string} type The name of the event.
@@ -310,3 +300,2 @@ * @param {*} [detail] The data passed when initializing the event.
      * Defers the callback to be executed after the next DOM update cycle.
-     *
      * @param {Function} [callback] The callback to execute after the next DOM update cycle.
@@ -321,3 +310,2 @@ * @returns {Promise} A promise that resolves to nothing.
      * {@link https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define}
-     *
      * @param {string|object} [name] The element name.
@@ -340,4 +328,4 @@ * @param {object} [options] The element definition options.
 }
-CropperElement.$version = '2.0.0-beta.2';
+CropperElement.$version = '2.0.0-beta.3';
 
 export { CropperElement as default };

dist/element.esm.min.js

@@ -1,1 +0,1 @@
-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 n(t){return String(t).replace(o,"$1-$2").toLowerCase()}const i=/-[A-z\d]/g;function a(t){return t.replace(i,(t=>t.slice(1).toUpperCase()))}const r={bubbles:!0,cancelable:!0,composed:!0};const c=Promise.resolve();const h=/left|top|width|height/i,l="open",d=new WeakMap,u=new WeakMap,b=new Map,m=e.document&&Array.isArray(e.document.adoptedStyleSheets)&&"replaceSync"in e.CSSStyleSheet.prototype;class p extends HTMLElement{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&&b.set(s,this.tagName.toLowerCase())}get $sharedStyle(){return(this.themeColor?`:host{--theme-color: ${this.themeColor};}`:"")+":host([hidden]){display:none!important}"}static get observedAttributes(){return["shadow-root-mode","slottable","theme-color"]}attributeChangedCallback(t,e,s){if(Object.is(s,e))return;const o=a(t);let n=s;switch(typeof this[o]){case"boolean":n=null!==s&&"false"!==s;break;case"number":n=Number(s)}switch(this[o]=n,t){case"theme-color":{const t=u.get(this),e=this.$sharedStyle;t&&e&&(m?t.replaceSync(e):t.textContent=e);break}}}$propertyChangedCallback(t,e,o){if(!Object.is(o,e))switch(t=n(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=a(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),u.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(){u.has(this)&&u.delete(this),d.has(this)&&d.delete(this)}$getTagNameOf(t){var e;return null!==(e=b.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 m?(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({},r),{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 i;"object"==typeof(i=s)&&null!==i&&(o=s,s=""),s||(s=this.$name||this.name),s=n(s),t&&e.customElements&&!e.customElements.get(s)&&customElements.define(s,this,o)}}p.$version="2.0.0-beta.2";export{p as default};
+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 n(t){return String(t).replace(o,"$1-$2").toLowerCase()}const i=/-[A-z\d]/g;function a(t){return t.replace(i,(t=>t.slice(1).toUpperCase()))}const r={bubbles:!0,cancelable:!0,composed:!0};const c=Promise.resolve();const h=/left|top|width|height/i,l="open",d=new WeakMap,u=new WeakMap,b=new Map,m=e.document&&Array.isArray(e.document.adoptedStyleSheets)&&"replaceSync"in e.CSSStyleSheet.prototype;class p 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&&b.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=a(t);let n=s;switch(typeof this[o]){case"boolean":n=null!==s&&"false"!==s;break;case"number":n=Number(s)}switch(this[o]=n,t){case"theme-color":{const t=u.get(this),e=this.$sharedStyle;t&&e&&(m?t.replaceSync(e):t.textContent=e);break}}}$propertyChangedCallback(t,e,o){if(!Object.is(o,e))switch(t=n(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=a(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),u.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(){u.has(this)&&u.delete(this),d.has(this)&&d.delete(this)}$getTagNameOf(t){var e;return null!==(e=b.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 m?(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({},r),{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 i;"object"==typeof(i=s)&&null!==i&&(o=s,s=""),s||(s=this.$name||this.name),s=n(s),t&&e.customElements&&!e.customElements.get(s)&&customElements.define(s,this,o)}}p.$version="2.0.0-beta.3";export{p as default};

dist/element.esm.raw.js

@@ -12,2 +12,5 @@ import { WINDOW, toCamelCase, toKebabCase, isNaN, isUndefined, isNumber, emit, nextTick, isObject, IS_BROWSER } from '@cropper/utils';
 class CropperElement extends HTMLElement {
+    get $sharedStyle() {
+        return `${this.themeColor ? `:host{--theme-color: ${this.themeColor};}` : ''}${style}`;
+    }
     constructor() {
@@ -23,5 +26,2 @@ var _a, _b;
     }
-    get $sharedStyle() {
-        return `${this.themeColor ? `:host{--theme-color: ${this.themeColor};}` : ''}${style}`;
-    }
     static get observedAttributes() {
@@ -176,3 +176,2 @@ return [
      * Outputs the shadow root of the element.
-     *
      * @returns {ShadowRoot} Returns the shadow root.
@@ -185,3 +184,2 @@ */
      * Adds styles to the shadow root.
-     *
      * @param {string} styles The styles to add.
@@ -207,3 +205,2 @@ * @returns {CSSStyleSheet|HTMLStyleElement} Returns the generated style sheet.
      * Dispatches an event at the element.
-     *
      * @param {string} type The name of the event.
@@ -219,3 +216,2 @@ * @param {*} [detail] The data passed when initializing the event.
      * Defers the callback to be executed after the next DOM update cycle.
-     *
      * @param {Function} [callback] The callback to execute after the next DOM update cycle.
@@ -230,3 +226,2 @@ * @returns {Promise} A promise that resolves to nothing.
      * {@link https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define}
-     *
      * @param {string|object} [name] The element name.
@@ -249,4 +244,4 @@ * @param {object} [options] The element definition options.
 }
-CropperElement.$version = '2.0.0-beta.2';
+CropperElement.$version = '2.0.0-beta.3';
 
 export { CropperElement as default };

dist/element.js

@@ -16,3 +16,2 @@ (function (global, factory) {
      * Check if the given value is a number.
-     *
      * @param {*} value The value to check.
@@ -26,3 +25,2 @@ * @returns {boolean} Returns `true` if the given value is a number, else `false`.
      * Check if the given value is undefined.
-     *
      * @param {*} value The value to check.
@@ -36,3 +34,2 @@ * @returns {boolean} Returns `true` if the given value is undefined, else `false`.
      * Check if the given value is an object.
-     *
      * @param {*} value - The value to check.
@@ -47,3 +44,2 @@ * @returns {boolean} Returns `true` if the given value is an object, else `false`.
      * Transform the given string from camelCase to kebab-case.
-     *
      * @param {string} value The value to transform.
@@ -58,3 +54,2 @@ * @returns {string} Returns the transformed value.
      * Transform the given string from kebab-case to camelCase.
-     *
      * @param {string} value The value to transform.
@@ -74,3 +69,2 @@ * @returns {string} Returns the transformed value.
      * {@link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent}
-     *
      * @param {EventTarget} target The target of the event.
@@ -88,3 +82,2 @@ * @param {string} type The name of the event.
      * Defers the callback to be executed after the next DOM update cycle.
-     *
      * @param {*} [context] The `this` context.
@@ -109,2 +102,5 @@ * @param {Function} [callback] The callback to execute after the next DOM update cycle.
     class CropperElement extends HTMLElement {
+        get $sharedStyle() {
+            return `${this.themeColor ? `:host{--theme-color: ${this.themeColor};}` : ''}${style}`;
+        }
         constructor() {
@@ -120,5 +116,2 @@ var _a, _b;
         }
-        get $sharedStyle() {
-            return `${this.themeColor ? `:host{--theme-color: ${this.themeColor};}` : ''}${style}`;
-        }
         static get observedAttributes() {
@@ -273,3 +266,2 @@ return [
          * Outputs the shadow root of the element.
-         *
          * @returns {ShadowRoot} Returns the shadow root.
@@ -282,3 +274,2 @@ */
          * Adds styles to the shadow root.
-         *
          * @param {string} styles The styles to add.
@@ -304,3 +295,2 @@ * @returns {CSSStyleSheet|HTMLStyleElement} Returns the generated style sheet.
          * Dispatches an event at the element.
-         *
          * @param {string} type The name of the event.
@@ -316,3 +306,2 @@ * @param {*} [detail] The data passed when initializing the event.
          * Defers the callback to be executed after the next DOM update cycle.
-         *
          * @param {Function} [callback] The callback to execute after the next DOM update cycle.
@@ -327,3 +316,2 @@ * @returns {Promise} A promise that resolves to nothing.
          * {@link https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define}
-         *
          * @param {string|object} [name] The element name.
@@ -346,3 +334,3 @@ * @param {object} [options] The element definition options.
     }
-    CropperElement.$version = '2.0.0-beta.2';
+    CropperElement.$version = '2.0.0-beta.3';
 
@@ -349,0 +337,0 @@ return CropperElement;

dist/element.min.js

@@ -1,1 +0,1 @@
-!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).CropperElement=e()}(this,(function(){"use strict";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 n(t){return String(t).replace(o,"$1-$2").toLowerCase()}const i=/-[A-z\d]/g;function r(t){return t.replace(i,(t=>t.slice(1).toUpperCase()))}const a={bubbles:!0,cancelable:!0,composed:!0};const c=Promise.resolve();const l=/left|top|width|height/i,h="open",d=new WeakMap,u=new WeakMap,p=new Map,b=e.document&&Array.isArray(e.document.adoptedStyleSheets)&&"replaceSync"in e.CSSStyleSheet.prototype;class m extends HTMLElement{constructor(){var t,e;super(),this.shadowRootMode=h,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&&p.set(s,this.tagName.toLowerCase())}get $sharedStyle(){return(this.themeColor?`:host{--theme-color: ${this.themeColor};}`:"")+":host([hidden]){display:none!important}"}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 n=s;switch(typeof this[o]){case"boolean":n=null!==s&&"false"!==s;break;case"number":n=Number(s)}switch(this[o]=n,t){case"theme-color":{const t=u.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=n(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||h});if(this.shadowRoot||d.set(this,t),u.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(){u.has(this)&&u.delete(this),d.has(this)&&d.delete(this)}$getTagNameOf(t){var e;return null!==(e=p.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&&l.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 i;"object"==typeof(i=s)&&null!==i&&(o=s,s=""),s||(s=this.$name||this.name),s=n(s),t&&e.customElements&&!e.customElements.get(s)&&customElements.define(s,this,o)}}return m.$version="2.0.0-beta.2",m}));
+!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).CropperElement=e()}(this,(function(){"use strict";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 n(t){return String(t).replace(o,"$1-$2").toLowerCase()}const i=/-[A-z\d]/g;function r(t){return t.replace(i,(t=>t.slice(1).toUpperCase()))}const a={bubbles:!0,cancelable:!0,composed:!0};const c=Promise.resolve();const l=/left|top|width|height/i,h="open",d=new WeakMap,u=new WeakMap,p=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=h,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&&p.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 n=s;switch(typeof this[o]){case"boolean":n=null!==s&&"false"!==s;break;case"number":n=Number(s)}switch(this[o]=n,t){case"theme-color":{const t=u.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=n(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||h});if(this.shadowRoot||d.set(this,t),u.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(){u.has(this)&&u.delete(this),d.has(this)&&d.delete(this)}$getTagNameOf(t){var e;return null!==(e=p.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&&l.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 i;"object"==typeof(i=s)&&null!==i&&(o=s,s=""),s||(s=this.$name||this.name),s=n(s),t&&e.customElements&&!e.customElements.get(s)&&customElements.define(s,this,o)}}return m.$version="2.0.0-beta.3",m}));

dist/element.raw.js

@@ -16,2 +16,5 @@ (function (global, factory) {
   class CropperElement extends HTMLElement {
+      get $sharedStyle() {
+          return `${this.themeColor ? `:host{--theme-color: ${this.themeColor};}` : ''}${style}`;
+      }
       constructor() {
@@ -27,5 +30,2 @@ var _a, _b;
       }
-      get $sharedStyle() {
-          return `${this.themeColor ? `:host{--theme-color: ${this.themeColor};}` : ''}${style}`;
-      }
       static get observedAttributes() {
@@ -180,3 +180,2 @@ return [
        * Outputs the shadow root of the element.
-       *
        * @returns {ShadowRoot} Returns the shadow root.
@@ -189,3 +188,2 @@ */
        * Adds styles to the shadow root.
-       *
        * @param {string} styles The styles to add.
@@ -211,3 +209,2 @@ * @returns {CSSStyleSheet|HTMLStyleElement} Returns the generated style sheet.
        * Dispatches an event at the element.
-       *
        * @param {string} type The name of the event.
@@ -223,3 +220,2 @@ * @param {*} [detail] The data passed when initializing the event.
        * Defers the callback to be executed after the next DOM update cycle.
-       *
        * @param {Function} [callback] The callback to execute after the next DOM update cycle.
@@ -234,3 +230,2 @@ * @returns {Promise} A promise that resolves to nothing.
        * {@link https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define}
-       *
        * @param {string|object} [name] The element name.
@@ -253,3 +248,3 @@ * @param {object} [options] The element definition options.
   }
-  CropperElement.$version = '2.0.0-beta.2';
+  CropperElement.$version = '2.0.0-beta.3';
 
@@ -256,0 +251,0 @@ return CropperElement;

package.json

 {
   "name": "@cropper/element",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.3",
   "description": "An abstract class for constructing Cropper elements.",
@@ -39,3 +39,3 @@ "main": "dist/element.raw.js",
   "dependencies": {
-    "@cropper/utils": "^2.0.0-beta.2"
+    "@cropper/utils": "^2.0.0-beta.3"
   },
@@ -46,3 +46,3 @@ "publishConfig": {
   },
-  "gitHead": "78de561af17e39b47626c419c756bfe43a45c808"
+  "gitHead": "3bbcba410e0781b5dee18ba8ae150f1a1ea51c50"
 }

No alert changes

Worsened metrics

Total package byte prevSize

54813

-0.51%

Lines of code

1188

-3.18%

Dependency changes

• Updated

  @cropper/utils@^2.0.0-beta.3