@dnncommunity/dnn-elements 0.15.1 → 0.15.2

package/dist/collection/components/dnn-color-picker/dnn-color-picker.js

@@ -4,11 +4,15 @@
  */
 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;
+  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, h, State, Element, Prop, Event, Watch } from "@stencil/core";
+import { h } from "@stencil/core";
 import { ColorInfo } from '../../utilities/colorInfo';
 import { Debounce } from "../../utilities/debounce";
 /** Color Picker for Dnn */
@@ -283,152 +287,112 @@ export class DnnColorPicker {
     const red = this.currentColor.red;
     const green = this.currentColor.green;
     const blue = this.currentColor.blue;
-    return (h("div", { class: "dnn-color-picker" },
-      h("div", { class: "dnn-color-sliders" },
-        h("div", { class: "dnn-color-s-b", ref: (element) => this.saturationLightnessBox = element, style: { backgroundColor: `hsl(${hue},100%,50%)` }, onMouseDown: this.handleSaturationLightnessMouseDown.bind(this) },
-          h("button", { class: "dnn-s-b-picker", "aria-label": "Press up or down to adjust lightness, left or right to adjust saturation, hold shift to move by 10%", role: "slider", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuetext": `Saturation: ${Math.round(this.currentColor.saturation * 100)}%, Lightness: ${Math.round(this.currentColor.lightness * 100)}%`, style: {
-              left: Math.round(saturation * 100) + "%",
-              bottom: Math.round(lightness * 100) + "%"
-            }, onKeyDown: (e) => this.handleSaturationLightnessKeyDown(e) })),
-        h("div", { class: "dnn-color-bar" },
-          h("div", { class: "dnn-color-result", style: {
-              backgroundColor: '#' + this.getHex(),
-              boxShadow: "0 0 2px 1px " + "#" + this.getContrast()
-            } }),
-          h("div", { class: "dnn-color-hue", ref: (element) => this.hueRange = element, onMouseDown: this.handleHueMouseDown.bind(this) },
-            h("button", { class: "dnn-hue-picker", "aria-label": "Press left or right to adjust hue, hold shift to move by 10 degrees", role: "slider", "aria-valuemin": "0", "aria-valuemax": "359", "aria-valuenow": Math.round(hue), style: { left: (hue / 359 * 100).toString() + "%" }, onKeyDown: (e) => this.handleHueKeyDown(e) })))),
-      h("div", { class: "dnn-color-fields" },
-        h("div", { class: "dnn-rgb-color-fields", style: { display: this.rgbDisplay } },
-          h("div", { class: "dnn-rgb-color-field" },
-            h("label", null, "R"),
-            h("input", { type: "number", min: "0", max: "255", step: "1", class: "red", value: red, "aria-label": "red value", onChange: (e) => this.handleComponentValueChange(e, 'red') })),
-          h("div", { class: "dnn-rgb-color-field" },
-            h("label", null, "G"),
-            h("input", { type: "number", min: "0", max: "255", class: "green", value: green, "aria-label": "green value", onChange: (e) => this.handleComponentValueChange(e, 'green') })),
-          h("div", { class: "dnn-rgb-color-field" },
-            h("label", null, "B"),
-            h("input", { type: "number", min: "0", max: "255", class: "blue", value: blue, "aria-label": "blue value", onChange: (e) => this.handleComponentValueChange(e, 'blue') })),
-          h("div", { class: "dnn-color-mode-switch" },
-            h("button", { id: "rgb-switch", onClick: this.switchColorMode.bind(this), "aria-label": "switch to hexadecimal value entry" },
-              h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
-                h("path", { d: "M0 0h24v24H0z", fill: "none" }),
-                h("path", { d: "M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" }))))),
-        h("div", { class: "dnn-hsl-color-fields", style: { display: this.hslDisplay } },
-          h("div", { class: "dnn-hsl-color-field" },
-            h("label", null, "H"),
-            h("input", { type: "number", min: "0", max: "359", step: 1, value: Math.round(hue), "aria-label": "Hue", onChange: (e) => this.handleHSLChange(e, 'hue') })),
-          h("div", { class: "dnn-hsl-color-field" },
-            h("label", null, "S"),
-            h("input", { type: "number", min: "0", max: "100", step: 1, value: Math.round(saturation * 100), "aria-label": "Saturation", onChange: (e) => this.handleHSLChange(e, 'saturation') })),
-          h("div", { class: "dnn-hsl-color-field" },
-            h("label", null, "L"),
-            h("input", { type: "number", min: "0", max: "100", step: 1, value: Math.round(lightness * 100), "aria-label": "Lightness", onChange: (e) => this.handleHSLChange(e, 'lightness') })),
-          h("div", { class: "dnn-color-mode-switch" },
-            h("button", { id: "hsl-switch", onClick: this.switchColorMode.bind(this), "aria-label": "Switch to red, green, blue entry mode" },
-              h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
-                h("path", { d: "M0 0h24v24H0z", fill: "none" }),
-                h("path", { d: "M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" }))))),
-        h("div", { class: "dnn-hex-color-fields", style: { display: this.hexDisplay } },
-          h("div", { class: "dnn-hex-color-field" },
-            h("label", null, "HEX"),
-            h("div", { class: "hex-input" },
-              h("input", { type: "text", "aria-label": "Hexadecimal value", value: this.getHex(), onChange: e => this.handleHexChange(e.target.value) }),
-              h("button", { class: "copy", "aria-label": "copy value" },
-                h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
-                  h("path", { d: "M0 0h24v24H0z", fill: "none" }),
-                  h("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }))))),
-          h("div", { class: "dnn-color-mode-switch" },
-            h("button", { id: "hex-switch", onClick: this.switchColorMode.bind(this), "aria-label": "Switch to hue saturation lightness values" },
-              h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
-                h("path", { d: "M0 0h24v24H0z", fill: "none" }),
-                h("path", { d: "M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" }))))))));
+    return (h("div", { class: "dnn-color-picker" }, h("div", { class: "dnn-color-sliders" }, h("div", { class: "dnn-color-s-b", ref: (element) => this.saturationLightnessBox = element, style: { backgroundColor: `hsl(${hue},100%,50%)` }, onMouseDown: this.handleSaturationLightnessMouseDown.bind(this) }, h("button", { class: "dnn-s-b-picker", "aria-label": "Press up or down to adjust lightness, left or right to adjust saturation, hold shift to move by 10%", role: "slider", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuetext": `Saturation: ${Math.round(this.currentColor.saturation * 100)}%, Lightness: ${Math.round(this.currentColor.lightness * 100)}%`, style: {
+        left: Math.round(saturation * 100) + "%",
+        bottom: Math.round(lightness * 100) + "%"
+      }, onKeyDown: (e) => this.handleSaturationLightnessKeyDown(e) })), h("div", { class: "dnn-color-bar" }, h("div", { class: "dnn-color-result", style: {
+        backgroundColor: '#' + this.getHex(),
+        boxShadow: "0 0 2px 1px " + "#" + this.getContrast()
+      } }), h("div", { class: "dnn-color-hue", ref: (element) => this.hueRange = element, onMouseDown: this.handleHueMouseDown.bind(this) }, h("button", { class: "dnn-hue-picker", "aria-label": "Press left or right to adjust hue, hold shift to move by 10 degrees", role: "slider", "aria-valuemin": "0", "aria-valuemax": "359", "aria-valuenow": Math.round(hue), style: { left: (hue / 359 * 100).toString() + "%" }, onKeyDown: (e) => this.handleHueKeyDown(e) })))), h("div", { class: "dnn-color-fields" }, h("div", { class: "dnn-rgb-color-fields", style: { display: this.rgbDisplay } }, h("div", { class: "dnn-rgb-color-field" }, h("label", null, "R"), h("input", { type: "number", min: "0", max: "255", step: "1", class: "red", value: red, "aria-label": "red value", onChange: (e) => this.handleComponentValueChange(e, 'red') })), h("div", { class: "dnn-rgb-color-field" }, h("label", null, "G"), h("input", { type: "number", min: "0", max: "255", class: "green", value: green, "aria-label": "green value", onChange: (e) => this.handleComponentValueChange(e, 'green') })), h("div", { class: "dnn-rgb-color-field" }, h("label", null, "B"), h("input", { type: "number", min: "0", max: "255", class: "blue", value: blue, "aria-label": "blue value", onChange: (e) => this.handleComponentValueChange(e, 'blue') })), h("div", { class: "dnn-color-mode-switch" }, h("button", { id: "rgb-switch", onClick: this.switchColorMode.bind(this), "aria-label": "switch to hexadecimal value entry" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0z", fill: "none" }), h("path", { d: "M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" }))))), h("div", { class: "dnn-hsl-color-fields", style: { display: this.hslDisplay } }, h("div", { class: "dnn-hsl-color-field" }, h("label", null, "H"), h("input", { type: "number", min: "0", max: "359", step: 1, value: Math.round(hue), "aria-label": "Hue", onChange: (e) => this.handleHSLChange(e, 'hue') })), h("div", { class: "dnn-hsl-color-field" }, h("label", null, "S"), h("input", { type: "number", min: "0", max: "100", step: 1, value: Math.round(saturation * 100), "aria-label": "Saturation", onChange: (e) => this.handleHSLChange(e, 'saturation') })), h("div", { class: "dnn-hsl-color-field" }, h("label", null, "L"), h("input", { type: "number", min: "0", max: "100", step: 1, value: Math.round(lightness * 100), "aria-label": "Lightness", onChange: (e) => this.handleHSLChange(e, 'lightness') })), h("div", { class: "dnn-color-mode-switch" }, h("button", { id: "hsl-switch", onClick: this.switchColorMode.bind(this), "aria-label": "Switch to red, green, blue entry mode" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0z", fill: "none" }), h("path", { d: "M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" }))))), h("div", { class: "dnn-hex-color-fields", style: { display: this.hexDisplay } }, h("div", { class: "dnn-hex-color-field" }, h("label", null, "HEX"), h("div", { class: "hex-input" }, h("input", { type: "text", "aria-label": "Hexadecimal value", value: this.getHex(), onChange: e => this.handleHexChange(e.target.value) }), h("button", { class: "copy", "aria-label": "copy value" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0z", fill: "none" }), h("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }))))), h("div", { class: "dnn-color-mode-switch" }, h("button", { id: "hex-switch", onClick: this.switchColorMode.bind(this), "aria-label": "Switch to hue saturation lightness values" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0z", fill: "none" }), h("path", { d: "M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" }))))))));
   }
   static get is() { return "dnn-color-picker"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["dnn-color-picker.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["dnn-color-picker.css"]
-  }; }
-  static get properties() { return {
-    "color": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Sets the initial color, must be a valid 8 character hexadecimal string without the # sign."
-      },
-      "attribute": "color",
-      "reflect": false,
-      "defaultValue": "\"FFFFFF\""
-    },
-    "colorBoxHeight": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "example",
-            "text": "100% renders a perfect square"
-          }],
-        "text": "Sets the width-height ratio of the color picker saturation-lightness box."
-      },
-      "attribute": "color-box-height",
-      "reflect": false,
-      "defaultValue": "\"50%\""
-    }
-  }; }
-  static get states() { return {
-    "currentColor": {},
-    "rgbDisplay": {},
-    "hslDisplay": {},
-    "hexDisplay": {}
-  }; }
-  static get events() { return [{
-      "method": "colorChanged",
-      "name": "colorChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "name": "see",
-            "text": ".. /../utilities/colorInfo.ts"
-          }],
-        "text": "Fires up when the color is changed and emits a ColorInfo object"
+  static get originalStyleUrls() {
+    return {
+      "$": ["dnn-color-picker.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["dnn-color-picker.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the initial color, must be a valid 8 character hexadecimal string without the # sign."
+        },
+        "attribute": "color",
+        "reflect": false,
+        "defaultValue": "\"FFFFFF\""
       },
-      "complexType": {
-        "original": "ColorInfo",
-        "resolved": "ColorInfo",
-        "references": {
-          "ColorInfo": {
-            "location": "import",
-            "path": "../../utilities/colorInfo"
+      "colorBoxHeight": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "example",
+              "text": "100% renders a perfect square"
+            }],
+          "text": "Sets the width-height ratio of the color picker saturation-lightness box."
+        },
+        "attribute": "color-box-height",
+        "reflect": false,
+        "defaultValue": "\"50%\""
+      }
+    };
+  }
+  static get states() {
+    return {
+      "currentColor": {},
+      "rgbDisplay": {},
+      "hslDisplay": {},
+      "hexDisplay": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "colorChanged",
+        "name": "colorChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "see",
+              "text": ".. /../utilities/colorInfo.ts"
+            }],
+          "text": "Fires up when the color is changed and emits a ColorInfo object"
+        },
+        "complexType": {
+          "original": "ColorInfo",
+          "resolved": "ColorInfo",
+          "references": {
+            "ColorInfo": {
+              "location": "import",
+              "path": "../../utilities/colorInfo"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
   static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "currentColor",
-      "methodName": "handeCurrentColorChanged"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "currentColor",
+        "methodName": "handeCurrentColorChanged"
+      }];
+  }
 }
 __decorate([
   Debounce(100)
 ], DnnColorPicker.prototype, "colorChangedHandler", null);
-//# sourceMappingURL=dnn-color-picker.js.map
+//# sourceMappingURL=dnn-color-picker.js.map

package/dist/collection/components/dnn-color-picker/dnn-color-picker.stories.js

@@ -30,4 +30,4 @@ ColorPicker.args = {
   color: 'FFFFFF',
   colorBoxHeight: '50%',
 };
-//# sourceMappingURL=dnn-color-picker.stories.js.map
+//# sourceMappingURL=dnn-color-picker.stories.js.map

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

@@ -1,4 +1,4 @@
-import { Component, Host, h, Prop, State, Event } from '@stencil/core';
+import { Host, h } from '@stencil/core';
 export class DnnDropzone {
   constructor() {
     /** Localization strings */
@@ -118,149 +118,134 @@ export class DnnDropzone {
   }
   render() {
     var _a, _b, _c, _d, _e, _f;
-    return (h(Host, { ref: e => this.dropzone = e, class: "dropzone", onDragOver: this.handleDragOver, onDrop: this.handleDrop, onDragLeave: () => this.dropzone.classList.remove("dropping") },
-      !this.takingPicture &&
-        [
-          h("p", null, (_a = this.resx) === null || _a === void 0 ? void 0 : _a.dragAndDropFile),
-          h("p", null,
-            "- ", (_b = this.resx) === null || _b === void 0 ? void 0 :
-            _b.or,
-            " -"),
-          h("label", { class: "upload-file" },
-            h("input", { type: "file", ref: el => this.fileInput = el, onChange: e => this.handleUploadButton(e.target) }),
-            h("span", null,
-              h("svg", { xmlns: "http://www.w3.org/2000/svg", "enable-background": "new 0 0 24 24", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
-                h("g", null,
-                  h("rect", { fill: "none", height: "24", width: "24" })),
-                h("g", null,
-                  h("path", { d: "M5,20h14v-2H5V20z M5,10h4v6h6v-6h4l-7-7L5,10z" })))),
-            "\u00A0", (_c = this.resx) === null || _c === void 0 ? void 0 :
-            _c.uploadFile),
-          this.canTakeSnapshots &&
-            [
-              h("p", null,
-                "- ", (_d = this.resx) === null || _d === void 0 ? void 0 :
-                _d.or,
-                " -"),
-              h("button", { onClick: () => this.takeSnapshot() },
-                h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
-                  h("path", { d: "M0 0h24v24H0z", fill: "none" }),
-                  h("circle", { cx: "12", cy: "12", r: "3.2" }),
-                  h("path", { d: "M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z" })), (_e = this.resx) === null || _e === void 0 ? void 0 :
-                _e.takePicture)
-            ]
-        ],
-      this.takingPicture &&
-        h("div", { class: "video-preview" },
-          h("video", { ref: e => this.videoPreview = e }),
-          h("button", { onClick: () => this.applySnapshot() },
-            h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
-              h("path", { d: "M0 0h24v24H0z", fill: "none" }),
-              h("circle", { cx: "12", cy: "12", r: "3.2" }),
-              h("path", { d: "M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z" })),
-            "\u00A0", (_f = this.resx) === null || _f === void 0 ? void 0 :
-            _f.capture))));
+    return (h(Host, { ref: e => this.dropzone = e, class: "dropzone", onDragOver: this.handleDragOver, onDrop: this.handleDrop, onDragLeave: () => this.dropzone.classList.remove("dropping") }, !this.takingPicture &&
+      [
+        h("p", null, (_a = this.resx) === null || _a === void 0 ? void 0 : _a.dragAndDropFile),
+        h("p", null, "- ", (_b = this.resx) === null || _b === void 0 ? void 0 :
+          _b.or, " -"),
+        h("label", { class: "upload-file" }, h("input", { type: "file", ref: el => this.fileInput = el, onChange: e => this.handleUploadButton(e.target) }), h("span", null, h("svg", { xmlns: "http://www.w3.org/2000/svg", "enable-background": "new 0 0 24 24", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("g", null, h("rect", { fill: "none", height: "24", width: "24" })), h("g", null, h("path", { d: "M5,20h14v-2H5V20z M5,10h4v6h6v-6h4l-7-7L5,10z" })))), "\u00A0", (_c = this.resx) === null || _c === void 0 ? void 0 :
+          _c.uploadFile),
+        this.canTakeSnapshots &&
+          [
+            h("p", null, "- ", (_d = this.resx) === null || _d === void 0 ? void 0 :
+              _d.or, " -"),
+            h("button", { onClick: () => this.takeSnapshot() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0z", fill: "none" }), h("circle", { cx: "12", cy: "12", r: "3.2" }), h("path", { d: "M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z" })), (_e = this.resx) === null || _e === void 0 ? void 0 :
+              _e.takePicture)
+          ]
+      ], this.takingPicture &&
+      h("div", { class: "video-preview" }, h("video", { ref: e => this.videoPreview = e }), h("button", { onClick: () => this.applySnapshot() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0z", fill: "none" }), h("circle", { cx: "12", cy: "12", r: "3.2" }), h("path", { d: "M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z" })), "\u00A0", (_f = this.resx) === null || _f === void 0 ? void 0 :
+        _f.capture))));
   }
   static get is() { return "dnn-dropzone"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["dnn-dropzone.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["dnn-dropzone.css"]
-  }; }
-  static get properties() { return {
-    "resx": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "{\n    dragAndDropFile: string;\n    capture: string;\n    or: string;\n    takePicture: string;\n    uploadFile: string;\n  }",
-        "resolved": "{ dragAndDropFile: string; capture: string; or: string; takePicture: string; uploadFile: string; }",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["dnn-dropzone.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["dnn-dropzone.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "resx": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{\n    dragAndDropFile: string;\n    capture: string;\n    or: string;\n    takePicture: string;\n    uploadFile: string;\n  }",
+          "resolved": "{ dragAndDropFile: string; capture: string; or: string; takePicture: string; uploadFile: string; }",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Localization strings"
+        },
+        "defaultValue": "{\n    dragAndDropFile: \"Drag and drop a file\",\n    capture: \"Capture\",\n    or: \"or\",\n    takePicture: \"Take a picture\",\n    uploadFile: \"Upload a file\",\n  }"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Localization strings"
+      "allowedExtensions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A list of allowed file extensions.\nIf not specified, any file is allowed.\nEx: [\"jpg\", \"jped\", \"gif\", \"png\"]"
+        }
       },
-      "defaultValue": "{\n    dragAndDropFile: \"Drag and drop a file\",\n    capture: \"Capture\",\n    or: \"or\",\n    takePicture: \"Take a picture\",\n    uploadFile: \"Upload a file\",\n  }"
-    },
-    "allowedExtensions": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
+      "allowCameraMode": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true, will allow the user to take a snapshot\nusing the device camera. (only works over https)."
+        },
+        "attribute": "allow-camera-mode",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "A list of allowed file extensions.\nIf not specified, any file is allowed.\nEx: [\"jpg\", \"jped\", \"gif\", \"png\"]"
+      "captureQuality": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the jpeg quality for when the device\ncamera is used to generate a picture.\nNeeds to be a number between 0 and 1 and defaults to 0.8"
+        },
+        "attribute": "capture-quality",
+        "reflect": false,
+        "defaultValue": "0.8"
       }
-    },
-    "allowCameraMode": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If true, will allow the user to take a snapshot\nusing the device camera. (only works over https)."
-      },
-      "attribute": "allow-camera-mode",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "captureQuality": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specifies the jpeg quality for when the device\ncamera is used to generate a picture.\nNeeds to be a number between 0 and 1 and defaults to 0.8"
-      },
-      "attribute": "capture-quality",
-      "reflect": false,
-      "defaultValue": "0.8"
-    }
-  }; }
-  static get states() { return {
-    "canTakeSnapshots": {},
-    "takingPicture": {}
-  }; }
-  static get events() { return [{
-      "method": "filesSelected",
-      "name": "filesSelected",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires when file were selected."
-      },
-      "complexType": {
-        "original": "File[]",
-        "resolved": "File[]",
-        "references": {
-          "File": {
-            "location": "global"
+    };
+  }
+  static get states() {
+    return {
+      "canTakeSnapshots": {},
+      "takingPicture": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "filesSelected",
+        "name": "filesSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when file were selected."
+        },
+        "complexType": {
+          "original": "File[]",
+          "resolved": "File[]",
+          "references": {
+            "File": {
+              "location": "global"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
 }
-//# sourceMappingURL=dnn-dropzone.js.map
+//# sourceMappingURL=dnn-dropzone.js.map

package/dist/collection/components/dnn-dropzone/dnn-dropzone.stories.js

@@ -45,4 +45,4 @@ Dropzone.args = {
   captureQuality: 0.8,
   resx,
 };
-//# sourceMappingURL=dnn-dropzone.stories.js.map
+//# sourceMappingURL=dnn-dropzone.stories.js.map

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

@@ -6,4 +6,4 @@ export var CornerType;
   CornerType[CornerType["sw"] = 3] = "sw";
 })(CornerType || (CornerType = {}));
 ;
-//# sourceMappingURL=CornerType.js.map
+//# sourceMappingURL=CornerType.js.map