@dnncommunity/dnn-elements 0.13.1 → 0.14.0-beta.12

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-eede7745.js');
+const index = require('./index-aff4d89a.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
@@ -30,7 +30,7 @@ const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
   appGlobals.globalScripts();
-  return index.bootstrapLazy([["dnn-image-cropper.cjs",[[1,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"view":[32]}]]],["dnn-treeview-item.cjs",[[1,"dnn-treeview-item",{"expanded":[1028],"hasChildren":[32]}]]],["dnn-checkbox.cjs",[[1,"dnn-checkbox",{"checked":[1028],"useIntermediate":[4,"use-intermediate"],"value":[1]}]]],["dnn-chevron.cjs",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540]}]]],["dnn-color-picker.cjs",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32]}]]],["dnn-searchbox.cjs",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"query":[1025]}]]],["dnn-sort-icon.cjs",[[1,"dnn-sort-icon",{"sortDirection":[1,"sort-direction"]}]]],["dnn-tab.cjs",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}]]],["dnn-tabs.cjs",[[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-toggle.cjs",[[1,"dnn-toggle",{"checked":[1028],"disabled":[4]}]]],["dnn-modal.cjs",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"showCloseButton":[4,"show-close-button"],"visible":[32],"show":[64],"hide":[64]}]]],["dnn-button.cjs",[[1,"dnn-button",{"type":[1],"reversed":[4],"size":[1],"confirm":[4],"confirmYesText":[1,"confirm-yes-text"],"confirmNoText":[1,"confirm-no-text"],"confirmMessage":[1,"confirm-message"],"disabled":[4],"modalVisible":[32]}]]],["dnn-collapsible.cjs",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"animating":[32],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleOtherCollapsibleHeightChanged"]]]]],["dnn-dropzone.cjs",[[1,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"canTakeSnapshots":[32],"takingPicture":[32]}]]]], options);
+  return index.bootstrapLazy([["dnn-image-cropper.cjs",[[1,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"view":[32]}]]],["dnn-treeview-item.cjs",[[1,"dnn-treeview-item",{"expanded":[1540],"hasChildren":[32]}]]],["dnn-checkbox.cjs",[[1,"dnn-checkbox",{"checked":[1028],"useIntermediate":[4,"use-intermediate"],"value":[1]}]]],["dnn-chevron.cjs",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540]}]]],["dnn-color-picker.cjs",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32]}]]],["dnn-searchbox.cjs",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"query":[1025]}]]],["dnn-sort-icon.cjs",[[1,"dnn-sort-icon",{"sortDirection":[1,"sort-direction"]}]]],["dnn-tab.cjs",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}]]],["dnn-tabs.cjs",[[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-toggle.cjs",[[1,"dnn-toggle",{"checked":[1028],"disabled":[4]}]]],["dnn-vertical-overflow-menu.cjs",[[1,"dnn-vertical-overflow-menu",{"showDropdownButton":[32],"showDropdownMenu":[32]}]]],["dnn-vertical-splitview.cjs",[[1,"dnn-vertical-splitview",{"splitterWidth":[2,"splitter-width"],"splitWidthPercentage":[2,"split-width-percentage"],"leftWidth":[32],"rightWidth":[32],"setSplitWidthPercentage":[64],"getSplitWidthPercentage":[64]}]]],["dnn-button.cjs",[[1,"dnn-button",{"type":[1],"reversed":[4],"size":[1],"confirm":[4],"confirmYesText":[1,"confirm-yes-text"],"confirmNoText":[1,"confirm-no-text"],"confirmMessage":[1,"confirm-message"],"disabled":[4],"modalVisible":[32]}]]],["dnn-collapsible.cjs",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]]]]],["dnn-dropzone.cjs",[[1,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"canTakeSnapshots":[32],"takingPicture":[32]}]]],["dnn-modal.cjs",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"showCloseButton":[4,"show-close-button"],"visible":[32],"show":[64],"hide":[64]}]]]], options);
   });
 };
 

package/dist/cjs/mouseUtilities-75be531a.js

@@ -0,0 +1,25 @@
+'use strict';
+
+function getMovementFromEvent(event, previousTouch) {
+  let movementX = 0;
+  let movementY = 0;
+  if (event instanceof MouseEvent) {
+    movementX = event.movementX;
+    movementY = event.movementY;
+  }
+  if (typeof TouchEvent !== "undefined") {
+    if (event instanceof TouchEvent) {
+      let touch = event.touches[0];
+      if (previousTouch != undefined) {
+        movementX = touch.pageX - this.previousTouch.pageX;
+        movementY = touch.pageY - this.previousTouch.pageY;
+      }
+      previousTouch = touch;
+    }
+  }
+  return { movementX, movementY };
+}
+
+exports.getMovementFromEvent = getMovementFromEvent;
+
+//# sourceMappingURL=mouseUtilities-75be531a.js.map

package/dist/cjs/mouseUtilities-75be531a.js.map

@@ -0,0 +1 @@
+{"file":"mouseUtilities-75be531a.js","mappings":";;SAAgB,oBAAoB,CAChC,KAA8B,EAC9B,aAAoB;EAEpB,IAAI,SAAS,GAAG,CAAC,CAAC;EAClB,IAAI,SAAS,GAAG,CAAC,CAAC;EAClB,IAAI,KAAK,YAAY,UAAU,EAAE;IAC/B,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;IAC5B,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;GAC7B;EACD,IAAI,OAAO,UAAU,KAAK,WAAW,EAAC;IACpC,IAAI,KAAK,YAAY,UAAU,EAAE;MAC/B,IAAI,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;MAC7B,IAAI,aAAa,IAAI,SAAS,EAAE;QAC9B,SAAS,GAAG,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;QACnD,SAAS,GAAG,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;OACpD;MACD,aAAa,GAAG,KAAK,CAAC;KACvB;GACF;EACD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;AAClC;;;;","names":[],"sources":["./src/utilities/mouseUtilities.ts"],"sourcesContent":["export function getMovementFromEvent(\r\n    event: MouseEvent | TouchEvent,\r\n    previousTouch: Touch\r\n) {\r\n    let movementX = 0;\r\n    let movementY = 0;\r\n    if (event instanceof MouseEvent) {\r\n      movementX = event.movementX;\r\n      movementY = event.movementY;\r\n    }\r\n    if (typeof TouchEvent !== \"undefined\"){\r\n      if (event instanceof TouchEvent) {\r\n        let touch = event.touches[0];\r\n        if (previousTouch != undefined) {\r\n          movementX = touch.pageX - this.previousTouch.pageX;\r\n          movementY = touch.pageY - this.previousTouch.pageY;\r\n        }\r\n        previousTouch = touch;\r\n      }\r\n    }\r\n    return { movementX, movementY };\r\n  }"],"version":3}

package/dist/collection/collection-manifest.json

@@ -13,7 +13,9 @@
     "./components/dnn-tab/dnn-tab.js",
     "./components/dnn-tabs/dnn-tabs.js",
     "./components/dnn-toggle/dnn-toggle.js",
-    "./components/dnn-treeview-item/dnn-treeview-item.js"
+    "./components/dnn-treeview-item/dnn-treeview-item.js",
+    "./components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.js",
+    "./components/dnn-vertical-splitview/dnn-vertical-splitview.js"
   ],
   "compiler": {
     "name": "@stencil/core",

package/dist/collection/components/dnn-collapsible/dnn-collapsible.css

@@ -1,8 +1,9 @@
 :host {
   display: block;
 }
-:host #container {
-  height: 0;
+
+#container {
+  max-height: 0;
   overflow: hidden;
-  transition: height 300ms ease-in-out;
+  transition: max-height 300ms ease-in-out;
 }

package/dist/collection/components/dnn-collapsible/dnn-collapsible.js

@@ -1,89 +1,50 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { Component, Host, h, Prop, Element, Watch, State, Method, Event, Listen } from '@stencil/core';
-import { Debounce } from '../../utilities/debounce';
+import { Component, Host, h, Prop, Element, Event, Watch, Listen, Method } from '@stencil/core';
 export class DnnCollapsible {
   constructor() {
     /** Defines if the panel is expanded or not. */
     this.expanded = false;
     /** Defines the transition time in ms, defaults to 100ms */
     this.transitionDuration = 150;
-    this.animating = false;
   }
-  handleExpandedChanged(newValue) {
-    this.animating = true;
+  handleHeightChanged() {
     requestAnimationFrame(() => {
-      const container = this.el.shadowRoot.querySelector("#container");
-      if (newValue) {
-        container.style.height = container.scrollHeight + "px";
-      }
-      else {
-        container.style.height = "0px";
-      }
-    });
-    requestAnimationFrame(() => {
-      this.animating = false;
-      this.dnnCollapsibleHeightChanged.emit();
+      this.updateSize();
     });
   }
-  /** Updates the component height, use to update after a slot content changes. */
+  /**
+   * Updates the component height, use to update after a slot content changes.
+   */
   async updateSize() {
-    this.updateComponentSize();
-  }
-  updateComponentSize() {
     if (this.expanded) {
-      this.animating = true;
       requestAnimationFrame(() => {
-        const container = this.el.shadowRoot.querySelector("#container");
-        let newHeight = 0;
-        container.querySelector('slot').assignedElements().forEach(node => {
-          newHeight += node.scrollHeight;
-        });
-        container.style.height = newHeight + "px";
+        this.container.style.maxHeight = `${this.container.scrollHeight}px`;
       });
+      setTimeout(() => {
+        this.container.style.maxHeight = "none";
+      }, this.transitionDuration);
     }
   }
-  handleOtherCollapsibleHeightChanged() {
+  handledExpandedChanged(expanded) {
+    if (expanded) {
+      this.updateSize();
+    }
+    else {
+      requestAnimationFrame(() => {
+        this.container.style.maxHeight = `${this.container.scrollHeight}px`;
+        requestAnimationFrame(() => {
+          this.container.style.maxHeight = "0px";
+        });
+      });
+    }
     setTimeout(() => {
-      this.updateComponentSize();
-    }, this.transitionDuration);
-  }
-  handleMutation(mutationList) {
-    mutationList.forEach(mutation => {
       requestAnimationFrame(() => {
-        mutation.target.closest('dnn-collapsible').updateSize();
+        this.dnnCollapsibleHeightChanged.emit();
       });
-    });
-  }
-  componentWillLoad() {
-    this.mutationObserver = new MutationObserver((mutationList) => {
-      this.handleMutation(mutationList);
-    });
-  }
-  componentDidLoad() {
-    const container = this.el.shadowRoot.querySelector('#container');
-    container.style.transitionDuration = this.transitionDuration + 'ms';
-    // Monitor for content changes and update own height
-    const childNodes = [this.el];
-    childNodes.forEach(element => {
-      this.mutationObserver.observe(element, { attributes: true, characterData: true, childList: true, subtree: true });
-    });
-    const slot = this.el.shadowRoot.querySelector('slot');
-    slot.addEventListener("slotchange", () => {
-      this.updateSize();
-    });
-  }
-  disconnectedCallback() {
-    this.mutationObserver.disconnect();
+    }, this.transitionDuration);
   }
-  /*eslint-enable @stencil/own-methods-must-be-private */
   render() {
     return (h(Host, null,
-      h("div", { id: "container" },
+      h("div", { id: "container", class: this.expanded && "expanded", ref: el => this.container = el },
         h("slot", null))));
   }
   static get is() { return "dnn-collapsible"; }
@@ -132,9 +93,6 @@ export class DnnCollapsible {
       "defaultValue": "150"
     }
   }; }
-  static get states() { return {
-    "animating": {}
-  }; }
   static get events() { return [{
       "method": "dnnCollapsibleHeightChanged",
       "name": "dnnCollapsibleHeightChanged",
@@ -172,17 +130,14 @@ export class DnnCollapsible {
   static get elementRef() { return "el"; }
   static get watchers() { return [{
       "propName": "expanded",
-      "methodName": "handleExpandedChanged"
+      "methodName": "handledExpandedChanged"
     }]; }
   static get listeners() { return [{
       "name": "dnnCollapsibleHeightChanged",
-      "method": "handleOtherCollapsibleHeightChanged",
+      "method": "handleHeightChanged",
       "target": undefined,
       "capture": false,
       "passive": false
     }]; }
 }
-__decorate([
-  Debounce()
-], DnnCollapsible.prototype, "updateSize", null);
 //# sourceMappingURL=dnn-collapsible.js.map

package/dist/collection/components/dnn-collapsible/dnn-collapsible.js.map

@@ -1 +1 @@
-{"version":3,"file":"dnn-collapsible.js","sourceRoot":"","sources":["../../../src/components/dnn-collapsible/dnn-collapsible.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, Watch, State, Method, Event, EventEmitter, Listen } from '@stencil/core';\r\nimport { Debounce } from '../../utilities/debounce';\r\n\r\n@Component({\r\n  tag: \"dnn-collapsible\",\r\n  styleUrl: \"dnn-collapsible.scss\",\r\n  shadow: true\r\n})\r\nexport class DnnCollapsible {\r\n\r\n  @Element() el: HTMLDnnCollapsibleElement;\r\n\r\n  /** Defines if the panel is expanded or not. */\r\n  @Prop({reflect: true}) expanded: boolean = false;\r\n\r\n  /** Defines the transition time in ms, defaults to 100ms */\r\n  @Prop() transitionDuration?: number = 150;\r\n\r\n  @State() animating: boolean = false;\r\n\r\n  @Watch(\"expanded\")\r\n  handleExpandedChanged(newValue: boolean){\r\n    this.animating = true;\r\n    requestAnimationFrame(() => {\r\n      const container = this.el.shadowRoot.querySelector(\"#container\") as HTMLDivElement;\r\n      if (newValue){\r\n        container.style.height = container.scrollHeight + \"px\";\r\n      }\r\n      else{\r\n        container.style.height = \"0px\";\r\n      }\r\n    });\r\n    \r\n    requestAnimationFrame(() => {\r\n      this.animating = false;\r\n      this.dnnCollapsibleHeightChanged.emit();\r\n    });\r\n  }\r\n\r\n  /** Updates the component height, use to update after a slot content changes. */\r\n  @Debounce()\r\n  @Method()\r\n  async updateSize() {\r\n    this.updateComponentSize();\r\n  }\r\n\r\n  private updateComponentSize(){\r\n    if (this.expanded){\r\n      this.animating = true;\r\n      requestAnimationFrame(() => {\r\n        const container = this.el.shadowRoot.querySelector(\"#container\") as HTMLDivElement;\r\n        let newHeight = 0;\r\n        container.querySelector('slot').assignedElements().forEach(node => {\r\n          newHeight += node.scrollHeight;\r\n        });\r\n        container.style.height = newHeight + \"px\";\r\n      });\r\n    }\r\n  }\r\n\r\n  /** Fires whenever the collapsible height has changed */\r\n  @Event() dnnCollapsibleHeightChanged: EventEmitter<void>;\r\n\r\n  @Listen('dnnCollapsibleHeightChanged')\r\n  handleOtherCollapsibleHeightChanged(){\r\n    setTimeout(() => {\r\n      this.updateComponentSize();\r\n    }, this.transitionDuration);\r\n  }\r\n\r\n  private mutationObserver: MutationObserver;\r\n\r\n  private handleMutation(mutationList){\r\n    mutationList.forEach(mutation => {\r\n      requestAnimationFrame(() => {\r\n        mutation.target.closest('dnn-collapsible').updateSize();\r\n      });\r\n    });\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.mutationObserver = new MutationObserver((mutationList) => {\r\n      this.handleMutation(mutationList);\r\n    });\r\n  }\r\n\r\n  componentDidLoad(){\r\n    const container = this.el.shadowRoot.querySelector('#container') as HTMLDivElement;\r\n    container.style.transitionDuration = this.transitionDuration + 'ms';\r\n\r\n    // Monitor for content changes and update own height\r\n    const childNodes = [this.el];\r\n    childNodes.forEach(element => {\r\n      this.mutationObserver.observe(element, {attributes: true, characterData: true, childList: true, subtree: true});\r\n    });\r\n\r\n    const slot = this.el.shadowRoot.querySelector('slot');\r\n    slot.addEventListener(\"slotchange\", () => {\r\n      this.updateSize();\r\n    });\r\n  }\r\n\r\n  disconnectedCallback(){\r\n    this.mutationObserver.disconnect();\r\n  }\r\n  /*eslint-enable @stencil/own-methods-must-be-private */\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div id=\"container\">\r\n            <slot></slot>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n}\r\n"]}
+{"version":3,"file":"dnn-collapsible.js","sourceRoot":"","sources":["../../../src/components/dnn-collapsible/dnn-collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAO9G,MAAM,OAAO,cAAc;EAL3B;IASE,+CAA+C;IACxB,aAAQ,GAAY,KAAK,CAAC;IAEjD,2DAA2D;IACnD,uBAAkB,GAAY,GAAG,CAAC;GA2D3C;EArDC,mBAAmB;IACjB,qBAAqB,CAAC,GAAG,EAAE;MACzB,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC,CAAC,CAAA;EACJ,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,UAAU;IACd,IAAI,IAAI,CAAC,QAAQ,EAAC;MACd,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI,CAAC;MACtE,CAAC,CAAC,CAAC;MACH,UAAU,CAAC,GAAG,EAAE;QACd,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;MAC1C,CAAC,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;KAC/B;EACH,CAAC;EAGD,sBAAsB,CAAC,QAAiB;IACtC,IAAI,QAAQ,EAAC;MACX,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;SACG;MACF,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI,CAAC;QACpE,qBAAqB,CAAC,GAAG,EAAE;UACzB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC;QACzC,CAAC,CAAC,CAAC;MACL,CAAC,CAAC,CAAC;KACJ;IACD,UAAU,CAAC,GAAG,EAAE;MACd,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,CAAC,2BAA2B,CAAC,IAAI,EAAE,CAAC;MAC1C,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;EAC9B,CAAC;EAID,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,EAAE,EAAC,WAAW,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,UAAU,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE;QAClF,eAAa,CACX,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter, Watch, Listen, Method } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: \"dnn-collapsible\",\r\n  styleUrl: \"dnn-collapsible.scss\",\r\n  shadow: true\r\n})\r\nexport class DnnCollapsible {\r\n\r\n  @Element() el: HTMLDnnCollapsibleElement;\r\n\r\n  /** Defines if the panel is expanded or not. */\r\n  @Prop({reflect: true}) expanded: boolean = false;\r\n\r\n  /** Defines the transition time in ms, defaults to 100ms */\r\n  @Prop() transitionDuration?: number = 150;\r\n\r\n  /** Fires whenever the collapsible height has changed */\r\n  @Event({bubbles: true, composed: true}) dnnCollapsibleHeightChanged: EventEmitter<void>;\r\n\r\n  @Listen(\"dnnCollapsibleHeightChanged\")\r\n  handleHeightChanged(){\r\n    requestAnimationFrame(() => {\r\n      this.updateSize();\r\n    })\r\n  }\r\n\r\n  /**\r\n   * Updates the component height, use to update after a slot content changes.\r\n   */\r\n  @Method()\r\n  async updateSize() {\r\n    if (this.expanded){\r\n        requestAnimationFrame(() => {\r\n          this.container.style.maxHeight = `${this.container.scrollHeight}px`;\r\n        });\r\n        setTimeout(() => {\r\n          this.container.style.maxHeight = \"none\";\r\n        }, this.transitionDuration);\r\n    }\r\n  }\r\n  \r\n  @Watch(\"expanded\")\r\n  handledExpandedChanged(expanded: boolean){\r\n    if (expanded){\r\n      this.updateSize();\r\n    }\r\n    else{\r\n      requestAnimationFrame(() => {\r\n        this.container.style.maxHeight = `${this.container.scrollHeight}px`;\r\n        requestAnimationFrame(() => {\r\n          this.container.style.maxHeight = \"0px\";\r\n        });\r\n      });\r\n    }\r\n    setTimeout(() => {\r\n      requestAnimationFrame(() => {\r\n        this.dnnCollapsibleHeightChanged.emit();\r\n      });\r\n    }, this.transitionDuration);\r\n  }\r\n  \r\n  private container: HTMLDivElement;\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div id=\"container\" class={this.expanded && \"expanded\"} ref={el => this.container = el}>\r\n            <slot></slot>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n}\r\n"]}

package/dist/collection/components/dnn-image-cropper/dnn-image-cropper.js

@@ -1,5 +1,6 @@
 import { Component, Host, h, State, Prop, Event } from '@stencil/core';
 import { CornerType } from './CornerType';
+import { getMovementFromEvent } from "../../utilities/mouseUtilities";
 /**
  * Allows cropping an image in-browser with the option to enforce a specific final size.
  * All computation happens in the browser and the final image is emmited
@@ -97,7 +98,7 @@ export class DnnImageCropper {
       const wantedRatio = this.width / this.height;
       const cropRect = this.crop.getBoundingClientRect();
       const imageRect = this.image.getBoundingClientRect();
-      let { movementX, movementY } = this.getMouvementFromEvent(event);
+      let { movementX, movementY } = getMovementFromEvent(event, this.previousTouch);
       if (Math.abs(movementX) < Math.abs(movementY)) {
         orientation = "vertical";
       }
@@ -211,7 +212,7 @@ export class DnnImageCropper {
       if (!this.isMouseStillInTarget(ev)) {
         return;
       }
-      let { movementX, movementY } = this.getMouvementFromEvent(ev);
+      let { movementX, movementY } = getMovementFromEvent(ev, this.previousTouch);
       let newLeft = this.crop.offsetLeft + movementX;
       let newTop = this.crop.offsetTop + movementY;
       var imageRect = this.image.getBoundingClientRect();
@@ -233,7 +234,9 @@ export class DnnImageCropper {
     };
   }
   componentDidLoad() {
-    this.setView("noPictureView");
+    requestAnimationFrame(() => {
+      this.setView("noPictureView");
+    });
   }
   setView(newView) {
     const views = this.host.shadowRoot.querySelectorAll(".view");
@@ -342,25 +345,6 @@ export class DnnImageCropper {
     }
     return { top, left };
   }
-  getMouvementFromEvent(event) {
-    let movementX = 0;
-    let movementY = 0;
-    if (event instanceof MouseEvent) {
-      movementX = event.movementX;
-      movementY = event.movementY;
-    }
-    if (typeof TouchEvent !== "undefined") {
-      if (event instanceof TouchEvent) {
-        let touch = event.touches[0];
-        if (this.previousTouch != undefined) {
-          movementX = touch.pageX - this.previousTouch.pageX;
-          movementY = touch.pageY - this.previousTouch.pageY;
-        }
-        this.previousTouch = touch;
-      }
-    }
-    return { movementX, movementY };
-  }
   isMouseStillInTarget(event) {
     var inside = false;
     let mouseX;

package/dist/collection/components/dnn-image-cropper/dnn-image-cropper.js.map

@@ -1 +1 @@
-{"version":3,"file":"dnn-image-cropper.js","sourceRoot":"","sources":["../../../src/components/dnn-image-cropper/dnn-image-cropper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AACrF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C;;;;GAIG;AAMH,MAAM,OAAO,eAAe;EAL5B;IAME,0CAA0C;IAClC,UAAK,GAAW,GAAG,CAAC;IAE5B,2CAA2C;IACnC,WAAM,GAAW,GAAG,CAAC;IAE7B;;MAEE;IACM,SAAI,GAQR;MACF,OAAO,EAAE,SAAS;MAClB,eAAe,EAAE,wBAAwB;MACzC,EAAE,EAAE,IAAI;MACR,WAAW,EAAE,gBAAgB;MAC7B,UAAU,EAAE,iBAAiB;MAC7B,aAAa,EAAE,uJAAuJ;MACtK,cAAc,EAAE,OAAO;KACxB,CAAA;IAED,6EAA6E;IACrE,YAAO,GAAW,GAAG,CAAC;IAE9B,kJAAkJ;IAC1I,sBAAiB,GAAY,KAAK,CAAC;IAyFnC,wBAAmB,GAAG,CAAC,KAA8B,EAAE,EAAE;MAC/D,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,MAAM,OAAO,GAAG,KAAK,CAAC,MAAqB,CAAC;MAC5C,MAAM,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;MAEvC,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,uBAAuB,EAAE,KAAK,CAAC,CAAC;MAC1E,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,uBAAuB,EAAE,KAAK,CAAC,CAAC;MAC3E,QAAQ,SAAS,EAAE;QACjB,KAAK,MAAM;UACT,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;UACnE,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,cAAc,EAAE,KAAK,CAAC,CAAA;UAClE,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;UAC3G,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;UAC5G,MAAM;QACR,KAAK,IAAI;UACP,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC;UACtE,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAA;UACrE,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;UAC9G,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;UAC/G,MAAM;QACR,KAAK,IAAI;UACP,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC;UACtE,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAA;UACrE,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;UAC9G,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;UAC/G,MAAK;QACP,KAAK,IAAI;UACP,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC;UACtE,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAA;UACrE,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;UAC9G,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;UAC/G,MAAM;QACR,KAAK,IAAI;UACP,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC;UACtE,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAA;UACrE,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;UAC9G,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;UAC/G,MAAM;QACR;UACE,MAAM;OACT;IACH,CAAC,CAAC;IAEM,4BAAuB,GAAG,CAAC,GAAe,EAAE,EAAE;MACpD,IAAI,CAAC,SAAS,EAAE,CAAC;MACjB,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;MACtE,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;IACjC,CAAC,CAAA;IAqCO,sBAAiB,GAAG,CAAC,KAA8B,EAAE,EAAE;MAC7D,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,UAAU,CAAC,EAAE,CAAC,CAAC;IAC9C,CAAC,CAAA;IAEO,sBAAiB,GAAG,CAAC,KAA8B,EAAE,EAAE;MAC7D,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,UAAU,CAAC,EAAE,CAAC,CAAC;IAC9C,CAAC,CAAA;IAEO,sBAAiB,GAAG,CAAC,KAA8B,EAAE,EAAE;MAC7D,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,UAAU,CAAC,EAAE,CAAC,CAAC;IAC9C,CAAC,CAAA;IAEO,sBAAiB,GAAG,CAAC,KAA8B,EAAE,EAAE;MAC7D,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,UAAU,CAAC,EAAE,CAAC,CAAC;IAC9C,CAAC,CAAA;IAEO,qBAAgB,GAAG,CAAC,KAA8B,EAAE,MAAkB,EAAE,EAAE;MAChF,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,EAAC;QACpC,OAAO;OACR;MAED,IAAI,EAAC,IAAI,EAAE,GAAG,EAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;MAChD,IAAI,QAAQ,GAAG,CAAC,CAAC;MACjB,IAAI,SAAS,GAAG,CAAC,CAAC;MAClB,IAAI,WAAW,GAA8B,YAAY,CAAC;MAC1D,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC;MAC7C,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC;MACnD,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,EAAE,CAAC;MACrD,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC;MACjE,IAAI,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,EAAC;QAC5C,WAAW,GAAG,UAAU,CAAC;OAC1B;MAED,IAAI,WAAW,IAAI,YAAY,EAAC;QAC9B,QAAQ,MAAM,EAAE;UACd,KAAK,UAAU,CAAC,EAAE,CAAC;UACnB,KAAK,UAAU,CAAC,EAAE;YAChB,QAAQ,GAAG,QAAQ,CAAC,KAAK,GAAG,SAAS,CAAC;YACtC,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAC;YACnC,MAAM;UACR,KAAK,UAAU,CAAC,EAAE,CAAC;UACnB,KAAK,UAAU,CAAC,EAAE;YAChB,QAAQ,GAAG,QAAQ,CAAC,KAAK,GAAG,SAAS,CAAC;YACtC,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAC;YACnC,MAAM;UACR;YACE,MAAM;SACT;OACF;WAAK;QACJ,QAAQ,MAAM,EAAE;UACd,KAAK,UAAU,CAAC,EAAE,CAAC;UACnB,KAAK,UAAU,CAAC,EAAE;YAChB,SAAS,GAAG,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC;YACxC,QAAQ,GAAG,SAAS,GAAG,WAAW,CAAC;YACnC,MAAM;UACR,KAAK,UAAU,CAAC,EAAE,CAAC;UACnB,KAAK,UAAU,CAAC,EAAE;YAChB,SAAS,GAAG,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC;YACxC,QAAQ,GAAG,SAAS,GAAG,WAAW,CAAC;YACnC,MAAM;UACR;YACE,MAAM;SACT;OACF;MAED,QAAQ,MAAM,EAAE;QACd,KAAK,UAAU,CAAC,EAAE,CAAC;QACnB,KAAK,UAAU,CAAC,EAAE;UAChB,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC;UAC9C,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QACxC;UACE,MAAM;OACT;MAED,QAAQ,MAAM,EAAE;QACd,KAAK,UAAU,CAAC,EAAE,CAAC;QACnB,KAAK,UAAU,CAAC,EAAE;UAChB,MAAM,UAAU,GAAG,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC;UAC7C,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;UACzC,IAAI,IAAI,GAAG,CAAC;YAAE,IAAI,GAAG,CAAC,CAAC;UACvB,IAAI,IAAI,GAAG,SAAS,CAAC,KAAK;YAAE,IAAI,GAAG,SAAS,CAAC,KAAK,CAAC;UACnD,IAAI,GAAG,GAAG,CAAC;YAAE,GAAG,GAAG,CAAC,CAAC;UACrB,IAAI,GAAG,GAAG,SAAS,CAAC,MAAM;YAAE,GAAG,GAAG,SAAS,CAAC,MAAM,CAAC;UACnD,IAAI,IAAI,GAAG,QAAQ,GAAG,SAAS,CAAC,KAAK;YAAE,QAAQ,GAAG,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC;UACzE,IAAI,GAAG,GAAG,SAAS,GAAG,SAAS,CAAC,MAAM;YAAE,SAAS,GAAG,SAAS,CAAC,MAAM,GAAG,GAAG,CAAC;UAC3E,MAAM;QACR,KAAK,UAAU,CAAC,EAAE,CAAC;QACnB,KAAK,UAAU,CAAC,EAAE;UAChB,IAAI,GAAG,GAAG,CAAC;YAAE,GAAG,GAAG,CAAC,CAAC;UACrB,IAAI,GAAG,GAAG,SAAS,CAAC,MAAM;YAAE,GAAG,GAAG,SAAS,CAAC,MAAM,CAAC;UACnD,IAAI,IAAI,GAAG,QAAQ,GAAG,SAAS,CAAC,KAAK;YAAE,QAAQ,GAAG,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC;UACzE,IAAI,GAAG,GAAG,SAAS,GAAG,SAAS,CAAC,MAAM;YAAE,SAAS,GAAG,SAAS,CAAC,MAAM,GAAG,GAAG,CAAC;UAC3E,MAAM;QACR;UACE,MAAM;OACT;MAED,IAAI,QAAQ,GAAG,SAAS,IAAI,WAAW,EAAC;QACtC,OAAO;OACR;MAED,IAAI,IAAI,CAAC,iBAAiB,EAAC;QACzB,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC;QAC7D,IAAI,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,KAAK,IAAI,SAAS,GAAG,SAAS,GAAG,IAAI,CAAC,MAAM,EAAC;UAC3E,OAAO;SACR;OACF;MAED,QAAQ,MAAM,EAAE;QACd,KAAK,UAAU,CAAC,EAAE;UAChB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;UACjC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,QAAQ,IAAI,CAAC;UACxC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,SAAS,IAAI,CAAC;UAC1C,MAAM;QACR,KAAK,UAAU,CAAC,EAAE;UAChB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,IAAI,IAAI,CAAC;UACnC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;UACjC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,QAAQ,IAAI,CAAC;UACxC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,SAAS,IAAI,CAAC;UAC1C,MAAM;QACR,KAAK,UAAU,CAAC,EAAE;UAChB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,QAAQ,IAAI,CAAC;UACxC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,SAAS,IAAI,CAAC;UAC1C,MAAM;QACR,KAAK,UAAU,CAAC,EAAE;UAChB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,IAAI,IAAI,CAAC;UACnC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,QAAQ,IAAI,CAAC;UACxC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,SAAS,IAAI,CAAC;UAC1C,MAAM;QACR;UACE,MAAM;OACT;IACH,CAAC,CAAA;IAmBO,mBAAc,GAAG,CAAC,EAA2B,EAAE,EAAE;MACvD,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,EAAE,CAAC,EAAC;QACjC,OAAO;OACR;MACD,IAAI,EAAC,SAAS,EAAE,SAAS,EAAC,GAAG,IAAI,CAAC,qBAAqB,CAAC,EAAE,CAAC,CAAC;MAC5D,IAAI,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;MAC/C,IAAI,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;MAC7C,IAAI,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,EAAE,CAAC;MACnD,IAAI,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC;MACjD,IAAI,OAAO,GAAG,CAAC,EAAC;QACd,OAAO,GAAG,CAAC,CAAC;OACb;MACD,IAAI,MAAM,GAAG,CAAC,EAAC;QACb,MAAM,GAAG,CAAC,CAAC;OACZ;MACD,IAAI,OAAO,GAAG,QAAQ,CAAC,KAAK,GAAG,SAAS,CAAC,KAAK,EAAC;QAC7C,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;OAChC;MACD,IAAI,MAAM,GAAG,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,MAAM,EAAC;QAC9C,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;OAC9B;MACD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,OAAO,GAAG,IAAI,CAAC;MACtC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,MAAM,GAAG,IAAI,CAAC;IACtC,CAAC,CAAC;GAiHH;EA7bC,gBAAgB;IACd,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;EAChC,CAAC;EAEO,OAAO,CAAC,OAAqC;IACnD,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC7D,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAChB,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;IACjC,QAAQ,OAAO,EAAE;MACf,KAAK,eAAe;QAClB,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QAC5C,MAAM;MACR,KAAK,gBAAgB;QACnB,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QAC7C,MAAM;MACR;QACE,MAAM;KACT;IACD,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;EACtB,CAAC;EAEO,QAAQ;IACd,IAAI,WAAW,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC;IAC3C,IAAI,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,EAAE,CAAC;IACnD,IAAI,UAAU,GAAG,SAAS,CAAC,KAAK,GAAG,SAAS,CAAC,MAAM,CAAC;IAEpD,IAAI,WAAW,GAAG,UAAU,EAAC;MACzB,IAAI,YAAY,GAAG,SAAS,CAAC,KAAK,GAAG,WAAW,CAAC;MACjD,IAAI,IAAI,GAAG,SAAS,CAAC,MAAM,GAAG,YAAY,CAAC;MAC3C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC;MAC3D,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC;KACvE;SACG;MACF,IAAI,WAAW,GAAG,SAAS,CAAC,MAAM,GAAG,WAAW,CAAC;MACjD,IAAI,IAAI,GAAG,SAAS,CAAC,KAAK,GAAG,WAAW,CAAC;MACvC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC;MAC5D,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC;KACrE;EACH,CAAC;EAEO,QAAQ;IACd,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE;MACvC,IAAI,CAAC,QAAQ,EAAE,CAAC;MAChB,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC,CAAC,CAAA;IACF,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;EAC3C,CAAC;EAEO,aAAa,CAAC,IAAU;IAC9B,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,OAAO,EAAC;MACrC,OAAO;KACR;IAED,IAAI,MAAM,GAAG,IAAI,UAAU,EAAE,CAAC;IAC9B,MAAM,CAAC,MAAM,GAAG,eAAe,CAAC,EAAE;MAChC,IAAI,GAAG,GAAG,IAAI,KAAK,EAAE,CAAC;MACtB,GAAG,CAAC,MAAM,GAAG,GAAG,EAAE;QAChB,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC;QAC9B,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC;QAChC,IAAI,IAAI,CAAC,iBAAiB,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,MAAM,GAAE,IAAI,CAAC,MAAM,CAAC,EAAC;UAChF,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;UAC/B,OAAO;SACR;QACD,IAAI,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QACvC,GAAG,CAAC,SAAS,CAAC,GAAG,EAAC,CAAC,EAAC,CAAC,CAAC,CAAC;QACvB,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;QAC/B,IAAI,CAAC,QAAQ,EAAE,CAAC;MAClB,CAAC,CAAA;MACD,GAAG,CAAC,GAAG,GAAG,eAAe,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;IACrD,CAAC,CAAA;IACD,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;EAC7B,CAAC;EAoDO,SAAS;IACf,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC;IAC1E,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC;IAE3E,IAAI,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC;IACjD,IAAI,KAAK,GAAG,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC;IACxE,IAAI,MAAM,GAAG,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC;IAE5E,IAAI,CAAC,GAAG,CAAC;MACP,CAAC,GAAG,CAAC,CAAC;IACR,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY;MAC7B,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC;IAC9B,IAAI,CAAC,GAAG,CAAC;MACP,CAAC,GAAG,CAAC,CAAC;IACR,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY;MAC7B,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC;IAC9B,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY;MACjC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC;IAClC,IAAI,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa;MACnC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC;IAEpC,IAAI,OAAO,GAAG,IAAI,CAAC,oBAAoB,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IACtF,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;EACtC,CAAC;EAEO,oBAAoB,CAAC,CAAS,EAAE,CAAS,EAAE,KAAa,EAAE,MAAc,EAAE,YAAoB,EAAE,aAAqB;IAC3H,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,YAAY,CAAC;IACjC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,aAAa,CAAC;IACnC,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IAC7C,OAAO,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,YAAY,EAAE,aAAa,CAAC,CAAC;IACrD,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,YAAY,EAAE,aAAa,CAAC,CAAC;IAEtF,OAAO,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,YAAY,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;EAC3D,CAAC;EAwIO,gBAAgB,CAAC,MAAkB;IACzC,IAAI,IAAI,GAAG,CAAC,CAAC;IACb,IAAI,GAAG,GAAG,CAAC,CAAC;IACZ,QAAQ,MAAM,EAAE;MACd,KAAK,UAAU,CAAC,EAAE;QAChB,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;QAC5B,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;QAC1B,MAAM;MACR,KAAK,UAAU,CAAC,EAAE;QAChB,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;QAC1B,MAAM;MACR;QACE,MAAM;KACT;IACD,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,CAAC;EACrB,CAAC;EA2BO,qBAAqB,CAAC,KAA8B;IAC1D,IAAI,SAAS,GAAG,CAAC,CAAC;IAClB,IAAI,SAAS,GAAG,CAAC,CAAC;IAClB,IAAI,KAAK,YAAY,UAAU,EAAE;MAC/B,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;MAC5B,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;KAC7B;IACD,IAAI,OAAO,UAAU,KAAK,WAAW,EAAC;MACpC,IAAI,KAAK,YAAY,UAAU,EAAE;QAC/B,IAAI,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAC7B,IAAI,IAAI,CAAC,aAAa,IAAI,SAAS,EAAE;UACnC,SAAS,GAAG,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;UACnD,SAAS,GAAG,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;SACpD;QACD,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;OAC5B;KACF;IACD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;EAClC,CAAC;EAEO,oBAAoB,CAAC,KAA8B;IACzD,IAAI,MAAM,GAAG,KAAK,CAAC;IACnB,IAAI,MAAc,CAAC;IACnB,IAAI,MAAc,CAAC;IACnB,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,EAAE,CAAC;IAErD,IAAI,KAAK,YAAY,UAAU,EAAC;MAC9B,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC;MACvB,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC;KACxB;IAED,IAAI,OAAO,UAAU,KAAK,WAAW,EAAC;MACpC,IAAI,KAAK,YAAY,UAAU,EAAC;QAC9B,IAAI,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAC7B,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC;QACvB,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC;OACxB;KACF;IAED,IACE,MAAM,IAAI,SAAS,CAAC,CAAC;MACrB,MAAM,IAAI,SAAS,CAAC,CAAC;MACrB,MAAM,IAAI,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK;MAC1C,MAAM,IAAI,SAAS,CAAC,GAAG,GAAG,SAAS,CAAC,MAAM,EAC5C;MACE,MAAM,GAAG,IAAI,CAAC;KACf;IAED,IAAI,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAChD,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;MACvB,IAAI,UAAU,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;MAChD,IACE,MAAM,IAAI,UAAU,CAAC,CAAC;QACtB,MAAM,IAAI,UAAU,CAAC,CAAC;QACtB,MAAM,IAAI,UAAU,CAAC,IAAI,GAAG,UAAU,CAAC,KAAK;QAC5C,MAAM,IAAI,UAAU,CAAC,GAAG,GAAG,UAAU,CAAC,MAAM,EAC5C;QACE,MAAM,GAAG,IAAI,CAAC;OACf;IACL,CAAC,CAAC,CAAA;IAEF,OAAO,MAAM,CAAC;EAChB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,EAAE;MAC7B,cAAQ,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,GAAI;MACvC,WACE,KAAK,EAAC,MAAM,EACZ,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,GAAG,EAAE;QAEnC,WAAK,KAAK,EAAC,SAAS;UAClB,WAAK,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,EAAE,GAAI;UACnC,WAAK,KAAK,EAAC,UAAU,GAAG;UACxB,WACE,KAAK,EAAC,MAAM,EACZ,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,EACvB,WAAW,EAAE,IAAI,CAAC,mBAAmB,EACrC,YAAY,EAAE,IAAI,CAAC,mBAAmB;YAEtC,WAAK,KAAK,EAAC,IAAI,GAAG;YAClB,WAAK,KAAK,EAAC,IAAI,GAAG;YAClB,WAAK,KAAK,EAAC,IAAI,GAAG;YAClB,WAAK,KAAK,EAAC,IAAI,GAAG,CACd,CACF,CACF;MACN,WACE,KAAK,EAAC,MAAM,EACZ,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,GAAG,EAAE;QAChC,oBACE,eAAe,QACf,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EACrD,IAAI,EACF;YACE,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO;YAC1B,eAAe,EAAE,IAAI,CAAC,IAAI,CAAC,eAAe;YAC1C,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE;YAChB,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW;YAClC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU;WACjC,GAEH,CACA;MACN,iBAAW,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,kBAAkB,GAAG,EAAE,gBAAc,IAAI,CAAC,IAAI,CAAC,cAAc;QACtF,aAAI,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAK,CAC5G,CACP,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, State, Prop, Event, EventEmitter } from '@stencil/core';\r\nimport { CornerType } from './CornerType';\r\n\r\n/**\r\n * Allows cropping an image in-browser with the option to enforce a specific final size.\r\n * All computation happens in the browser and the final image is emmited\r\n * in an event that has a data-url of the image.\r\n */\r\n@Component({\r\n  tag: 'dnn-image-cropper',\r\n  styleUrl: 'dnn-image-cropper.scss',\r\n  shadow: true,\r\n})\r\nexport class DnnImageCropper {\r\n  /** Sets the desired final image width. */\r\n  @Prop() width: number = 600;\r\n\r\n  /** Sets the desired final image height. */\r\n  @Prop() height: number = 600;\r\n\r\n  /** Can be used to customize controls text.\r\n   * Some values support tokens, see default values for examples.\r\n  */\r\n  @Prop() resx: {\r\n    capture: string;\r\n    dragAndDropFile: string;\r\n    or: string;\r\n    takePicture: string;\r\n    uploadFile: string;\r\n    imageTooSmall: string;\r\n    modalCloseText: string;\r\n  } = {\r\n    capture: \"Capture\",\r\n    dragAndDropFile: \"Drag and drop an image\",\r\n    or: \"or\",\r\n    takePicture: \"Take a picture\",\r\n    uploadFile: \"Upload an image\",\r\n    imageTooSmall: \"The image you are attempting to upload does not meet the minimum size requirement of {width} pixels by {height} pixels. Please upload a larger image.\",\r\n    modalCloseText: \"Close\",\r\n  }\r\n\r\n  /** Sets the output quality of the corpped image (number between 0 and 1). */\r\n  @Prop() quality: number = 0.8;\r\n\r\n  /** When set to true, prevents cropping an image smaller than the required size, which would blow pixel and make the final picture look blurry. */\r\n  @Prop() preventUndersized: boolean = false;\r\n\r\n  /** When the image crop changes, emits the dataurl for the new cropped image. */\r\n  @Event() imageCropChanged: EventEmitter<string>;\r\n\r\n  @State() view: IComponentInterfaces[\"View\"];\r\n  \r\n  private host: HTMLElement;\r\n  private hasPictureView: HTMLDivElement;\r\n  private noPictureView: HTMLDivElement;\r\n  private canvas: HTMLCanvasElement;\r\n  private image: HTMLImageElement;\r\n  private crop: HTMLDivElement;\r\n  private previousTouch: Touch;\r\n  private imageTooSmallModal!: HTMLDnnModalElement;\r\n\r\n  componentDidLoad() {\r\n    this.setView(\"noPictureView\");\r\n  }\r\n\r\n  private setView(newView: IComponentInterfaces[\"View\"]){\r\n    const views = this.host.shadowRoot.querySelectorAll(\".view\");\r\n    views.forEach(v =>\r\n      v.classList.remove(\"visible\"));\r\n    switch (newView) {\r\n      case \"noPictureView\":\r\n        this.noPictureView.classList.add(\"visible\");\r\n        break;\r\n      case \"hasPictureView\":\r\n        this.hasPictureView.classList.add(\"visible\");\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n    this.view = newView;\r\n  }\r\n\r\n  private initCrop(){\r\n    var wantedRatio = this.width / this.height;\r\n    var imageRect = this.image.getBoundingClientRect();\r\n    var imageRatio = imageRect.width / imageRect.height;\r\n    \r\n    if (wantedRatio > imageRatio){\r\n        var wantedHeight = imageRect.width / wantedRatio;\r\n        var diff = imageRect.height - wantedHeight;\r\n        this.crop.style.top = Math.round(diff/2).toString() + \"px\";\r\n        this.crop.style.height = Math.round(wantedHeight).toString() + \"px\";\r\n    }\r\n    else{\r\n      var wantedWidth = imageRect.height * wantedRatio;\r\n      var diff = imageRect.width - wantedWidth;\r\n        this.crop.style.left = Math.round(diff/2).toString() + \"px\";\r\n        this.crop.style.width = Math.round(wantedWidth).toString() + \"px\";\r\n    }\r\n  }\r\n\r\n  private setImage(){\r\n    this.image.addEventListener('load', () => {\r\n      this.initCrop();\r\n      this.emitImage();\r\n    })\r\n    this.image.src = this.canvas.toDataURL();\r\n  }\r\n\r\n  private handleNewFile(file: File): void {\r\n    if (file.type.split('/')[0] != \"image\"){\r\n      return;\r\n    }\r\n    \r\n    var reader = new FileReader();\r\n    reader.onload = readerLoadEvent => {\r\n      var img = new Image();\r\n      img.onload = () => {\r\n        this.canvas.width = img.width;\r\n        this.canvas.height = img.height;\r\n        if (this.preventUndersized && (img.width < this.width || img.height< this.height)){\r\n          this.imageTooSmallModal.show();\r\n          return;\r\n        }\r\n        var ctx = this.canvas.getContext(\"2d\");\r\n        ctx.drawImage(img,0,0);\r\n        this.setView(\"hasPictureView\");\r\n        this.setImage();\r\n      }\r\n      img.src = readerLoadEvent.target.result.toString();\r\n    }\r\n    reader.readAsDataURL(file);\r\n  }\r\n\r\n  private handleCropMouseDown = (event: MouseEvent | TouchEvent) => {\r\n    event.stopPropagation();\r\n    event.preventDefault();\r\n    const element = event.target as HTMLElement;\r\n    const className = element.classList[0];\r\n\r\n    document.addEventListener(\"mouseup\", this.handleImageCropFinished, false);\r\n    document.addEventListener(\"touchend\", this.handleImageCropFinished, false);\r\n    switch (className) {\r\n      case \"crop\":\r\n        document.addEventListener(\"mousemove\", this.handleCropDrag, false);\r\n        document.addEventListener(\"touchmove\", this.handleCropDrag, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleCropDrag));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleCropDrag));\r\n        break;\r\n      case \"nw\":\r\n        document.addEventListener(\"mousemove\", this.handleNwMouseMove, false);\r\n        document.addEventListener(\"touchmove\", this.handleNwMouseMove, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleNwMouseMove));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleNwMouseMove));\r\n        break;\r\n      case \"ne\":\r\n        document.addEventListener(\"mousemove\", this.handleNeMouseMove, false);\r\n        document.addEventListener(\"touchmove\", this.handleNeMouseMove, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleNeMouseMove));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleNeMouseMove));\r\n        break\r\n      case \"se\":\r\n        document.addEventListener(\"mousemove\", this.handleSeMouseMove, false);\r\n        document.addEventListener(\"touchmove\", this.handleSeMouseMove, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleSeMouseMove));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleSeMouseMove));\r\n        break;\r\n      case \"sw\":\r\n        document.addEventListener(\"mousemove\", this.handleSwMouseMove, false);\r\n        document.addEventListener(\"touchmove\", this.handleSwMouseMove, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleSwMouseMove));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleSwMouseMove));\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  };\r\n\r\n  private handleImageCropFinished = (_ev: MouseEvent) => {\r\n    this.emitImage();\r\n    document.removeEventListener(\"mouseup\", this.handleImageCropFinished);\r\n    this.previousTouch = undefined;\r\n  }\r\n\r\n  private emitImage() {\r\n    var x = this.crop.offsetLeft / this.image.width * this.image.naturalWidth;\r\n    var y = this.crop.offsetTop / this.image.height * this.image.naturalHeight;\r\n\r\n    var cropRect = this.crop.getBoundingClientRect();\r\n    var width = cropRect.width / this.image.width * this.image.naturalWidth;\r\n    var height = cropRect.height / this.image.height * this.image.naturalHeight;\r\n\r\n    if (x < 0)\r\n      x = 0;\r\n    if (x > this.image.naturalWidth)\r\n      x = this.image.naturalWidth;\r\n    if (y < 0)\r\n      y = 0;\r\n    if (y > this.image.naturalWidth)\r\n      y = this.image.naturalWidth;\r\n    if (width > this.image.naturalWidth)\r\n      width = this.image.naturalWidth;\r\n    if (height > this.image.naturalHeight)\r\n      height = this.image.naturalHeight;\r\n\r\n    var dataUrl = this.generateCroppedImage(x, y, width, height, this.width, this.height);\r\n    this.imageCropChanged.emit(dataUrl);\r\n  }\r\n\r\n  private generateCroppedImage(x: number, y: number, width: number, height: number, desiredWidth: number, desiredHeight: number) {\r\n    this.canvas.width = desiredWidth;\r\n    this.canvas.height = desiredHeight;\r\n    const context = this.canvas.getContext(\"2d\");\r\n    context.clearRect(0, 0, desiredWidth, desiredHeight);\r\n    context.drawImage(this.image, x, y, width, height, 0, 0, desiredWidth, desiredHeight);\r\n\r\n    return this.canvas.toDataURL(\"image/jpeg\", this.quality);\r\n  }\r\n\r\n  private handleNwMouseMove = (event: MouseEvent | TouchEvent) => {\r\n    this.handleCornerDrag(event, CornerType.nw);\r\n  }\r\n\r\n  private handleNeMouseMove = (event: MouseEvent | TouchEvent) => {\r\n    this.handleCornerDrag(event, CornerType.ne);\r\n  }\r\n\r\n  private handleSeMouseMove = (event: MouseEvent | TouchEvent) => {\r\n    this.handleCornerDrag(event, CornerType.se);\r\n  }\r\n\r\n  private handleSwMouseMove = (event: MouseEvent | TouchEvent) => {\r\n    this.handleCornerDrag(event, CornerType.sw);\r\n  }\r\n\r\n  private handleCornerDrag = (event: MouseEvent | TouchEvent, corner: CornerType) => {\r\n    if (!this.isMouseStillInTarget(event)){\r\n      return;\r\n    }\r\n    \r\n    let {left, top} = this.getCornerLeftTop(corner);\r\n    let newWidth = 0;\r\n    let newHeight = 0;\r\n    let orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\r\n    const wantedRatio = this.width / this.height;\r\n    const cropRect = this.crop.getBoundingClientRect();\r\n    const imageRect = this.image.getBoundingClientRect();\r\n    let { movementX, movementY } = this.getMouvementFromEvent(event);\r\n    if (Math.abs(movementX) < Math.abs(movementY)){\r\n      orientation = \"vertical\";\r\n    }\r\n\r\n    if (orientation == \"horizontal\"){\r\n      switch (corner) {\r\n        case CornerType.nw:\r\n        case CornerType.sw:\r\n          newWidth = cropRect.width - movementX;\r\n          newHeight = newWidth / wantedRatio;\r\n          break;\r\n        case CornerType.ne:\r\n        case CornerType.se:\r\n          newWidth = cropRect.width + movementX;\r\n          newHeight = newWidth / wantedRatio;\r\n          break;\r\n        default:\r\n          break;\r\n      }\r\n    } else{\r\n      switch (corner) {\r\n        case CornerType.nw:\r\n        case CornerType.ne:\r\n          newHeight = cropRect.height - movementY;\r\n          newWidth = newHeight * wantedRatio;\r\n          break;\r\n        case CornerType.se:\r\n        case CornerType.sw:\r\n          newHeight = cropRect.height + movementY;\r\n          newWidth = newHeight * wantedRatio;\r\n          break;\r\n        default:\r\n          break;\r\n      }\r\n    }\r\n\r\n    switch (corner) {\r\n      case CornerType.ne:\r\n      case CornerType.nw:\r\n        const topOffset = cropRect.height - newHeight;\r\n        top = this.crop.offsetTop + topOffset;\r\n      default:\r\n        break;\r\n    }\r\n\r\n    switch (corner) {\r\n      case CornerType.nw:\r\n      case CornerType.sw:\r\n        const leftOffset = cropRect.width - newWidth;\r\n        left = this.crop.offsetLeft + leftOffset;\r\n        if (left < 0) left = 0;\r\n        if (left > imageRect.width) left = imageRect.width;\r\n        if (top < 0) top = 0;\r\n        if (top > imageRect.height) top = imageRect.height;\r\n        if (left + newWidth > imageRect.width) newWidth = imageRect.width - left;\r\n        if (top + newHeight > imageRect.height) newHeight = imageRect.height - top;\r\n        break;\r\n      case CornerType.ne:\r\n      case CornerType.se:\r\n        if (top < 0) top = 0;\r\n        if (top > imageRect.height) top = imageRect.height;\r\n        if (left + newWidth > imageRect.width) newWidth = imageRect.width - left;\r\n        if (top + newHeight > imageRect.height) newHeight = imageRect.height - top;\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n\r\n    if (newWidth / newHeight != wantedRatio){\r\n      return;\r\n    }\r\n\r\n    if (this.preventUndersized){\r\n      const zoomRatio = this.image.width / this.image.naturalWidth;\r\n      if (newWidth / zoomRatio < this.width || newHeight / zoomRatio < this.height){\r\n        return;\r\n      }\r\n    }\r\n\r\n    switch (corner) {\r\n      case CornerType.ne:\r\n        this.crop.style.top = `${top}px`;\r\n        this.crop.style.width = `${newWidth}px`;\r\n        this.crop.style.height = `${newHeight}px`;\r\n        break;\r\n      case CornerType.nw:\r\n        this.crop.style.left = `${left}px`;\r\n        this.crop.style.top = `${top}px`;\r\n        this.crop.style.width = `${newWidth}px`;\r\n        this.crop.style.height = `${newHeight}px`;\r\n        break;\r\n      case CornerType.se:\r\n        this.crop.style.width = `${newWidth}px`;\r\n        this.crop.style.height = `${newHeight}px`;\r\n        break;\r\n      case CornerType.sw:\r\n        this.crop.style.left = `${left}px`;\r\n        this.crop.style.width = `${newWidth}px`;\r\n        this.crop.style.height = `${newHeight}px`;\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  }\r\n\r\n  private getCornerLeftTop(corner: CornerType): { left: number; top: number; } {\r\n    let left = 0;\r\n    let top = 0;\r\n    switch (corner) {\r\n      case CornerType.se:\r\n        left = this.crop.offsetLeft;\r\n        top = this.crop.offsetTop;\r\n        break;\r\n      case CornerType.sw:\r\n        top = this.crop.offsetTop;\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n    return {top, left};\r\n  }\r\n\r\n  private handleCropDrag = (ev: MouseEvent | TouchEvent) => {\r\n    if (!this.isMouseStillInTarget(ev)){\r\n      return;\r\n    }\r\n    let {movementX, movementY} = this.getMouvementFromEvent(ev);\r\n    let newLeft = this.crop.offsetLeft + movementX;\r\n    let newTop = this.crop.offsetTop + movementY;\r\n    var imageRect = this.image.getBoundingClientRect();\r\n    var cropRect = this.crop.getBoundingClientRect();\r\n    if (newLeft < 0){\r\n      newLeft = 0;\r\n    }\r\n    if (newTop < 0){\r\n      newTop = 0;\r\n    }\r\n    if (newLeft + cropRect.width > imageRect.width){\r\n      newLeft = this.crop.offsetLeft;\r\n    }\r\n    if (newTop + cropRect.height > imageRect.height){\r\n      newTop = this.crop.offsetTop;\r\n    }\r\n    this.crop.style.left = newLeft + \"px\";\r\n    this.crop.style.top = newTop + \"px\";\r\n  };\r\n  \r\n  private getMouvementFromEvent(event: MouseEvent | TouchEvent) {\r\n    let movementX = 0;\r\n    let movementY = 0;\r\n    if (event instanceof MouseEvent) {\r\n      movementX = event.movementX;\r\n      movementY = event.movementY;\r\n    }\r\n    if (typeof TouchEvent !== \"undefined\"){\r\n      if (event instanceof TouchEvent) {\r\n        let touch = event.touches[0];\r\n        if (this.previousTouch != undefined) {\r\n          movementX = touch.pageX - this.previousTouch.pageX;\r\n          movementY = touch.pageY - this.previousTouch.pageY;\r\n        }\r\n        this.previousTouch = touch;\r\n      }\r\n    }\r\n    return { movementX, movementY };\r\n  }\r\n\r\n  private isMouseStillInTarget(event: MouseEvent | TouchEvent) {\r\n    var inside = false;\r\n    let mouseX: number;\r\n    let mouseY: number;\r\n    const imageRect = this.image.getBoundingClientRect();\r\n    \r\n    if (event instanceof MouseEvent){\r\n      mouseX = event.clientX;\r\n      mouseY = event.clientY;\r\n    }\r\n\r\n    if (typeof TouchEvent !== \"undefined\"){\r\n      if (event instanceof TouchEvent){\r\n        var touch = event.touches[0];\r\n        mouseX = touch.clientX;\r\n        mouseY = touch.clientY;\r\n      }\r\n    }\r\n    \r\n    if (\r\n      mouseX >= imageRect.x &&\r\n      mouseY >= imageRect.y &&\r\n      mouseX <= imageRect.left + imageRect.width &&\r\n      mouseY <= imageRect.top + imageRect.height)\r\n    {\r\n      inside = true;\r\n    }\r\n\r\n    var corners = this.crop.querySelectorAll(\"div\");\r\n    corners.forEach(corner =>{\r\n      var cornerRect = corner.getBoundingClientRect();\r\n      if (\r\n        mouseX >= cornerRect.x &&\r\n        mouseY >= cornerRect.y &&\r\n        mouseX <= cornerRect.left + cornerRect.width &&\r\n        mouseY <= cornerRect.top + cornerRect.height)\r\n        {\r\n          inside = true;\r\n        }\r\n    })\r\n\r\n    return inside;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host ref={el => this.host = el}>\r\n        <canvas ref={el => this.canvas = el} />\r\n        <div\r\n          class=\"view\"\r\n          ref={el => this.hasPictureView = el}\r\n        >\r\n          <div class=\"cropper\">\r\n            <img ref={el => this.image = el} />\r\n            <div class=\"backdrop\" />\r\n            <div\r\n              class=\"crop\"\r\n              ref={e => this.crop = e}\r\n              onMouseDown={this.handleCropMouseDown}\r\n              onTouchStart={this.handleCropMouseDown}\r\n            >\r\n              <div class=\"nw\" />\r\n              <div class=\"ne\" />\r\n              <div class=\"se\" />\r\n              <div class=\"sw\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"view\"\r\n          ref={el => this.noPictureView = el}>\r\n            <dnn-dropzone\r\n              allowCameraMode\r\n              onFilesSelected={e => this.handleNewFile(e.detail[0])}\r\n              resx={\r\n                {\r\n                  capture: this.resx.capture,\r\n                  dragAndDropFile: this.resx.dragAndDropFile,\r\n                  or: this.resx.or,\r\n                  takePicture: this.resx.takePicture,\r\n                  uploadFile: this.resx.uploadFile,\r\n                }\r\n              }\r\n            />\r\n        </div>\r\n        <dnn-modal ref={el => this.imageTooSmallModal = el} close-text={this.resx.modalCloseText}>\r\n          <p>{this.resx.imageTooSmall.replace(\"{width}\", this.width.toString()).replace(\"{height}\", this.height.toString())}</p>\r\n        </dnn-modal>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\ninterface IComponentInterfaces\r\n{\r\n  View: \"noPictureView\" | \"takingPictureView\" | \"hasPictureView\" | \"hasCroppedPictureView\";\r\n}"]}
+{"version":3,"file":"dnn-image-cropper.js","sourceRoot":"","sources":["../../../src/components/dnn-image-cropper/dnn-image-cropper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, State, Prop, Event, EventEmitter } from '@stencil/core';\r\nimport { CornerType } from './CornerType';\r\nimport { getMovementFromEvent } from \"../../utilities/mouseUtilities\";\r\n\r\n/**\r\n * Allows cropping an image in-browser with the option to enforce a specific final size.\r\n * All computation happens in the browser and the final image is emmited\r\n * in an event that has a data-url of the image.\r\n */\r\n@Component({\r\n  tag: 'dnn-image-cropper',\r\n  styleUrl: 'dnn-image-cropper.scss',\r\n  shadow: true,\r\n})\r\nexport class DnnImageCropper {\r\n  /** Sets the desired final image width. */\r\n  @Prop() width: number = 600;\r\n\r\n  /** Sets the desired final image height. */\r\n  @Prop() height: number = 600;\r\n\r\n  /** Can be used to customize controls text.\r\n   * Some values support tokens, see default values for examples.\r\n  */\r\n  @Prop() resx: {\r\n    capture: string;\r\n    dragAndDropFile: string;\r\n    or: string;\r\n    takePicture: string;\r\n    uploadFile: string;\r\n    imageTooSmall: string;\r\n    modalCloseText: string;\r\n  } = {\r\n    capture: \"Capture\",\r\n    dragAndDropFile: \"Drag and drop an image\",\r\n    or: \"or\",\r\n    takePicture: \"Take a picture\",\r\n    uploadFile: \"Upload an image\",\r\n    imageTooSmall: \"The image you are attempting to upload does not meet the minimum size requirement of {width} pixels by {height} pixels. Please upload a larger image.\",\r\n    modalCloseText: \"Close\",\r\n  }\r\n\r\n  /** Sets the output quality of the corpped image (number between 0 and 1). */\r\n  @Prop() quality: number = 0.8;\r\n\r\n  /** When set to true, prevents cropping an image smaller than the required size, which would blow pixel and make the final picture look blurry. */\r\n  @Prop() preventUndersized: boolean = false;\r\n\r\n  /** When the image crop changes, emits the dataurl for the new cropped image. */\r\n  @Event() imageCropChanged: EventEmitter<string>;\r\n\r\n  @State() view: IComponentInterfaces[\"View\"];\r\n  \r\n  private host: HTMLElement;\r\n  private hasPictureView: HTMLDivElement;\r\n  private noPictureView: HTMLDivElement;\r\n  private canvas: HTMLCanvasElement;\r\n  private image: HTMLImageElement;\r\n  private crop: HTMLDivElement;\r\n  private previousTouch: Touch;\r\n  private imageTooSmallModal!: HTMLDnnModalElement;\r\n\r\n  componentDidLoad() {\r\n    requestAnimationFrame(() => {\r\n      this.setView(\"noPictureView\");\r\n    })\r\n  }\r\n\r\n  private setView(newView: IComponentInterfaces[\"View\"]){\r\n    const views = this.host.shadowRoot.querySelectorAll(\".view\");\r\n    views.forEach(v =>\r\n      v.classList.remove(\"visible\"));\r\n    switch (newView) {\r\n      case \"noPictureView\":\r\n        this.noPictureView.classList.add(\"visible\");\r\n        break;\r\n      case \"hasPictureView\":\r\n        this.hasPictureView.classList.add(\"visible\");\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n    this.view = newView;\r\n  }\r\n\r\n  private initCrop(){\r\n    var wantedRatio = this.width / this.height;\r\n    var imageRect = this.image.getBoundingClientRect();\r\n    var imageRatio = imageRect.width / imageRect.height;\r\n    \r\n    if (wantedRatio > imageRatio){\r\n        var wantedHeight = imageRect.width / wantedRatio;\r\n        var diff = imageRect.height - wantedHeight;\r\n        this.crop.style.top = Math.round(diff/2).toString() + \"px\";\r\n        this.crop.style.height = Math.round(wantedHeight).toString() + \"px\";\r\n    }\r\n    else{\r\n      var wantedWidth = imageRect.height * wantedRatio;\r\n      var diff = imageRect.width - wantedWidth;\r\n        this.crop.style.left = Math.round(diff/2).toString() + \"px\";\r\n        this.crop.style.width = Math.round(wantedWidth).toString() + \"px\";\r\n    }\r\n  }\r\n\r\n  private setImage(){\r\n    this.image.addEventListener('load', () => {\r\n      this.initCrop();\r\n      this.emitImage();\r\n    })\r\n    this.image.src = this.canvas.toDataURL();\r\n  }\r\n\r\n  private handleNewFile(file: File): void {\r\n    if (file.type.split('/')[0] != \"image\"){\r\n      return;\r\n    }\r\n    \r\n    var reader = new FileReader();\r\n    reader.onload = readerLoadEvent => {\r\n      var img = new Image();\r\n      img.onload = () => {\r\n        this.canvas.width = img.width;\r\n        this.canvas.height = img.height;\r\n        if (this.preventUndersized && (img.width < this.width || img.height< this.height)){\r\n          this.imageTooSmallModal.show();\r\n          return;\r\n        }\r\n        var ctx = this.canvas.getContext(\"2d\");\r\n        ctx.drawImage(img,0,0);\r\n        this.setView(\"hasPictureView\");\r\n        this.setImage();\r\n      }\r\n      img.src = readerLoadEvent.target.result.toString();\r\n    }\r\n    reader.readAsDataURL(file);\r\n  }\r\n\r\n  private handleCropMouseDown = (event: MouseEvent | TouchEvent) => {\r\n    event.stopPropagation();\r\n    event.preventDefault();\r\n    const element = event.target as HTMLElement;\r\n    const className = element.classList[0];\r\n\r\n    document.addEventListener(\"mouseup\", this.handleImageCropFinished, false);\r\n    document.addEventListener(\"touchend\", this.handleImageCropFinished, false);\r\n    switch (className) {\r\n      case \"crop\":\r\n        document.addEventListener(\"mousemove\", this.handleCropDrag, false);\r\n        document.addEventListener(\"touchmove\", this.handleCropDrag, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleCropDrag));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleCropDrag));\r\n        break;\r\n      case \"nw\":\r\n        document.addEventListener(\"mousemove\", this.handleNwMouseMove, false);\r\n        document.addEventListener(\"touchmove\", this.handleNwMouseMove, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleNwMouseMove));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleNwMouseMove));\r\n        break;\r\n      case \"ne\":\r\n        document.addEventListener(\"mousemove\", this.handleNeMouseMove, false);\r\n        document.addEventListener(\"touchmove\", this.handleNeMouseMove, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleNeMouseMove));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleNeMouseMove));\r\n        break\r\n      case \"se\":\r\n        document.addEventListener(\"mousemove\", this.handleSeMouseMove, false);\r\n        document.addEventListener(\"touchmove\", this.handleSeMouseMove, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleSeMouseMove));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleSeMouseMove));\r\n        break;\r\n      case \"sw\":\r\n        document.addEventListener(\"mousemove\", this.handleSwMouseMove, false);\r\n        document.addEventListener(\"touchmove\", this.handleSwMouseMove, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleSwMouseMove));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleSwMouseMove));\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  };\r\n\r\n  private handleImageCropFinished = (_ev: MouseEvent) => {\r\n    this.emitImage();\r\n    document.removeEventListener(\"mouseup\", this.handleImageCropFinished);\r\n    this.previousTouch = undefined;\r\n  }\r\n\r\n  private emitImage() {\r\n    var x = this.crop.offsetLeft / this.image.width * this.image.naturalWidth;\r\n    var y = this.crop.offsetTop / this.image.height * this.image.naturalHeight;\r\n\r\n    var cropRect = this.crop.getBoundingClientRect();\r\n    var width = cropRect.width / this.image.width * this.image.naturalWidth;\r\n    var height = cropRect.height / this.image.height * this.image.naturalHeight;\r\n\r\n    if (x < 0)\r\n      x = 0;\r\n    if (x > this.image.naturalWidth)\r\n      x = this.image.naturalWidth;\r\n    if (y < 0)\r\n      y = 0;\r\n    if (y > this.image.naturalWidth)\r\n      y = this.image.naturalWidth;\r\n    if (width > this.image.naturalWidth)\r\n      width = this.image.naturalWidth;\r\n    if (height > this.image.naturalHeight)\r\n      height = this.image.naturalHeight;\r\n\r\n    var dataUrl = this.generateCroppedImage(x, y, width, height, this.width, this.height);\r\n    this.imageCropChanged.emit(dataUrl);\r\n  }\r\n\r\n  private generateCroppedImage(x: number, y: number, width: number, height: number, desiredWidth: number, desiredHeight: number) {\r\n    this.canvas.width = desiredWidth;\r\n    this.canvas.height = desiredHeight;\r\n    const context = this.canvas.getContext(\"2d\");\r\n    context.clearRect(0, 0, desiredWidth, desiredHeight);\r\n    context.drawImage(this.image, x, y, width, height, 0, 0, desiredWidth, desiredHeight);\r\n\r\n    return this.canvas.toDataURL(\"image/jpeg\", this.quality);\r\n  }\r\n\r\n  private handleNwMouseMove = (event: MouseEvent | TouchEvent) => {\r\n    this.handleCornerDrag(event, CornerType.nw);\r\n  }\r\n\r\n  private handleNeMouseMove = (event: MouseEvent | TouchEvent) => {\r\n    this.handleCornerDrag(event, CornerType.ne);\r\n  }\r\n\r\n  private handleSeMouseMove = (event: MouseEvent | TouchEvent) => {\r\n    this.handleCornerDrag(event, CornerType.se);\r\n  }\r\n\r\n  private handleSwMouseMove = (event: MouseEvent | TouchEvent) => {\r\n    this.handleCornerDrag(event, CornerType.sw);\r\n  }\r\n\r\n  private handleCornerDrag = (event: MouseEvent | TouchEvent, corner: CornerType) => {\r\n    if (!this.isMouseStillInTarget(event)){\r\n      return;\r\n    }\r\n    \r\n    let {left, top} = this.getCornerLeftTop(corner);\r\n    let newWidth = 0;\r\n    let newHeight = 0;\r\n    let orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\r\n    const wantedRatio = this.width / this.height;\r\n    const cropRect = this.crop.getBoundingClientRect();\r\n    const imageRect = this.image.getBoundingClientRect();\r\n    let { movementX, movementY } = getMovementFromEvent(event, this.previousTouch);\r\n    if (Math.abs(movementX) < Math.abs(movementY)){\r\n      orientation = \"vertical\";\r\n    }\r\n\r\n    if (orientation == \"horizontal\"){\r\n      switch (corner) {\r\n        case CornerType.nw:\r\n        case CornerType.sw:\r\n          newWidth = cropRect.width - movementX;\r\n          newHeight = newWidth / wantedRatio;\r\n          break;\r\n        case CornerType.ne:\r\n        case CornerType.se:\r\n          newWidth = cropRect.width + movementX;\r\n          newHeight = newWidth / wantedRatio;\r\n          break;\r\n        default:\r\n          break;\r\n      }\r\n    } else{\r\n      switch (corner) {\r\n        case CornerType.nw:\r\n        case CornerType.ne:\r\n          newHeight = cropRect.height - movementY;\r\n          newWidth = newHeight * wantedRatio;\r\n          break;\r\n        case CornerType.se:\r\n        case CornerType.sw:\r\n          newHeight = cropRect.height + movementY;\r\n          newWidth = newHeight * wantedRatio;\r\n          break;\r\n        default:\r\n          break;\r\n      }\r\n    }\r\n\r\n    switch (corner) {\r\n      case CornerType.ne:\r\n      case CornerType.nw:\r\n        const topOffset = cropRect.height - newHeight;\r\n        top = this.crop.offsetTop + topOffset;\r\n      default:\r\n        break;\r\n    }\r\n\r\n    switch (corner) {\r\n      case CornerType.nw:\r\n      case CornerType.sw:\r\n        const leftOffset = cropRect.width - newWidth;\r\n        left = this.crop.offsetLeft + leftOffset;\r\n        if (left < 0) left = 0;\r\n        if (left > imageRect.width) left = imageRect.width;\r\n        if (top < 0) top = 0;\r\n        if (top > imageRect.height) top = imageRect.height;\r\n        if (left + newWidth > imageRect.width) newWidth = imageRect.width - left;\r\n        if (top + newHeight > imageRect.height) newHeight = imageRect.height - top;\r\n        break;\r\n      case CornerType.ne:\r\n      case CornerType.se:\r\n        if (top < 0) top = 0;\r\n        if (top > imageRect.height) top = imageRect.height;\r\n        if (left + newWidth > imageRect.width) newWidth = imageRect.width - left;\r\n        if (top + newHeight > imageRect.height) newHeight = imageRect.height - top;\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n\r\n    if (newWidth / newHeight != wantedRatio){\r\n      return;\r\n    }\r\n\r\n    if (this.preventUndersized){\r\n      const zoomRatio = this.image.width / this.image.naturalWidth;\r\n      if (newWidth / zoomRatio < this.width || newHeight / zoomRatio < this.height){\r\n        return;\r\n      }\r\n    }\r\n\r\n    switch (corner) {\r\n      case CornerType.ne:\r\n        this.crop.style.top = `${top}px`;\r\n        this.crop.style.width = `${newWidth}px`;\r\n        this.crop.style.height = `${newHeight}px`;\r\n        break;\r\n      case CornerType.nw:\r\n        this.crop.style.left = `${left}px`;\r\n        this.crop.style.top = `${top}px`;\r\n        this.crop.style.width = `${newWidth}px`;\r\n        this.crop.style.height = `${newHeight}px`;\r\n        break;\r\n      case CornerType.se:\r\n        this.crop.style.width = `${newWidth}px`;\r\n        this.crop.style.height = `${newHeight}px`;\r\n        break;\r\n      case CornerType.sw:\r\n        this.crop.style.left = `${left}px`;\r\n        this.crop.style.width = `${newWidth}px`;\r\n        this.crop.style.height = `${newHeight}px`;\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  }\r\n\r\n  private getCornerLeftTop(corner: CornerType): { left: number; top: number; } {\r\n    let left = 0;\r\n    let top = 0;\r\n    switch (corner) {\r\n      case CornerType.se:\r\n        left = this.crop.offsetLeft;\r\n        top = this.crop.offsetTop;\r\n        break;\r\n      case CornerType.sw:\r\n        top = this.crop.offsetTop;\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n    return {top, left};\r\n  }\r\n\r\n  private handleCropDrag = (ev: MouseEvent | TouchEvent) => {\r\n    if (!this.isMouseStillInTarget(ev)){\r\n      return;\r\n    }\r\n    let {movementX, movementY} = getMovementFromEvent(ev, this.previousTouch);\r\n    let newLeft = this.crop.offsetLeft + movementX;\r\n    let newTop = this.crop.offsetTop + movementY;\r\n    var imageRect = this.image.getBoundingClientRect();\r\n    var cropRect = this.crop.getBoundingClientRect();\r\n    if (newLeft < 0){\r\n      newLeft = 0;\r\n    }\r\n    if (newTop < 0){\r\n      newTop = 0;\r\n    }\r\n    if (newLeft + cropRect.width > imageRect.width){\r\n      newLeft = this.crop.offsetLeft;\r\n    }\r\n    if (newTop + cropRect.height > imageRect.height){\r\n      newTop = this.crop.offsetTop;\r\n    }\r\n    this.crop.style.left = newLeft + \"px\";\r\n    this.crop.style.top = newTop + \"px\";\r\n  };\r\n\r\n  private isMouseStillInTarget(event: MouseEvent | TouchEvent) {\r\n    var inside = false;\r\n    let mouseX: number;\r\n    let mouseY: number;\r\n    const imageRect = this.image.getBoundingClientRect();\r\n    \r\n    if (event instanceof MouseEvent){\r\n      mouseX = event.clientX;\r\n      mouseY = event.clientY;\r\n    }\r\n\r\n    if (typeof TouchEvent !== \"undefined\"){\r\n      if (event instanceof TouchEvent){\r\n        var touch = event.touches[0];\r\n        mouseX = touch.clientX;\r\n        mouseY = touch.clientY;\r\n      }\r\n    }\r\n    \r\n    if (\r\n      mouseX >= imageRect.x &&\r\n      mouseY >= imageRect.y &&\r\n      mouseX <= imageRect.left + imageRect.width &&\r\n      mouseY <= imageRect.top + imageRect.height)\r\n    {\r\n      inside = true;\r\n    }\r\n\r\n    var corners = this.crop.querySelectorAll(\"div\");\r\n    corners.forEach(corner =>{\r\n      var cornerRect = corner.getBoundingClientRect();\r\n      if (\r\n        mouseX >= cornerRect.x &&\r\n        mouseY >= cornerRect.y &&\r\n        mouseX <= cornerRect.left + cornerRect.width &&\r\n        mouseY <= cornerRect.top + cornerRect.height)\r\n        {\r\n          inside = true;\r\n        }\r\n    })\r\n\r\n    return inside;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host ref={el => this.host = el}>\r\n        <canvas ref={el => this.canvas = el} />\r\n        <div\r\n          class=\"view\"\r\n          ref={el => this.hasPictureView = el}\r\n        >\r\n          <div class=\"cropper\">\r\n            <img ref={el => this.image = el} />\r\n            <div class=\"backdrop\" />\r\n            <div\r\n              class=\"crop\"\r\n              ref={e => this.crop = e}\r\n              onMouseDown={this.handleCropMouseDown}\r\n              onTouchStart={this.handleCropMouseDown}\r\n            >\r\n              <div class=\"nw\" />\r\n              <div class=\"ne\" />\r\n              <div class=\"se\" />\r\n              <div class=\"sw\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"view\"\r\n          ref={el => this.noPictureView = el}>\r\n            <dnn-dropzone\r\n              allowCameraMode\r\n              onFilesSelected={e => this.handleNewFile(e.detail[0])}\r\n              resx={\r\n                {\r\n                  capture: this.resx.capture,\r\n                  dragAndDropFile: this.resx.dragAndDropFile,\r\n                  or: this.resx.or,\r\n                  takePicture: this.resx.takePicture,\r\n                  uploadFile: this.resx.uploadFile,\r\n                }\r\n              }\r\n            />\r\n        </div>\r\n        <dnn-modal ref={el => this.imageTooSmallModal = el} close-text={this.resx.modalCloseText}>\r\n          <p>{this.resx.imageTooSmall.replace(\"{width}\", this.width.toString()).replace(\"{height}\", this.height.toString())}</p>\r\n        </dnn-modal>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\ninterface IComponentInterfaces\r\n{\r\n  View: \"noPictureView\" | \"takingPictureView\" | \"hasPictureView\" | \"hasCroppedPictureView\";\r\n}"]}

package/dist/collection/components/dnn-tabs/dnn-tabs.js

@@ -5,8 +5,10 @@ export class DnnTabs {
     this.selectedTabTitle = "";
   }
   componentDidLoad() {
-    this.updateTitles();
-    this.showFirstTab();
+    requestAnimationFrame(() => {
+      this.updateTitles();
+      this.showFirstTab();
+    });
   }
   getTabs() {
     return this.component.shadowRoot.querySelector("slot").assignedElements();

package/dist/collection/components/dnn-tabs/dnn-tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"dnn-tabs.js","sourceRoot":"","sources":["../../../src/components/dnn-tabs/dnn-tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO1D,MAAM,OAAO,OAAO;EALpB;IAQa,cAAS,GAAa,EAAE,CAAC;IACzB,qBAAgB,GAAW,EAAE,CAAC;GAsD1C;EApDG,gBAAgB;IACZ,IAAI,CAAC,YAAY,EAAE,CAAC;IACpB,IAAI,CAAC,YAAY,EAAE,CAAC;EACxB,CAAC;EAEO,OAAO;IACX,OAAO,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,gBAAgB,EAAyB,CAAC;EACrG,CAAC;EAEO,YAAY;IAChB,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAC5B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC;EAC5E,CAAC;EAEO,YAAY;IAChB,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC9B,GAAG,CAAC,IAAI,EAAE,CAAC;IACX,IAAI,CAAC,gBAAgB,GAAG,GAAG,CAAC,QAAQ,CAAC;EACzC,CAAC;EAEO,OAAO,CAAC,QAAgB;IAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAC5B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;MACf,IAAI,GAAG,CAAC,QAAQ,IAAI,QAAQ,EAAC;QACzB,GAAG,CAAC,IAAI,EAAE,CAAC;QACX,OAAO;OACV;MAED,GAAG,CAAC,IAAI,EAAE,CAAC;IACf,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;EACrC,CAAC;EAED,MAAM;IACF,OAAO,CACH,EAAC,IAAI,IAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE;MAChC,WAAK,KAAK,EAAC,WAAW,IACjB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAC3B,cACI,KAAK,EAAE,IAAI,CAAC,gBAAgB,IAAI,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAA,CAAC,CAAC,EAAE,EACxD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAEpC,QAAQ,CACJ,CACZ,CACC;MACN,WAAK,KAAK,EAAC,YAAY;QACnB,eAAa,CACX,CACH,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Host, h, State } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: 'dnn-tabs',\r\n    styleUrl: 'dnn-tabs.scss',\r\n    shadow: true,\r\n})\r\nexport class DnnTabs {\r\n    private component: HTMLElement;\r\n\r\n    @State() tabTitles: string[] = [];\r\n    @State() selectedTabTitle: string = \"\";\r\n\r\n    componentDidLoad(){\r\n        this.updateTitles();\r\n        this.showFirstTab();\r\n    }\r\n\r\n    private getTabs() {\r\n        return this.component.shadowRoot.querySelector(\"slot\").assignedElements() as HTMLDnnTabElement[];\r\n    }\r\n\r\n    private updateTitles(){\r\n        const tabs = this.getTabs();\r\n        tabs.forEach(tab => this.tabTitles = [...this.tabTitles, tab.tabTitle]);\r\n    }\r\n\r\n    private showFirstTab(){\r\n        const tab = this.getTabs()[0];\r\n        tab.show();\r\n        this.selectedTabTitle = tab.tabTitle;\r\n    }\r\n\r\n    private showTab(tabTitle: string) {\r\n        const tabs = this.getTabs();\r\n        tabs.forEach(tab => {\r\n            if (tab.tabTitle == tabTitle){\r\n                tab.show();\r\n                return;\r\n            }\r\n\r\n            tab.hide();\r\n        });\r\n        this.selectedTabTitle = tabTitle;\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <Host ref={el => this.component = el}>\r\n                <div class=\"tabTitles\">\r\n                    {this.tabTitles.map(tabTitle =>\r\n                        <button\r\n                            class={this.selectedTabTitle == tabTitle ? \"visible\": \"\"}\r\n                            onClick={() => this.showTab(tabTitle)}\r\n                        >\r\n                            {tabTitle}\r\n                        </button>\r\n                    )}\r\n                </div>\r\n                <div class=\"currentTab\">\r\n                    <slot></slot>\r\n                </div>\r\n            </Host>\r\n        );\r\n    }\r\n}"]}
+{"version":3,"file":"dnn-tabs.js","sourceRoot":"","sources":["../../../src/components/dnn-tabs/dnn-tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO1D,MAAM,OAAO,OAAO;EALpB;IAQa,cAAS,GAAa,EAAE,CAAC;IACzB,qBAAgB,GAAW,EAAE,CAAC;GAwD1C;EAtDG,gBAAgB;IACZ,qBAAqB,CAAC,GAAG,EAAE;MACvB,IAAI,CAAC,YAAY,EAAE,CAAC;MACpB,IAAI,CAAC,YAAY,EAAE,CAAC;IACxB,CAAC,CAAC,CAAC;EACP,CAAC;EAEO,OAAO;IACX,OAAO,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,gBAAgB,EAAyB,CAAC;EACrG,CAAC;EAEO,YAAY;IAChB,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAC5B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC;EAC5E,CAAC;EAEO,YAAY;IAChB,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC9B,GAAG,CAAC,IAAI,EAAE,CAAC;IACX,IAAI,CAAC,gBAAgB,GAAG,GAAG,CAAC,QAAQ,CAAC;EACzC,CAAC;EAEO,OAAO,CAAC,QAAgB;IAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAC5B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;MACf,IAAI,GAAG,CAAC,QAAQ,IAAI,QAAQ,EAAC;QACzB,GAAG,CAAC,IAAI,EAAE,CAAC;QACX,OAAO;OACV;MAED,GAAG,CAAC,IAAI,EAAE,CAAC;IACf,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;EACrC,CAAC;EAED,MAAM;IACF,OAAO,CACH,EAAC,IAAI,IAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE;MAChC,WAAK,KAAK,EAAC,WAAW,IACjB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAC3B,cACI,KAAK,EAAE,IAAI,CAAC,gBAAgB,IAAI,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAA,CAAC,CAAC,EAAE,EACxD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAEpC,QAAQ,CACJ,CACZ,CACC;MACN,WAAK,KAAK,EAAC,YAAY;QACnB,eAAa,CACX,CACH,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Host, h, State } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: 'dnn-tabs',\r\n    styleUrl: 'dnn-tabs.scss',\r\n    shadow: true,\r\n})\r\nexport class DnnTabs {\r\n    private component: HTMLElement;\r\n\r\n    @State() tabTitles: string[] = [];\r\n    @State() selectedTabTitle: string = \"\";\r\n\r\n    componentDidLoad(){\r\n        requestAnimationFrame(() => {\r\n            this.updateTitles();\r\n            this.showFirstTab();\r\n        });\r\n    }\r\n\r\n    private getTabs() {\r\n        return this.component.shadowRoot.querySelector(\"slot\").assignedElements() as HTMLDnnTabElement[];\r\n    }\r\n\r\n    private updateTitles(){\r\n        const tabs = this.getTabs();\r\n        tabs.forEach(tab => this.tabTitles = [...this.tabTitles, tab.tabTitle]);\r\n    }\r\n\r\n    private showFirstTab(){\r\n        const tab = this.getTabs()[0];\r\n        tab.show();\r\n        this.selectedTabTitle = tab.tabTitle;\r\n    }\r\n\r\n    private showTab(tabTitle: string) {\r\n        const tabs = this.getTabs();\r\n        tabs.forEach(tab => {\r\n            if (tab.tabTitle == tabTitle){\r\n                tab.show();\r\n                return;\r\n            }\r\n\r\n            tab.hide();\r\n        });\r\n        this.selectedTabTitle = tabTitle;\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <Host ref={el => this.component = el}>\r\n                <div class=\"tabTitles\">\r\n                    {this.tabTitles.map(tabTitle =>\r\n                        <button\r\n                            class={this.selectedTabTitle == tabTitle ? \"visible\": \"\"}\r\n                            onClick={() => this.showTab(tabTitle)}\r\n                        >\r\n                            {tabTitle}\r\n                        </button>\r\n                    )}\r\n                </div>\r\n                <div class=\"currentTab\">\r\n                    <slot></slot>\r\n                </div>\r\n            </Host>\r\n        );\r\n    }\r\n}"]}

package/dist/collection/components/dnn-treeview-item/dnn-treeview-item.css

@@ -1,6 +1,6 @@
 :host {
   display: flex;
-  overflow: hidden;
+  overflow: visible;
 }
 
 .expander {
@@ -13,7 +13,6 @@
   border: none;
   padding: 0;
   margin: 0;
-  outline: none;
   height: 1em;
   display: flex;
   justify-content: center;
@@ -39,6 +38,7 @@ div.item .item-slot {
   display: flex;
   align-items: center;
   gap: 0.25em;
+  min-height: 24px;
 }
 div.item div.children {
   overflow: hidden;