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

Comparing version 1.1.3 to 2.0.0

CHANGELOG.md

@@ -0,1 +1,7 @@
+# 2.0.0 (2020-09-03)
+
+### Breaking Changes
+
+- E11, Edge 16-18 and Safari 10 not supported
+
 # 1.1.3 (2020-07-19)
@@ -2,0 +8,0 @@

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

 'use strict';
 
-const index = require('./index-033a337e.js');
-const patch = require('./patch-49391e40.js');
+const index = require('./index-41eedf68.js');
 
-patch.patchBrowser().then(options => {
+/*
+ Stencil Client Patch Browser v2.0.2 | MIT Licensed | https://stenciljs.com
+ */
+const patchBrowser = () => {
+    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('deckdeckgo-drag-resize-rotate.cjs.js', document.baseURI).href));
+    const opts =  {};
+    if ( importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    return index.promiseResolve(opts);
+};
+
+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-033a337e.js');
+const index = require('./index-41eedf68.js');
 
@@ -12,449 +12,449 @@ function unifyEvent(e) {
 
-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(.text){contain:layout}: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}}";
+const deckdeckgoDrrCss = ":host{display:flex;justify-content:center;align-items:center;contain:size;width:var(--width);height:var(--height);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(.text){contain:layout}: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);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;transform:translate(50%, -50%)}div.anchor.top.start{cursor:nw-resize;transform:translate(-50%, -50%)}div.anchor.end{right:0}div.anchor.bottom{bottom:0}div.anchor.bottom.end{cursor:se-resize;transform:translate(50%, 50%)}div.anchor.bottom.start{cursor:sw-resize;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%;transform:translate(-50%, -50%);cursor:n-resize}div.border.end{right:0;transform:translate(50%, -50%);cursor:e-resize}div.border.bottom{bottom:0;left:50%;transform:translate(-50%, 50%);cursor:s-resize}div.border.start{left:0;transform:translate(-50%, -50%);cursor:w-resize}div.rotate{position:absolute;top:0;left:50%;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%;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%;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';
-        // Size
-        this.resize = true;
-        // Position
-        this.drag = 'all';
-        // Rotate
-        this.rotation = true;
-        // Text content editable
-        this.text = false;
-        this.minWidth = 10;
-        this.minHeight = 10;
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.drrSelect = index.createEvent(this, "drrSelect", 7);
+    this.drrDidChange = index.createEvent(this, "drrDidChange", 7);
+    this.unit = 'percentage';
+    // Size
+    this.resize = true;
+    // Position
+    this.drag = 'all';
+    // Rotate
+    this.rotation = true;
+    // Text content editable
+    this.text = false;
+    this.minWidth = 10;
+    this.minHeight = 10;
+    this.selected = false;
+    this.updated = false;
+    this.moving = false;
+    this.startX = null;
+    this.startY = null;
+    this.startWidth = null;
+    this.startHeight = null;
+    this.startTop = null;
+    this.startLeft = null;
+    this.dragTopEnd = false;
+    this.dragBottomEnd = false;
+    this.dragBottomStart = false;
+    this.dragTopStart = false;
+    this.dragTop = false;
+    this.dragEnd = false;
+    this.dragBottom = false;
+    this.dragStart = false;
+    this.parentWidth = null;
+    this.parentHeight = null;
+    this.rotating = false;
+    this.centerX = null;
+    this.centerY = null;
+    this.editing = false;
+    this.start = async ($event) => {
+      if (!$event || !$event.target) {
+        return;
+      }
+      // If we click elsewhere or select another component, then this component should loose focus and values need to be reset for next usage
+      if (!this.isTargetEvent($event)) {
+        this.stopAndReset(false);
+        if (this.selected) {
+          this.drrSelect.emit(undefined);
+        }
         this.selected = false;
-        this.updated = false;
-        this.moving = false;
-        this.startX = null;
-        this.startY = null;
-        this.startWidth = null;
-        this.startHeight = null;
-        this.startTop = null;
-        this.startLeft = null;
-        this.dragTopEnd = false;
-        this.dragBottomEnd = false;
-        this.dragBottomStart = false;
-        this.dragTopStart = false;
-        this.dragTop = false;
-        this.dragEnd = false;
-        this.dragBottom = false;
-        this.dragStart = false;
-        this.parentWidth = null;
-        this.parentHeight = null;
-        this.rotating = false;
-        this.centerX = null;
-        this.centerY = null;
-        this.editing = false;
-        this.start = async ($event) => {
-            if (!$event || !$event.target) {
-                return;
-            }
-            // If we click elsewhere or select another component, then this component should loose focus and values need to be reset for next usage
-            if (!this.isTargetEvent($event)) {
-                this.stopAndReset(false);
-                if (this.selected) {
-                    this.drrSelect.emit(undefined);
-                }
-                this.selected = false;
-                this.resetTextEditable();
-                return;
-            }
-            if (!this.editing) {
-                const selected = $event.target.closest('deckgo-drr');
-                this.drrSelect.emit(selected);
-                this.selected = true;
-                this.initTextEditable();
-                this.startMove();
-            }
-            await this.initStartPositions($event);
-        };
-        this.transform = ($event) => {
-            const moved = this.move($event);
-            const resized = this.size($event);
-            const rotated = this.rotateShape($event);
-            this.updated = moved || resized || rotated;
-        };
-        this.stop = () => {
-            this.stopAndReset(this.selected);
-        };
-        this.dbclick = async ($event) => {
-            if (!this.isTargetEvent($event)) {
-                return;
-            }
-            this.editing = true;
-            const element = this.el.querySelector( `:scope > *` );
-            if (element) {
-                element.focus();
-                await this.moveCursorToEnd(element);
-            }
-        };
+        this.resetTextEditable();
+        return;
+      }
+      if (!this.editing) {
+        const selected = $event.target.closest('deckgo-drr');
+        this.drrSelect.emit(selected);
+        this.selected = true;
+        this.initTextEditable();
+        this.startMove();
+      }
+      await this.initStartPositions($event);
+    };
+    this.transform = ($event) => {
+      const moved = this.move($event);
+      const resized = this.size($event);
+      const rotated = this.rotateShape($event);
+      this.updated = moved || resized || rotated;
+    };
+    this.stop = () => {
+      this.stopAndReset(this.selected);
+    };
+    this.dbclick = async ($event) => {
+      if (!this.isTargetEvent($event)) {
+        return;
+      }
+      this.editing = true;
+      const element = this.el.querySelector( `:scope > *` );
+      if (element) {
+        element.focus();
+        await this.moveCursorToEnd(element);
+      }
+    };
+  }
+  async componentWillLoad() {
+    await this.init();
+    await this.attachEventListeners();
+  }
+  async componentDidLoad() {
+    await this.displaySlot();
+  }
+  async componentWillUnload() {
+    if (this.drag !== 'none' || this.resize) {
+      await this.detachEventListeners();
     }
-    async componentWillLoad() {
-        await this.init();
-        await this.attachEventListeners();
+  }
+  async attachEventListeners() {
+    const editable = this.el && this.el.parentElement && !this.el.parentElement.classList.contains('deckgo-read-only');
+    if (editable && document && (this.drag !== 'none' || this.resize)) {
+      document.addEventListener('mousedown', this.start.bind(this), { passive: true });
+      document.addEventListener('touchstart', this.start.bind(this), { passive: true });
+      document.addEventListener('mousemove', this.transform.bind(this), { passive: true });
+      document.addEventListener('touchmove', this.transform.bind(this), { passive: true });
+      document.addEventListener('mouseup', this.stop.bind(this), { passive: true });
+      document.addEventListener('touchend', this.stop.bind(this), { passive: true });
     }
-    async componentDidLoad() {
-        await this.displaySlot();
+  }
+  async detachEventListeners() {
+    if (document) {
+      document.removeEventListener('mousedown', this.start, true);
+      document.removeEventListener('touchstart', this.start, true);
+      document.removeEventListener('mousemove', this.transform, true);
+      document.removeEventListener('touchmove', this.transform, true);
+      document.removeEventListener('mouseup', this.stop, true);
+      document.removeEventListener('touchend', this.stop, true);
+      document.removeEventListener('dblclick', this.dbclick, true);
     }
-    async componentWillUnload() {
-        if (this.drag !== 'none' || this.resize) {
-            await this.detachEventListeners();
-        }
+  }
+  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 attachEventListeners() {
-        const editable = this.el && this.el.parentElement && !this.el.parentElement.classList.contains('deckgo-read-only');
-        if (editable && document && (this.drag !== 'none' || this.resize)) {
-            document.addEventListener('mousedown', this.start.bind(this), { passive: true });
-            document.addEventListener('touchstart', this.start.bind(this), { passive: true });
-            document.addEventListener('mousemove', this.transform.bind(this), { passive: true });
-            document.addEventListener('touchmove', this.transform.bind(this), { passive: true });
-            document.addEventListener('mouseup', this.stop.bind(this), { passive: true });
-            document.addEventListener('touchend', this.stop.bind(this), { passive: true });
-        }
+  }
+  async displaySlot() {
+    const element = this.el.querySelector( `:scope > *` );
+    if (element && element.style.display === 'none') {
+      element.style.display = '';
     }
-    async detachEventListeners() {
-        if (document) {
-            document.removeEventListener('mousedown', this.start, true);
-            document.removeEventListener('touchstart', this.start, true);
-            document.removeEventListener('mousemove', this.transform, true);
-            document.removeEventListener('touchmove', this.transform, true);
-            document.removeEventListener('mouseup', this.stop, true);
-            document.removeEventListener('touchend', this.stop, true);
-            document.removeEventListener('dblclick', this.dbclick, true);
-        }
+  }
+  isTargetEvent($event) {
+    const selected = $event.target.closest('deckgo-drr');
+    return selected && selected.isEqualNode(this.el);
+  }
+  initTextEditable() {
+    if (!this.text || !this.el) {
+      return;
     }
-    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;
-        }
+    document.addEventListener('dblclick', this.dbclick.bind(this), { once: true });
+    const element = this.el.querySelector( `:scope > *` );
+    if (element) {
+      element.setAttribute('contentEditable', 'true');
     }
-    async displaySlot() {
-        const element = this.el.querySelector( `:scope > *` );
-        if (element && element.style.display === 'none') {
-            element.style.display = '';
-        }
+  }
+  resetTextEditable() {
+    if (!this.text) {
+      return;
     }
-    isTargetEvent($event) {
-        const selected = $event.target.closest('deckgo-drr');
-        return selected && selected.isEqualNode(this.el);
+    this.editing = false;
+    if (document) {
+      document.removeEventListener('dblclick', this.dbclick, true);
     }
-    initTextEditable() {
-        if (!this.text || !this.el) {
-            return;
-        }
-        document.addEventListener('dblclick', this.dbclick.bind(this), { once: true });
-        const element = this.el.querySelector( `:scope > *` );
-        if (element) {
-            element.setAttribute('contentEditable', 'true');
-        }
+  }
+  async initStartPositions($event) {
+    this.startX = unifyEvent($event).clientX;
+    this.startY = unifyEvent($event).clientY;
+    await this.initParentSize();
+    this.initStartPositionsMove();
+    this.initStartPositionsRotation();
+    this.initStartPositionsResize();
+  }
+  initStartPositionsMove() {
+    this.startWidth = isNaN(this.width) ? 0 : this.width;
+    this.startHeight = isNaN(this.height) ? 0 : this.height;
+    this.startTop = this.top;
+    this.startLeft = this.left;
+  }
+  initStartPositionsRotation() {
+    const rect = this.el.getBoundingClientRect();
+    this.centerX = rect.left + rect.width / 2;
+    this.centerY = rect.top + rect.height / 2;
+  }
+  initStartPositionsResize() {
+    const theta = (Math.PI * 2 * this.rotate) / 360;
+    const cos_t = Math.cos(theta);
+    const sin_t = Math.sin(theta);
+    const css = window.getComputedStyle(this.el);
+    const l = parseFloat(css.left);
+    const t = parseFloat(css.top);
+    const w = parseFloat(css.width);
+    const h = parseFloat(css.height);
+    const matrix = this.resizeMatrix();
+    const c0_x = l + w / 2.0;
+    const c0_y = t + h / 2.0;
+    const q0_x = l + matrix.a * w;
+    const q0_y = t + matrix.b * h;
+    const p0_x = l + matrix.c * w;
+    const p0_y = t + matrix.d * h;
+    this.qp0_x = q0_x * cos_t - q0_y * sin_t - c0_x * cos_t + c0_y * sin_t + c0_x;
+    this.qp0_y = q0_x * sin_t + q0_y * cos_t - c0_x * sin_t - c0_y * cos_t + c0_y;
+    this.pp_x = p0_x * cos_t - p0_y * sin_t - c0_x * cos_t + c0_y * sin_t + c0_x;
+    this.pp_y = p0_x * sin_t + p0_y * cos_t - c0_x * sin_t - c0_y * cos_t + c0_y;
+  }
+  async initParentSize() {
+    // The deckgo-slide-aspect-ratio template exposes a getContainer function which return a reference to the effective container.
+    if (this.el.parentElement && typeof this.el.parentElement.getContainer === 'function') {
+      const parent = await this.el.parentElement.getContainer();
+      this.parentWidth = this.unit === 'percentage' ? parent.offsetWidth : this.convertToUnit(parent.offsetWidth, 'width');
+      this.parentHeight = this.unit === 'percentage' ? parent.offsetHeight : this.convertToUnit(parent.offsetHeight, 'height');
     }
-    resetTextEditable() {
-        if (!this.text) {
-            return;
-        }
-        this.editing = false;
-        if (document) {
-            document.removeEventListener('dblclick', this.dbclick, true);
-        }
+    else {
+      this.parentWidth = this.unit === 'percentage' ? this.el.parentElement.offsetWidth : this.convertToUnit(this.el.parentElement.offsetWidth, 'width');
+      this.parentHeight = this.unit === 'percentage' ? this.el.parentElement.offsetHeight : this.convertToUnit(this.el.parentElement.offsetHeight, 'height');
     }
-    async initStartPositions($event) {
-        this.startX = unifyEvent($event).clientX;
-        this.startY = unifyEvent($event).clientY;
-        await this.initParentSize();
-        this.initStartPositionsMove();
-        this.initStartPositionsRotation();
-        this.initStartPositionsResize();
+  }
+  move($event) {
+    if (!this.moving || this.drag === 'none') {
+      return false;
     }
-    initStartPositionsMove() {
-        this.startWidth = isNaN(this.width) ? 0 : this.width;
-        this.startHeight = isNaN(this.height) ? 0 : this.height;
-        this.startTop = this.top;
-        this.startLeft = this.left;
+    if (this.drag === 'x-axis') {
+      this.deltaMove($event, false, true);
     }
-    initStartPositionsRotation() {
-        const rect = this.el.getBoundingClientRect();
-        this.centerX = rect.left + rect.width / 2;
-        this.centerY = rect.top + rect.height / 2;
+    else if (this.drag === 'y-axis') {
+      this.deltaMove($event, true, false);
     }
-    initStartPositionsResize() {
-        const theta = (Math.PI * 2 * this.rotate) / 360;
-        const cos_t = Math.cos(theta);
-        const sin_t = Math.sin(theta);
-        const css = window.getComputedStyle(this.el);
-        const l = parseFloat(css.left);
-        const t = parseFloat(css.top);
-        const w = parseFloat(css.width);
-        const h = parseFloat(css.height);
-        const matrix = this.resizeMatrix();
-        const c0_x = l + w / 2.0;
-        const c0_y = t + h / 2.0;
-        const q0_x = l + matrix.a * w;
-        const q0_y = t + matrix.b * h;
-        const p0_x = l + matrix.c * w;
-        const p0_y = t + matrix.d * h;
-        this.qp0_x = q0_x * cos_t - q0_y * sin_t - c0_x * cos_t + c0_y * sin_t + c0_x;
-        this.qp0_y = q0_x * sin_t + q0_y * cos_t - c0_x * sin_t - c0_y * cos_t + c0_y;
-        this.pp_x = p0_x * cos_t - p0_y * sin_t - c0_x * cos_t + c0_y * sin_t + c0_x;
-        this.pp_y = p0_x * sin_t + p0_y * cos_t - c0_x * sin_t - c0_y * cos_t + c0_y;
+    else {
+      this.deltaMove($event, true, true);
     }
-    async initParentSize() {
-        // The deckgo-slide-aspect-ratio template exposes a getContainer function which return a reference to the effective container.
-        if (this.el.parentElement && typeof this.el.parentElement.getContainer === 'function') {
-            const parent = await this.el.parentElement.getContainer();
-            this.parentWidth = this.unit === 'percentage' ? parent.offsetWidth : this.convertToUnit(parent.offsetWidth, 'width');
-            this.parentHeight = this.unit === 'percentage' ? parent.offsetHeight : this.convertToUnit(parent.offsetHeight, 'height');
-        }
-        else {
-            this.parentWidth = this.unit === 'percentage' ? this.el.parentElement.offsetWidth : this.convertToUnit(this.el.parentElement.offsetWidth, 'width');
-            this.parentHeight = this.unit === 'percentage' ? this.el.parentElement.offsetHeight : this.convertToUnit(this.el.parentElement.offsetHeight, 'height');
-        }
+    return true;
+  }
+  size($event) {
+    if (!this.resize) {
+      return false;
     }
-    move($event) {
-        if (!this.moving || this.drag === 'none') {
-            return false;
-        }
-        if (this.drag === 'x-axis') {
-            this.deltaMove($event, false, true);
-        }
-        else if (this.drag === 'y-axis') {
-            this.deltaMove($event, true, false);
-        }
-        else {
-            this.deltaMove($event, true, true);
-        }
-        return true;
+    if (!this.selected || !this.startX || !this.startY) {
+      return false;
     }
-    size($event) {
-        if (!this.resize) {
-            return false;
-        }
-        if (!this.selected || !this.startX || !this.startY) {
-            return false;
-        }
-        if (!this.dragBottomEnd &&
-            !this.dragTopEnd &&
-            !this.dragBottomStart &&
-            !this.dragTopStart &&
-            !this.dragTop &&
-            !this.dragEnd &&
-            !this.dragBottom &&
-            !this.dragStart) {
-            return false;
-        }
-        this.deltaResize($event);
-        return true;
+    if (!this.dragBottomEnd &&
+      !this.dragTopEnd &&
+      !this.dragBottomStart &&
+      !this.dragTopStart &&
+      !this.dragTop &&
+      !this.dragEnd &&
+      !this.dragBottom &&
+      !this.dragStart) {
+      return false;
     }
-    deltaMove($event, top, left) {
-        const delta = this.getDelta($event);
-        const deltaX = this.convertToUnit(delta.x, 'width');
-        const deltaY = this.convertToUnit(delta.y, 'height');
-        if (top) {
-            const maxTop = this.convertParentUnit(this.parentHeight) - this.startHeight;
-            this.top = this.startTop + deltaY > 0 ? (this.startTop + deltaY < maxTop ? this.startTop + deltaY : maxTop) : 0;
-        }
-        if (left) {
-            const maxLeft = this.convertParentUnit(this.parentWidth) - this.startWidth;
-            this.left = this.startLeft + deltaX > 0 ? (this.startLeft + deltaX < maxLeft ? this.startLeft + deltaX : maxLeft) : 0;
-        }
+    this.deltaResize($event);
+    return true;
+  }
+  deltaMove($event, top, left) {
+    const delta = this.getDelta($event);
+    const deltaX = this.convertToUnit(delta.x, 'width');
+    const deltaY = this.convertToUnit(delta.y, 'height');
+    if (top) {
+      const maxTop = this.convertParentUnit(this.parentHeight) - this.startHeight;
+      this.top = this.startTop + deltaY > 0 ? (this.startTop + deltaY < maxTop ? this.startTop + deltaY : maxTop) : 0;
     }
-    deltaResize($event) {
-        const delta = this.getDelta($event);
-        const qp_x = this.qp0_x + delta.x;
-        const qp_y = this.qp0_y + delta.y;
-        const cp_x = (qp_x + this.pp_x) / 2.0;
-        const cp_y = (qp_y + this.pp_y) / 2.0;
-        const mtheta = (-1 * Math.PI * 2 * this.rotate) / 360;
-        const cos_mt = Math.cos(mtheta);
-        const sin_mt = Math.sin(mtheta);
-        let q_x = qp_x * cos_mt - qp_y * sin_mt - cos_mt * cp_x + sin_mt * cp_y + cp_x;
-        let q_y = qp_x * sin_mt + qp_y * cos_mt - sin_mt * cp_x - cos_mt * cp_y + cp_y;
-        let p_x = this.pp_x * cos_mt - this.pp_y * sin_mt - cos_mt * cp_x + sin_mt * cp_y + cp_x;
-        let p_y = this.pp_x * sin_mt + this.pp_y * cos_mt - sin_mt * cp_x - cos_mt * cp_y + cp_y;
-        const matrix = this.resizeMatrix();
-        const wtmp = matrix.a * (q_x - p_x) + matrix.c * (p_x - q_x);
-        const htmp = matrix.b * (q_y - p_y) + matrix.d * (p_y - q_y);
-        let w;
-        let h;
-        if (wtmp < this.minWidth || htmp < this.minHeight) {
-            w = Math.max(this.minWidth, wtmp);
-            h = Math.max(this.minHeight, htmp);
-            const theta = -1 * mtheta;
-            const cos_t = Math.cos(theta);
-            const sin_t = Math.sin(theta);
-            const dh_x = -sin_t * h;
-            const dh_y = cos_t * h;
-            const dw_x = cos_t * w;
-            const dw_y = sin_t * w;
-            const qp_x_min = this.pp_x + (matrix.a - matrix.c) * dw_x + (matrix.b - matrix.d) * dh_x;
-            const qp_y_min = this.pp_y + (matrix.a - matrix.c) * dw_y + (matrix.b - matrix.d) * dh_y;
-            const cp_x_min = (qp_x_min + this.pp_x) / 2.0;
-            const cp_y_min = (qp_y_min + this.pp_y) / 2.0;
-            q_x = qp_x_min * cos_mt - qp_y_min * sin_mt - cos_mt * cp_x_min + sin_mt * cp_y_min + cp_x_min;
-            q_y = qp_x_min * sin_mt + qp_y_min * cos_mt - sin_mt * cp_x_min - cos_mt * cp_y_min + cp_y_min;
-            p_x = this.pp_x * cos_mt - this.pp_y * sin_mt - cos_mt * cp_x_min + sin_mt * cp_y_min + cp_x_min;
-            p_y = this.pp_x * sin_mt + this.pp_y * cos_mt - sin_mt * cp_x_min - cos_mt * cp_y_min + cp_y_min;
-        }
-        else {
-            w = wtmp;
-            h = htmp;
-        }
-        const l = matrix.c * q_x + matrix.a * p_x;
-        const t = matrix.d * q_y + matrix.b * p_y;
-        this.left = this.convertToUnit(l, 'width');
-        this.width = this.convertToUnit(w, 'width');
-        this.top = this.convertToUnit(t, 'height');
-        this.height = this.convertToUnit(h, 'height');
+    if (left) {
+      const maxLeft = this.convertParentUnit(this.parentWidth) - this.startWidth;
+      this.left = this.startLeft + deltaX > 0 ? (this.startLeft + deltaX < maxLeft ? this.startLeft + deltaX : maxLeft) : 0;
     }
-    rotateShape($event) {
-        if (!this.rotating) {
-            return false;
-        }
-        const currentX = unifyEvent($event).clientX;
-        const currentY = unifyEvent($event).clientY;
-        this.rotate = Math.atan2(currentX - this.centerX, currentY - this.centerY) * (180 / Math.PI) * -1 + 180;
-        return true;
+  }
+  deltaResize($event) {
+    const delta = this.getDelta($event);
+    const qp_x = this.qp0_x + delta.x;
+    const qp_y = this.qp0_y + delta.y;
+    const cp_x = (qp_x + this.pp_x) / 2.0;
+    const cp_y = (qp_y + this.pp_y) / 2.0;
+    const mtheta = (-1 * Math.PI * 2 * this.rotate) / 360;
+    const cos_mt = Math.cos(mtheta);
+    const sin_mt = Math.sin(mtheta);
+    let q_x = qp_x * cos_mt - qp_y * sin_mt - cos_mt * cp_x + sin_mt * cp_y + cp_x;
+    let q_y = qp_x * sin_mt + qp_y * cos_mt - sin_mt * cp_x - cos_mt * cp_y + cp_y;
+    let p_x = this.pp_x * cos_mt - this.pp_y * sin_mt - cos_mt * cp_x + sin_mt * cp_y + cp_x;
+    let p_y = this.pp_x * sin_mt + this.pp_y * cos_mt - sin_mt * cp_x - cos_mt * cp_y + cp_y;
+    const matrix = this.resizeMatrix();
+    const wtmp = matrix.a * (q_x - p_x) + matrix.c * (p_x - q_x);
+    const htmp = matrix.b * (q_y - p_y) + matrix.d * (p_y - q_y);
+    let w;
+    let h;
+    if (wtmp < this.minWidth || htmp < this.minHeight) {
+      w = Math.max(this.minWidth, wtmp);
+      h = Math.max(this.minHeight, htmp);
+      const theta = -1 * mtheta;
+      const cos_t = Math.cos(theta);
+      const sin_t = Math.sin(theta);
+      const dh_x = -sin_t * h;
+      const dh_y = cos_t * h;
+      const dw_x = cos_t * w;
+      const dw_y = sin_t * w;
+      const qp_x_min = this.pp_x + (matrix.a - matrix.c) * dw_x + (matrix.b - matrix.d) * dh_x;
+      const qp_y_min = this.pp_y + (matrix.a - matrix.c) * dw_y + (matrix.b - matrix.d) * dh_y;
+      const cp_x_min = (qp_x_min + this.pp_x) / 2.0;
+      const cp_y_min = (qp_y_min + this.pp_y) / 2.0;
+      q_x = qp_x_min * cos_mt - qp_y_min * sin_mt - cos_mt * cp_x_min + sin_mt * cp_y_min + cp_x_min;
+      q_y = qp_x_min * sin_mt + qp_y_min * cos_mt - sin_mt * cp_x_min - cos_mt * cp_y_min + cp_y_min;
+      p_x = this.pp_x * cos_mt - this.pp_y * sin_mt - cos_mt * cp_x_min + sin_mt * cp_y_min + cp_x_min;
+      p_y = this.pp_x * sin_mt + this.pp_y * cos_mt - sin_mt * cp_x_min - cos_mt * cp_y_min + cp_y_min;
     }
-    getDelta($event) {
-        const currentX = unifyEvent($event).clientX;
-        const currentY = unifyEvent($event).clientY;
-        return {
-            x: this.dragBottom || this.dragTop ? 0 : currentX - this.startX,
-            y: this.dragStart || this.dragEnd ? 0 : currentY - this.startY,
-        };
+    else {
+      w = wtmp;
+      h = htmp;
     }
-    convertToUnit(value, ratio) {
-        if (this.unit === 'px') {
-            return value;
-        }
-        if (this.unit === 'viewport') {
-            const windowSize = ratio === 'width' ? window.innerWidth || screen.width : window.innerHeight || screen.height;
-            return (value * 100) / windowSize;
-        }
-        const parentSize = ratio === 'width' ? this.parentWidth : this.parentHeight;
-        return (value * 100) / parentSize;
+    const l = matrix.c * q_x + matrix.a * p_x;
+    const t = matrix.d * q_y + matrix.b * p_y;
+    this.left = this.convertToUnit(l, 'width');
+    this.width = this.convertToUnit(w, 'width');
+    this.top = this.convertToUnit(t, 'height');
+    this.height = this.convertToUnit(h, 'height');
+  }
+  rotateShape($event) {
+    if (!this.rotating) {
+      return false;
     }
-    convertParentUnit(value) {
-        return this.unit === 'percentage' ? 100 : value;
+    const currentX = unifyEvent($event).clientX;
+    const currentY = unifyEvent($event).clientY;
+    this.rotate = Math.atan2(currentX - this.centerX, currentY - this.centerY) * (180 / Math.PI) * -1 + 180;
+    return true;
+  }
+  getDelta($event) {
+    const currentX = unifyEvent($event).clientX;
+    const currentY = unifyEvent($event).clientY;
+    return {
+      x: this.dragBottom || this.dragTop ? 0 : currentX - this.startX,
+      y: this.dragStart || this.dragEnd ? 0 : currentY - this.startY,
+    };
+  }
+  convertToUnit(value, ratio) {
+    if (this.unit === 'px') {
+      return value;
     }
-    startMove() {
-        if (this.dragBottomEnd || this.dragTopEnd || this.dragBottomStart || this.dragTopStart) {
-            return;
-        }
-        if (this.dragTop || this.dragEnd || this.dragBottom || this.dragStart) {
-            return;
-        }
-        if (this.rotating) {
-            return;
-        }
-        this.moving = true;
+    if (this.unit === 'viewport') {
+      const windowSize = ratio === 'width' ? window.innerWidth || screen.width : window.innerHeight || screen.height;
+      return (value * 100) / windowSize;
     }
-    stopAndReset(emitUpdate) {
-        this.startX = null;
-        this.startY = null;
-        this.stopMove();
-        this.stopResize();
-        this.stopRotate();
-        if (emitUpdate && this.updated) {
-            this.drrDidChange.emit(this.el.shadowRoot.host);
-        }
-        this.updated = false;
+    const parentSize = ratio === 'width' ? this.parentWidth : this.parentHeight;
+    return (value * 100) / parentSize;
+  }
+  convertParentUnit(value) {
+    return this.unit === 'percentage' ? 100 : value;
+  }
+  startMove() {
+    if (this.dragBottomEnd || this.dragTopEnd || this.dragBottomStart || this.dragTopStart) {
+      return;
     }
-    stopMove() {
-        this.moving = false;
-        this.startTop = null;
-        this.startLeft = null;
+    if (this.dragTop || this.dragEnd || this.dragBottom || this.dragStart) {
+      return;
     }
-    stopRotate() {
-        this.rotating = false;
-        this.centerX = null;
-        this.centerY = null;
+    if (this.rotating) {
+      return;
     }
-    stopResize() {
-        this.dragBottomEnd = false;
-        this.dragTopEnd = false;
-        this.dragBottomStart = false;
-        this.dragTopStart = false;
-        this.dragTop = false;
-        this.dragEnd = false;
-        this.dragBottom = false;
-        this.dragStart = false;
-        this.startWidth = null;
-        this.startHeight = null;
+    this.moving = true;
+  }
+  stopAndReset(emitUpdate) {
+    this.startX = null;
+    this.startY = null;
+    this.stopMove();
+    this.stopResize();
+    this.stopRotate();
+    if (emitUpdate && this.updated) {
+      this.drrDidChange.emit(this.el.shadowRoot.host);
     }
-    resizeMatrix() {
-        const a = this.dragBottomEnd || this.dragTopEnd || this.dragEnd ? 1 : 0;
-        const b = this.dragBottomEnd || this.dragBottomStart || this.dragStart || this.dragBottom ? 1 : 0;
-        const c = a === 1 ? 0 : 1;
-        const d = b === 1 ? 0 : 1;
-        return {
-            a,
-            b,
-            c,
-            d,
-        };
+    this.updated = false;
+  }
+  stopMove() {
+    this.moving = false;
+    this.startTop = null;
+    this.startLeft = null;
+  }
+  stopRotate() {
+    this.rotating = false;
+    this.centerX = null;
+    this.centerY = null;
+  }
+  stopResize() {
+    this.dragBottomEnd = false;
+    this.dragTopEnd = false;
+    this.dragBottomStart = false;
+    this.dragTopStart = false;
+    this.dragTop = false;
+    this.dragEnd = false;
+    this.dragBottom = false;
+    this.dragStart = false;
+    this.startWidth = null;
+    this.startHeight = null;
+  }
+  resizeMatrix() {
+    const a = this.dragBottomEnd || this.dragTopEnd || this.dragEnd ? 1 : 0;
+    const b = this.dragBottomEnd || this.dragBottomStart || this.dragStart || this.dragBottom ? 1 : 0;
+    const c = a === 1 ? 0 : 1;
+    const d = b === 1 ? 0 : 1;
+    return {
+      a,
+      b,
+      c,
+      d,
+    };
+  }
+  // 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);
     }
-    // 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() {
+    const widthUnit = this.unit === 'percentage' ? '%' : this.unit === 'viewport' ? 'vw' : this.unit;
+    const heightUnit = this.unit === 'percentage' ? '%' : this.unit === 'viewport' ? 'vh' : this.unit;
+    return (index.h(index.Host, { style: {
+        '--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`,
+        '--pointer-events': `${this.editing ? 'all' : 'none'}`,
+        '--user-select': `${this.text ? 'text' : 'none'}`,
+      }, class: `${this.selected ? 'selected' : ''} ${this.text ? 'text' : ''} ${this.drag !== 'none' ? 'draggable' : ''} ${this.drag !== 'none' && this.moving ? 'drag' : ''}` }, this.renderEdgesAnchors(), this.renderBorderAnchors(), this.renderRotateAnchor(), index.h("slot", null)));
+  }
+  renderEdgesAnchors() {
+    if (!this.selected || !this.resize) {
+      return undefined;
     }
-    render() {
-        const widthUnit = this.unit === 'percentage' ? '%' : this.unit === 'viewport' ? 'vw' : this.unit;
-        const heightUnit = this.unit === 'percentage' ? '%' : this.unit === 'viewport' ? 'vh' : this.unit;
-        return (index.h(index.Host, { style: {
-                '--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`,
-                '--pointer-events': `${this.editing ? 'all' : 'none'}`,
-                '--user-select': `${this.text ? 'text' : 'none'}`,
-            }, class: `${this.selected ? 'selected' : ''} ${this.text ? 'text' : ''} ${this.drag !== 'none' ? 'draggable' : ''} ${this.drag !== 'none' && this.moving ? 'drag' : ''}` }, this.renderEdgesAnchors(), this.renderBorderAnchors(), this.renderRotateAnchor(), index.h("slot", null)));
+    return [
+      index.h("div", { class: "anchor top end", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragTopEnd = true), onTouchStart: () => (this.dragTopEnd = true) }, index.h("div", null)),
+      index.h("div", { class: "anchor bottom end", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragBottomEnd = true), onTouchStart: () => (this.dragBottomEnd = true) }, index.h("div", null)),
+      index.h("div", { class: "anchor bottom start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragBottomStart = true), onTouchStart: () => (this.dragBottomStart = true) }, index.h("div", null)),
+      index.h("div", { class: "anchor top start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragTopStart = true), onTouchStart: () => (this.dragTopStart = true) }, index.h("div", null)),
+    ];
+  }
+  renderBorderAnchors() {
+    if (!this.selected || !this.resize) {
+      return undefined;
     }
-    renderEdgesAnchors() {
-        if (!this.selected || !this.resize) {
-            return undefined;
-        }
-        return [
-            index.h("div", { class: "anchor top end", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragTopEnd = true), onTouchStart: () => (this.dragTopEnd = true) }, index.h("div", null)),
-            index.h("div", { class: "anchor bottom end", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragBottomEnd = true), onTouchStart: () => (this.dragBottomEnd = true) }, index.h("div", null)),
-            index.h("div", { class: "anchor bottom start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragBottomStart = true), onTouchStart: () => (this.dragBottomStart = true) }, index.h("div", null)),
-            index.h("div", { class: "anchor top start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragTopStart = true), onTouchStart: () => (this.dragTopStart = true) }, index.h("div", null)),
-        ];
+    return [
+      index.h("div", { class: "border top", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragTop = true), onTouchStart: () => (this.dragTop = true) }),
+      index.h("div", { class: "border end", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragEnd = true), onTouchStart: () => (this.dragEnd = true) }),
+      index.h("div", { class: "border bottom", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragBottom = true), onTouchStart: () => (this.dragBottom = true) }),
+      index.h("div", { class: "border start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragStart = true), onTouchStart: () => (this.dragStart = true) }),
+    ];
+  }
+  renderRotateAnchor() {
+    if (!this.selected || !this.rotation) {
+      return undefined;
     }
-    renderBorderAnchors() {
-        if (!this.selected || !this.resize) {
-            return undefined;
-        }
-        return [
-            index.h("div", { class: "border top", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragTop = true), onTouchStart: () => (this.dragTop = true) }),
-            index.h("div", { class: "border end", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragEnd = true), onTouchStart: () => (this.dragEnd = true) }),
-            index.h("div", { class: "border bottom", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragBottom = true), onTouchStart: () => (this.dragBottom = true) }),
-            index.h("div", { class: "border start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragStart = true), onTouchStart: () => (this.dragStart = true) }),
-        ];
-    }
-    renderRotateAnchor() {
-        if (!this.selected || !this.rotation) {
-            return undefined;
-        }
-        return (index.h("div", { class: "rotate" }, index.h("div", { class: "action", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.rotating = true), onTouchStart: () => (this.rotating = true) }, index.h("div", null)), index.h("div", { class: "presentation" })));
-    }
-    get el() { return index.getElement(this); }
+    return (index.h("div", { class: "rotate" }, index.h("div", { class: "action", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.rotating = true), onTouchStart: () => (this.rotating = true) }, index.h("div", null)), index.h("div", { class: "presentation" })));
+  }
+  get el() { return index.getElement(this); }
 };
@@ -461,0 +461,0 @@ DeckdeckgoDragResizeRotate.style = deckdeckgoDrrCss;

dist/cjs/loader.cjs.js

@@ -5,8 +5,14 @@ 'use strict';
 
-const index = require('./index-033a337e.js');
-const patch = require('./patch-49391e40.js');
+const index = require('./index-41eedf68.js');
 
+/*
+ Stencil Client Patch Esm v2.0.2 | MIT Licensed | https://stenciljs.com
+ */
+const patchEsm = () => {
+    return index.promiseResolve();
+};
+
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
-  return patch.patchEsm().then(() => {
+  return 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);
@@ -13,0 +19,0 @@ });

dist/collection/collection-manifest.json

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

dist/collection/components/deckdeckgo-drr.js

 import { Component, h, Host, Prop, State, Element, Event, Build } from '@stencil/core';
 import { unifyEvent } from '@deckdeckgo/utils';
 export class DeckdeckgoDragResizeRotate {
-    constructor() {
-        this.unit = 'percentage';
-        // Size
-        this.resize = true;
-        // Position
-        this.drag = 'all';
-        // Rotate
-        this.rotation = true;
-        // Text content editable
-        this.text = false;
-        this.minWidth = 10;
-        this.minHeight = 10;
+  constructor() {
+    this.unit = 'percentage';
+    // Size
+    this.resize = true;
+    // Position
+    this.drag = 'all';
+    // Rotate
+    this.rotation = true;
+    // Text content editable
+    this.text = false;
+    this.minWidth = 10;
+    this.minHeight = 10;
+    this.selected = false;
+    this.updated = false;
+    this.moving = false;
+    this.startX = null;
+    this.startY = null;
+    this.startWidth = null;
+    this.startHeight = null;
+    this.startTop = null;
+    this.startLeft = null;
+    this.dragTopEnd = false;
+    this.dragBottomEnd = false;
+    this.dragBottomStart = false;
+    this.dragTopStart = false;
+    this.dragTop = false;
+    this.dragEnd = false;
+    this.dragBottom = false;
+    this.dragStart = false;
+    this.parentWidth = null;
+    this.parentHeight = null;
+    this.rotating = false;
+    this.centerX = null;
+    this.centerY = null;
+    this.editing = false;
+    this.start = async ($event) => {
+      if (!$event || !$event.target) {
+        return;
+      }
+      // If we click elsewhere or select another component, then this component should loose focus and values need to be reset for next usage
+      if (!this.isTargetEvent($event)) {
+        this.stopAndReset(false);
+        if (this.selected) {
+          this.drrSelect.emit(undefined);
+        }
         this.selected = false;
-        this.updated = false;
-        this.moving = false;
-        this.startX = null;
-        this.startY = null;
-        this.startWidth = null;
-        this.startHeight = null;
-        this.startTop = null;
-        this.startLeft = null;
-        this.dragTopEnd = false;
-        this.dragBottomEnd = false;
-        this.dragBottomStart = false;
-        this.dragTopStart = false;
-        this.dragTop = false;
-        this.dragEnd = false;
-        this.dragBottom = false;
-        this.dragStart = false;
-        this.parentWidth = null;
-        this.parentHeight = null;
-        this.rotating = false;
-        this.centerX = null;
-        this.centerY = null;
-        this.editing = false;
-        this.start = async ($event) => {
-            if (!$event || !$event.target) {
-                return;
-            }
-            // If we click elsewhere or select another component, then this component should loose focus and values need to be reset for next usage
-            if (!this.isTargetEvent($event)) {
-                this.stopAndReset(false);
-                if (this.selected) {
-                    this.drrSelect.emit(undefined);
-                }
-                this.selected = false;
-                this.resetTextEditable();
-                return;
-            }
-            if (!this.editing) {
-                const selected = $event.target.closest('deckgo-drr');
-                this.drrSelect.emit(selected);
-                this.selected = true;
-                this.initTextEditable();
-                this.startMove();
-            }
-            await this.initStartPositions($event);
-        };
-        this.transform = ($event) => {
-            const moved = this.move($event);
-            const resized = this.size($event);
-            const rotated = this.rotateShape($event);
-            this.updated = moved || resized || rotated;
-        };
-        this.stop = () => {
-            this.stopAndReset(this.selected);
-        };
-        this.dbclick = async ($event) => {
-            if (!this.isTargetEvent($event)) {
-                return;
-            }
-            this.editing = true;
-            const element = this.el.querySelector(Build.isBrowser ? `:scope > *` : '> *');
-            if (element) {
-                element.focus();
-                await this.moveCursorToEnd(element);
-            }
-        };
+        this.resetTextEditable();
+        return;
+      }
+      if (!this.editing) {
+        const selected = $event.target.closest('deckgo-drr');
+        this.drrSelect.emit(selected);
+        this.selected = true;
+        this.initTextEditable();
+        this.startMove();
+      }
+      await this.initStartPositions($event);
+    };
+    this.transform = ($event) => {
+      const moved = this.move($event);
+      const resized = this.size($event);
+      const rotated = this.rotateShape($event);
+      this.updated = moved || resized || rotated;
+    };
+    this.stop = () => {
+      this.stopAndReset(this.selected);
+    };
+    this.dbclick = async ($event) => {
+      if (!this.isTargetEvent($event)) {
+        return;
+      }
+      this.editing = true;
+      const element = this.el.querySelector(Build.isBrowser ? `:scope > *` : '> *');
+      if (element) {
+        element.focus();
+        await this.moveCursorToEnd(element);
+      }
+    };
+  }
+  async componentWillLoad() {
+    await this.init();
+    await this.attachEventListeners();
+  }
+  async componentDidLoad() {
+    await this.displaySlot();
+  }
+  async componentWillUnload() {
+    if (this.drag !== 'none' || this.resize) {
+      await this.detachEventListeners();
     }
-    async componentWillLoad() {
-        await this.init();
-        await this.attachEventListeners();
+  }
+  async attachEventListeners() {
+    const editable = this.el && this.el.parentElement && !this.el.parentElement.classList.contains('deckgo-read-only');
+    if (editable && document && (this.drag !== 'none' || this.resize)) {
+      document.addEventListener('mousedown', this.start.bind(this), { passive: true });
+      document.addEventListener('touchstart', this.start.bind(this), { passive: true });
+      document.addEventListener('mousemove', this.transform.bind(this), { passive: true });
+      document.addEventListener('touchmove', this.transform.bind(this), { passive: true });
+      document.addEventListener('mouseup', this.stop.bind(this), { passive: true });
+      document.addEventListener('touchend', this.stop.bind(this), { passive: true });
     }
-    async componentDidLoad() {
-        await this.displaySlot();
+  }
+  async detachEventListeners() {
+    if (document) {
+      document.removeEventListener('mousedown', this.start, true);
+      document.removeEventListener('touchstart', this.start, true);
+      document.removeEventListener('mousemove', this.transform, true);
+      document.removeEventListener('touchmove', this.transform, true);
+      document.removeEventListener('mouseup', this.stop, true);
+      document.removeEventListener('touchend', this.stop, true);
+      document.removeEventListener('dblclick', this.dbclick, true);
     }
-    async componentWillUnload() {
-        if (this.drag !== 'none' || this.resize) {
-            await this.detachEventListeners();
-        }
+  }
+  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 attachEventListeners() {
-        const editable = this.el && this.el.parentElement && !this.el.parentElement.classList.contains('deckgo-read-only');
-        if (editable && document && (this.drag !== 'none' || this.resize)) {
-            document.addEventListener('mousedown', this.start.bind(this), { passive: true });
-            document.addEventListener('touchstart', this.start.bind(this), { passive: true });
-            document.addEventListener('mousemove', this.transform.bind(this), { passive: true });
-            document.addEventListener('touchmove', this.transform.bind(this), { passive: true });
-            document.addEventListener('mouseup', this.stop.bind(this), { passive: true });
-            document.addEventListener('touchend', this.stop.bind(this), { passive: true });
-        }
+  }
+  async displaySlot() {
+    const element = this.el.querySelector(Build.isBrowser ? `:scope > *` : '> *');
+    if (element && element.style.display === 'none') {
+      element.style.display = '';
     }
-    async detachEventListeners() {
-        if (document) {
-            document.removeEventListener('mousedown', this.start, true);
-            document.removeEventListener('touchstart', this.start, true);
-            document.removeEventListener('mousemove', this.transform, true);
-            document.removeEventListener('touchmove', this.transform, true);
-            document.removeEventListener('mouseup', this.stop, true);
-            document.removeEventListener('touchend', this.stop, true);
-            document.removeEventListener('dblclick', this.dbclick, true);
-        }
+  }
+  isTargetEvent($event) {
+    const selected = $event.target.closest('deckgo-drr');
+    return selected && selected.isEqualNode(this.el);
+  }
+  initTextEditable() {
+    if (!this.text || !this.el) {
+      return;
     }
-    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;
-        }
+    document.addEventListener('dblclick', this.dbclick.bind(this), { once: true });
+    const element = this.el.querySelector(Build.isBrowser ? `:scope > *` : '> *');
+    if (element) {
+      element.setAttribute('contentEditable', 'true');
     }
-    async displaySlot() {
-        const element = this.el.querySelector(Build.isBrowser ? `:scope > *` : '> *');
-        if (element && element.style.display === 'none') {
-            element.style.display = '';
-        }
+  }
+  resetTextEditable() {
+    if (!this.text) {
+      return;
     }
-    isTargetEvent($event) {
-        const selected = $event.target.closest('deckgo-drr');
-        return selected && selected.isEqualNode(this.el);
+    this.editing = false;
+    if (document) {
+      document.removeEventListener('dblclick', this.dbclick, true);
     }
-    initTextEditable() {
-        if (!this.text || !this.el) {
-            return;
-        }
-        document.addEventListener('dblclick', this.dbclick.bind(this), { once: true });
-        const element = this.el.querySelector(Build.isBrowser ? `:scope > *` : '> *');
-        if (element) {
-            element.setAttribute('contentEditable', 'true');
-        }
+  }
+  async initStartPositions($event) {
+    this.startX = unifyEvent($event).clientX;
+    this.startY = unifyEvent($event).clientY;
+    await this.initParentSize();
+    this.initStartPositionsMove();
+    this.initStartPositionsRotation();
+    this.initStartPositionsResize();
+  }
+  initStartPositionsMove() {
+    this.startWidth = isNaN(this.width) ? 0 : this.width;
+    this.startHeight = isNaN(this.height) ? 0 : this.height;
+    this.startTop = this.top;
+    this.startLeft = this.left;
+  }
+  initStartPositionsRotation() {
+    const rect = this.el.getBoundingClientRect();
+    this.centerX = rect.left + rect.width / 2;
+    this.centerY = rect.top + rect.height / 2;
+  }
+  initStartPositionsResize() {
+    const theta = (Math.PI * 2 * this.rotate) / 360;
+    const cos_t = Math.cos(theta);
+    const sin_t = Math.sin(theta);
+    const css = window.getComputedStyle(this.el);
+    const l = parseFloat(css.left);
+    const t = parseFloat(css.top);
+    const w = parseFloat(css.width);
+    const h = parseFloat(css.height);
+    const matrix = this.resizeMatrix();
+    const c0_x = l + w / 2.0;
+    const c0_y = t + h / 2.0;
+    const q0_x = l + matrix.a * w;
+    const q0_y = t + matrix.b * h;
+    const p0_x = l + matrix.c * w;
+    const p0_y = t + matrix.d * h;
+    this.qp0_x = q0_x * cos_t - q0_y * sin_t - c0_x * cos_t + c0_y * sin_t + c0_x;
+    this.qp0_y = q0_x * sin_t + q0_y * cos_t - c0_x * sin_t - c0_y * cos_t + c0_y;
+    this.pp_x = p0_x * cos_t - p0_y * sin_t - c0_x * cos_t + c0_y * sin_t + c0_x;
+    this.pp_y = p0_x * sin_t + p0_y * cos_t - c0_x * sin_t - c0_y * cos_t + c0_y;
+  }
+  async initParentSize() {
+    // The deckgo-slide-aspect-ratio template exposes a getContainer function which return a reference to the effective container.
+    if (this.el.parentElement && typeof this.el.parentElement.getContainer === 'function') {
+      const parent = await this.el.parentElement.getContainer();
+      this.parentWidth = this.unit === 'percentage' ? parent.offsetWidth : this.convertToUnit(parent.offsetWidth, 'width');
+      this.parentHeight = this.unit === 'percentage' ? parent.offsetHeight : this.convertToUnit(parent.offsetHeight, 'height');
     }
-    resetTextEditable() {
-        if (!this.text) {
-            return;
-        }
-        this.editing = false;
-        if (document) {
-            document.removeEventListener('dblclick', this.dbclick, true);
-        }
+    else {
+      this.parentWidth = this.unit === 'percentage' ? this.el.parentElement.offsetWidth : this.convertToUnit(this.el.parentElement.offsetWidth, 'width');
+      this.parentHeight = this.unit === 'percentage' ? this.el.parentElement.offsetHeight : this.convertToUnit(this.el.parentElement.offsetHeight, 'height');
     }
-    async initStartPositions($event) {
-        this.startX = unifyEvent($event).clientX;
-        this.startY = unifyEvent($event).clientY;
-        await this.initParentSize();
-        this.initStartPositionsMove();
-        this.initStartPositionsRotation();
-        this.initStartPositionsResize();
+  }
+  move($event) {
+    if (!this.moving || this.drag === 'none') {
+      return false;
     }
-    initStartPositionsMove() {
-        this.startWidth = isNaN(this.width) ? 0 : this.width;
-        this.startHeight = isNaN(this.height) ? 0 : this.height;
-        this.startTop = this.top;
-        this.startLeft = this.left;
+    if (this.drag === 'x-axis') {
+      this.deltaMove($event, false, true);
     }
-    initStartPositionsRotation() {
-        const rect = this.el.getBoundingClientRect();
-        this.centerX = rect.left + rect.width / 2;
-        this.centerY = rect.top + rect.height / 2;
+    else if (this.drag === 'y-axis') {
+      this.deltaMove($event, true, false);
     }
-    initStartPositionsResize() {
-        const theta = (Math.PI * 2 * this.rotate) / 360;
-        const cos_t = Math.cos(theta);
-        const sin_t = Math.sin(theta);
-        const css = window.getComputedStyle(this.el);
-        const l = parseFloat(css.left);
-        const t = parseFloat(css.top);
-        const w = parseFloat(css.width);
-        const h = parseFloat(css.height);
-        const matrix = this.resizeMatrix();
-        const c0_x = l + w / 2.0;
-        const c0_y = t + h / 2.0;
-        const q0_x = l + matrix.a * w;
-        const q0_y = t + matrix.b * h;
-        const p0_x = l + matrix.c * w;
-        const p0_y = t + matrix.d * h;
-        this.qp0_x = q0_x * cos_t - q0_y * sin_t - c0_x * cos_t + c0_y * sin_t + c0_x;
-        this.qp0_y = q0_x * sin_t + q0_y * cos_t - c0_x * sin_t - c0_y * cos_t + c0_y;
-        this.pp_x = p0_x * cos_t - p0_y * sin_t - c0_x * cos_t + c0_y * sin_t + c0_x;
-        this.pp_y = p0_x * sin_t + p0_y * cos_t - c0_x * sin_t - c0_y * cos_t + c0_y;
+    else {
+      this.deltaMove($event, true, true);
     }
-    async initParentSize() {
-        // The deckgo-slide-aspect-ratio template exposes a getContainer function which return a reference to the effective container.
-        if (this.el.parentElement && typeof this.el.parentElement.getContainer === 'function') {
-            const parent = await this.el.parentElement.getContainer();
-            this.parentWidth = this.unit === 'percentage' ? parent.offsetWidth : this.convertToUnit(parent.offsetWidth, 'width');
-            this.parentHeight = this.unit === 'percentage' ? parent.offsetHeight : this.convertToUnit(parent.offsetHeight, 'height');
-        }
-        else {
-            this.parentWidth = this.unit === 'percentage' ? this.el.parentElement.offsetWidth : this.convertToUnit(this.el.parentElement.offsetWidth, 'width');
-            this.parentHeight = this.unit === 'percentage' ? this.el.parentElement.offsetHeight : this.convertToUnit(this.el.parentElement.offsetHeight, 'height');
-        }
+    return true;
+  }
+  size($event) {
+    if (!this.resize) {
+      return false;
     }
-    move($event) {
-        if (!this.moving || this.drag === 'none') {
-            return false;
-        }
-        if (this.drag === 'x-axis') {
-            this.deltaMove($event, false, true);
-        }
-        else if (this.drag === 'y-axis') {
-            this.deltaMove($event, true, false);
-        }
-        else {
-            this.deltaMove($event, true, true);
-        }
-        return true;
+    if (!this.selected || !this.startX || !this.startY) {
+      return false;
     }
-    size($event) {
-        if (!this.resize) {
-            return false;
-        }
-        if (!this.selected || !this.startX || !this.startY) {
-            return false;
-        }
-        if (!this.dragBottomEnd &&
-            !this.dragTopEnd &&
-            !this.dragBottomStart &&
-            !this.dragTopStart &&
-            !this.dragTop &&
-            !this.dragEnd &&
-            !this.dragBottom &&
-            !this.dragStart) {
-            return false;
-        }
-        this.deltaResize($event);
-        return true;
+    if (!this.dragBottomEnd &&
+      !this.dragTopEnd &&
+      !this.dragBottomStart &&
+      !this.dragTopStart &&
+      !this.dragTop &&
+      !this.dragEnd &&
+      !this.dragBottom &&
+      !this.dragStart) {
+      return false;
     }
-    deltaMove($event, top, left) {
-        const delta = this.getDelta($event);
-        const deltaX = this.convertToUnit(delta.x, 'width');
-        const deltaY = this.convertToUnit(delta.y, 'height');
-        if (top) {
-            const maxTop = this.convertParentUnit(this.parentHeight) - this.startHeight;
-            this.top = this.startTop + deltaY > 0 ? (this.startTop + deltaY < maxTop ? this.startTop + deltaY : maxTop) : 0;
-        }
-        if (left) {
-            const maxLeft = this.convertParentUnit(this.parentWidth) - this.startWidth;
-            this.left = this.startLeft + deltaX > 0 ? (this.startLeft + deltaX < maxLeft ? this.startLeft + deltaX : maxLeft) : 0;
-        }
+    this.deltaResize($event);
+    return true;
+  }
+  deltaMove($event, top, left) {
+    const delta = this.getDelta($event);
+    const deltaX = this.convertToUnit(delta.x, 'width');
+    const deltaY = this.convertToUnit(delta.y, 'height');
+    if (top) {
+      const maxTop = this.convertParentUnit(this.parentHeight) - this.startHeight;
+      this.top = this.startTop + deltaY > 0 ? (this.startTop + deltaY < maxTop ? this.startTop + deltaY : maxTop) : 0;
     }
-    deltaResize($event) {
-        const delta = this.getDelta($event);
-        const qp_x = this.qp0_x + delta.x;
-        const qp_y = this.qp0_y + delta.y;
-        const cp_x = (qp_x + this.pp_x) / 2.0;
-        const cp_y = (qp_y + this.pp_y) / 2.0;
-        const mtheta = (-1 * Math.PI * 2 * this.rotate) / 360;
-        const cos_mt = Math.cos(mtheta);
-        const sin_mt = Math.sin(mtheta);
-        let q_x = qp_x * cos_mt - qp_y * sin_mt - cos_mt * cp_x + sin_mt * cp_y + cp_x;
-        let q_y = qp_x * sin_mt + qp_y * cos_mt - sin_mt * cp_x - cos_mt * cp_y + cp_y;
-        let p_x = this.pp_x * cos_mt - this.pp_y * sin_mt - cos_mt * cp_x + sin_mt * cp_y + cp_x;
-        let p_y = this.pp_x * sin_mt + this.pp_y * cos_mt - sin_mt * cp_x - cos_mt * cp_y + cp_y;
-        const matrix = this.resizeMatrix();
-        const wtmp = matrix.a * (q_x - p_x) + matrix.c * (p_x - q_x);
-        const htmp = matrix.b * (q_y - p_y) + matrix.d * (p_y - q_y);
-        let w;
-        let h;
-        if (wtmp < this.minWidth || htmp < this.minHeight) {
-            w = Math.max(this.minWidth, wtmp);
-            h = Math.max(this.minHeight, htmp);
-            const theta = -1 * mtheta;
-            const cos_t = Math.cos(theta);
-            const sin_t = Math.sin(theta);
-            const dh_x = -sin_t * h;
-            const dh_y = cos_t * h;
-            const dw_x = cos_t * w;
-            const dw_y = sin_t * w;
-            const qp_x_min = this.pp_x + (matrix.a - matrix.c) * dw_x + (matrix.b - matrix.d) * dh_x;
-            const qp_y_min = this.pp_y + (matrix.a - matrix.c) * dw_y + (matrix.b - matrix.d) * dh_y;
-            const cp_x_min = (qp_x_min + this.pp_x) / 2.0;
-            const cp_y_min = (qp_y_min + this.pp_y) / 2.0;
-            q_x = qp_x_min * cos_mt - qp_y_min * sin_mt - cos_mt * cp_x_min + sin_mt * cp_y_min + cp_x_min;
-            q_y = qp_x_min * sin_mt + qp_y_min * cos_mt - sin_mt * cp_x_min - cos_mt * cp_y_min + cp_y_min;
-            p_x = this.pp_x * cos_mt - this.pp_y * sin_mt - cos_mt * cp_x_min + sin_mt * cp_y_min + cp_x_min;
-            p_y = this.pp_x * sin_mt + this.pp_y * cos_mt - sin_mt * cp_x_min - cos_mt * cp_y_min + cp_y_min;
-        }
-        else {
-            w = wtmp;
-            h = htmp;
-        }
-        const l = matrix.c * q_x + matrix.a * p_x;
-        const t = matrix.d * q_y + matrix.b * p_y;
-        this.left = this.convertToUnit(l, 'width');
-        this.width = this.convertToUnit(w, 'width');
-        this.top = this.convertToUnit(t, 'height');
-        this.height = this.convertToUnit(h, 'height');
+    if (left) {
+      const maxLeft = this.convertParentUnit(this.parentWidth) - this.startWidth;
+      this.left = this.startLeft + deltaX > 0 ? (this.startLeft + deltaX < maxLeft ? this.startLeft + deltaX : maxLeft) : 0;
     }
-    rotateShape($event) {
-        if (!this.rotating) {
-            return false;
-        }
-        const currentX = unifyEvent($event).clientX;
-        const currentY = unifyEvent($event).clientY;
-        this.rotate = Math.atan2(currentX - this.centerX, currentY - this.centerY) * (180 / Math.PI) * -1 + 180;
-        return true;
+  }
+  deltaResize($event) {
+    const delta = this.getDelta($event);
+    const qp_x = this.qp0_x + delta.x;
+    const qp_y = this.qp0_y + delta.y;
+    const cp_x = (qp_x + this.pp_x) / 2.0;
+    const cp_y = (qp_y + this.pp_y) / 2.0;
+    const mtheta = (-1 * Math.PI * 2 * this.rotate) / 360;
+    const cos_mt = Math.cos(mtheta);
+    const sin_mt = Math.sin(mtheta);
+    let q_x = qp_x * cos_mt - qp_y * sin_mt - cos_mt * cp_x + sin_mt * cp_y + cp_x;
+    let q_y = qp_x * sin_mt + qp_y * cos_mt - sin_mt * cp_x - cos_mt * cp_y + cp_y;
+    let p_x = this.pp_x * cos_mt - this.pp_y * sin_mt - cos_mt * cp_x + sin_mt * cp_y + cp_x;
+    let p_y = this.pp_x * sin_mt + this.pp_y * cos_mt - sin_mt * cp_x - cos_mt * cp_y + cp_y;
+    const matrix = this.resizeMatrix();
+    const wtmp = matrix.a * (q_x - p_x) + matrix.c * (p_x - q_x);
+    const htmp = matrix.b * (q_y - p_y) + matrix.d * (p_y - q_y);
+    let w;
+    let h;
+    if (wtmp < this.minWidth || htmp < this.minHeight) {
+      w = Math.max(this.minWidth, wtmp);
+      h = Math.max(this.minHeight, htmp);
+      const theta = -1 * mtheta;
+      const cos_t = Math.cos(theta);
+      const sin_t = Math.sin(theta);
+      const dh_x = -sin_t * h;
+      const dh_y = cos_t * h;
+      const dw_x = cos_t * w;
+      const dw_y = sin_t * w;
+      const qp_x_min = this.pp_x + (matrix.a - matrix.c) * dw_x + (matrix.b - matrix.d) * dh_x;
+      const qp_y_min = this.pp_y + (matrix.a - matrix.c) * dw_y + (matrix.b - matrix.d) * dh_y;
+      const cp_x_min = (qp_x_min + this.pp_x) / 2.0;
+      const cp_y_min = (qp_y_min + this.pp_y) / 2.0;
+      q_x = qp_x_min * cos_mt - qp_y_min * sin_mt - cos_mt * cp_x_min + sin_mt * cp_y_min + cp_x_min;
+      q_y = qp_x_min * sin_mt + qp_y_min * cos_mt - sin_mt * cp_x_min - cos_mt * cp_y_min + cp_y_min;
+      p_x = this.pp_x * cos_mt - this.pp_y * sin_mt - cos_mt * cp_x_min + sin_mt * cp_y_min + cp_x_min;
+      p_y = this.pp_x * sin_mt + this.pp_y * cos_mt - sin_mt * cp_x_min - cos_mt * cp_y_min + cp_y_min;
     }
-    getDelta($event) {
-        const currentX = unifyEvent($event).clientX;
-        const currentY = unifyEvent($event).clientY;
-        return {
-            x: this.dragBottom || this.dragTop ? 0 : currentX - this.startX,
-            y: this.dragStart || this.dragEnd ? 0 : currentY - this.startY,
-        };
+    else {
+      w = wtmp;
+      h = htmp;
     }
-    convertToUnit(value, ratio) {
-        if (this.unit === 'px') {
-            return value;
-        }
-        if (this.unit === 'viewport') {
-            const windowSize = ratio === 'width' ? window.innerWidth || screen.width : window.innerHeight || screen.height;
-            return (value * 100) / windowSize;
-        }
-        const parentSize = ratio === 'width' ? this.parentWidth : this.parentHeight;
-        return (value * 100) / parentSize;
+    const l = matrix.c * q_x + matrix.a * p_x;
+    const t = matrix.d * q_y + matrix.b * p_y;
+    this.left = this.convertToUnit(l, 'width');
+    this.width = this.convertToUnit(w, 'width');
+    this.top = this.convertToUnit(t, 'height');
+    this.height = this.convertToUnit(h, 'height');
+  }
+  rotateShape($event) {
+    if (!this.rotating) {
+      return false;
     }
-    convertParentUnit(value) {
-        return this.unit === 'percentage' ? 100 : value;
+    const currentX = unifyEvent($event).clientX;
+    const currentY = unifyEvent($event).clientY;
+    this.rotate = Math.atan2(currentX - this.centerX, currentY - this.centerY) * (180 / Math.PI) * -1 + 180;
+    return true;
+  }
+  getDelta($event) {
+    const currentX = unifyEvent($event).clientX;
+    const currentY = unifyEvent($event).clientY;
+    return {
+      x: this.dragBottom || this.dragTop ? 0 : currentX - this.startX,
+      y: this.dragStart || this.dragEnd ? 0 : currentY - this.startY,
+    };
+  }
+  convertToUnit(value, ratio) {
+    if (this.unit === 'px') {
+      return value;
     }
-    startMove() {
-        if (this.dragBottomEnd || this.dragTopEnd || this.dragBottomStart || this.dragTopStart) {
-            return;
-        }
-        if (this.dragTop || this.dragEnd || this.dragBottom || this.dragStart) {
-            return;
-        }
-        if (this.rotating) {
-            return;
-        }
-        this.moving = true;
+    if (this.unit === 'viewport') {
+      const windowSize = ratio === 'width' ? window.innerWidth || screen.width : window.innerHeight || screen.height;
+      return (value * 100) / windowSize;
     }
-    stopAndReset(emitUpdate) {
-        this.startX = null;
-        this.startY = null;
-        this.stopMove();
-        this.stopResize();
-        this.stopRotate();
-        if (emitUpdate && this.updated) {
-            this.drrDidChange.emit(this.el.shadowRoot.host);
-        }
-        this.updated = false;
+    const parentSize = ratio === 'width' ? this.parentWidth : this.parentHeight;
+    return (value * 100) / parentSize;
+  }
+  convertParentUnit(value) {
+    return this.unit === 'percentage' ? 100 : value;
+  }
+  startMove() {
+    if (this.dragBottomEnd || this.dragTopEnd || this.dragBottomStart || this.dragTopStart) {
+      return;
     }
-    stopMove() {
-        this.moving = false;
-        this.startTop = null;
-        this.startLeft = null;
+    if (this.dragTop || this.dragEnd || this.dragBottom || this.dragStart) {
+      return;
     }
-    stopRotate() {
-        this.rotating = false;
-        this.centerX = null;
-        this.centerY = null;
+    if (this.rotating) {
+      return;
     }
-    stopResize() {
-        this.dragBottomEnd = false;
-        this.dragTopEnd = false;
-        this.dragBottomStart = false;
-        this.dragTopStart = false;
-        this.dragTop = false;
-        this.dragEnd = false;
-        this.dragBottom = false;
-        this.dragStart = false;
-        this.startWidth = null;
-        this.startHeight = null;
+    this.moving = true;
+  }
+  stopAndReset(emitUpdate) {
+    this.startX = null;
+    this.startY = null;
+    this.stopMove();
+    this.stopResize();
+    this.stopRotate();
+    if (emitUpdate && this.updated) {
+      this.drrDidChange.emit(this.el.shadowRoot.host);
     }
-    resizeMatrix() {
-        const a = this.dragBottomEnd || this.dragTopEnd || this.dragEnd ? 1 : 0;
-        const b = this.dragBottomEnd || this.dragBottomStart || this.dragStart || this.dragBottom ? 1 : 0;
-        const c = a === 1 ? 0 : 1;
-        const d = b === 1 ? 0 : 1;
-        return {
-            a,
-            b,
-            c,
-            d,
-        };
+    this.updated = false;
+  }
+  stopMove() {
+    this.moving = false;
+    this.startTop = null;
+    this.startLeft = null;
+  }
+  stopRotate() {
+    this.rotating = false;
+    this.centerX = null;
+    this.centerY = null;
+  }
+  stopResize() {
+    this.dragBottomEnd = false;
+    this.dragTopEnd = false;
+    this.dragBottomStart = false;
+    this.dragTopStart = false;
+    this.dragTop = false;
+    this.dragEnd = false;
+    this.dragBottom = false;
+    this.dragStart = false;
+    this.startWidth = null;
+    this.startHeight = null;
+  }
+  resizeMatrix() {
+    const a = this.dragBottomEnd || this.dragTopEnd || this.dragEnd ? 1 : 0;
+    const b = this.dragBottomEnd || this.dragBottomStart || this.dragStart || this.dragBottom ? 1 : 0;
+    const c = a === 1 ? 0 : 1;
+    const d = b === 1 ? 0 : 1;
+    return {
+      a,
+      b,
+      c,
+      d,
+    };
+  }
+  // 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);
     }
-    // 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() {
+    const widthUnit = this.unit === 'percentage' ? '%' : this.unit === 'viewport' ? 'vw' : this.unit;
+    const heightUnit = this.unit === 'percentage' ? '%' : this.unit === 'viewport' ? 'vh' : this.unit;
+    return (h(Host, { style: {
+        '--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`,
+        '--pointer-events': `${this.editing ? 'all' : 'none'}`,
+        '--user-select': `${this.text ? 'text' : 'none'}`,
+      }, class: `${this.selected ? 'selected' : ''} ${this.text ? 'text' : ''} ${this.drag !== 'none' ? 'draggable' : ''} ${this.drag !== 'none' && this.moving ? 'drag' : ''}` },
+      this.renderEdgesAnchors(),
+      this.renderBorderAnchors(),
+      this.renderRotateAnchor(),
+      h("slot", null)));
+  }
+  renderEdgesAnchors() {
+    if (!this.selected || !this.resize) {
+      return undefined;
     }
-    render() {
-        const widthUnit = this.unit === 'percentage' ? '%' : this.unit === 'viewport' ? 'vw' : this.unit;
-        const heightUnit = this.unit === 'percentage' ? '%' : this.unit === 'viewport' ? 'vh' : this.unit;
-        return (h(Host, { style: {
-                '--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`,
-                '--pointer-events': `${this.editing ? 'all' : 'none'}`,
-                '--user-select': `${this.text ? 'text' : 'none'}`,
-            }, class: `${this.selected ? 'selected' : ''} ${this.text ? 'text' : ''} ${this.drag !== 'none' ? 'draggable' : ''} ${this.drag !== 'none' && this.moving ? 'drag' : ''}` },
-            this.renderEdgesAnchors(),
-            this.renderBorderAnchors(),
-            this.renderRotateAnchor(),
-            h("slot", null)));
+    return [
+      h("div", { class: "anchor top end", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragTopEnd = true), onTouchStart: () => (this.dragTopEnd = true) },
+        h("div", null)),
+      h("div", { class: "anchor bottom end", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragBottomEnd = true), onTouchStart: () => (this.dragBottomEnd = true) },
+        h("div", null)),
+      h("div", { class: "anchor bottom start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragBottomStart = true), onTouchStart: () => (this.dragBottomStart = true) },
+        h("div", null)),
+      h("div", { class: "anchor top start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragTopStart = true), onTouchStart: () => (this.dragTopStart = true) },
+        h("div", null)),
+    ];
+  }
+  renderBorderAnchors() {
+    if (!this.selected || !this.resize) {
+      return undefined;
     }
-    renderEdgesAnchors() {
-        if (!this.selected || !this.resize) {
-            return undefined;
-        }
-        return [
-            h("div", { class: "anchor top end", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragTopEnd = true), onTouchStart: () => (this.dragTopEnd = true) },
-                h("div", null)),
-            h("div", { class: "anchor bottom end", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragBottomEnd = true), onTouchStart: () => (this.dragBottomEnd = true) },
-                h("div", null)),
-            h("div", { class: "anchor bottom start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragBottomStart = true), onTouchStart: () => (this.dragBottomStart = true) },
-                h("div", null)),
-            h("div", { class: "anchor top start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragTopStart = true), onTouchStart: () => (this.dragTopStart = true) },
-                h("div", null)),
-        ];
+    return [
+      h("div", { class: "border top", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragTop = true), onTouchStart: () => (this.dragTop = true) }),
+      h("div", { class: "border end", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragEnd = true), onTouchStart: () => (this.dragEnd = true) }),
+      h("div", { class: "border bottom", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragBottom = true), onTouchStart: () => (this.dragBottom = true) }),
+      h("div", { class: "border start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragStart = true), onTouchStart: () => (this.dragStart = true) }),
+    ];
+  }
+  renderRotateAnchor() {
+    if (!this.selected || !this.rotation) {
+      return undefined;
     }
-    renderBorderAnchors() {
-        if (!this.selected || !this.resize) {
-            return undefined;
-        }
-        return [
-            h("div", { class: "border top", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragTop = true), onTouchStart: () => (this.dragTop = true) }),
-            h("div", { class: "border end", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragEnd = true), onTouchStart: () => (this.dragEnd = true) }),
-            h("div", { class: "border bottom", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragBottom = true), onTouchStart: () => (this.dragBottom = true) }),
-            h("div", { class: "border start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragStart = true), onTouchStart: () => (this.dragStart = true) }),
-        ];
+    return (h("div", { class: "rotate" },
+      h("div", { class: "action", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.rotating = true), onTouchStart: () => (this.rotating = true) },
+        h("div", null)),
+      h("div", { class: "presentation" })));
+  }
+  static get is() { return "deckgo-drr"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["deckdeckgo-drr.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["deckdeckgo-drr.css"]
+  }; }
+  static get properties() { return {
+    "unit": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'percentage' | 'viewport' | 'px'",
+        "resolved": "\"percentage\" | \"px\" | \"viewport\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "unit",
+      "reflect": false,
+      "defaultValue": "'percentage'"
+    },
+    "resize": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "resize",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "drag": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'x-axis' | 'y-axis' | 'all' | 'none'",
+        "resolved": "\"all\" | \"none\" | \"x-axis\" | \"y-axis\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "drag",
+      "reflect": false,
+      "defaultValue": "'all'"
+    },
+    "rotation": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "rotation",
+      "reflect": false,
+      "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"
     }
-    renderRotateAnchor() {
-        if (!this.selected || !this.rotation) {
-            return undefined;
+  }; }
+  static get states() { return {
+    "width": {},
+    "height": {},
+    "minWidth": {},
+    "minHeight": {},
+    "top": {},
+    "left": {},
+    "rotate": {},
+    "selected": {},
+    "moving": {},
+    "editing": {}
+  }; }
+  static get events() { return [{
+      "method": "drrSelect",
+      "name": "drrSelect",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "HTMLElement | undefined",
+        "resolved": "HTMLElement",
+        "references": {
+          "HTMLElement": {
+            "location": "global"
+          }
         }
-        return (h("div", { class: "rotate" },
-            h("div", { class: "action", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.rotating = true), onTouchStart: () => (this.rotating = true) },
-                h("div", null)),
-            h("div", { class: "presentation" })));
-    }
-    static get is() { return "deckgo-drr"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() { return {
-        "$": ["deckdeckgo-drr.scss"]
-    }; }
-    static get styleUrls() { return {
-        "$": ["deckdeckgo-drr.css"]
-    }; }
-    static get properties() { return {
-        "unit": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "'percentage' | 'viewport' | 'px'",
-                "resolved": "\"percentage\" | \"px\" | \"viewport\"",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": ""
-            },
-            "attribute": "unit",
-            "reflect": false,
-            "defaultValue": "'percentage'"
-        },
-        "resize": {
-            "type": "boolean",
-            "mutable": true,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": ""
-            },
-            "attribute": "resize",
-            "reflect": false,
-            "defaultValue": "true"
-        },
-        "drag": {
-            "type": "string",
-            "mutable": false,
-            "complexType": {
-                "original": "'x-axis' | 'y-axis' | 'all' | 'none'",
-                "resolved": "\"all\" | \"none\" | \"x-axis\" | \"y-axis\"",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": ""
-            },
-            "attribute": "drag",
-            "reflect": false,
-            "defaultValue": "'all'"
-        },
-        "rotation": {
-            "type": "boolean",
-            "mutable": false,
-            "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": ""
-            },
-            "attribute": "rotation",
-            "reflect": false,
-            "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"
+      }
+    }, {
+      "method": "drrDidChange",
+      "name": "drrDidChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "HTMLElement | undefined",
+        "resolved": "HTMLElement",
+        "references": {
+          "HTMLElement": {
+            "location": "global"
+          }
         }
-    }; }
-    static get states() { return {
-        "width": {},
-        "height": {},
-        "minWidth": {},
-        "minHeight": {},
-        "top": {},
-        "left": {},
-        "rotate": {},
-        "selected": {},
-        "moving": {},
-        "editing": {}
-    }; }
-    static get events() { return [{
-            "method": "drrSelect",
-            "name": "drrSelect",
-            "bubbles": true,
-            "cancelable": true,
-            "composed": true,
-            "docs": {
-                "tags": [],
-                "text": ""
-            },
-            "complexType": {
-                "original": "HTMLElement | undefined",
-                "resolved": "HTMLElement",
-                "references": {
-                    "HTMLElement": {
-                        "location": "global"
-                    }
-                }
-            }
-        }, {
-            "method": "drrDidChange",
-            "name": "drrDidChange",
-            "bubbles": true,
-            "cancelable": true,
-            "composed": true,
-            "docs": {
-                "tags": [],
-                "text": ""
-            },
-            "complexType": {
-                "original": "HTMLElement | undefined",
-                "resolved": "HTMLElement",
-                "references": {
-                    "HTMLElement": {
-                        "location": "global"
-                    }
-                }
-            }
-        }]; }
-    static get elementRef() { return "el"; }
+      }
+    }]; }
+  static get elementRef() { return "el"; }
 }

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

@@ -1,1 +0,1 @@
-import{b as t}from"./p-d1bc1279.js";import{p as i}from"./p-666007b3.js";i().then(i=>t([["p-69b93902",[[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));
+import{p as t,b as e}from"./p-cfd6891c.js";(()=>{const e=import.meta.url,i={};return""!==e&&(i.resourcesUrl=new URL(".",e).href),t(i)})().then(t=>e([["p-46224d10",[[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]}]]]],t));

dist/esm/deckgo-drr.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a4a96ce2.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-decc3be6.js';
 
@@ -7,449 +7,449 @@ function unifyEvent(e) {
 
-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(.text){contain:layout}: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}}";
+const deckdeckgoDrrCss = ":host{display:flex;justify-content:center;align-items:center;contain:size;width:var(--width);height:var(--height);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(.text){contain:layout}: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);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;transform:translate(50%, -50%)}div.anchor.top.start{cursor:nw-resize;transform:translate(-50%, -50%)}div.anchor.end{right:0}div.anchor.bottom{bottom:0}div.anchor.bottom.end{cursor:se-resize;transform:translate(50%, 50%)}div.anchor.bottom.start{cursor:sw-resize;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%;transform:translate(-50%, -50%);cursor:n-resize}div.border.end{right:0;transform:translate(50%, -50%);cursor:e-resize}div.border.bottom{bottom:0;left:50%;transform:translate(-50%, 50%);cursor:s-resize}div.border.start{left:0;transform:translate(-50%, -50%);cursor:w-resize}div.rotate{position:absolute;top:0;left:50%;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%;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%;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';
-        // Size
-        this.resize = true;
-        // Position
-        this.drag = 'all';
-        // Rotate
-        this.rotation = true;
-        // Text content editable
-        this.text = false;
-        this.minWidth = 10;
-        this.minHeight = 10;
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.drrSelect = createEvent(this, "drrSelect", 7);
+    this.drrDidChange = createEvent(this, "drrDidChange", 7);
+    this.unit = 'percentage';
+    // Size
+    this.resize = true;
+    // Position
+    this.drag = 'all';
+    // Rotate
+    this.rotation = true;
+    // Text content editable
+    this.text = false;
+    this.minWidth = 10;
+    this.minHeight = 10;
+    this.selected = false;
+    this.updated = false;
+    this.moving = false;
+    this.startX = null;
+    this.startY = null;
+    this.startWidth = null;
+    this.startHeight = null;
+    this.startTop = null;
+    this.startLeft = null;
+    this.dragTopEnd = false;
+    this.dragBottomEnd = false;
+    this.dragBottomStart = false;
+    this.dragTopStart = false;
+    this.dragTop = false;
+    this.dragEnd = false;
+    this.dragBottom = false;
+    this.dragStart = false;
+    this.parentWidth = null;
+    this.parentHeight = null;
+    this.rotating = false;
+    this.centerX = null;
+    this.centerY = null;
+    this.editing = false;
+    this.start = async ($event) => {
+      if (!$event || !$event.target) {
+        return;
+      }
+      // If we click elsewhere or select another component, then this component should loose focus and values need to be reset for next usage
+      if (!this.isTargetEvent($event)) {
+        this.stopAndReset(false);
+        if (this.selected) {
+          this.drrSelect.emit(undefined);
+        }
         this.selected = false;
-        this.updated = false;
-        this.moving = false;
-        this.startX = null;
-        this.startY = null;
-        this.startWidth = null;
-        this.startHeight = null;
-        this.startTop = null;
-        this.startLeft = null;
-        this.dragTopEnd = false;
-        this.dragBottomEnd = false;
-        this.dragBottomStart = false;
-        this.dragTopStart = false;
-        this.dragTop = false;
-        this.dragEnd = false;
-        this.dragBottom = false;
-        this.dragStart = false;
-        this.parentWidth = null;
-        this.parentHeight = null;
-        this.rotating = false;
-        this.centerX = null;
-        this.centerY = null;
-        this.editing = false;
-        this.start = async ($event) => {
-            if (!$event || !$event.target) {
-                return;
-            }
-            // If we click elsewhere or select another component, then this component should loose focus and values need to be reset for next usage
-            if (!this.isTargetEvent($event)) {
-                this.stopAndReset(false);
-                if (this.selected) {
-                    this.drrSelect.emit(undefined);
-                }
-                this.selected = false;
-                this.resetTextEditable();
-                return;
-            }
-            if (!this.editing) {
-                const selected = $event.target.closest('deckgo-drr');
-                this.drrSelect.emit(selected);
-                this.selected = true;
-                this.initTextEditable();
-                this.startMove();
-            }
-            await this.initStartPositions($event);
-        };
-        this.transform = ($event) => {
-            const moved = this.move($event);
-            const resized = this.size($event);
-            const rotated = this.rotateShape($event);
-            this.updated = moved || resized || rotated;
-        };
-        this.stop = () => {
-            this.stopAndReset(this.selected);
-        };
-        this.dbclick = async ($event) => {
-            if (!this.isTargetEvent($event)) {
-                return;
-            }
-            this.editing = true;
-            const element = this.el.querySelector( `:scope > *` );
-            if (element) {
-                element.focus();
-                await this.moveCursorToEnd(element);
-            }
-        };
+        this.resetTextEditable();
+        return;
+      }
+      if (!this.editing) {
+        const selected = $event.target.closest('deckgo-drr');
+        this.drrSelect.emit(selected);
+        this.selected = true;
+        this.initTextEditable();
+        this.startMove();
+      }
+      await this.initStartPositions($event);
+    };
+    this.transform = ($event) => {
+      const moved = this.move($event);
+      const resized = this.size($event);
+      const rotated = this.rotateShape($event);
+      this.updated = moved || resized || rotated;
+    };
+    this.stop = () => {
+      this.stopAndReset(this.selected);
+    };
+    this.dbclick = async ($event) => {
+      if (!this.isTargetEvent($event)) {
+        return;
+      }
+      this.editing = true;
+      const element = this.el.querySelector( `:scope > *` );
+      if (element) {
+        element.focus();
+        await this.moveCursorToEnd(element);
+      }
+    };
+  }
+  async componentWillLoad() {
+    await this.init();
+    await this.attachEventListeners();
+  }
+  async componentDidLoad() {
+    await this.displaySlot();
+  }
+  async componentWillUnload() {
+    if (this.drag !== 'none' || this.resize) {
+      await this.detachEventListeners();
     }
-    async componentWillLoad() {
-        await this.init();
-        await this.attachEventListeners();
+  }
+  async attachEventListeners() {
+    const editable = this.el && this.el.parentElement && !this.el.parentElement.classList.contains('deckgo-read-only');
+    if (editable && document && (this.drag !== 'none' || this.resize)) {
+      document.addEventListener('mousedown', this.start.bind(this), { passive: true });
+      document.addEventListener('touchstart', this.start.bind(this), { passive: true });
+      document.addEventListener('mousemove', this.transform.bind(this), { passive: true });
+      document.addEventListener('touchmove', this.transform.bind(this), { passive: true });
+      document.addEventListener('mouseup', this.stop.bind(this), { passive: true });
+      document.addEventListener('touchend', this.stop.bind(this), { passive: true });
     }
-    async componentDidLoad() {
-        await this.displaySlot();
+  }
+  async detachEventListeners() {
+    if (document) {
+      document.removeEventListener('mousedown', this.start, true);
+      document.removeEventListener('touchstart', this.start, true);
+      document.removeEventListener('mousemove', this.transform, true);
+      document.removeEventListener('touchmove', this.transform, true);
+      document.removeEventListener('mouseup', this.stop, true);
+      document.removeEventListener('touchend', this.stop, true);
+      document.removeEventListener('dblclick', this.dbclick, true);
     }
-    async componentWillUnload() {
-        if (this.drag !== 'none' || this.resize) {
-            await this.detachEventListeners();
-        }
+  }
+  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 attachEventListeners() {
-        const editable = this.el && this.el.parentElement && !this.el.parentElement.classList.contains('deckgo-read-only');
-        if (editable && document && (this.drag !== 'none' || this.resize)) {
-            document.addEventListener('mousedown', this.start.bind(this), { passive: true });
-            document.addEventListener('touchstart', this.start.bind(this), { passive: true });
-            document.addEventListener('mousemove', this.transform.bind(this), { passive: true });
-            document.addEventListener('touchmove', this.transform.bind(this), { passive: true });
-            document.addEventListener('mouseup', this.stop.bind(this), { passive: true });
-            document.addEventListener('touchend', this.stop.bind(this), { passive: true });
-        }
+  }
+  async displaySlot() {
+    const element = this.el.querySelector( `:scope > *` );
+    if (element && element.style.display === 'none') {
+      element.style.display = '';
     }
-    async detachEventListeners() {
-        if (document) {
-            document.removeEventListener('mousedown', this.start, true);
-            document.removeEventListener('touchstart', this.start, true);
-            document.removeEventListener('mousemove', this.transform, true);
-            document.removeEventListener('touchmove', this.transform, true);
-            document.removeEventListener('mouseup', this.stop, true);
-            document.removeEventListener('touchend', this.stop, true);
-            document.removeEventListener('dblclick', this.dbclick, true);
-        }
+  }
+  isTargetEvent($event) {
+    const selected = $event.target.closest('deckgo-drr');
+    return selected && selected.isEqualNode(this.el);
+  }
+  initTextEditable() {
+    if (!this.text || !this.el) {
+      return;
     }
-    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;
-        }
+    document.addEventListener('dblclick', this.dbclick.bind(this), { once: true });
+    const element = this.el.querySelector( `:scope > *` );
+    if (element) {
+      element.setAttribute('contentEditable', 'true');
     }
-    async displaySlot() {
-        const element = this.el.querySelector( `:scope > *` );
-        if (element && element.style.display === 'none') {
-            element.style.display = '';
-        }
+  }
+  resetTextEditable() {
+    if (!this.text) {
+      return;
     }
-    isTargetEvent($event) {
-        const selected = $event.target.closest('deckgo-drr');
-        return selected && selected.isEqualNode(this.el);
+    this.editing = false;
+    if (document) {
+      document.removeEventListener('dblclick', this.dbclick, true);
     }
-    initTextEditable() {
-        if (!this.text || !this.el) {
-            return;
-        }
-        document.addEventListener('dblclick', this.dbclick.bind(this), { once: true });
-        const element = this.el.querySelector( `:scope > *` );
-        if (element) {
-            element.setAttribute('contentEditable', 'true');
-        }
+  }
+  async initStartPositions($event) {
+    this.startX = unifyEvent($event).clientX;
+    this.startY = unifyEvent($event).clientY;
+    await this.initParentSize();
+    this.initStartPositionsMove();
+    this.initStartPositionsRotation();
+    this.initStartPositionsResize();
+  }
+  initStartPositionsMove() {
+    this.startWidth = isNaN(this.width) ? 0 : this.width;
+    this.startHeight = isNaN(this.height) ? 0 : this.height;
+    this.startTop = this.top;
+    this.startLeft = this.left;
+  }
+  initStartPositionsRotation() {
+    const rect = this.el.getBoundingClientRect();
+    this.centerX = rect.left + rect.width / 2;
+    this.centerY = rect.top + rect.height / 2;
+  }
+  initStartPositionsResize() {
+    const theta = (Math.PI * 2 * this.rotate) / 360;
+    const cos_t = Math.cos(theta);
+    const sin_t = Math.sin(theta);
+    const css = window.getComputedStyle(this.el);
+    const l = parseFloat(css.left);
+    const t = parseFloat(css.top);
+    const w = parseFloat(css.width);
+    const h = parseFloat(css.height);
+    const matrix = this.resizeMatrix();
+    const c0_x = l + w / 2.0;
+    const c0_y = t + h / 2.0;
+    const q0_x = l + matrix.a * w;
+    const q0_y = t + matrix.b * h;
+    const p0_x = l + matrix.c * w;
+    const p0_y = t + matrix.d * h;
+    this.qp0_x = q0_x * cos_t - q0_y * sin_t - c0_x * cos_t + c0_y * sin_t + c0_x;
+    this.qp0_y = q0_x * sin_t + q0_y * cos_t - c0_x * sin_t - c0_y * cos_t + c0_y;
+    this.pp_x = p0_x * cos_t - p0_y * sin_t - c0_x * cos_t + c0_y * sin_t + c0_x;
+    this.pp_y = p0_x * sin_t + p0_y * cos_t - c0_x * sin_t - c0_y * cos_t + c0_y;
+  }
+  async initParentSize() {
+    // The deckgo-slide-aspect-ratio template exposes a getContainer function which return a reference to the effective container.
+    if (this.el.parentElement && typeof this.el.parentElement.getContainer === 'function') {
+      const parent = await this.el.parentElement.getContainer();
+      this.parentWidth = this.unit === 'percentage' ? parent.offsetWidth : this.convertToUnit(parent.offsetWidth, 'width');
+      this.parentHeight = this.unit === 'percentage' ? parent.offsetHeight : this.convertToUnit(parent.offsetHeight, 'height');
     }
-    resetTextEditable() {
-        if (!this.text) {
-            return;
-        }
-        this.editing = false;
-        if (document) {
-            document.removeEventListener('dblclick', this.dbclick, true);
-        }
+    else {
+      this.parentWidth = this.unit === 'percentage' ? this.el.parentElement.offsetWidth : this.convertToUnit(this.el.parentElement.offsetWidth, 'width');
+      this.parentHeight = this.unit === 'percentage' ? this.el.parentElement.offsetHeight : this.convertToUnit(this.el.parentElement.offsetHeight, 'height');
     }
-    async initStartPositions($event) {
-        this.startX = unifyEvent($event).clientX;
-        this.startY = unifyEvent($event).clientY;
-        await this.initParentSize();
-        this.initStartPositionsMove();
-        this.initStartPositionsRotation();
-        this.initStartPositionsResize();
+  }
+  move($event) {
+    if (!this.moving || this.drag === 'none') {
+      return false;
     }
-    initStartPositionsMove() {
-        this.startWidth = isNaN(this.width) ? 0 : this.width;
-        this.startHeight = isNaN(this.height) ? 0 : this.height;
-        this.startTop = this.top;
-        this.startLeft = this.left;
+    if (this.drag === 'x-axis') {
+      this.deltaMove($event, false, true);
     }
-    initStartPositionsRotation() {
-        const rect = this.el.getBoundingClientRect();
-        this.centerX = rect.left + rect.width / 2;
-        this.centerY = rect.top + rect.height / 2;
+    else if (this.drag === 'y-axis') {
+      this.deltaMove($event, true, false);
     }
-    initStartPositionsResize() {
-        const theta = (Math.PI * 2 * this.rotate) / 360;
-        const cos_t = Math.cos(theta);
-        const sin_t = Math.sin(theta);
-        const css = window.getComputedStyle(this.el);
-        const l = parseFloat(css.left);
-        const t = parseFloat(css.top);
-        const w = parseFloat(css.width);
-        const h = parseFloat(css.height);
-        const matrix = this.resizeMatrix();
-        const c0_x = l + w / 2.0;
-        const c0_y = t + h / 2.0;
-        const q0_x = l + matrix.a * w;
-        const q0_y = t + matrix.b * h;
-        const p0_x = l + matrix.c * w;
-        const p0_y = t + matrix.d * h;
-        this.qp0_x = q0_x * cos_t - q0_y * sin_t - c0_x * cos_t + c0_y * sin_t + c0_x;
-        this.qp0_y = q0_x * sin_t + q0_y * cos_t - c0_x * sin_t - c0_y * cos_t + c0_y;
-        this.pp_x = p0_x * cos_t - p0_y * sin_t - c0_x * cos_t + c0_y * sin_t + c0_x;
-        this.pp_y = p0_x * sin_t + p0_y * cos_t - c0_x * sin_t - c0_y * cos_t + c0_y;
+    else {
+      this.deltaMove($event, true, true);
     }
-    async initParentSize() {
-        // The deckgo-slide-aspect-ratio template exposes a getContainer function which return a reference to the effective container.
-        if (this.el.parentElement && typeof this.el.parentElement.getContainer === 'function') {
-            const parent = await this.el.parentElement.getContainer();
-            this.parentWidth = this.unit === 'percentage' ? parent.offsetWidth : this.convertToUnit(parent.offsetWidth, 'width');
-            this.parentHeight = this.unit === 'percentage' ? parent.offsetHeight : this.convertToUnit(parent.offsetHeight, 'height');
-        }
-        else {
-            this.parentWidth = this.unit === 'percentage' ? this.el.parentElement.offsetWidth : this.convertToUnit(this.el.parentElement.offsetWidth, 'width');
-            this.parentHeight = this.unit === 'percentage' ? this.el.parentElement.offsetHeight : this.convertToUnit(this.el.parentElement.offsetHeight, 'height');
-        }
+    return true;
+  }
+  size($event) {
+    if (!this.resize) {
+      return false;
     }
-    move($event) {
-        if (!this.moving || this.drag === 'none') {
-            return false;
-        }
-        if (this.drag === 'x-axis') {
-            this.deltaMove($event, false, true);
-        }
-        else if (this.drag === 'y-axis') {
-            this.deltaMove($event, true, false);
-        }
-        else {
-            this.deltaMove($event, true, true);
-        }
-        return true;
+    if (!this.selected || !this.startX || !this.startY) {
+      return false;
     }
-    size($event) {
-        if (!this.resize) {
-            return false;
-        }
-        if (!this.selected || !this.startX || !this.startY) {
-            return false;
-        }
-        if (!this.dragBottomEnd &&
-            !this.dragTopEnd &&
-            !this.dragBottomStart &&
-            !this.dragTopStart &&
-            !this.dragTop &&
-            !this.dragEnd &&
-            !this.dragBottom &&
-            !this.dragStart) {
-            return false;
-        }
-        this.deltaResize($event);
-        return true;
+    if (!this.dragBottomEnd &&
+      !this.dragTopEnd &&
+      !this.dragBottomStart &&
+      !this.dragTopStart &&
+      !this.dragTop &&
+      !this.dragEnd &&
+      !this.dragBottom &&
+      !this.dragStart) {
+      return false;
     }
-    deltaMove($event, top, left) {
-        const delta = this.getDelta($event);
-        const deltaX = this.convertToUnit(delta.x, 'width');
-        const deltaY = this.convertToUnit(delta.y, 'height');
-        if (top) {
-            const maxTop = this.convertParentUnit(this.parentHeight) - this.startHeight;
-            this.top = this.startTop + deltaY > 0 ? (this.startTop + deltaY < maxTop ? this.startTop + deltaY : maxTop) : 0;
-        }
-        if (left) {
-            const maxLeft = this.convertParentUnit(this.parentWidth) - this.startWidth;
-            this.left = this.startLeft + deltaX > 0 ? (this.startLeft + deltaX < maxLeft ? this.startLeft + deltaX : maxLeft) : 0;
-        }
+    this.deltaResize($event);
+    return true;
+  }
+  deltaMove($event, top, left) {
+    const delta = this.getDelta($event);
+    const deltaX = this.convertToUnit(delta.x, 'width');
+    const deltaY = this.convertToUnit(delta.y, 'height');
+    if (top) {
+      const maxTop = this.convertParentUnit(this.parentHeight) - this.startHeight;
+      this.top = this.startTop + deltaY > 0 ? (this.startTop + deltaY < maxTop ? this.startTop + deltaY : maxTop) : 0;
     }
-    deltaResize($event) {
-        const delta = this.getDelta($event);
-        const qp_x = this.qp0_x + delta.x;
-        const qp_y = this.qp0_y + delta.y;
-        const cp_x = (qp_x + this.pp_x) / 2.0;
-        const cp_y = (qp_y + this.pp_y) / 2.0;
-        const mtheta = (-1 * Math.PI * 2 * this.rotate) / 360;
-        const cos_mt = Math.cos(mtheta);
-        const sin_mt = Math.sin(mtheta);
-        let q_x = qp_x * cos_mt - qp_y * sin_mt - cos_mt * cp_x + sin_mt * cp_y + cp_x;
-        let q_y = qp_x * sin_mt + qp_y * cos_mt - sin_mt * cp_x - cos_mt * cp_y + cp_y;
-        let p_x = this.pp_x * cos_mt - this.pp_y * sin_mt - cos_mt * cp_x + sin_mt * cp_y + cp_x;
-        let p_y = this.pp_x * sin_mt + this.pp_y * cos_mt - sin_mt * cp_x - cos_mt * cp_y + cp_y;
-        const matrix = this.resizeMatrix();
-        const wtmp = matrix.a * (q_x - p_x) + matrix.c * (p_x - q_x);
-        const htmp = matrix.b * (q_y - p_y) + matrix.d * (p_y - q_y);
-        let w;
-        let h;
-        if (wtmp < this.minWidth || htmp < this.minHeight) {
-            w = Math.max(this.minWidth, wtmp);
-            h = Math.max(this.minHeight, htmp);
-            const theta = -1 * mtheta;
-            const cos_t = Math.cos(theta);
-            const sin_t = Math.sin(theta);
-            const dh_x = -sin_t * h;
-            const dh_y = cos_t * h;
-            const dw_x = cos_t * w;
-            const dw_y = sin_t * w;
-            const qp_x_min = this.pp_x + (matrix.a - matrix.c) * dw_x + (matrix.b - matrix.d) * dh_x;
-            const qp_y_min = this.pp_y + (matrix.a - matrix.c) * dw_y + (matrix.b - matrix.d) * dh_y;
-            const cp_x_min = (qp_x_min + this.pp_x) / 2.0;
-            const cp_y_min = (qp_y_min + this.pp_y) / 2.0;
-            q_x = qp_x_min * cos_mt - qp_y_min * sin_mt - cos_mt * cp_x_min + sin_mt * cp_y_min + cp_x_min;
-            q_y = qp_x_min * sin_mt + qp_y_min * cos_mt - sin_mt * cp_x_min - cos_mt * cp_y_min + cp_y_min;
-            p_x = this.pp_x * cos_mt - this.pp_y * sin_mt - cos_mt * cp_x_min + sin_mt * cp_y_min + cp_x_min;
-            p_y = this.pp_x * sin_mt + this.pp_y * cos_mt - sin_mt * cp_x_min - cos_mt * cp_y_min + cp_y_min;
-        }
-        else {
-            w = wtmp;
-            h = htmp;
-        }
-        const l = matrix.c * q_x + matrix.a * p_x;
-        const t = matrix.d * q_y + matrix.b * p_y;
-        this.left = this.convertToUnit(l, 'width');
-        this.width = this.convertToUnit(w, 'width');
-        this.top = this.convertToUnit(t, 'height');
-        this.height = this.convertToUnit(h, 'height');
+    if (left) {
+      const maxLeft = this.convertParentUnit(this.parentWidth) - this.startWidth;
+      this.left = this.startLeft + deltaX > 0 ? (this.startLeft + deltaX < maxLeft ? this.startLeft + deltaX : maxLeft) : 0;
     }
-    rotateShape($event) {
-        if (!this.rotating) {
-            return false;
-        }
-        const currentX = unifyEvent($event).clientX;
-        const currentY = unifyEvent($event).clientY;
-        this.rotate = Math.atan2(currentX - this.centerX, currentY - this.centerY) * (180 / Math.PI) * -1 + 180;
-        return true;
+  }
+  deltaResize($event) {
+    const delta = this.getDelta($event);
+    const qp_x = this.qp0_x + delta.x;
+    const qp_y = this.qp0_y + delta.y;
+    const cp_x = (qp_x + this.pp_x) / 2.0;
+    const cp_y = (qp_y + this.pp_y) / 2.0;
+    const mtheta = (-1 * Math.PI * 2 * this.rotate) / 360;
+    const cos_mt = Math.cos(mtheta);
+    const sin_mt = Math.sin(mtheta);
+    let q_x = qp_x * cos_mt - qp_y * sin_mt - cos_mt * cp_x + sin_mt * cp_y + cp_x;
+    let q_y = qp_x * sin_mt + qp_y * cos_mt - sin_mt * cp_x - cos_mt * cp_y + cp_y;
+    let p_x = this.pp_x * cos_mt - this.pp_y * sin_mt - cos_mt * cp_x + sin_mt * cp_y + cp_x;
+    let p_y = this.pp_x * sin_mt + this.pp_y * cos_mt - sin_mt * cp_x - cos_mt * cp_y + cp_y;
+    const matrix = this.resizeMatrix();
+    const wtmp = matrix.a * (q_x - p_x) + matrix.c * (p_x - q_x);
+    const htmp = matrix.b * (q_y - p_y) + matrix.d * (p_y - q_y);
+    let w;
+    let h;
+    if (wtmp < this.minWidth || htmp < this.minHeight) {
+      w = Math.max(this.minWidth, wtmp);
+      h = Math.max(this.minHeight, htmp);
+      const theta = -1 * mtheta;
+      const cos_t = Math.cos(theta);
+      const sin_t = Math.sin(theta);
+      const dh_x = -sin_t * h;
+      const dh_y = cos_t * h;
+      const dw_x = cos_t * w;
+      const dw_y = sin_t * w;
+      const qp_x_min = this.pp_x + (matrix.a - matrix.c) * dw_x + (matrix.b - matrix.d) * dh_x;
+      const qp_y_min = this.pp_y + (matrix.a - matrix.c) * dw_y + (matrix.b - matrix.d) * dh_y;
+      const cp_x_min = (qp_x_min + this.pp_x) / 2.0;
+      const cp_y_min = (qp_y_min + this.pp_y) / 2.0;
+      q_x = qp_x_min * cos_mt - qp_y_min * sin_mt - cos_mt * cp_x_min + sin_mt * cp_y_min + cp_x_min;
+      q_y = qp_x_min * sin_mt + qp_y_min * cos_mt - sin_mt * cp_x_min - cos_mt * cp_y_min + cp_y_min;
+      p_x = this.pp_x * cos_mt - this.pp_y * sin_mt - cos_mt * cp_x_min + sin_mt * cp_y_min + cp_x_min;
+      p_y = this.pp_x * sin_mt + this.pp_y * cos_mt - sin_mt * cp_x_min - cos_mt * cp_y_min + cp_y_min;
     }
-    getDelta($event) {
-        const currentX = unifyEvent($event).clientX;
-        const currentY = unifyEvent($event).clientY;
-        return {
-            x: this.dragBottom || this.dragTop ? 0 : currentX - this.startX,
-            y: this.dragStart || this.dragEnd ? 0 : currentY - this.startY,
-        };
+    else {
+      w = wtmp;
+      h = htmp;
     }
-    convertToUnit(value, ratio) {
-        if (this.unit === 'px') {
-            return value;
-        }
-        if (this.unit === 'viewport') {
-            const windowSize = ratio === 'width' ? window.innerWidth || screen.width : window.innerHeight || screen.height;
-            return (value * 100) / windowSize;
-        }
-        const parentSize = ratio === 'width' ? this.parentWidth : this.parentHeight;
-        return (value * 100) / parentSize;
+    const l = matrix.c * q_x + matrix.a * p_x;
+    const t = matrix.d * q_y + matrix.b * p_y;
+    this.left = this.convertToUnit(l, 'width');
+    this.width = this.convertToUnit(w, 'width');
+    this.top = this.convertToUnit(t, 'height');
+    this.height = this.convertToUnit(h, 'height');
+  }
+  rotateShape($event) {
+    if (!this.rotating) {
+      return false;
     }
-    convertParentUnit(value) {
-        return this.unit === 'percentage' ? 100 : value;
+    const currentX = unifyEvent($event).clientX;
+    const currentY = unifyEvent($event).clientY;
+    this.rotate = Math.atan2(currentX - this.centerX, currentY - this.centerY) * (180 / Math.PI) * -1 + 180;
+    return true;
+  }
+  getDelta($event) {
+    const currentX = unifyEvent($event).clientX;
+    const currentY = unifyEvent($event).clientY;
+    return {
+      x: this.dragBottom || this.dragTop ? 0 : currentX - this.startX,
+      y: this.dragStart || this.dragEnd ? 0 : currentY - this.startY,
+    };
+  }
+  convertToUnit(value, ratio) {
+    if (this.unit === 'px') {
+      return value;
     }
-    startMove() {
-        if (this.dragBottomEnd || this.dragTopEnd || this.dragBottomStart || this.dragTopStart) {
-            return;
-        }
-        if (this.dragTop || this.dragEnd || this.dragBottom || this.dragStart) {
-            return;
-        }
-        if (this.rotating) {
-            return;
-        }
-        this.moving = true;
+    if (this.unit === 'viewport') {
+      const windowSize = ratio === 'width' ? window.innerWidth || screen.width : window.innerHeight || screen.height;
+      return (value * 100) / windowSize;
     }
-    stopAndReset(emitUpdate) {
-        this.startX = null;
-        this.startY = null;
-        this.stopMove();
-        this.stopResize();
-        this.stopRotate();
-        if (emitUpdate && this.updated) {
-            this.drrDidChange.emit(this.el.shadowRoot.host);
-        }
-        this.updated = false;
+    const parentSize = ratio === 'width' ? this.parentWidth : this.parentHeight;
+    return (value * 100) / parentSize;
+  }
+  convertParentUnit(value) {
+    return this.unit === 'percentage' ? 100 : value;
+  }
+  startMove() {
+    if (this.dragBottomEnd || this.dragTopEnd || this.dragBottomStart || this.dragTopStart) {
+      return;
     }
-    stopMove() {
-        this.moving = false;
-        this.startTop = null;
-        this.startLeft = null;
+    if (this.dragTop || this.dragEnd || this.dragBottom || this.dragStart) {
+      return;
     }
-    stopRotate() {
-        this.rotating = false;
-        this.centerX = null;
-        this.centerY = null;
+    if (this.rotating) {
+      return;
     }
-    stopResize() {
-        this.dragBottomEnd = false;
-        this.dragTopEnd = false;
-        this.dragBottomStart = false;
-        this.dragTopStart = false;
-        this.dragTop = false;
-        this.dragEnd = false;
-        this.dragBottom = false;
-        this.dragStart = false;
-        this.startWidth = null;
-        this.startHeight = null;
+    this.moving = true;
+  }
+  stopAndReset(emitUpdate) {
+    this.startX = null;
+    this.startY = null;
+    this.stopMove();
+    this.stopResize();
+    this.stopRotate();
+    if (emitUpdate && this.updated) {
+      this.drrDidChange.emit(this.el.shadowRoot.host);
     }
-    resizeMatrix() {
-        const a = this.dragBottomEnd || this.dragTopEnd || this.dragEnd ? 1 : 0;
-        const b = this.dragBottomEnd || this.dragBottomStart || this.dragStart || this.dragBottom ? 1 : 0;
-        const c = a === 1 ? 0 : 1;
-        const d = b === 1 ? 0 : 1;
-        return {
-            a,
-            b,
-            c,
-            d,
-        };
+    this.updated = false;
+  }
+  stopMove() {
+    this.moving = false;
+    this.startTop = null;
+    this.startLeft = null;
+  }
+  stopRotate() {
+    this.rotating = false;
+    this.centerX = null;
+    this.centerY = null;
+  }
+  stopResize() {
+    this.dragBottomEnd = false;
+    this.dragTopEnd = false;
+    this.dragBottomStart = false;
+    this.dragTopStart = false;
+    this.dragTop = false;
+    this.dragEnd = false;
+    this.dragBottom = false;
+    this.dragStart = false;
+    this.startWidth = null;
+    this.startHeight = null;
+  }
+  resizeMatrix() {
+    const a = this.dragBottomEnd || this.dragTopEnd || this.dragEnd ? 1 : 0;
+    const b = this.dragBottomEnd || this.dragBottomStart || this.dragStart || this.dragBottom ? 1 : 0;
+    const c = a === 1 ? 0 : 1;
+    const d = b === 1 ? 0 : 1;
+    return {
+      a,
+      b,
+      c,
+      d,
+    };
+  }
+  // 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);
     }
-    // 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() {
+    const widthUnit = this.unit === 'percentage' ? '%' : this.unit === 'viewport' ? 'vw' : this.unit;
+    const heightUnit = this.unit === 'percentage' ? '%' : this.unit === 'viewport' ? 'vh' : this.unit;
+    return (h(Host, { style: {
+        '--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`,
+        '--pointer-events': `${this.editing ? 'all' : 'none'}`,
+        '--user-select': `${this.text ? 'text' : 'none'}`,
+      }, class: `${this.selected ? 'selected' : ''} ${this.text ? 'text' : ''} ${this.drag !== 'none' ? 'draggable' : ''} ${this.drag !== 'none' && this.moving ? 'drag' : ''}` }, this.renderEdgesAnchors(), this.renderBorderAnchors(), this.renderRotateAnchor(), h("slot", null)));
+  }
+  renderEdgesAnchors() {
+    if (!this.selected || !this.resize) {
+      return undefined;
     }
-    render() {
-        const widthUnit = this.unit === 'percentage' ? '%' : this.unit === 'viewport' ? 'vw' : this.unit;
-        const heightUnit = this.unit === 'percentage' ? '%' : this.unit === 'viewport' ? 'vh' : this.unit;
-        return (h(Host, { style: {
-                '--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`,
-                '--pointer-events': `${this.editing ? 'all' : 'none'}`,
-                '--user-select': `${this.text ? 'text' : 'none'}`,
-            }, class: `${this.selected ? 'selected' : ''} ${this.text ? 'text' : ''} ${this.drag !== 'none' ? 'draggable' : ''} ${this.drag !== 'none' && this.moving ? 'drag' : ''}` }, this.renderEdgesAnchors(), this.renderBorderAnchors(), this.renderRotateAnchor(), h("slot", null)));
+    return [
+      h("div", { class: "anchor top end", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragTopEnd = true), onTouchStart: () => (this.dragTopEnd = true) }, h("div", null)),
+      h("div", { class: "anchor bottom end", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragBottomEnd = true), onTouchStart: () => (this.dragBottomEnd = true) }, h("div", null)),
+      h("div", { class: "anchor bottom start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragBottomStart = true), onTouchStart: () => (this.dragBottomStart = true) }, h("div", null)),
+      h("div", { class: "anchor top start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragTopStart = true), onTouchStart: () => (this.dragTopStart = true) }, h("div", null)),
+    ];
+  }
+  renderBorderAnchors() {
+    if (!this.selected || !this.resize) {
+      return undefined;
     }
-    renderEdgesAnchors() {
-        if (!this.selected || !this.resize) {
-            return undefined;
-        }
-        return [
-            h("div", { class: "anchor top end", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragTopEnd = true), onTouchStart: () => (this.dragTopEnd = true) }, h("div", null)),
-            h("div", { class: "anchor bottom end", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragBottomEnd = true), onTouchStart: () => (this.dragBottomEnd = true) }, h("div", null)),
-            h("div", { class: "anchor bottom start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragBottomStart = true), onTouchStart: () => (this.dragBottomStart = true) }, h("div", null)),
-            h("div", { class: "anchor top start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragTopStart = true), onTouchStart: () => (this.dragTopStart = true) }, h("div", null)),
-        ];
+    return [
+      h("div", { class: "border top", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragTop = true), onTouchStart: () => (this.dragTop = true) }),
+      h("div", { class: "border end", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragEnd = true), onTouchStart: () => (this.dragEnd = true) }),
+      h("div", { class: "border bottom", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragBottom = true), onTouchStart: () => (this.dragBottom = true) }),
+      h("div", { class: "border start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragStart = true), onTouchStart: () => (this.dragStart = true) }),
+    ];
+  }
+  renderRotateAnchor() {
+    if (!this.selected || !this.rotation) {
+      return undefined;
     }
-    renderBorderAnchors() {
-        if (!this.selected || !this.resize) {
-            return undefined;
-        }
-        return [
-            h("div", { class: "border top", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragTop = true), onTouchStart: () => (this.dragTop = true) }),
-            h("div", { class: "border end", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragEnd = true), onTouchStart: () => (this.dragEnd = true) }),
-            h("div", { class: "border bottom", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragBottom = true), onTouchStart: () => (this.dragBottom = true) }),
-            h("div", { class: "border start", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.dragStart = true), onTouchStart: () => (this.dragStart = true) }),
-        ];
-    }
-    renderRotateAnchor() {
-        if (!this.selected || !this.rotation) {
-            return undefined;
-        }
-        return (h("div", { class: "rotate" }, h("div", { class: "action", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.rotating = true), onTouchStart: () => (this.rotating = true) }, h("div", null)), h("div", { class: "presentation" })));
-    }
-    get el() { return getElement(this); }
+    return (h("div", { class: "rotate" }, h("div", { class: "action", onClick: ($event) => $event.stopPropagation(), onMouseDown: () => (this.rotating = true), onTouchStart: () => (this.rotating = true) }, h("div", null)), h("div", { class: "presentation" })));
+  }
+  get el() { return getElement(this); }
 };
@@ -456,0 +456,0 @@ DeckdeckgoDragResizeRotate.style = deckdeckgoDrrCss;

dist/esm/polyfills/css-shim.js

@@ -1,1 +0,1 @@
-var StyleNode=function(){this.start=0,this.end=0,this.previous=null,this.parent=null,this.rules=null,this.parsedCssText="",this.cssText="",this.atRule=!1,this.type=0,this.keyframesName="",this.selector="",this.parsedSelector=""};function parse(e){return parseCss(lex(e=clean(e)),e)}function clean(e){return e.replace(RX.comments,"").replace(RX.port,"")}function lex(e){var t=new StyleNode;t.start=0,t.end=e.length;for(var r=t,n=0,s=e.length;n<s;n++)if(e[n]===OPEN_BRACE){r.rules||(r.rules=[]);var o=r,a=o.rules[o.rules.length-1]||null;(r=new StyleNode).start=n+1,r.parent=o,r.previous=a,o.rules.push(r)}else e[n]===CLOSE_BRACE&&(r.end=n+1,r=r.parent||t);return t}function parseCss(e,t){var r=t.substring(e.start,e.end-1);if(e.parsedCssText=e.cssText=r.trim(),e.parent){var n=e.previous?e.previous.end:e.parent.start;r=(r=(r=_expandUnicodeEscapes(r=t.substring(n,e.start-1))).replace(RX.multipleSpaces," ")).substring(r.lastIndexOf(";")+1);var s=e.parsedSelector=e.selector=r.trim();e.atRule=0===s.indexOf(AT_START),e.atRule?0===s.indexOf(MEDIA_START)?e.type=types.MEDIA_RULE:s.match(RX.keyframesRule)&&(e.type=types.KEYFRAMES_RULE,e.keyframesName=e.selector.split(RX.multipleSpaces).pop()):0===s.indexOf(VAR_START)?e.type=types.MIXIN_RULE:e.type=types.STYLE_RULE}var o=e.rules;if(o)for(var a=0,i=o.length,l=void 0;a<i&&(l=o[a]);a++)parseCss(l,t);return e}function _expandUnicodeEscapes(e){return e.replace(/\\([0-9a-f]{1,6})\s/gi,(function(){for(var e=arguments[1],t=6-e.length;t--;)e="0"+e;return"\\"+e}))}var types={STYLE_RULE:1,KEYFRAMES_RULE:7,MEDIA_RULE:4,MIXIN_RULE:1e3},OPEN_BRACE="{",CLOSE_BRACE="}",RX={comments:/\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,port:/@import[^;]*;/gim,customProp:/(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?(?:[;\n]|$)/gim,mixinProp:/(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?{[^}]*?}(?:[;\n]|$)?/gim,mixinApply:/@apply\s*\(?[^);]*\)?\s*(?:[;\n]|$)?/gim,varApply:/[^;:]*?:[^;]*?var\([^;]*\)(?:[;\n]|$)?/gim,keyframesRule:/^@[^\s]*keyframes/,multipleSpaces:/\s+/g},VAR_START="--",MEDIA_START="@media",AT_START="@";function findRegex(e,t,r){e.lastIndex=0;var n=t.substring(r).match(e);if(n){var s=r+n.index;return{start:s,end:s+n[0].length}}return null}var VAR_USAGE_START=/\bvar\(/,VAR_ASSIGN_START=/\B--[\w-]+\s*:/,COMMENTS=/\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,TRAILING_LINES=/^[\t ]+\n/gm;function resolveVar(e,t,r){return e[t]?e[t]:r?executeTemplate(r,e):""}function findVarEndIndex(e,t){for(var r=0,n=t;n<e.length;n++){var s=e[n];if("("===s)r++;else if(")"===s&&--r<=0)return n+1}return n}function parseVar(e,t){var r=findRegex(VAR_USAGE_START,e,t);if(!r)return null;var n=findVarEndIndex(e,r.start),s=e.substring(r.end,n-1).split(","),o=s[0],a=s.slice(1);return{start:r.start,end:n,propName:o.trim(),fallback:a.length>0?a.join(",").trim():void 0}}function compileVar(e,t,r){var n=parseVar(e,r);if(!n)return t.push(e.substring(r,e.length)),e.length;var s=n.propName,o=null!=n.fallback?compileTemplate(n.fallback):void 0;return t.push(e.substring(r,n.start),(function(e){return resolveVar(e,s,o)})),n.end}function executeTemplate(e,t){for(var r="",n=0;n<e.length;n++){var s=e[n];r+="string"==typeof s?s:s(t)}return r}function findEndValue(e,t){for(var r=!1,n=!1,s=t;s<e.length;s++){var o=e[s];if(r)n&&'"'===o&&(r=!1),n||"'"!==o||(r=!1);else if('"'===o)r=!0,n=!0;else if("'"===o)r=!0,n=!1;else{if(";"===o)return s+1;if("}"===o)return s}}return s}function removeCustomAssigns(e){for(var t="",r=0;;){var n=findRegex(VAR_ASSIGN_START,e,r),s=n?n.start:e.length;if(t+=e.substring(r,s),!n)break;r=findEndValue(e,s)}return t}function compileTemplate(e){var t=0;e=removeCustomAssigns(e=e.replace(COMMENTS,"")).replace(TRAILING_LINES,"");for(var r=[];t<e.length;)t=compileVar(e,r,t);return r}function resolveValues(e){var t={};e.forEach((function(e){e.declarations.forEach((function(e){t[e.prop]=e.value}))}));for(var r={},n=Object.entries(t),s=function(e){var t=!1;if(n.forEach((function(e){var n=e[0],s=executeTemplate(e[1],r);s!==r[n]&&(r[n]=s,t=!0)})),!t)return"break"},o=0;o<10;o++){if("break"===s())break}return r}function getSelectors(e,t){if(void 0===t&&(t=0),!e.rules)return[];var r=[];return e.rules.filter((function(e){return e.type===types.STYLE_RULE})).forEach((function(e){var n=getDeclarations(e.cssText);n.length>0&&e.parsedSelector.split(",").forEach((function(e){e=e.trim(),r.push({selector:e,declarations:n,specificity:computeSpecificity(),nu:t})})),t++})),r}function computeSpecificity(e){return 1}var IMPORTANT="!important",FIND_DECLARATIONS=/(?:^|[;\s{]\s*)(--[\w-]*?)\s*:\s*(?:((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^)]*?\)|[^};{])+)|\{([^}]*)\}(?:(?=[;\s}])|$))/gm;function getDeclarations(e){for(var t,r=[];t=FIND_DECLARATIONS.exec(e.trim());){var n=normalizeValue(t[2]),s=n.value,o=n.important;r.push({prop:t[1].trim(),value:compileTemplate(s),important:o})}return r}function normalizeValue(e){var t=(e=e.replace(/\s+/gim," ").trim()).endsWith(IMPORTANT);return t&&(e=e.substr(0,e.length-IMPORTANT.length).trim()),{value:e,important:t}}function getActiveSelectors(e,t,r){var n=[],s=getScopesForElement(t,e);return r.forEach((function(e){return n.push(e)})),s.forEach((function(e){return n.push(e)})),sortSelectors(getSelectorsForScopes(n).filter((function(t){return matches(e,t.selector)})))}function getScopesForElement(e,t){for(var r=[];t;){var n=e.get(t);n&&r.push(n),t=t.parentElement}return r}function getSelectorsForScopes(e){var t=[];return e.forEach((function(e){t.push.apply(t,e.selectors)})),t}function sortSelectors(e){return e.sort((function(e,t){return e.specificity===t.specificity?e.nu-t.nu:e.specificity-t.specificity})),e}function matches(e,t){return":root"===t||"html"===t||e.matches(t)}function parseCSS(e){var t=parse(e),r=compileTemplate(e);return{original:e,template:r,selectors:getSelectors(t),usesCssVars:r.length>1}}function addGlobalStyle(e,t){if(e.some((function(e){return e.styleEl===t})))return!1;var r=parseCSS(t.textContent);return r.styleEl=t,e.push(r),!0}function updateGlobalScopes(e){var t=resolveValues(getSelectorsForScopes(e));e.forEach((function(e){e.usesCssVars&&(e.styleEl.textContent=executeTemplate(e.template,t))}))}function reScope(e,t){var r=e.template.map((function(r){return"string"==typeof r?replaceScope(r,e.scopeId,t):r})),n=e.selectors.map((function(r){return Object.assign(Object.assign({},r),{selector:replaceScope(r.selector,e.scopeId,t)})}));return Object.assign(Object.assign({},e),{template:r,selectors:n,scopeId:t})}function replaceScope(e,t,r){return e=replaceAll(e,"\\."+t,"."+r)}function replaceAll(e,t,r){return e.replace(new RegExp(t,"g"),r)}function loadDocument(e,t){return loadDocumentStyles(e,t),loadDocumentLinks(e,t).then((function(){updateGlobalScopes(t)}))}function startWatcher(e,t){"undefined"!=typeof MutationObserver&&new MutationObserver((function(){loadDocumentStyles(e,t)&&updateGlobalScopes(t)})).observe(document.head,{childList:!0})}function loadDocumentLinks(e,t){for(var r=[],n=e.querySelectorAll('link[rel="stylesheet"][href]:not([data-no-shim])'),s=0;s<n.length;s++)r.push(addGlobalLink(e,t,n[s]));return Promise.all(r)}function loadDocumentStyles(e,t){return Array.from(e.querySelectorAll("style:not([data-styles]):not([data-no-shim])")).map((function(e){return addGlobalStyle(t,e)})).some(Boolean)}function addGlobalLink(e,t,r){var n=r.href;return fetch(n).then((function(e){return e.text()})).then((function(s){if(hasCssVariables(s)&&r.parentNode){hasRelativeUrls(s)&&(s=fixRelativeUrls(s,n));var o=e.createElement("style");o.setAttribute("data-styles",""),o.textContent=s,addGlobalStyle(t,o),r.parentNode.insertBefore(o,r),r.remove()}})).catch((function(e){console.error(e)}))}var CSS_VARIABLE_REGEXP=/[\s;{]--[-a-zA-Z0-9]+\s*:/m;function hasCssVariables(e){return e.indexOf("var(")>-1||CSS_VARIABLE_REGEXP.test(e)}var CSS_URL_REGEXP=/url[\s]*\([\s]*['"]?(?!(?:https?|data)\:|\/)([^\'\"\)]*)[\s]*['"]?\)[\s]*/gim;function hasRelativeUrls(e){return CSS_URL_REGEXP.lastIndex=0,CSS_URL_REGEXP.test(e)}function fixRelativeUrls(e,t){var r=t.replace(/[^/]*$/,"");return e.replace(CSS_URL_REGEXP,(function(e,t){var n=r+t;return e.replace(t,n)}))}var CustomStyle=function(){function e(e,t){this.win=e,this.doc=t,this.count=0,this.hostStyleMap=new WeakMap,this.hostScopeMap=new WeakMap,this.globalScopes=[],this.scopesMap=new Map,this.didInit=!1}return e.prototype.i=function(){var e=this;return this.didInit||!this.win.requestAnimationFrame?Promise.resolve():(this.didInit=!0,new Promise((function(t){e.win.requestAnimationFrame((function(){startWatcher(e.doc,e.globalScopes),loadDocument(e.doc,e.globalScopes).then((function(){return t()}))}))})))},e.prototype.addLink=function(e){var t=this;return addGlobalLink(this.doc,this.globalScopes,e).then((function(){t.updateGlobal()}))},e.prototype.addGlobalStyle=function(e){addGlobalStyle(this.globalScopes,e)&&this.updateGlobal()},e.prototype.createHostStyle=function(e,t,r,n){if(this.hostScopeMap.has(e))throw new Error("host style already created");var s=this.registerHostTemplate(r,t,n),o=this.doc.createElement("style");return o.setAttribute("data-no-shim",""),s.usesCssVars?n?(o["s-sc"]=t=s.scopeId+"-"+this.count,o.textContent="/*needs update*/",this.hostStyleMap.set(e,o),this.hostScopeMap.set(e,reScope(s,t)),this.count++):(s.styleEl=o,s.usesCssVars||(o.textContent=executeTemplate(s.template,{})),this.globalScopes.push(s),this.updateGlobal(),this.hostScopeMap.set(e,s)):o.textContent=r,o},e.prototype.removeHost=function(e){var t=this.hostStyleMap.get(e);t&&t.remove(),this.hostStyleMap.delete(e),this.hostScopeMap.delete(e)},e.prototype.updateHost=function(e){var t=this.hostScopeMap.get(e);if(t&&t.usesCssVars&&t.isScoped){var r=this.hostStyleMap.get(e);if(r){var n=resolveValues(getActiveSelectors(e,this.hostScopeMap,this.globalScopes));r.textContent=executeTemplate(t.template,n)}}},e.prototype.updateGlobal=function(){updateGlobalScopes(this.globalScopes)},e.prototype.registerHostTemplate=function(e,t,r){var n=this.scopesMap.get(t);return n||((n=parseCSS(e)).scopeId=t,n.isScoped=r,this.scopesMap.set(t,n)),n},e}();!function(e){!e||e.__cssshim||e.CSS&&e.CSS.supports&&e.CSS.supports("color","var(--c)")||(e.__cssshim=new CustomStyle(e,e.document))}("undefined"!=typeof window&&window);
+var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var s in t=arguments[r])Object.prototype.hasOwnProperty.call(t,s)&&(e[s]=t[s]);return e}).apply(this,arguments)},StyleNode=function(){this.start=0,this.end=0,this.previous=null,this.parent=null,this.rules=null,this.parsedCssText="",this.cssText="",this.atRule=!1,this.type=0,this.keyframesName="",this.selector="",this.parsedSelector=""};function parse(e){return parseCss(lex(e=clean(e)),e)}function clean(e){return e.replace(RX.comments,"").replace(RX.port,"")}function lex(e){var t=new StyleNode;t.start=0,t.end=e.length;for(var r=t,n=0,s=e.length;n<s;n++)if(e[n]===OPEN_BRACE){r.rules||(r.rules=[]);var o=r,a=o.rules[o.rules.length-1]||null;(r=new StyleNode).start=n+1,r.parent=o,r.previous=a,o.rules.push(r)}else e[n]===CLOSE_BRACE&&(r.end=n+1,r=r.parent||t);return t}function parseCss(e,t){var r=t.substring(e.start,e.end-1);if(e.parsedCssText=e.cssText=r.trim(),e.parent){var n=e.previous?e.previous.end:e.parent.start;r=(r=(r=_expandUnicodeEscapes(r=t.substring(n,e.start-1))).replace(RX.multipleSpaces," ")).substring(r.lastIndexOf(";")+1);var s=e.parsedSelector=e.selector=r.trim();e.atRule=0===s.indexOf(AT_START),e.atRule?0===s.indexOf(MEDIA_START)?e.type=types.MEDIA_RULE:s.match(RX.keyframesRule)&&(e.type=types.KEYFRAMES_RULE,e.keyframesName=e.selector.split(RX.multipleSpaces).pop()):0===s.indexOf(VAR_START)?e.type=types.MIXIN_RULE:e.type=types.STYLE_RULE}var o=e.rules;if(o)for(var a=0,i=o.length,l=void 0;a<i&&(l=o[a]);a++)parseCss(l,t);return e}function _expandUnicodeEscapes(e){return e.replace(/\\([0-9a-f]{1,6})\s/gi,(function(){for(var e=arguments[1],t=6-e.length;t--;)e="0"+e;return"\\"+e}))}var types={STYLE_RULE:1,KEYFRAMES_RULE:7,MEDIA_RULE:4,MIXIN_RULE:1e3},OPEN_BRACE="{",CLOSE_BRACE="}",RX={comments:/\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,port:/@import[^;]*;/gim,customProp:/(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?(?:[;\n]|$)/gim,mixinProp:/(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?{[^}]*?}(?:[;\n]|$)?/gim,mixinApply:/@apply\s*\(?[^);]*\)?\s*(?:[;\n]|$)?/gim,varApply:/[^;:]*?:[^;]*?var\([^;]*\)(?:[;\n]|$)?/gim,keyframesRule:/^@[^\s]*keyframes/,multipleSpaces:/\s+/g},VAR_START="--",MEDIA_START="@media",AT_START="@";function findRegex(e,t,r){e.lastIndex=0;var n=t.substring(r).match(e);if(n){var s=r+n.index;return{start:s,end:s+n[0].length}}return null}var VAR_USAGE_START=/\bvar\(/,VAR_ASSIGN_START=/\B--[\w-]+\s*:/,COMMENTS=/\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,TRAILING_LINES=/^[\t ]+\n/gm;function resolveVar(e,t,r){return e[t]?e[t]:r?executeTemplate(r,e):""}function findVarEndIndex(e,t){for(var r=0,n=t;n<e.length;n++){var s=e[n];if("("===s)r++;else if(")"===s&&--r<=0)return n+1}return n}function parseVar(e,t){var r=findRegex(VAR_USAGE_START,e,t);if(!r)return null;var n=findVarEndIndex(e,r.start),s=e.substring(r.end,n-1).split(","),o=s[0],a=s.slice(1);return{start:r.start,end:n,propName:o.trim(),fallback:a.length>0?a.join(",").trim():void 0}}function compileVar(e,t,r){var n=parseVar(e,r);if(!n)return t.push(e.substring(r,e.length)),e.length;var s=n.propName,o=null!=n.fallback?compileTemplate(n.fallback):void 0;return t.push(e.substring(r,n.start),(function(e){return resolveVar(e,s,o)})),n.end}function executeTemplate(e,t){for(var r="",n=0;n<e.length;n++){var s=e[n];r+="string"==typeof s?s:s(t)}return r}function findEndValue(e,t){for(var r=!1,n=!1,s=t;s<e.length;s++){var o=e[s];if(r)n&&'"'===o&&(r=!1),n||"'"!==o||(r=!1);else if('"'===o)r=!0,n=!0;else if("'"===o)r=!0,n=!1;else{if(";"===o)return s+1;if("}"===o)return s}}return s}function removeCustomAssigns(e){for(var t="",r=0;;){var n=findRegex(VAR_ASSIGN_START,e,r),s=n?n.start:e.length;if(t+=e.substring(r,s),!n)break;r=findEndValue(e,s)}return t}function compileTemplate(e){var t=0;e=removeCustomAssigns(e=e.replace(COMMENTS,"")).replace(TRAILING_LINES,"");for(var r=[];t<e.length;)t=compileVar(e,r,t);return r}function resolveValues(e){var t={};e.forEach((function(e){e.declarations.forEach((function(e){t[e.prop]=e.value}))}));for(var r={},n=Object.entries(t),s=function(e){var t=!1;if(n.forEach((function(e){var n=e[0],s=executeTemplate(e[1],r);s!==r[n]&&(r[n]=s,t=!0)})),!t)return"break"},o=0;o<10;o++){if("break"===s())break}return r}function getSelectors(e,t){if(void 0===t&&(t=0),!e.rules)return[];var r=[];return e.rules.filter((function(e){return e.type===types.STYLE_RULE})).forEach((function(e){var n=getDeclarations(e.cssText);n.length>0&&e.parsedSelector.split(",").forEach((function(e){e=e.trim(),r.push({selector:e,declarations:n,specificity:computeSpecificity(),nu:t})})),t++})),r}function computeSpecificity(e){return 1}var IMPORTANT="!important",FIND_DECLARATIONS=/(?:^|[;\s{]\s*)(--[\w-]*?)\s*:\s*(?:((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^)]*?\)|[^};{])+)|\{([^}]*)\}(?:(?=[;\s}])|$))/gm;function getDeclarations(e){for(var t,r=[];t=FIND_DECLARATIONS.exec(e.trim());){var n=normalizeValue(t[2]),s=n.value,o=n.important;r.push({prop:t[1].trim(),value:compileTemplate(s),important:o})}return r}function normalizeValue(e){var t=(e=e.replace(/\s+/gim," ").trim()).endsWith(IMPORTANT);return t&&(e=e.substr(0,e.length-IMPORTANT.length).trim()),{value:e,important:t}}function getActiveSelectors(e,t,r){var n=[],s=getScopesForElement(t,e);return r.forEach((function(e){return n.push(e)})),s.forEach((function(e){return n.push(e)})),sortSelectors(getSelectorsForScopes(n).filter((function(t){return matches(e,t.selector)})))}function getScopesForElement(e,t){for(var r=[];t;){var n=e.get(t);n&&r.push(n),t=t.parentElement}return r}function getSelectorsForScopes(e){var t=[];return e.forEach((function(e){t.push.apply(t,e.selectors)})),t}function sortSelectors(e){return e.sort((function(e,t){return e.specificity===t.specificity?e.nu-t.nu:e.specificity-t.specificity})),e}function matches(e,t){return":root"===t||"html"===t||e.matches(t)}function parseCSS(e){var t=parse(e),r=compileTemplate(e);return{original:e,template:r,selectors:getSelectors(t),usesCssVars:r.length>1}}function addGlobalStyle(e,t){if(e.some((function(e){return e.styleEl===t})))return!1;var r=parseCSS(t.textContent);return r.styleEl=t,e.push(r),!0}function updateGlobalScopes(e){var t=resolveValues(getSelectorsForScopes(e));e.forEach((function(e){e.usesCssVars&&(e.styleEl.textContent=executeTemplate(e.template,t))}))}function reScope(e,t){var r=e.template.map((function(r){return"string"==typeof r?replaceScope(r,e.scopeId,t):r})),n=e.selectors.map((function(r){return __assign(__assign({},r),{selector:replaceScope(r.selector,e.scopeId,t)})}));return __assign(__assign({},e),{template:r,selectors:n,scopeId:t})}function replaceScope(e,t,r){return e=replaceAll(e,"\\."+t,"."+r)}function replaceAll(e,t,r){return e.replace(new RegExp(t,"g"),r)}function loadDocument(e,t){return loadDocumentStyles(e,t),loadDocumentLinks(e,t).then((function(){updateGlobalScopes(t)}))}function startWatcher(e,t){"undefined"!=typeof MutationObserver&&new MutationObserver((function(){loadDocumentStyles(e,t)&&updateGlobalScopes(t)})).observe(document.head,{childList:!0})}function loadDocumentLinks(e,t){for(var r=[],n=e.querySelectorAll('link[rel="stylesheet"][href]:not([data-no-shim])'),s=0;s<n.length;s++)r.push(addGlobalLink(e,t,n[s]));return Promise.all(r)}function loadDocumentStyles(e,t){return Array.from(e.querySelectorAll("style:not([data-styles]):not([data-no-shim])")).map((function(e){return addGlobalStyle(t,e)})).some(Boolean)}function addGlobalLink(e,t,r){var n=r.href;return fetch(n).then((function(e){return e.text()})).then((function(s){if(hasCssVariables(s)&&r.parentNode){hasRelativeUrls(s)&&(s=fixRelativeUrls(s,n));var o=e.createElement("style");o.setAttribute("data-styles",""),o.textContent=s,addGlobalStyle(t,o),r.parentNode.insertBefore(o,r),r.remove()}})).catch((function(e){console.error(e)}))}var CSS_VARIABLE_REGEXP=/[\s;{]--[-a-zA-Z0-9]+\s*:/m;function hasCssVariables(e){return e.indexOf("var(")>-1||CSS_VARIABLE_REGEXP.test(e)}var CSS_URL_REGEXP=/url[\s]*\([\s]*['"]?(?!(?:https?|data)\:|\/)([^\'\"\)]*)[\s]*['"]?\)[\s]*/gim;function hasRelativeUrls(e){return CSS_URL_REGEXP.lastIndex=0,CSS_URL_REGEXP.test(e)}function fixRelativeUrls(e,t){var r=t.replace(/[^/]*$/,"");return e.replace(CSS_URL_REGEXP,(function(e,t){var n=r+t;return e.replace(t,n)}))}var CustomStyle=function(){function e(e,t){this.win=e,this.doc=t,this.count=0,this.hostStyleMap=new WeakMap,this.hostScopeMap=new WeakMap,this.globalScopes=[],this.scopesMap=new Map,this.didInit=!1}return e.prototype.i=function(){var e=this;return this.didInit||!this.win.requestAnimationFrame?Promise.resolve():(this.didInit=!0,new Promise((function(t){e.win.requestAnimationFrame((function(){startWatcher(e.doc,e.globalScopes),loadDocument(e.doc,e.globalScopes).then((function(){return t()}))}))})))},e.prototype.addLink=function(e){var t=this;return addGlobalLink(this.doc,this.globalScopes,e).then((function(){t.updateGlobal()}))},e.prototype.addGlobalStyle=function(e){addGlobalStyle(this.globalScopes,e)&&this.updateGlobal()},e.prototype.createHostStyle=function(e,t,r,n){if(this.hostScopeMap.has(e))throw new Error("host style already created");var s=this.registerHostTemplate(r,t,n),o=this.doc.createElement("style");return o.setAttribute("data-no-shim",""),s.usesCssVars?n?(o["s-sc"]=t=s.scopeId+"-"+this.count,o.textContent="/*needs update*/",this.hostStyleMap.set(e,o),this.hostScopeMap.set(e,reScope(s,t)),this.count++):(s.styleEl=o,s.usesCssVars||(o.textContent=executeTemplate(s.template,{})),this.globalScopes.push(s),this.updateGlobal(),this.hostScopeMap.set(e,s)):o.textContent=r,o},e.prototype.removeHost=function(e){var t=this.hostStyleMap.get(e);t&&t.remove(),this.hostStyleMap.delete(e),this.hostScopeMap.delete(e)},e.prototype.updateHost=function(e){var t=this.hostScopeMap.get(e);if(t&&t.usesCssVars&&t.isScoped){var r=this.hostStyleMap.get(e);if(r){var n=resolveValues(getActiveSelectors(e,this.hostScopeMap,this.globalScopes));r.textContent=executeTemplate(t.template,n)}}},e.prototype.updateGlobal=function(){updateGlobalScopes(this.globalScopes)},e.prototype.registerHostTemplate=function(e,t,r){var n=this.scopesMap.get(t);return n||((n=parseCSS(e)).scopeId=t,n.isScoped=r,this.scopesMap.set(t,n)),n},e}();!function(e){!e||e.__cssshim||e.CSS&&e.CSS.supports&&e.CSS.supports("color","var(--c)")||(e.__cssshim=new CustomStyle(e,e.document))}("undefined"!=typeof window&&window);

dist/index.js

@@ -1,1 +0,1 @@
-module.exports = require('./cjs/index.cjs.js');
+export * from './esm/index.js';

dist/loader/package.json

 {
   "name": "deckdeckgo-drag-resize-rotate-loader",
   "typings": "./index.d.ts",
-  "module": "./index.mjs",
+  "module": "./index.js",
   "main": "./index.cjs.js",
-  "node:main": "./node-main.js",
-  "jsnext:main": "./index.es2017.mjs",
-  "es2015": "./index.es2017.mjs",
-  "es2017": "./index.es2017.mjs",
+  "jsnext:main": "./index.es2017.js",
+  "es2015": "./index.es2017.js",
+  "es2017": "./index.es2017.js",
   "unpkg": "./cdn.js"
 }

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

 export declare class DeckdeckgoDragResizeRotate {
-    el: HTMLElement;
-    unit: 'percentage' | 'viewport' | 'px';
-    resize: boolean;
-    drag: 'x-axis' | 'y-axis' | 'all' | 'none';
-    rotation: boolean;
-    text: boolean;
-    private width;
-    private height;
-    private minWidth;
-    private minHeight;
-    private top;
-    private left;
-    private rotate;
-    private selected;
-    private updated;
-    private moving;
-    private drrSelect;
-    private drrDidChange;
-    private startX;
-    private startY;
-    private startWidth;
-    private startHeight;
-    private startTop;
-    private startLeft;
-    private dragTopEnd;
-    private dragBottomEnd;
-    private dragBottomStart;
-    private dragTopStart;
-    private dragTop;
-    private dragEnd;
-    private dragBottom;
-    private dragStart;
-    private parentWidth;
-    private parentHeight;
-    private rotating;
-    private centerX;
-    private centerY;
-    private qp0_x;
-    private qp0_y;
-    private pp_x;
-    private pp_y;
-    private editing;
-    componentWillLoad(): Promise<void>;
-    componentDidLoad(): Promise<void>;
-    componentWillUnload(): Promise<void>;
-    private attachEventListeners;
-    private detachEventListeners;
-    private init;
-    private displaySlot;
-    private start;
-    private isTargetEvent;
-    private initTextEditable;
-    private resetTextEditable;
-    private initStartPositions;
-    private initStartPositionsMove;
-    private initStartPositionsRotation;
-    private initStartPositionsResize;
-    private initParentSize;
-    private transform;
-    private move;
-    private size;
-    private deltaMove;
-    private deltaResize;
-    private rotateShape;
-    private getDelta;
-    private convertToUnit;
-    private convertParentUnit;
-    private startMove;
-    private stop;
-    private stopAndReset;
-    private stopMove;
-    private stopRotate;
-    private stopResize;
-    private resizeMatrix;
-    private dbclick;
-    private moveCursorToEnd;
-    render(): any;
-    private renderEdgesAnchors;
-    private renderBorderAnchors;
-    private renderRotateAnchor;
+  el: HTMLElement;
+  unit: 'percentage' | 'viewport' | 'px';
+  resize: boolean;
+  drag: 'x-axis' | 'y-axis' | 'all' | 'none';
+  rotation: boolean;
+  text: boolean;
+  private width;
+  private height;
+  private minWidth;
+  private minHeight;
+  private top;
+  private left;
+  private rotate;
+  private selected;
+  private updated;
+  private moving;
+  private drrSelect;
+  private drrDidChange;
+  private startX;
+  private startY;
+  private startWidth;
+  private startHeight;
+  private startTop;
+  private startLeft;
+  private dragTopEnd;
+  private dragBottomEnd;
+  private dragBottomStart;
+  private dragTopStart;
+  private dragTop;
+  private dragEnd;
+  private dragBottom;
+  private dragStart;
+  private parentWidth;
+  private parentHeight;
+  private rotating;
+  private centerX;
+  private centerY;
+  private qp0_x;
+  private qp0_y;
+  private pp_x;
+  private pp_y;
+  private editing;
+  componentWillLoad(): Promise<void>;
+  componentDidLoad(): Promise<void>;
+  componentWillUnload(): Promise<void>;
+  private attachEventListeners;
+  private detachEventListeners;
+  private init;
+  private displaySlot;
+  private start;
+  private isTargetEvent;
+  private initTextEditable;
+  private resetTextEditable;
+  private initStartPositions;
+  private initStartPositionsMove;
+  private initStartPositionsRotation;
+  private initStartPositionsResize;
+  private initParentSize;
+  private transform;
+  private move;
+  private size;
+  private deltaMove;
+  private deltaResize;
+  private rotateShape;
+  private getDelta;
+  private convertToUnit;
+  private convertParentUnit;
+  private startMove;
+  private stop;
+  private stopAndReset;
+  private stopMove;
+  private stopRotate;
+  private stopResize;
+  private resizeMatrix;
+  private dbclick;
+  private moveCursorToEnd;
+  render(): any;
+  private renderEdgesAnchors;
+  private renderBorderAnchors;
+  private renderRotateAnchor;
 }

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

@@ -46,6 +46,2 @@ declare type CustomMethodDecorator<T> = (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
     assetsDirs?: string[];
-    /**
-     * @deprecated Use `assetsDirs` instead
-     */
-    assetsDir?: string;
 }
@@ -85,10 +81,2 @@ export interface ShadowRootOptions {
     reflect?: boolean;
-    /** @deprecated: "attr" has been deprecated, please use "attribute" instead. */
-    attr?: string;
-    /** @deprecated "context" has been deprecated. */
-    context?: string;
-    /** @deprecated "connect" has been deprecated, please use ES modules and/or dynamic imports instead. */
-    connect?: string;
-    /** @deprecated "reflectToAttr" has been deprecated, please use "reflect" instead. */
-    reflectToAttr?: boolean;
 }
@@ -150,3 +138,3 @@ export interface MethodDecorator {
 }
-export declare type ListenTargetOptions = 'parent' | 'body' | 'document' | 'window';
+export declare type ListenTargetOptions = 'body' | 'document' | 'window';
 export interface StateDecorator {
@@ -236,6 +224,21 @@ (): PropertyDecorator;
 /**
- * getAssetPath
+ * Get the base path to where the assets can be found. Use `setAssetPath(path)`
+ * if the path needs to be customized.
  */
 export declare function getAssetPath(path: string): string;
 /**
+ * Used to manually set the base path where assets can be found. For lazy-loaded
+ * builds the asset path is automatically set and assets copied to the correct
+ * build directory. However, for custom elements builds, the `setAssetPath(path)` could
+ * be used to customize the asset path depending on how the script file is consumed.
+ * If the script is used as "module", it's recommended to use "import.meta.url", such
+ * as `setAssetPath(import.meta.url)`. Other options include
+ * `setAssetPath(document.currentScript.src)`, or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as `setAssetPath(process.env.ASSET_PATH)`.
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bunding, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare function setAssetPath(path: string): string;
+/**
  * getElement
@@ -256,4 +259,2 @@ */
     componentOnReady(): Promise<this>;
-    /** @deprecated */
-    forceUpdate(): void;
 }
@@ -324,9 +325,2 @@ /**
 }
-export interface ComponentDidUnload {
-    /**
-     * The component did unload and the element
-     * will be destroyed.
-     */
-    componentDidUnload(): void;
-}
 export interface ComponentInterface {
@@ -436,2 +430,6 @@ connectedCallback?(): void;
 /**
+ * Fragment
+ */
+export declare const Fragment: FunctionalComponent<{}>;
+/**
  * The "h" namespace is used to import JSX types for elements and attributes.
@@ -1534,1 +1532,12 @@ * It is imported in order to avoid conflicting global JSX issues.
 }
+export interface CustomElementsDefineOptions {
+    exclude?: string[];
+    resourcesUrl?: string;
+    syncQueue?: boolean;
+    transformTagName?: (tagName: string) => string;
+    jmp?: (c: Function) => any;
+    raf?: (c: FrameRequestCallback) => number;
+    ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+    rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+    ce?: (eventName: string, opts?: any) => CustomEvent;
+}

package.json

 {
   "name": "@deckdeckgo/drag-resize-rotate",
-  "version": "1.1.3",
+  "version": "2.0.0",
   "description": "A Web Component to drag, resize and rotate any element",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "es2015": "dist/esm/index.mjs",
-  "es2017": "dist/esm/index.mjs",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "es2015": "dist/esm/index.js",
+  "es2017": "dist/esm/index.js",
+  "jsnext:main": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -26,16 +27,16 @@ "collection": "dist/collection/collection-manifest.json",
   "devDependencies": {
-    "@stencil/core": "^1.16.4",
+    "@stencil/core": "^2.0.2",
     "@stencil/postcss": "^1.0.1",
     "@stencil/sass": "^1.3.2",
     "@stencil/utils": "0.0.5",
-    "@types/jest": "26.0.5",
+    "@types/jest": "26.0.13",
     "@types/prismjs": "^1.16.1",
     "@types/puppeteer": "3.0.1",
-    "autoprefixer": "^9.8.5",
+    "autoprefixer": "^9.8.6",
     "husky": "^4.2.5",
-    "jest": "26.1.0",
-    "jest-cli": "26.1.0",
-    "prettier": "2.0.5",
-    "pretty-quick": "^2.0.1",
-    "puppeteer": "5.2.0"
+    "jest": "26.4.2",
+    "jest-cli": "26.4.2",
+    "prettier": "2.1.1",
+    "pretty-quick": "^3.0.0",
+    "puppeteer": "5.2.1"
   },
@@ -71,4 +72,4 @@ "license": "MIT",
   "dependencies": {
-    "@deckdeckgo/utils": "^1.1.0"
+    "@deckdeckgo/utils": "^1.3.0"
   }
 }

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

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

Fixed alerts

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

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 medium supply chain risk alerts

3

decreased by-76.92%

Worsened metrics

Total package byte prevSize

375432

decreased by-58.9%

Number of package files

40

decreased by-45.21%

Lines of code

6187

decreased by-50.27%

Dependency changes

• Updated@deckdeckgo/utils@^1.3.0