@deckdeckgo/drag-resize-rotate - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

CHANGELOG.md

@@ -0,4 +1,10 @@
+# 1.1.0 (2020-07-19)
+
+### Features
+
+- support for content editable elements
+
 # 1.0.2 (2020-05-11)
 
-### Feat
+### Features
 
@@ -5,0 +11,0 @@ - update Stencil for Gatsby build

dist/cjs/deckdeckgo-drag-resize-rotate.cjs.js

 'use strict';
 
-const index = require('./index-5dac7591.js');
-const appGlobals = require('./app-globals-3a1e7e63.js');
+const index = require('./index-033a337e.js');
+const patch = require('./patch-49391e40.js');
 
-index.patchBrowser().then(options => {
-  appGlobals.globalScripts();
-  return index.bootstrapLazy([["deckgo-drr.cjs",[[1,"deckgo-drr",{"unit":[1],"resize":[4],"drag":[1],"rotation":[4],"width":[32],"height":[32],"minWidth":[32],"minHeight":[32],"top":[32],"left":[32],"rotate":[32],"selected":[32],"moving":[32]}]]]], options);
+patch.patchBrowser().then(options => {
+  return index.bootstrapLazy([["deckgo-drr.cjs",[[1,"deckgo-drr",{"unit":[1],"resize":[1028],"drag":[1],"rotation":[4],"text":[516],"width":[32],"height":[32],"minWidth":[32],"minHeight":[32],"top":[32],"left":[32],"rotate":[32],"selected":[32],"moving":[32],"editing":[32]}]]]], options);
 });

dist/cjs/deckgo-drr.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-5dac7591.js');
+const index = require('./index-033a337e.js');
 
@@ -11,134 +11,10 @@ function unifyEvent(e) {
 }
-function debounce(func, timeout) {
-    let timer;
-    return (...args) => {
-        const next = () => func(...args);
-        if (timer) {
-            clearTimeout(timer);
-        }
-        timer = setTimeout(next, timeout && timeout > 0 ? timeout : 300);
-    };
-}
-function isMobile() {
-    if (!window || !navigator) {
-        return false;
-    }
-    const a = navigator.userAgent || navigator.vendor || window.opera;
-    return (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) ||
-        /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4)));
-}
-function isIOS() {
-    if (!window || !navigator) {
-        return false;
-    }
-    const a = navigator.userAgent || navigator.vendor || window.opera;
-    return /iPad|iPhone|iPod/i.test(a);
-}
-function isIPad() {
-    if (!window || !navigator) {
-        return false;
-    }
-    const a = navigator.userAgent || navigator.vendor || window.opera;
-    return /iPad/i.test(a);
-}
-function isFullscreen() {
-    if (!window || !screen) {
-        return false;
-    }
-    return window.innerHeight == screen.height;
-}
-function isFirefox() {
-    if (!window || !navigator) {
-        return false;
-    }
-    const a = navigator.userAgent || navigator.vendor || window.opera;
-    return /firefox/i.test(a);
-}
-function isRTL() {
-    if (!document || !document.documentElement) {
-        return false;
-    }
-    const htmlDir = document.documentElement.getAttribute('dir');
-    return htmlDir !== null && htmlDir === 'rtl';
-}
 
-function lazyLoadSelectedImages(images) {
-    return new Promise((resolve) => {
-        if (!images) {
-            resolve();
-            return;
-        }
-        images.forEach((image) => {
-            if (image.hasAttribute('data-src')) {
-                image.setAttribute('src', `${image.getAttribute('data-src')}`);
-                image.removeAttribute('data-src');
-                if (!image.classList.contains('deckgo-reveal')) {
-                    image.style.setProperty('visibility', 'inherit');
-                }
-            }
-            image.style.setProperty('pointer-events', 'none');
-        });
-        resolve();
-    });
-}
-function lazyLoadSelectedLazyImagesComponent(components) {
-    return new Promise((resolve) => {
-        if (!components) {
-            resolve();
-            return;
-        }
-        components.forEach(async (component) => {
-            await component.lazyLoad();
-        });
-        resolve();
-    });
-}
+const deckdeckgoDrrCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;contain:var(--contain);width:var(--width);height:var(--height);-webkit-transform:rotate(var(--rotate, 0deg));transform:rotate(var(--rotate, 0deg));position:absolute;top:var(--top);left:var(--left);-webkit-user-select:var(--deckgo-drr-user-select, none);-moz-user-select:var(--deckgo-drr-user-select, none);-ms-user-select:var(--deckgo-drr-user-select, none);user-select:var(--deckgo-drr-user-select, none)}:host(.selected.draggable:not(.drag)){cursor:move}:host(.selected){outline:var(--deckgo-drr-border, 1px solid #3880ff)}::slotted(*){width:100%;height:100%;-webkit-user-select:var(--user-select, none);-moz-user-select:var(--user-select, none);-ms-user-select:var(--user-select, none);user-select:var(--user-select, none);-ms-touch-action:none;touch-action:none;pointer-events:var(--pointer-events, none)}div.anchor{position:absolute;width:var(--deckgo-drr-anchor-width, 16px);height:var(--deckgo-drr-anchor-height, 16px);padding:var(--deckgo-drr-anchor-padding-desktop, 16px)}div.anchor>div{width:100%;height:100%;border-radius:var(--deckgo-drr-anchor-border-radius, 50%);background:var(--deckgo-drr-anchor-background, #3880ff);border:var(--deckgo-drr-anchor-border)}div.anchor.top{top:0}div.anchor.top.end{cursor:ne-resize;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%)}div.anchor.top.start{cursor:nw-resize;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}div.anchor.end{right:0}div.anchor.bottom{bottom:0}div.anchor.bottom.end{cursor:se-resize;-webkit-transform:translate(50%, 50%);transform:translate(50%, 50%)}div.anchor.bottom.start{cursor:sw-resize;-webkit-transform:translate(-50%, 50%);transform:translate(-50%, 50%)}div.anchor.start{left:0}div.border{position:absolute}div.border.top,div.border.bottom{width:calc(100% - var(--deckgo-drr-anchor-width, 16px));height:16px}div.border.end,div.border.start{top:50%;height:calc(100% - var(--deckgo-drr-anchor-height, 16px));width:16px}div.border.top{top:0;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);cursor:n-resize}div.border.end{right:0;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%);cursor:e-resize}div.border.bottom{bottom:0;left:50%;-webkit-transform:translate(-50%, 50%);transform:translate(-50%, 50%);cursor:s-resize}div.border.start{left:0;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);cursor:w-resize}div.rotate{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%, -100%);transform:translate(-50%, -100%);height:var(--deckgo-drr-rotate-anchor-width, 24px);width:var(--deckgo-drr-rotate-anchor-height, 32px)}div.rotate div.action{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);cursor:crosshair;width:var(--deckgo-drr-rotate-anchor-action-width, 16px);height:var(--deckgo-drr-rotate-anchor-action-height, 16px);border-radius:var(--deckgo-drr-rotate-anchor-action-border-radius, 50%);background:var(--deckgo-drr-rotate-anchor-action-background);border:var(--deckgo-drr-rotate-anchor-action-border, 1px solid #3880ff)}div.rotate div.presentation{position:absolute;bottom:0;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);height:var(--deckgo-drr-rotate-anchor-presentation-height, calc(100% - 16px - 1px));border-right:var(--deckgo-drr-rotate-anchor-presentation-border-right, 1px solid #3880ff)}@media (hover: none) and (pointer: coarse){div.anchor{padding:var(--deckgo-drr-anchor-padding-mobile)}div.border.top,div.border.bottom{height:4px}div.border.end,div.border.start{width:4px}}";
 
-function injectJS(id, src) {
-    return new Promise((resolve, reject) => {
-        if (!document) {
-            resolve();
-            return;
-        }
-        if (document.getElementById(id)) {
-            resolve('JS already loaded.');
-            return;
-        }
-        const script = document.createElement('script');
-        script.id = id;
-        script.async = true;
-        script.defer = true;
-        script.src = src;
-        script.addEventListener('load', () => resolve('JS loaded.'));
-        script.addEventListener('error', () => reject('Error loading script.'));
-        script.addEventListener('abort', () => reject('Script loading aborted.'));
-        document.head.appendChild(script);
-    });
-}
-function injectCSS(id, src) {
-    return new Promise((resolve, reject) => {
-        if (!document) {
-            resolve();
-            return;
-        }
-        if (document.getElementById(id)) {
-            resolve('CSS already loaded.');
-            return;
-        }
-        const link = document.createElement('link');
-        link.id = id;
-        link.setAttribute('rel', 'stylesheet');
-        link.setAttribute('href', src);
-        link.addEventListener('load', () => resolve('CSS loaded.'));
-        link.addEventListener('error', () => reject('Error loading css.'));
-        link.addEventListener('abort', () => reject('CSS loading aborted.'));
-        document.head.appendChild(link);
-    });
-}
-
-const deckdeckgoDrrCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;contain:size;width:var(--width);height:var(--height);-webkit-transform:rotate(var(--rotate, 0deg));transform:rotate(var(--rotate, 0deg));position:absolute;top:var(--top);left:var(--left);-webkit-user-select:var(--deckgo-drr-user-select, none);-moz-user-select:var(--deckgo-drr-user-select, none);-ms-user-select:var(--deckgo-drr-user-select, none);user-select:var(--deckgo-drr-user-select, none)}:host(.selected.draggable:not(.drag)){cursor:move}:host(.selected){outline:var(--deckgo-drr-border, 1px solid #3880ff)}::slotted(*){width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;pointer-events:none}div.anchor{position:absolute;width:var(--deckgo-drr-anchor-width, 16px);height:var(--deckgo-drr-anchor-height, 16px);padding:var(--deckgo-drr-anchor-padding-desktop, 16px)}div.anchor>div{width:100%;height:100%;border-radius:var(--deckgo-drr-anchor-border-radius, 50%);background:var(--deckgo-drr-anchor-background, #3880ff);border:var(--deckgo-drr-anchor-border)}div.anchor.top{top:0}div.anchor.top.end{cursor:ne-resize;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%)}div.anchor.top.start{cursor:nw-resize;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}div.anchor.end{right:0}div.anchor.bottom{bottom:0}div.anchor.bottom.end{cursor:se-resize;-webkit-transform:translate(50%, 50%);transform:translate(50%, 50%)}div.anchor.bottom.start{cursor:sw-resize;-webkit-transform:translate(-50%, 50%);transform:translate(-50%, 50%)}div.anchor.start{left:0}div.border{position:absolute}div.border.top,div.border.bottom{width:calc(100% - var(--deckgo-drr-anchor-width, 16px));height:16px}div.border.end,div.border.start{top:50%;height:calc(100% - var(--deckgo-drr-anchor-height, 16px));width:16px}div.border.top{top:0;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);cursor:n-resize}div.border.end{right:0;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%);cursor:e-resize}div.border.bottom{bottom:0;left:50%;-webkit-transform:translate(-50%, 50%);transform:translate(-50%, 50%);cursor:s-resize}div.border.start{left:0;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);cursor:w-resize}div.rotate{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%, -100%);transform:translate(-50%, -100%);height:var(--deckgo-drr-rotate-anchor-width, 24px);width:var(--deckgo-drr-rotate-anchor-height, 32px)}div.rotate div.action{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);cursor:crosshair;width:var(--deckgo-drr-rotate-anchor-action-width, 16px);height:var(--deckgo-drr-rotate-anchor-action-height, 16px);border-radius:var(--deckgo-drr-rotate-anchor-action-border-radius, 50%);background:var(--deckgo-drr-rotate-anchor-action-background);border:var(--deckgo-drr-rotate-anchor-action-border, 1px solid #3880ff)}div.rotate div.presentation{position:absolute;bottom:0;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);height:var(--deckgo-drr-rotate-anchor-presentation-height, calc(100% - 16px - 1px));border-right:var(--deckgo-drr-rotate-anchor-presentation-border-right, 1px solid #3880ff)}@media (hover: none) and (pointer: coarse){div.anchor{padding:var(--deckgo-drr-anchor-padding-mobile)}div.border.top,div.border.bottom{height:4px}div.border.end,div.border.start{width:4px}}";
-
 const DeckdeckgoDragResizeRotate = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.drrSelect = index.createEvent(this, "drrSelect", 7);
+        this.drrDidChange = index.createEvent(this, "drrDidChange", 7);
         this.unit = 'percentage';
@@ -151,2 +27,4 @@ // Size
         this.rotation = true;
+        // Text content editable
+        this.text = false;
         this.minWidth = 10;
@@ -176,2 +54,3 @@ this.minHeight = 10;
         this.centerY = null;
+        this.editing = false;
         this.start = async ($event) => {
@@ -189,7 +68,11 @@ if (!$event || !$event.target) {
                 this.selected = false;
+                this.resetTextEditable();
                 return;
             }
-            this.drrSelect.emit(selected);
-            this.selected = true;
-            this.startMove();
+            if (!this.editing) {
+                this.drrSelect.emit(selected);
+                this.selected = true;
+                this.initTextEditable();
+                this.startMove();
+            }
             await this.initStartPositions($event);
@@ -206,4 +89,10 @@ };
         };
-        this.drrSelect = index.createEvent(this, "drrSelect", 7);
-        this.drrDidChange = index.createEvent(this, "drrDidChange", 7);
+        this.dbclick = async () => {
+            this.editing = true;
+            const element = this.el.querySelector( `:scope > *` );
+            if (element) {
+                element.focus();
+                await this.moveCursorToEnd(element);
+            }
+        };
     }
@@ -242,15 +131,18 @@ async componentWillLoad() {
         }
+        if (this.el) {
+            this.el.removeEventListener('dblclick', this.dbclick, true);
+        }
     }
-    init() {
-        return new Promise((resolve) => {
-            this.width = this.el.style.getPropertyValue('--width') ? parseFloat(this.el.style.getPropertyValue('--width')) : 0;
-            this.height = this.el.style.getPropertyValue('--height') ? parseFloat(this.el.style.getPropertyValue('--height')) : 0;
-            this.top = this.el.style.getPropertyValue('--top') ? parseFloat(this.el.style.getPropertyValue('--top')) : 0;
-            this.left = this.el.style.getPropertyValue('--left') ? parseFloat(this.el.style.getPropertyValue('--left')) : 0;
-            this.rotate = this.el.style.getPropertyValue('--rotate') ? parseFloat(this.el.style.getPropertyValue('--rotate')) : 0;
-            resolve();
-        });
+    async init() {
+        this.width = this.el.style.getPropertyValue('--width') ? parseFloat(this.el.style.getPropertyValue('--width')) : 0;
+        this.height = this.el.style.getPropertyValue('--height') ? parseFloat(this.el.style.getPropertyValue('--height')) : 0;
+        this.top = this.el.style.getPropertyValue('--top') ? parseFloat(this.el.style.getPropertyValue('--top')) : 0;
+        this.left = this.el.style.getPropertyValue('--left') ? parseFloat(this.el.style.getPropertyValue('--left')) : 0;
+        this.rotate = this.el.style.getPropertyValue('--rotate') ? parseFloat(this.el.style.getPropertyValue('--rotate')) : 0;
+        if (this.text) {
+            this.resize = false;
+        }
     }
     async displaySlot() {
-        const element = this.el.querySelector(index.Build.isBrowser ? `:scope > *` : '> *');
+        const element = this.el.querySelector( `:scope > *` );
         if (element && element.style.display === 'none') {
@@ -260,2 +152,19 @@ element.style.display = '';
     }
+    initTextEditable() {
+        if (!this.text || !this.el) {
+            return;
+        }
+        this.el.addEventListener('dblclick', this.dbclick, { once: true });
+        const element = this.el.querySelector( `:scope > *` );
+        if (element) {
+            element.setAttribute('contentEditable', 'true');
+        }
+    }
+    resetTextEditable() {
+        if (!this.text || !this.el) {
+            return;
+        }
+        this.editing = false;
+        this.el.removeEventListener('dblclick', this.dbclick, true);
+    }
     async initStartPositions($event) {
@@ -270,4 +179,4 @@ this.startX = unifyEvent($event).clientX;
     initStartPositionsMove() {
-        this.startWidth = this.width;
-        this.startHeight = this.height;
+        this.startWidth = isNaN(this.width) ? 0 : this.width;
+        this.startHeight = isNaN(this.height) ? 0 : this.height;
         this.startTop = this.top;
@@ -498,2 +407,13 @@ this.startLeft = this.left;
     }
+    // https://stackoverflow.com/a/3866442/5404186
+    async moveCursorToEnd(contentEditableElement) {
+        if (window && document && document.createRange && contentEditableElement) {
+            const range = document.createRange();
+            range.selectNodeContents(contentEditableElement);
+            range.collapse(false);
+            const selection = window.getSelection();
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
+    }
     render() {
@@ -503,7 +423,10 @@ const widthUnit = this.unit === 'percentage' ? '%' : this.unit === 'viewport' ? 'vw' : this.unit;
         return (index.h(index.Host, { style: {
-                '--width': `${this.width}${widthUnit}`,
-                '--height': `${this.height}${heightUnit}`,
+                '--width': this.text ? 'auto' : `${this.width}${widthUnit}`,
+                '--height': this.text ? 'auto' : `${this.height}${heightUnit}`,
                 '--top': `${this.top}${heightUnit}`,
                 '--left': `${this.left}${widthUnit}`,
                 '--rotate': this.rotate ? `${this.rotate}deg` : `0deg`,
+                '--contain': this.text ? 'layout' : 'size',
+                '--pointer-events': `${this.editing ? 'all' : 'none'}`,
+                '--user-select': `${this.editing ? 'text' : 'none'}`,
             }, class: `${this.selected ? 'selected' : ''} ${this.drag !== 'none' ? 'draggable' : ''} ${this.drag !== 'none' && this.moving ? 'drag' : ''}` }, this.renderEdgesAnchors(), this.renderBorderAnchors(), this.renderRotateAnchor(), index.h("slot", null)));
@@ -510,0 +433,0 @@ }

dist/cjs/loader.cjs.js

@@ -5,10 +5,9 @@ 'use strict';
 
-const index = require('./index-5dac7591.js');
-const appGlobals = require('./app-globals-3a1e7e63.js');
+const index = require('./index-033a337e.js');
+const patch = require('./patch-49391e40.js');
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
-  return index.patchEsm().then(() => {
-  appGlobals.globalScripts();
-  return index.bootstrapLazy([["deckgo-drr.cjs",[[1,"deckgo-drr",{"unit":[1],"resize":[4],"drag":[1],"rotation":[4],"width":[32],"height":[32],"minWidth":[32],"minHeight":[32],"top":[32],"left":[32],"rotate":[32],"selected":[32],"moving":[32]}]]]], options);
+  return patch.patchEsm().then(() => {
+  return index.bootstrapLazy([["deckgo-drr.cjs",[[1,"deckgo-drr",{"unit":[1],"resize":[1028],"drag":[1],"rotation":[4],"text":[516],"width":[32],"height":[32],"minWidth":[32],"minHeight":[32],"top":[32],"left":[32],"rotate":[32],"selected":[32],"moving":[32],"editing":[32]}]]]], options);
   });
@@ -15,0 +14,0 @@ };

dist/collection/collection-manifest.json

@@ -7,4 +7,4 @@ {
     "name": "@stencil/core",
-    "version": "1.13.0",
-    "typescriptVersion": "3.8.3"
+    "version": "1.16.4",
+    "typescriptVersion": "3.9.7"
   },
@@ -11,0 +11,0 @@ "collections": [],

dist/collection/components/deckdeckgo-drr.js

@@ -12,2 +12,4 @@ import { Component, h, Host, Prop, State, Element, Event, Build } from '@stencil/core';
         this.rotation = true;
+        // Text content editable
+        this.text = false;
         this.minWidth = 10;
@@ -37,2 +39,3 @@ this.minHeight = 10;
         this.centerY = null;
+        this.editing = false;
         this.start = async ($event) => {
@@ -50,7 +53,11 @@ if (!$event || !$event.target) {
                 this.selected = false;
+                this.resetTextEditable();
                 return;
             }
-            this.drrSelect.emit(selected);
-            this.selected = true;
-            this.startMove();
+            if (!this.editing) {
+                this.drrSelect.emit(selected);
+                this.selected = true;
+                this.initTextEditable();
+                this.startMove();
+            }
             await this.initStartPositions($event);
@@ -67,2 +74,10 @@ };
         };
+        this.dbclick = async () => {
+            this.editing = true;
+            const element = this.el.querySelector(Build.isBrowser ? `:scope > *` : '> *');
+            if (element) {
+                element.focus();
+                await this.moveCursorToEnd(element);
+            }
+        };
     }
@@ -101,12 +116,15 @@ async componentWillLoad() {
         }
+        if (this.el) {
+            this.el.removeEventListener('dblclick', this.dbclick, true);
+        }
     }
-    init() {
-        return new Promise((resolve) => {
-            this.width = this.el.style.getPropertyValue('--width') ? parseFloat(this.el.style.getPropertyValue('--width')) : 0;
-            this.height = this.el.style.getPropertyValue('--height') ? parseFloat(this.el.style.getPropertyValue('--height')) : 0;
-            this.top = this.el.style.getPropertyValue('--top') ? parseFloat(this.el.style.getPropertyValue('--top')) : 0;
-            this.left = this.el.style.getPropertyValue('--left') ? parseFloat(this.el.style.getPropertyValue('--left')) : 0;
-            this.rotate = this.el.style.getPropertyValue('--rotate') ? parseFloat(this.el.style.getPropertyValue('--rotate')) : 0;
-            resolve();
-        });
+    async init() {
+        this.width = this.el.style.getPropertyValue('--width') ? parseFloat(this.el.style.getPropertyValue('--width')) : 0;
+        this.height = this.el.style.getPropertyValue('--height') ? parseFloat(this.el.style.getPropertyValue('--height')) : 0;
+        this.top = this.el.style.getPropertyValue('--top') ? parseFloat(this.el.style.getPropertyValue('--top')) : 0;
+        this.left = this.el.style.getPropertyValue('--left') ? parseFloat(this.el.style.getPropertyValue('--left')) : 0;
+        this.rotate = this.el.style.getPropertyValue('--rotate') ? parseFloat(this.el.style.getPropertyValue('--rotate')) : 0;
+        if (this.text) {
+            this.resize = false;
+        }
     }
@@ -119,2 +137,19 @@ async displaySlot() {
     }
+    initTextEditable() {
+        if (!this.text || !this.el) {
+            return;
+        }
+        this.el.addEventListener('dblclick', this.dbclick, { once: true });
+        const element = this.el.querySelector(Build.isBrowser ? `:scope > *` : '> *');
+        if (element) {
+            element.setAttribute('contentEditable', 'true');
+        }
+    }
+    resetTextEditable() {
+        if (!this.text || !this.el) {
+            return;
+        }
+        this.editing = false;
+        this.el.removeEventListener('dblclick', this.dbclick, true);
+    }
     async initStartPositions($event) {
@@ -129,4 +164,4 @@ this.startX = unifyEvent($event).clientX;
     initStartPositionsMove() {
-        this.startWidth = this.width;
-        this.startHeight = this.height;
+        this.startWidth = isNaN(this.width) ? 0 : this.width;
+        this.startHeight = isNaN(this.height) ? 0 : this.height;
         this.startTop = this.top;
@@ -357,2 +392,13 @@ this.startLeft = this.left;
     }
+    // https://stackoverflow.com/a/3866442/5404186
+    async moveCursorToEnd(contentEditableElement) {
+        if (window && document && document.createRange && contentEditableElement) {
+            const range = document.createRange();
+            range.selectNodeContents(contentEditableElement);
+            range.collapse(false);
+            const selection = window.getSelection();
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
+    }
     render() {
@@ -362,7 +408,10 @@ const widthUnit = this.unit === 'percentage' ? '%' : this.unit === 'viewport' ? 'vw' : this.unit;
         return (h(Host, { style: {
-                '--width': `${this.width}${widthUnit}`,
-                '--height': `${this.height}${heightUnit}`,
+                '--width': this.text ? 'auto' : `${this.width}${widthUnit}`,
+                '--height': this.text ? 'auto' : `${this.height}${heightUnit}`,
                 '--top': `${this.top}${heightUnit}`,
                 '--left': `${this.left}${widthUnit}`,
                 '--rotate': this.rotate ? `${this.rotate}deg` : `0deg`,
+                '--contain': this.text ? 'layout' : 'size',
+                '--pointer-events': `${this.editing ? 'all' : 'none'}`,
+                '--user-select': `${this.editing ? 'text' : 'none'}`,
             }, class: `${this.selected ? 'selected' : ''} ${this.drag !== 'none' ? 'draggable' : ''} ${this.drag !== 'none' && this.moving ? 'drag' : ''}` },
@@ -438,3 +487,3 @@ this.renderEdgesAnchors(),
             "type": "boolean",
-            "mutable": false,
+            "mutable": true,
             "complexType": {
@@ -490,2 +539,20 @@ "original": "boolean",
             "defaultValue": "true"
+        },
+        "text": {
+            "type": "boolean",
+            "mutable": false,
+            "complexType": {
+                "original": "boolean",
+                "resolved": "boolean",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "text",
+            "reflect": true,
+            "defaultValue": "false"
         }
@@ -502,3 +569,4 @@ }; }
         "selected": {},
-        "moving": {}
+        "moving": {},
+        "editing": {}
     }; }
@@ -505,0 +573,0 @@ static get events() { return [{

dist/deckdeckgo-drag-resize-rotate.js

@@ -20,2 +20,3 @@
 
+  
   scriptElm = doc.createElement('script');
@@ -26,6 +27,6 @@ scriptElm.setAttribute('nomodule', '');
   scriptElm.setAttribute('data-stencil-namespace', 'deckdeckgo-drag-resize-rotate');
-  doc.head.appendChild(scriptElm);
-
+  doc.head.appendChild(scriptElm)
+  
   console.warn(warn.join('\n'));
 
 })(document);

dist/deckdeckgo-drag-resize-rotate/deckdeckgo-drag-resize-rotate.esm.js

@@ -1,7 +0,1 @@
-import { p as patchBrowser, b as bootstrapLazy } from './index-f19cb272.js';
-import { g as globalScripts } from './app-globals-0f993ce5.js';
-
-patchBrowser().then(options => {
-  globalScripts();
-  return bootstrapLazy([["deckgo-drr",[[1,"deckgo-drr",{"unit":[1],"resize":[4],"drag":[1],"rotation":[4],"width":[32],"height":[32],"minWidth":[32],"minHeight":[32],"top":[32],"left":[32],"rotate":[32],"selected":[32],"moving":[32]}]]]], options);
-});
+import{b as t}from"./p-d1bc1279.js";import{p as i}from"./p-666007b3.js";i().then(i=>t([["p-43d8c2e7",[[1,"deckgo-drr",{unit:[1],resize:[1028],drag:[1],rotation:[4],text:[516],width:[32],height:[32],minWidth:[32],minHeight:[32],top:[32],left:[32],rotate:[32],selected:[32],moving:[32],editing:[32]}]]]],i));

dist/esm-es5/deckgo-drr.entry.js

@@ -37,7 +37,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 };
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4ec75cc7.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a4a96ce2.js';
 function unifyEvent(e) {
     return e.changedTouches ? e.changedTouches[0] : e;
 }
-var deckdeckgoDrrCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;contain:size;width:var(--width);height:var(--height);-webkit-transform:rotate(var(--rotate, 0deg));transform:rotate(var(--rotate, 0deg));position:absolute;top:var(--top);left:var(--left);-webkit-user-select:var(--deckgo-drr-user-select, none);-moz-user-select:var(--deckgo-drr-user-select, none);-ms-user-select:var(--deckgo-drr-user-select, none);user-select:var(--deckgo-drr-user-select, none)}:host(.selected.draggable:not(.drag)){cursor:move}:host(.selected){outline:var(--deckgo-drr-border, 1px solid #3880ff)}::slotted(*){width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;pointer-events:none}div.anchor{position:absolute;width:var(--deckgo-drr-anchor-width, 16px);height:var(--deckgo-drr-anchor-height, 16px);padding:var(--deckgo-drr-anchor-padding-desktop, 16px)}div.anchor>div{width:100%;height:100%;border-radius:var(--deckgo-drr-anchor-border-radius, 50%);background:var(--deckgo-drr-anchor-background, #3880ff);border:var(--deckgo-drr-anchor-border)}div.anchor.top{top:0}div.anchor.top.end{cursor:ne-resize;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%)}div.anchor.top.start{cursor:nw-resize;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}div.anchor.end{right:0}div.anchor.bottom{bottom:0}div.anchor.bottom.end{cursor:se-resize;-webkit-transform:translate(50%, 50%);transform:translate(50%, 50%)}div.anchor.bottom.start{cursor:sw-resize;-webkit-transform:translate(-50%, 50%);transform:translate(-50%, 50%)}div.anchor.start{left:0}div.border{position:absolute}div.border.top,div.border.bottom{width:calc(100% - var(--deckgo-drr-anchor-width, 16px));height:16px}div.border.end,div.border.start{top:50%;height:calc(100% - var(--deckgo-drr-anchor-height, 16px));width:16px}div.border.top{top:0;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);cursor:n-resize}div.border.end{right:0;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%);cursor:e-resize}div.border.bottom{bottom:0;left:50%;-webkit-transform:translate(-50%, 50%);transform:translate(-50%, 50%);cursor:s-resize}div.border.start{left:0;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);cursor:w-resize}div.rotate{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%, -100%);transform:translate(-50%, -100%);height:var(--deckgo-drr-rotate-anchor-width, 24px);width:var(--deckgo-drr-rotate-anchor-height, 32px)}div.rotate div.action{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);cursor:crosshair;width:var(--deckgo-drr-rotate-anchor-action-width, 16px);height:var(--deckgo-drr-rotate-anchor-action-height, 16px);border-radius:var(--deckgo-drr-rotate-anchor-action-border-radius, 50%);background:var(--deckgo-drr-rotate-anchor-action-background);border:var(--deckgo-drr-rotate-anchor-action-border, 1px solid #3880ff)}div.rotate div.presentation{position:absolute;bottom:0;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);height:var(--deckgo-drr-rotate-anchor-presentation-height, calc(100% - 16px - 1px));border-right:var(--deckgo-drr-rotate-anchor-presentation-border-right, 1px solid #3880ff)}@media (hover: none) and (pointer: coarse){div.anchor{padding:var(--deckgo-drr-anchor-padding-mobile)}div.border.top,div.border.bottom{height:4px}div.border.end,div.border.start{width:4px}}";
+var deckdeckgoDrrCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;contain:var(--contain);width:var(--width);height:var(--height);-webkit-transform:rotate(var(--rotate, 0deg));transform:rotate(var(--rotate, 0deg));position:absolute;top:var(--top);left:var(--left);-webkit-user-select:var(--deckgo-drr-user-select, none);-moz-user-select:var(--deckgo-drr-user-select, none);-ms-user-select:var(--deckgo-drr-user-select, none);user-select:var(--deckgo-drr-user-select, none)}:host(.selected.draggable:not(.drag)){cursor:move}:host(.selected){outline:var(--deckgo-drr-border, 1px solid #3880ff)}::slotted(*){width:100%;height:100%;-webkit-user-select:var(--user-select, none);-moz-user-select:var(--user-select, none);-ms-user-select:var(--user-select, none);user-select:var(--user-select, none);-ms-touch-action:none;touch-action:none;pointer-events:var(--pointer-events, none)}div.anchor{position:absolute;width:var(--deckgo-drr-anchor-width, 16px);height:var(--deckgo-drr-anchor-height, 16px);padding:var(--deckgo-drr-anchor-padding-desktop, 16px)}div.anchor>div{width:100%;height:100%;border-radius:var(--deckgo-drr-anchor-border-radius, 50%);background:var(--deckgo-drr-anchor-background, #3880ff);border:var(--deckgo-drr-anchor-border)}div.anchor.top{top:0}div.anchor.top.end{cursor:ne-resize;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%)}div.anchor.top.start{cursor:nw-resize;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}div.anchor.end{right:0}div.anchor.bottom{bottom:0}div.anchor.bottom.end{cursor:se-resize;-webkit-transform:translate(50%, 50%);transform:translate(50%, 50%)}div.anchor.bottom.start{cursor:sw-resize;-webkit-transform:translate(-50%, 50%);transform:translate(-50%, 50%)}div.anchor.start{left:0}div.border{position:absolute}div.border.top,div.border.bottom{width:calc(100% - var(--deckgo-drr-anchor-width, 16px));height:16px}div.border.end,div.border.start{top:50%;height:calc(100% - var(--deckgo-drr-anchor-height, 16px));width:16px}div.border.top{top:0;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);cursor:n-resize}div.border.end{right:0;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%);cursor:e-resize}div.border.bottom{bottom:0;left:50%;-webkit-transform:translate(-50%, 50%);transform:translate(-50%, 50%);cursor:s-resize}div.border.start{left:0;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);cursor:w-resize}div.rotate{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%, -100%);transform:translate(-50%, -100%);height:var(--deckgo-drr-rotate-anchor-width, 24px);width:var(--deckgo-drr-rotate-anchor-height, 32px)}div.rotate div.action{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);cursor:crosshair;width:var(--deckgo-drr-rotate-anchor-action-width, 16px);height:var(--deckgo-drr-rotate-anchor-action-height, 16px);border-radius:var(--deckgo-drr-rotate-anchor-action-border-radius, 50%);background:var(--deckgo-drr-rotate-anchor-action-background);border:var(--deckgo-drr-rotate-anchor-action-border, 1px solid #3880ff)}div.rotate div.presentation{position:absolute;bottom:0;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);height:var(--deckgo-drr-rotate-anchor-presentation-height, calc(100% - 16px - 1px));border-right:var(--deckgo-drr-rotate-anchor-presentation-border-right, 1px solid #3880ff)}@media (hover: none) and (pointer: coarse){div.anchor{padding:var(--deckgo-drr-anchor-padding-mobile)}div.border.top,div.border.bottom{height:4px}div.border.end,div.border.start{width:4px}}";
 var DeckdeckgoDragResizeRotate = /** @class */ (function () {
@@ -47,2 +47,4 @@ function class_1(hostRef) {
         registerInstance(this, hostRef);
+        this.drrSelect = createEvent(this, "drrSelect", 7);
+        this.drrDidChange = createEvent(this, "drrDidChange", 7);
         this.unit = 'percentage';
@@ -55,2 +57,4 @@ // Size
         this.rotation = true;
+        // Text content editable
+        this.text = false;
         this.minWidth = 10;
@@ -80,2 +84,3 @@ this.minHeight = 10;
         this.centerY = null;
+        this.editing = false;
         this.start = function ($event) { return __awaiter(_this, void 0, void 0, function () {
@@ -97,7 +102,11 @@ var selected;
                             this.selected = false;
+                            this.resetTextEditable();
                             return [2 /*return*/];
                         }
-                        this.drrSelect.emit(selected);
-                        this.selected = true;
-                        this.startMove();
+                        if (!this.editing) {
+                            this.drrSelect.emit(selected);
+                            this.selected = true;
+                            this.initTextEditable();
+                            this.startMove();
+                        }
                         return [4 /*yield*/, this.initStartPositions($event)];
@@ -119,4 +128,19 @@ case 1:
         };
-        this.drrSelect = createEvent(this, "drrSelect", 7);
-        this.drrDidChange = createEvent(this, "drrDidChange", 7);
+        this.dbclick = function () { return __awaiter(_this, void 0, void 0, function () {
+            var element;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        this.editing = true;
+                        element = this.el.querySelector(":scope > *");
+                        if (!element) return [3 /*break*/, 2];
+                        element.focus();
+                        return [4 /*yield*/, this.moveCursorToEnd(element)];
+                    case 1:
+                        _a.sent();
+                        _a.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        }); };
     }
@@ -193,2 +217,5 @@ class_1.prototype.componentWillLoad = function () {
                 }
+                if (this.el) {
+                    this.el.removeEventListener('dblclick', this.dbclick, true);
+                }
                 return [2 /*return*/];
@@ -199,10 +226,14 @@ });
     class_1.prototype.init = function () {
-        var _this = this;
-        return new Promise(function (resolve) {
-            _this.width = _this.el.style.getPropertyValue('--width') ? parseFloat(_this.el.style.getPropertyValue('--width')) : 0;
-            _this.height = _this.el.style.getPropertyValue('--height') ? parseFloat(_this.el.style.getPropertyValue('--height')) : 0;
-            _this.top = _this.el.style.getPropertyValue('--top') ? parseFloat(_this.el.style.getPropertyValue('--top')) : 0;
-            _this.left = _this.el.style.getPropertyValue('--left') ? parseFloat(_this.el.style.getPropertyValue('--left')) : 0;
-            _this.rotate = _this.el.style.getPropertyValue('--rotate') ? parseFloat(_this.el.style.getPropertyValue('--rotate')) : 0;
-            resolve();
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                this.width = this.el.style.getPropertyValue('--width') ? parseFloat(this.el.style.getPropertyValue('--width')) : 0;
+                this.height = this.el.style.getPropertyValue('--height') ? parseFloat(this.el.style.getPropertyValue('--height')) : 0;
+                this.top = this.el.style.getPropertyValue('--top') ? parseFloat(this.el.style.getPropertyValue('--top')) : 0;
+                this.left = this.el.style.getPropertyValue('--left') ? parseFloat(this.el.style.getPropertyValue('--left')) : 0;
+                this.rotate = this.el.style.getPropertyValue('--rotate') ? parseFloat(this.el.style.getPropertyValue('--rotate')) : 0;
+                if (this.text) {
+                    this.resize = false;
+                }
+                return [2 /*return*/];
+            });
         });
@@ -222,2 +253,19 @@ };
     };
+    class_1.prototype.initTextEditable = function () {
+        if (!this.text || !this.el) {
+            return;
+        }
+        this.el.addEventListener('dblclick', this.dbclick, { once: true });
+        var element = this.el.querySelector(":scope > *");
+        if (element) {
+            element.setAttribute('contentEditable', 'true');
+        }
+    };
+    class_1.prototype.resetTextEditable = function () {
+        if (!this.text || !this.el) {
+            return;
+        }
+        this.editing = false;
+        this.el.removeEventListener('dblclick', this.dbclick, true);
+    };
     class_1.prototype.initStartPositions = function ($event) {
@@ -242,4 +290,4 @@ return __awaiter(this, void 0, void 0, function () {
     class_1.prototype.initStartPositionsMove = function () {
-        this.startWidth = this.width;
-        this.startHeight = this.height;
+        this.startWidth = isNaN(this.width) ? 0 : this.width;
+        this.startHeight = isNaN(this.height) ? 0 : this.height;
         this.startTop = this.top;
@@ -480,2 +528,19 @@ this.startLeft = this.left;
     };
+    // https://stackoverflow.com/a/3866442/5404186
+    class_1.prototype.moveCursorToEnd = function (contentEditableElement) {
+        return __awaiter(this, void 0, void 0, function () {
+            var range, selection;
+            return __generator(this, function (_a) {
+                if (window && document && document.createRange && contentEditableElement) {
+                    range = document.createRange();
+                    range.selectNodeContents(contentEditableElement);
+                    range.collapse(false);
+                    selection = window.getSelection();
+                    selection.removeAllRanges();
+                    selection.addRange(range);
+                }
+                return [2 /*return*/];
+            });
+        });
+    };
     class_1.prototype.render = function () {
@@ -485,7 +550,10 @@ var widthUnit = this.unit === 'percentage' ? '%' : this.unit === 'viewport' ? 'vw' : this.unit;
         return (h(Host, { style: {
-                '--width': "" + this.width + widthUnit,
-                '--height': "" + this.height + heightUnit,
+                '--width': this.text ? 'auto' : "" + this.width + widthUnit,
+                '--height': this.text ? 'auto' : "" + this.height + heightUnit,
                 '--top': "" + this.top + heightUnit,
                 '--left': "" + this.left + widthUnit,
                 '--rotate': this.rotate ? this.rotate + "deg" : "0deg",
+                '--contain': this.text ? 'layout' : 'size',
+                '--pointer-events': "" + (this.editing ? 'all' : 'none'),
+                '--user-select': "" + (this.editing ? 'text' : 'none'),
             }, class: (this.selected ? 'selected' : '') + " " + (this.drag !== 'none' ? 'draggable' : '') + " " + (this.drag !== 'none' && this.moving ? 'drag' : '') }, this.renderEdgesAnchors(), this.renderBorderAnchors(), this.renderRotateAnchor(), h("slot", null)));
@@ -526,3 +594,3 @@ };
         get: function () { return getElement(this); },
-        enumerable: true,
+        enumerable: false,
         configurable: true
@@ -529,0 +597,0 @@ });

dist/esm/deckgo-drr.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, B as Build, h, H as Host, g as getElement } from './index-186a49f7.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a4a96ce2.js';
 
@@ -6,134 +6,10 @@ function unifyEvent(e) {
 }
-function debounce(func, timeout) {
-    let timer;
-    return (...args) => {
-        const next = () => func(...args);
-        if (timer) {
-            clearTimeout(timer);
-        }
-        timer = setTimeout(next, timeout && timeout > 0 ? timeout : 300);
-    };
-}
-function isMobile() {
-    if (!window || !navigator) {
-        return false;
-    }
-    const a = navigator.userAgent || navigator.vendor || window.opera;
-    return (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) ||
-        /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4)));
-}
-function isIOS() {
-    if (!window || !navigator) {
-        return false;
-    }
-    const a = navigator.userAgent || navigator.vendor || window.opera;
-    return /iPad|iPhone|iPod/i.test(a);
-}
-function isIPad() {
-    if (!window || !navigator) {
-        return false;
-    }
-    const a = navigator.userAgent || navigator.vendor || window.opera;
-    return /iPad/i.test(a);
-}
-function isFullscreen() {
-    if (!window || !screen) {
-        return false;
-    }
-    return window.innerHeight == screen.height;
-}
-function isFirefox() {
-    if (!window || !navigator) {
-        return false;
-    }
-    const a = navigator.userAgent || navigator.vendor || window.opera;
-    return /firefox/i.test(a);
-}
-function isRTL() {
-    if (!document || !document.documentElement) {
-        return false;
-    }
-    const htmlDir = document.documentElement.getAttribute('dir');
-    return htmlDir !== null && htmlDir === 'rtl';
-}
 
-function lazyLoadSelectedImages(images) {
-    return new Promise((resolve) => {
-        if (!images) {
-            resolve();
-            return;
-        }
-        images.forEach((image) => {
-            if (image.hasAttribute('data-src')) {
-                image.setAttribute('src', `${image.getAttribute('data-src')}`);
-                image.removeAttribute('data-src');
-                if (!image.classList.contains('deckgo-reveal')) {
-                    image.style.setProperty('visibility', 'inherit');
-                }
-            }
-            image.style.setProperty('pointer-events', 'none');
-        });
-        resolve();
-    });
-}
-function lazyLoadSelectedLazyImagesComponent(components) {
-    return new Promise((resolve) => {
-        if (!components) {
-            resolve();
-            return;
-        }
-        components.forEach(async (component) => {
-            await component.lazyLoad();
-        });
-        resolve();
-    });
-}
+const deckdeckgoDrrCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;contain:var(--contain);width:var(--width);height:var(--height);-webkit-transform:rotate(var(--rotate, 0deg));transform:rotate(var(--rotate, 0deg));position:absolute;top:var(--top);left:var(--left);-webkit-user-select:var(--deckgo-drr-user-select, none);-moz-user-select:var(--deckgo-drr-user-select, none);-ms-user-select:var(--deckgo-drr-user-select, none);user-select:var(--deckgo-drr-user-select, none)}:host(.selected.draggable:not(.drag)){cursor:move}:host(.selected){outline:var(--deckgo-drr-border, 1px solid #3880ff)}::slotted(*){width:100%;height:100%;-webkit-user-select:var(--user-select, none);-moz-user-select:var(--user-select, none);-ms-user-select:var(--user-select, none);user-select:var(--user-select, none);-ms-touch-action:none;touch-action:none;pointer-events:var(--pointer-events, none)}div.anchor{position:absolute;width:var(--deckgo-drr-anchor-width, 16px);height:var(--deckgo-drr-anchor-height, 16px);padding:var(--deckgo-drr-anchor-padding-desktop, 16px)}div.anchor>div{width:100%;height:100%;border-radius:var(--deckgo-drr-anchor-border-radius, 50%);background:var(--deckgo-drr-anchor-background, #3880ff);border:var(--deckgo-drr-anchor-border)}div.anchor.top{top:0}div.anchor.top.end{cursor:ne-resize;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%)}div.anchor.top.start{cursor:nw-resize;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}div.anchor.end{right:0}div.anchor.bottom{bottom:0}div.anchor.bottom.end{cursor:se-resize;-webkit-transform:translate(50%, 50%);transform:translate(50%, 50%)}div.anchor.bottom.start{cursor:sw-resize;-webkit-transform:translate(-50%, 50%);transform:translate(-50%, 50%)}div.anchor.start{left:0}div.border{position:absolute}div.border.top,div.border.bottom{width:calc(100% - var(--deckgo-drr-anchor-width, 16px));height:16px}div.border.end,div.border.start{top:50%;height:calc(100% - var(--deckgo-drr-anchor-height, 16px));width:16px}div.border.top{top:0;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);cursor:n-resize}div.border.end{right:0;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%);cursor:e-resize}div.border.bottom{bottom:0;left:50%;-webkit-transform:translate(-50%, 50%);transform:translate(-50%, 50%);cursor:s-resize}div.border.start{left:0;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);cursor:w-resize}div.rotate{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%, -100%);transform:translate(-50%, -100%);height:var(--deckgo-drr-rotate-anchor-width, 24px);width:var(--deckgo-drr-rotate-anchor-height, 32px)}div.rotate div.action{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);cursor:crosshair;width:var(--deckgo-drr-rotate-anchor-action-width, 16px);height:var(--deckgo-drr-rotate-anchor-action-height, 16px);border-radius:var(--deckgo-drr-rotate-anchor-action-border-radius, 50%);background:var(--deckgo-drr-rotate-anchor-action-background);border:var(--deckgo-drr-rotate-anchor-action-border, 1px solid #3880ff)}div.rotate div.presentation{position:absolute;bottom:0;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);height:var(--deckgo-drr-rotate-anchor-presentation-height, calc(100% - 16px - 1px));border-right:var(--deckgo-drr-rotate-anchor-presentation-border-right, 1px solid #3880ff)}@media (hover: none) and (pointer: coarse){div.anchor{padding:var(--deckgo-drr-anchor-padding-mobile)}div.border.top,div.border.bottom{height:4px}div.border.end,div.border.start{width:4px}}";
 
-function injectJS(id, src) {
-    return new Promise((resolve, reject) => {
-        if (!document) {
-            resolve();
-            return;
-        }
-        if (document.getElementById(id)) {
-            resolve('JS already loaded.');
-            return;
-        }
-        const script = document.createElement('script');
-        script.id = id;
-        script.async = true;
-        script.defer = true;
-        script.src = src;
-        script.addEventListener('load', () => resolve('JS loaded.'));
-        script.addEventListener('error', () => reject('Error loading script.'));
-        script.addEventListener('abort', () => reject('Script loading aborted.'));
-        document.head.appendChild(script);
-    });
-}
-function injectCSS(id, src) {
-    return new Promise((resolve, reject) => {
-        if (!document) {
-            resolve();
-            return;
-        }
-        if (document.getElementById(id)) {
-            resolve('CSS already loaded.');
-            return;
-        }
-        const link = document.createElement('link');
-        link.id = id;
-        link.setAttribute('rel', 'stylesheet');
-        link.setAttribute('href', src);
-        link.addEventListener('load', () => resolve('CSS loaded.'));
-        link.addEventListener('error', () => reject('Error loading css.'));
-        link.addEventListener('abort', () => reject('CSS loading aborted.'));
-        document.head.appendChild(link);
-    });
-}
-
-const deckdeckgoDrrCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;contain:size;width:var(--width);height:var(--height);-webkit-transform:rotate(var(--rotate, 0deg));transform:rotate(var(--rotate, 0deg));position:absolute;top:var(--top);left:var(--left);-webkit-user-select:var(--deckgo-drr-user-select, none);-moz-user-select:var(--deckgo-drr-user-select, none);-ms-user-select:var(--deckgo-drr-user-select, none);user-select:var(--deckgo-drr-user-select, none)}:host(.selected.draggable:not(.drag)){cursor:move}:host(.selected){outline:var(--deckgo-drr-border, 1px solid #3880ff)}::slotted(*){width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;pointer-events:none}div.anchor{position:absolute;width:var(--deckgo-drr-anchor-width, 16px);height:var(--deckgo-drr-anchor-height, 16px);padding:var(--deckgo-drr-anchor-padding-desktop, 16px)}div.anchor>div{width:100%;height:100%;border-radius:var(--deckgo-drr-anchor-border-radius, 50%);background:var(--deckgo-drr-anchor-background, #3880ff);border:var(--deckgo-drr-anchor-border)}div.anchor.top{top:0}div.anchor.top.end{cursor:ne-resize;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%)}div.anchor.top.start{cursor:nw-resize;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}div.anchor.end{right:0}div.anchor.bottom{bottom:0}div.anchor.bottom.end{cursor:se-resize;-webkit-transform:translate(50%, 50%);transform:translate(50%, 50%)}div.anchor.bottom.start{cursor:sw-resize;-webkit-transform:translate(-50%, 50%);transform:translate(-50%, 50%)}div.anchor.start{left:0}div.border{position:absolute}div.border.top,div.border.bottom{width:calc(100% - var(--deckgo-drr-anchor-width, 16px));height:16px}div.border.end,div.border.start{top:50%;height:calc(100% - var(--deckgo-drr-anchor-height, 16px));width:16px}div.border.top{top:0;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);cursor:n-resize}div.border.end{right:0;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%);cursor:e-resize}div.border.bottom{bottom:0;left:50%;-webkit-transform:translate(-50%, 50%);transform:translate(-50%, 50%);cursor:s-resize}div.border.start{left:0;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);cursor:w-resize}div.rotate{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%, -100%);transform:translate(-50%, -100%);height:var(--deckgo-drr-rotate-anchor-width, 24px);width:var(--deckgo-drr-rotate-anchor-height, 32px)}div.rotate div.action{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);cursor:crosshair;width:var(--deckgo-drr-rotate-anchor-action-width, 16px);height:var(--deckgo-drr-rotate-anchor-action-height, 16px);border-radius:var(--deckgo-drr-rotate-anchor-action-border-radius, 50%);background:var(--deckgo-drr-rotate-anchor-action-background);border:var(--deckgo-drr-rotate-anchor-action-border, 1px solid #3880ff)}div.rotate div.presentation{position:absolute;bottom:0;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);height:var(--deckgo-drr-rotate-anchor-presentation-height, calc(100% - 16px - 1px));border-right:var(--deckgo-drr-rotate-anchor-presentation-border-right, 1px solid #3880ff)}@media (hover: none) and (pointer: coarse){div.anchor{padding:var(--deckgo-drr-anchor-padding-mobile)}div.border.top,div.border.bottom{height:4px}div.border.end,div.border.start{width:4px}}";
-
 const DeckdeckgoDragResizeRotate = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.drrSelect = createEvent(this, "drrSelect", 7);
+        this.drrDidChange = createEvent(this, "drrDidChange", 7);
         this.unit = 'percentage';
@@ -146,2 +22,4 @@ // Size
         this.rotation = true;
+        // Text content editable
+        this.text = false;
         this.minWidth = 10;
@@ -171,2 +49,3 @@ this.minHeight = 10;
         this.centerY = null;
+        this.editing = false;
         this.start = async ($event) => {
@@ -184,7 +63,11 @@ if (!$event || !$event.target) {
                 this.selected = false;
+                this.resetTextEditable();
                 return;
             }
-            this.drrSelect.emit(selected);
-            this.selected = true;
-            this.startMove();
+            if (!this.editing) {
+                this.drrSelect.emit(selected);
+                this.selected = true;
+                this.initTextEditable();
+                this.startMove();
+            }
             await this.initStartPositions($event);
@@ -201,4 +84,10 @@ };
         };
-        this.drrSelect = createEvent(this, "drrSelect", 7);
-        this.drrDidChange = createEvent(this, "drrDidChange", 7);
+        this.dbclick = async () => {
+            this.editing = true;
+            const element = this.el.querySelector( `:scope > *` );
+            if (element) {
+                element.focus();
+                await this.moveCursorToEnd(element);
+            }
+        };
     }
@@ -237,15 +126,18 @@ async componentWillLoad() {
         }
+        if (this.el) {
+            this.el.removeEventListener('dblclick', this.dbclick, true);
+        }
     }
-    init() {
-        return new Promise((resolve) => {
-            this.width = this.el.style.getPropertyValue('--width') ? parseFloat(this.el.style.getPropertyValue('--width')) : 0;
-            this.height = this.el.style.getPropertyValue('--height') ? parseFloat(this.el.style.getPropertyValue('--height')) : 0;
-            this.top = this.el.style.getPropertyValue('--top') ? parseFloat(this.el.style.getPropertyValue('--top')) : 0;
-            this.left = this.el.style.getPropertyValue('--left') ? parseFloat(this.el.style.getPropertyValue('--left')) : 0;
-            this.rotate = this.el.style.getPropertyValue('--rotate') ? parseFloat(this.el.style.getPropertyValue('--rotate')) : 0;
-            resolve();
-        });
+    async init() {
+        this.width = this.el.style.getPropertyValue('--width') ? parseFloat(this.el.style.getPropertyValue('--width')) : 0;
+        this.height = this.el.style.getPropertyValue('--height') ? parseFloat(this.el.style.getPropertyValue('--height')) : 0;
+        this.top = this.el.style.getPropertyValue('--top') ? parseFloat(this.el.style.getPropertyValue('--top')) : 0;
+        this.left = this.el.style.getPropertyValue('--left') ? parseFloat(this.el.style.getPropertyValue('--left')) : 0;
+        this.rotate = this.el.style.getPropertyValue('--rotate') ? parseFloat(this.el.style.getPropertyValue('--rotate')) : 0;
+        if (this.text) {
+            this.resize = false;
+        }
     }
     async displaySlot() {
-        const element = this.el.querySelector(Build.isBrowser ? `:scope > *` : '> *');
+        const element = this.el.querySelector( `:scope > *` );
         if (element && element.style.display === 'none') {
@@ -255,2 +147,19 @@ element.style.display = '';
     }
+    initTextEditable() {
+        if (!this.text || !this.el) {
+            return;
+        }
+        this.el.addEventListener('dblclick', this.dbclick, { once: true });
+        const element = this.el.querySelector( `:scope > *` );
+        if (element) {
+            element.setAttribute('contentEditable', 'true');
+        }
+    }
+    resetTextEditable() {
+        if (!this.text || !this.el) {
+            return;
+        }
+        this.editing = false;
+        this.el.removeEventListener('dblclick', this.dbclick, true);
+    }
     async initStartPositions($event) {
@@ -265,4 +174,4 @@ this.startX = unifyEvent($event).clientX;
     initStartPositionsMove() {
-        this.startWidth = this.width;
-        this.startHeight = this.height;
+        this.startWidth = isNaN(this.width) ? 0 : this.width;
+        this.startHeight = isNaN(this.height) ? 0 : this.height;
         this.startTop = this.top;
@@ -493,2 +402,13 @@ this.startLeft = this.left;
     }
+    // https://stackoverflow.com/a/3866442/5404186
+    async moveCursorToEnd(contentEditableElement) {
+        if (window && document && document.createRange && contentEditableElement) {
+            const range = document.createRange();
+            range.selectNodeContents(contentEditableElement);
+            range.collapse(false);
+            const selection = window.getSelection();
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
+    }
     render() {
@@ -498,7 +418,10 @@ const widthUnit = this.unit === 'percentage' ? '%' : this.unit === 'viewport' ? 'vw' : this.unit;
         return (h(Host, { style: {
-                '--width': `${this.width}${widthUnit}`,
-                '--height': `${this.height}${heightUnit}`,
+                '--width': this.text ? 'auto' : `${this.width}${widthUnit}`,
+                '--height': this.text ? 'auto' : `${this.height}${heightUnit}`,
                 '--top': `${this.top}${heightUnit}`,
                 '--left': `${this.left}${widthUnit}`,
                 '--rotate': this.rotate ? `${this.rotate}deg` : `0deg`,
+                '--contain': this.text ? 'layout' : 'size',
+                '--pointer-events': `${this.editing ? 'all' : 'none'}`,
+                '--user-select': `${this.editing ? 'text' : 'none'}`,
             }, class: `${this.selected ? 'selected' : ''} ${this.drag !== 'none' ? 'draggable' : ''} ${this.drag !== 'none' && this.moving ? 'drag' : ''}` }, this.renderEdgesAnchors(), this.renderBorderAnchors(), this.renderRotateAnchor(), h("slot", null)));
@@ -505,0 +428,0 @@ }

dist/types/components.d.ts

@@ -10,6 +10,7 @@ /* eslint-disable */
     interface DeckgoDrr {
-        "drag": "x-axis" | "y-axis" | "all" | "none";
+        "drag": 'x-axis' | 'y-axis' | 'all' | 'none';
         "resize": boolean;
         "rotation": boolean;
-        "unit": "percentage" | "viewport" | "px";
+        "text": boolean;
+        "unit": 'percentage' | 'viewport' | 'px';
     }
@@ -30,3 +31,3 @@ }
     interface DeckgoDrr {
-        "drag"?: "x-axis" | "y-axis" | "all" | "none";
+        "drag"?: 'x-axis' | 'y-axis' | 'all' | 'none';
         "onDrrDidChange"?: (event: CustomEvent<HTMLElement | undefined>) => void;
@@ -36,3 +37,4 @@ "onDrrSelect"?: (event: CustomEvent<HTMLElement | undefined>) => void;
         "rotation"?: boolean;
-        "unit"?: "percentage" | "viewport" | "px";
+        "text"?: boolean;
+        "unit"?: 'percentage' | 'viewport' | 'px';
     }
@@ -39,0 +41,0 @@ interface IntrinsicElements {

dist/types/components/deckdeckgo-drr.d.ts

@@ -7,2 +7,3 @@ export declare class DeckdeckgoDragResizeRotate {
     rotation: boolean;
+    text: boolean;
     private width;
@@ -43,2 +44,3 @@ private height;
     private pp_y;
+    private editing;
     componentWillLoad(): Promise<void>;
@@ -52,2 +54,4 @@ componentDidLoad(): Promise<void>;
     private start;
+    private initTextEditable;
+    private resetTextEditable;
     private initStartPositions;
@@ -74,2 +78,4 @@ private initStartPositionsMove;
     private resizeMatrix;
+    private dbclick;
+    private moveCursorToEnd;
     render(): any;
@@ -76,0 +82,0 @@ private renderEdgesAnchors;

dist/types/stencil-public-runtime.d.ts

@@ -351,2 +351,11 @@ declare type CustomMethodDecorator<T> = (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
     /**
+     * A `@Prop` or `@State` property changed and a rerender is about to be requested.
+     *
+     * Called multiple times throughout the life of
+     * the component as its properties change.
+     *
+     * componentShouldUpdate is not called on the first render.
+     */
+    componentShouldUpdate?(newVal: any, oldVal: any, propName: string): boolean | void;
+    /**
      * The component is about to update and re-render.
@@ -789,4 +798,4 @@ *
         alt?: string;
-        autoCapitalize?: string;
-        autocapitalize?: string;
+        autoCapitalize?: any;
+        autocapitalize?: any;
         autoComplete?: string;
@@ -1004,2 +1013,4 @@ autocomplete?: string;
         size?: number;
+        autoComplete?: string;
+        autocomplete?: string;
     }
@@ -1051,2 +1062,3 @@ interface SourceHTMLAttributes<T> extends HTMLAttributes<T> {
     interface ThHTMLAttributes<T> extends HTMLAttributes<T> {
+        abbr?: string;
         colSpan?: number;
@@ -1091,3 +1103,3 @@ headers?: string;
         lang?: string;
-        spellcheck?: 'true' | 'false';
+        spellcheck?: 'true' | 'false' | any;
         style?: {
@@ -1115,4 +1127,4 @@ [key: string]: string | undefined;
         vocab?: string;
-        autoCapitalize?: string;
-        autocapitalize?: string;
+        autoCapitalize?: any;
+        autocapitalize?: any;
         autoCorrect?: string;
@@ -1301,4 +1313,4 @@ autocorrect?: string;
         'radius'?: number | string;
-        'ref-x'?: number | string;
-        'ref-y'?: number | string;
+        'refX'?: number | string;
+        'refY'?: number | string;
         'rendering-intent'?: number | string;
@@ -1419,2 +1431,6 @@ 'repeatCount'?: number | string;
         onFocusCapture?: (event: FocusEvent) => void;
+        onFocusIn?: (event: FocusEvent) => void;
+        onFocusInCapture?: (event: FocusEvent) => void;
+        onFocusOut?: (event: FocusEvent) => void;
+        onFocusOutCapture?: (event: FocusEvent) => void;
         onBlur?: (event: FocusEvent) => void;
@@ -1421,0 +1437,0 @@ onBlurCapture?: (event: FocusEvent) => void;

package.json

 {
   "name": "@deckdeckgo/drag-resize-rotate",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "A Web Component to drag, resize and rotate any element",
@@ -19,3 +19,3 @@ "main": "dist/index.js",
   "scripts": {
-    "build": "stencil build --docs",
+    "build": "stencil build",
     "start": "stencil build --dev --watch --serve",
@@ -27,16 +27,16 @@ "test": "stencil test --spec --e2e",
   "devDependencies": {
-    "@stencil/core": "^1.13.0",
+    "@stencil/core": "^1.16.4",
     "@stencil/postcss": "^1.0.1",
-    "@stencil/sass": "^1.3.1",
+    "@stencil/sass": "^1.3.2",
     "@stencil/utils": "0.0.5",
-    "@types/jest": "25.2.1",
-    "@types/prismjs": "^1.16.0",
-    "@types/puppeteer": "2.0.1",
-    "autoprefixer": "^9.7.6",
+    "@types/jest": "26.0.5",
+    "@types/prismjs": "^1.16.1",
+    "@types/puppeteer": "3.0.1",
+    "autoprefixer": "^9.8.5",
     "husky": "^4.2.5",
-    "jest": "26.0.1",
-    "jest-cli": "26.0.1",
+    "jest": "26.1.0",
+    "jest-cli": "26.1.0",
     "prettier": "2.0.5",
     "pretty-quick": "^2.0.1",
-    "puppeteer": "3.0.4"
+    "puppeteer": "5.2.0"
   },
@@ -43,0 +43,0 @@ "license": "MIT",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses eval() which is a dangerous function. This prevents the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Copyleft License

License

(Experimental) Copyleft license information was found

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No License Found

License

(Experimental) License information could not be found

Found 1 instance in 1 package

Non-permissive License

License

(Experimental) A license not known to be considered permissive was found

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

4

decreased by-33.33%

Worsened metrics

Total package byte prevSize

911953

decreased by-44.09%

Number of package files

73

decreased by-15.12%

Number of low license alerts

3

increased byInfinity%

Lines of code

12413

decreased by-53.75%

No dependency changes