@dnncommunity/dnn-elements 0.14.1 → 0.15.0-beta.3

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

@@ -1,266 +1,266 @@
-import { Component, Host, h, Prop, State, Event } from '@stencil/core';
-export class DnnDropzone {
-  constructor() {
-    /** Localization strings */
-    this.resx = {
-      dragAndDropFile: "Drag and drop a file",
-      capture: "Capture",
-      or: "or",
-      takePicture: "Take a picture",
-      uploadFile: "Upload a file",
-    };
-    /**
-     * If true, will allow the user to take a snapshot
-     * using the device camera. (only works over https).
-     */
-    this.allowCameraMode = false;
-    /**
-     * Specifies the jpeg quality for when the device
-     * camera is used to generate a picture.
-     * Needs to be a number between 0 and 1 and defaults to 0.8
-     */
-    this.captureQuality = 0.8;
-    this.canTakeSnapshots = false;
-    this.takingPicture = false;
-    this.handleDragOver = (event) => {
-      event.stopPropagation();
-      event.preventDefault();
-      event.dataTransfer.dropEffect = "copy";
-      this.dropzone.classList.add("dropping");
-    };
-    this.handleDrop = (dropEvent) => {
-      dropEvent.stopPropagation();
-      dropEvent.preventDefault();
-      const files = dropEvent.dataTransfer.files;
-      if (this.hasInvalidExtensions(files)) {
-        return;
-      }
-      var fileList = this.getFilesFromFileList(files);
-      this.filesSelected.emit(fileList);
-    };
-  }
-  componentDidLoad() {
-    if (this.allowCameraMode) {
-      this.checkIfBrowserCanTakeSnapshots()
-        .then(result => this.canTakeSnapshots = result);
-    }
-    if (this.allowedExtensions != undefined && this.allowedExtensions.length > 0) {
-      var extensionsWithDots = this.allowedExtensions.map(e => `.${e}`);
-      var extensionsList = extensionsWithDots.join(",");
-      this.fileInput.accept = extensionsList;
-    }
-  }
-  checkIfBrowserCanTakeSnapshots() {
-    return new Promise((resolve) => {
-      const mediaDevices = navigator.mediaDevices;
-      if (mediaDevices == undefined || mediaDevices.enumerateDevices == undefined) {
-        resolve(false);
-      }
-      mediaDevices.enumerateDevices()
-        .then(devices => {
-        var result = devices.some(device => device.kind == "videoinput");
-        resolve(result);
-      });
-    });
-  }
-  getFilesFromFileList(files) {
-    var fileList = [];
-    for (let index = 0; index < files.length; index++) {
-      const file = files[index];
-      fileList.push(file);
-    }
-    return fileList;
-  }
-  handleUploadButton(element) {
-    let files = this.getFilesFromFileList(element.files);
-    this.filesSelected.emit(files);
-  }
-  hasInvalidExtensions(files) {
-    var hasInvalid = false;
-    for (let fileIndex = 0; fileIndex < files.length; fileIndex++) {
-      const file = files[fileIndex];
-      var regex = /(?:\.([^.]+))?$/;
-      const fileExtension = regex.exec(file.name)[1];
-      if (fileExtension == undefined) {
-        hasInvalid = true;
-      }
-      if (this.allowedExtensions != undefined && !this.allowedExtensions.includes(fileExtension)) {
-        hasInvalid = true;
-      }
-      return hasInvalid;
-    }
-  }
-  takeSnapshot() {
-    this.takingPicture = true;
-    navigator.mediaDevices.getUserMedia({ video: true, audio: false })
-      .then(stream => {
-      stream;
-      this.videoPreview.srcObject = stream;
-      this.videoPreview.play()
-        .then(() => {
-        this.videoSettings = stream.getVideoTracks()[0].getSettings();
-      });
-    })
-      .catch(error => alert(error));
-  }
-  applySnapshot() {
-    var canvas = document.createElement("canvas");
-    const context = canvas.getContext("2d");
-    canvas.width = this.videoSettings.width;
-    canvas.height = this.videoSettings.height;
-    context.drawImage(this.videoPreview, 0, 0);
-    canvas.toBlob(blob => {
-      var file = new File([blob], "image.jpeg", { type: "image/jpeg" });
-      this.takingPicture = false;
-      var fileList = [file];
-      this.filesSelected.emit(fileList);
-    }, "image/jpeg", this.captureQuality);
-  }
-  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))));
-  }
-  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": "{\r\n    dragAndDropFile: string;\r\n    capture: string;\r\n    or: string;\r\n    takePicture: string;\r\n    uploadFile: string;\r\n  }",
-        "resolved": "{ dragAndDropFile: string; capture: string; or: string; takePicture: string; uploadFile: string; }",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Localization strings"
-      },
-      "defaultValue": "{\r\n    dragAndDropFile: \"Drag and drop a file\",\r\n    capture: \"Capture\",\r\n    or: \"or\",\r\n    takePicture: \"Take a picture\",\r\n    uploadFile: \"Upload a file\",\r\n  }"
-    },
-    "allowedExtensions": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "A list of allowed file extensions.\r\nIf not specified, any file is allowed.\r\nEx: [\"jpg\", \"jped\", \"gif\", \"png\"]"
-      }
-    },
-    "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\r\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\r\ncamera is used to generate a picture.\r\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"
-          }
-        }
-      }
-    }]; }
-}
+import { Component, Host, h, Prop, State, Event } from '@stencil/core';
+export class DnnDropzone {
+  constructor() {
+    /** Localization strings */
+    this.resx = {
+      dragAndDropFile: "Drag and drop a file",
+      capture: "Capture",
+      or: "or",
+      takePicture: "Take a picture",
+      uploadFile: "Upload a file",
+    };
+    /**
+     * If true, will allow the user to take a snapshot
+     * using the device camera. (only works over https).
+     */
+    this.allowCameraMode = false;
+    /**
+     * Specifies the jpeg quality for when the device
+     * camera is used to generate a picture.
+     * Needs to be a number between 0 and 1 and defaults to 0.8
+     */
+    this.captureQuality = 0.8;
+    this.canTakeSnapshots = false;
+    this.takingPicture = false;
+    this.handleDragOver = (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      event.dataTransfer.dropEffect = "copy";
+      this.dropzone.classList.add("dropping");
+    };
+    this.handleDrop = (dropEvent) => {
+      dropEvent.stopPropagation();
+      dropEvent.preventDefault();
+      const files = dropEvent.dataTransfer.files;
+      if (this.hasInvalidExtensions(files)) {
+        return;
+      }
+      var fileList = this.getFilesFromFileList(files);
+      this.filesSelected.emit(fileList);
+    };
+  }
+  componentDidLoad() {
+    if (this.allowCameraMode) {
+      this.checkIfBrowserCanTakeSnapshots()
+        .then(result => this.canTakeSnapshots = result);
+    }
+    if (this.allowedExtensions != undefined && this.allowedExtensions.length > 0) {
+      var extensionsWithDots = this.allowedExtensions.map(e => `.${e}`);
+      var extensionsList = extensionsWithDots.join(",");
+      this.fileInput.accept = extensionsList;
+    }
+  }
+  checkIfBrowserCanTakeSnapshots() {
+    return new Promise((resolve) => {
+      const mediaDevices = navigator.mediaDevices;
+      if (mediaDevices == undefined || mediaDevices.enumerateDevices == undefined) {
+        resolve(false);
+      }
+      mediaDevices.enumerateDevices()
+        .then(devices => {
+        var result = devices.some(device => device.kind == "videoinput");
+        resolve(result);
+      });
+    });
+  }
+  getFilesFromFileList(files) {
+    var fileList = [];
+    for (let index = 0; index < files.length; index++) {
+      const file = files[index];
+      fileList.push(file);
+    }
+    return fileList;
+  }
+  handleUploadButton(element) {
+    let files = this.getFilesFromFileList(element.files);
+    this.filesSelected.emit(files);
+  }
+  hasInvalidExtensions(files) {
+    var hasInvalid = false;
+    for (let fileIndex = 0; fileIndex < files.length; fileIndex++) {
+      const file = files[fileIndex];
+      var regex = /(?:\.([^.]+))?$/;
+      const fileExtension = regex.exec(file.name)[1];
+      if (fileExtension == undefined) {
+        hasInvalid = true;
+      }
+      if (this.allowedExtensions != undefined && !this.allowedExtensions.includes(fileExtension)) {
+        hasInvalid = true;
+      }
+      return hasInvalid;
+    }
+  }
+  takeSnapshot() {
+    this.takingPicture = true;
+    navigator.mediaDevices.getUserMedia({ video: true, audio: false })
+      .then(stream => {
+      stream;
+      this.videoPreview.srcObject = stream;
+      this.videoPreview.play()
+        .then(() => {
+        this.videoSettings = stream.getVideoTracks()[0].getSettings();
+      });
+    })
+      .catch(error => alert(error));
+  }
+  applySnapshot() {
+    var canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d");
+    canvas.width = this.videoSettings.width;
+    canvas.height = this.videoSettings.height;
+    context.drawImage(this.videoPreview, 0, 0);
+    canvas.toBlob(blob => {
+      var file = new File([blob], "image.jpeg", { type: "image/jpeg" });
+      this.takingPicture = false;
+      var fileList = [file];
+      this.filesSelected.emit(fileList);
+    }, "image/jpeg", this.captureQuality);
+  }
+  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))));
+  }
+  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": {}
+      },
+      "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  }"
+    },
+    "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\"]"
+      }
+    },
+    "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"
+          }
+        }
+      }
+    }]; }
+}
 //# sourceMappingURL=dnn-dropzone.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dnn-dropzone.js","sourceRoot":"","sources":["../../../src/components/dnn-dropzone/dnn-dropzone.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dnn-dropzone',\r\n  styleUrl: 'dnn-dropzone.scss',\r\n  shadow: true,\r\n})\r\nexport class DnnDropzone {\r\n  /** Localization strings */\r\n  @Prop() resx:{\r\n    dragAndDropFile: string;\r\n    capture: string;\r\n    or: string;\r\n    takePicture: string;\r\n    uploadFile: string;\r\n  } = {\r\n    dragAndDropFile: \"Drag and drop a file\",\r\n    capture: \"Capture\",\r\n    or: \"or\",\r\n    takePicture: \"Take a picture\",\r\n    uploadFile: \"Upload a file\",\r\n  }\r\n\r\n  /** A list of allowed file extensions.\r\n   * If not specified, any file is allowed.\r\n   * Ex: [\"jpg\", \"jped\", \"gif\", \"png\"]\r\n   */\r\n  @Prop() allowedExtensions: string[];\r\n\r\n  /**\r\n   * If true, will allow the user to take a snapshot\r\n   * using the device camera. (only works over https).\r\n   */\r\n  @Prop() allowCameraMode: boolean = false;\r\n\r\n  /**\r\n   * Specifies the jpeg quality for when the device\r\n   * camera is used to generate a picture.\r\n   * Needs to be a number between 0 and 1 and defaults to 0.8\r\n   */\r\n  @Prop() captureQuality: number = 0.8;\r\n\r\n  /** Fires when file were selected. */\r\n  @Event() filesSelected: EventEmitter<File[]>;\r\n  \r\n  @State() canTakeSnapshots: boolean = false;\r\n\r\n  @State() takingPicture: boolean = false;\r\n  \r\n  private dropzone: HTMLElement;\r\n  private fileInput: HTMLInputElement;\r\n  private videoPreview: HTMLVideoElement;\r\n  private videoSettings!: MediaTrackSettings;\r\n\r\n\r\n  componentDidLoad() {\r\n    if (this.allowCameraMode){\r\n      this.checkIfBrowserCanTakeSnapshots()\r\n      .then(result => this.canTakeSnapshots = result);\r\n    }\r\n    if (this.allowedExtensions != undefined && this.allowedExtensions.length > 0){\r\n      var extensionsWithDots = this.allowedExtensions.map(e => `.${e}`);\r\n      var extensionsList = extensionsWithDots.join(\",\");\r\n      this.fileInput.accept = extensionsList;\r\n    }\r\n  }\r\n\r\n  private checkIfBrowserCanTakeSnapshots(): Promise<boolean> {\r\n    return new Promise((resolve) => {\r\n      const mediaDevices = navigator.mediaDevices;\r\n      if (mediaDevices == undefined || mediaDevices.enumerateDevices == undefined) {\r\n        resolve(false);\r\n      }\r\n      mediaDevices.enumerateDevices()\r\n        .then(devices => {\r\n          var result = devices.some(device => device.kind == \"videoinput\");\r\n          resolve(result);\r\n        });\r\n    });\r\n  }\r\n\r\n  private getFilesFromFileList(files: FileList) : File[] {\r\n    var fileList: File[] = [];\r\n    for (let index = 0; index < files.length; index++) {\r\n      const file = files[index];\r\n      fileList.push(file);\r\n    }\r\n\r\n    return fileList;\r\n  }\r\n\r\n  private handleUploadButton(element: HTMLInputElement): void {\r\n    let files = this.getFilesFromFileList(element.files);\r\n\r\n    this.filesSelected.emit(files);\r\n  }\r\n\r\n  private handleDragOver = (event: DragEvent) => \r\n  {\r\n    event.stopPropagation();\r\n    event.preventDefault();\r\n    event.dataTransfer.dropEffect = \"copy\";\r\n    this.dropzone.classList.add(\"dropping\");\r\n  };\r\n\r\n  private hasInvalidExtensions(files: FileList): boolean{\r\n    var hasInvalid = false;\r\n    for (let fileIndex = 0; fileIndex < files.length; fileIndex++) {\r\n      const file = files[fileIndex];\r\n      var regex = /(?:\\.([^.]+))?$/;\r\n      const fileExtension = regex.exec(file.name)[1];\r\n      if (fileExtension == undefined){\r\n        hasInvalid = true;\r\n      }\r\n\r\n      if (this.allowedExtensions != undefined && !this.allowedExtensions.includes(fileExtension)){\r\n        hasInvalid = true;\r\n      }\r\n\r\n      return hasInvalid;\r\n    }\r\n  }\r\n\r\n  private handleDrop = (dropEvent: DragEvent) => {\r\n    dropEvent.stopPropagation();\r\n    dropEvent.preventDefault();\r\n    const files = dropEvent.dataTransfer.files;\r\n\r\n    if (this.hasInvalidExtensions(files)){\r\n      return;\r\n    }\r\n    var fileList = this.getFilesFromFileList(files);\r\n    this.filesSelected.emit(fileList);\r\n  };\r\n\r\n  private takeSnapshot(): void {\r\n    this.takingPicture = true;\r\n    navigator.mediaDevices.getUserMedia({video: true, audio: false})\r\n    .then(stream => {\r\n      stream\r\n      this.videoPreview.srcObject = stream;\r\n      this.videoPreview.play()\r\n      .then(() => {\r\n        this.videoSettings = stream.getVideoTracks()[0].getSettings();\r\n      });\r\n    })\r\n    .catch(error => alert(error));\r\n  }\r\n\r\n  private applySnapshot(): void {\r\n    var canvas = document.createElement(\"canvas\");\r\n    const context = canvas.getContext(\"2d\");\r\n    canvas.width = this.videoSettings.width;\r\n    canvas.height = this.videoSettings.height;\r\n    context.drawImage(this.videoPreview, 0, 0);\r\n    canvas.toBlob(blob => {\r\n      var file = new File([blob], \"image.jpeg\", {type:\"image/jpeg\"});\r\n      this.takingPicture = false;\r\n      \r\n      var fileList = [file];\r\n      this.filesSelected.emit(fileList)\r\n    }, \"image/jpeg\", this.captureQuality);\r\n  }\r\n  \r\n  render() {\r\n    return (\r\n      <Host\r\n        ref={e => this.dropzone = e}\r\n        class=\"dropzone\"\r\n        onDragOver={this.handleDragOver}\r\n        onDrop={this.handleDrop}\r\n        onDragLeave={() => this.dropzone.classList.remove(\"dropping\")}\r\n      >\r\n        {!this.takingPicture &&\r\n          [\r\n            <p>{this.resx?.dragAndDropFile}</p>\r\n          ,\r\n            <p>- {this.resx?.or} -</p>\r\n          ,\r\n            <label class=\"upload-file\">\r\n              <input\r\n                type=\"file\"\r\n                ref={el => this.fileInput = el}\r\n                onChange={e => this.handleUploadButton(e.target as HTMLInputElement)}\r\n              >\r\n              </input>\r\n              <span>\r\n                <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\"><g><rect fill=\"none\" height=\"24\" width=\"24\"/></g><g><path d=\"M5,20h14v-2H5V20z M5,10h4v6h6v-6h4l-7-7L5,10z\"/></g></svg>\r\n              </span>\r\n              &nbsp;\r\n              {this.resx?.uploadFile}\r\n            </label>\r\n            ,\r\n            this.canTakeSnapshots &&\r\n              [\r\n                <p>- {this.resx?.or} -</p>\r\n                ,\r\n                <button\r\n                  onClick={() => this.takeSnapshot()}\r\n                >\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><circle cx=\"12\" cy=\"12\" r=\"3.2\"/><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\"/></svg>\r\n                  {this.resx?.takePicture}\r\n                </button>\r\n              ]\r\n          ]\r\n        }\r\n        {this.takingPicture &&\r\n          <div class=\"video-preview\">\r\n            <video ref={e => this.videoPreview = e} />\r\n            <button\r\n              onClick={() => this.applySnapshot()}\r\n            >\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><circle cx=\"12\" cy=\"12\" r=\"3.2\"/><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\"/></svg>&nbsp;\r\n              {this.resx?.capture}\r\n            </button>\r\n          </div>\r\n        }\r\n      </Host>\r\n    );\r\n  }\r\n\r\n}\r\n"]}
+{"version":3,"file":"dnn-dropzone.js","sourceRoot":"","sources":["../../../../src/components/dnn-dropzone/dnn-dropzone.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'dnn-dropzone',\n  styleUrl: 'dnn-dropzone.scss',\n  shadow: true,\n})\nexport class DnnDropzone {\n  /** Localization strings */\n  @Prop() resx:{\n    dragAndDropFile: string;\n    capture: string;\n    or: string;\n    takePicture: string;\n    uploadFile: string;\n  } = {\n    dragAndDropFile: \"Drag and drop a file\",\n    capture: \"Capture\",\n    or: \"or\",\n    takePicture: \"Take a picture\",\n    uploadFile: \"Upload a file\",\n  }\n\n  /** A list of allowed file extensions.\n   * If not specified, any file is allowed.\n   * Ex: [\"jpg\", \"jped\", \"gif\", \"png\"]\n   */\n  @Prop() allowedExtensions: string[];\n\n  /**\n   * If true, will allow the user to take a snapshot\n   * using the device camera. (only works over https).\n   */\n  @Prop() allowCameraMode: boolean = false;\n\n  /**\n   * Specifies the jpeg quality for when the device\n   * camera is used to generate a picture.\n   * Needs to be a number between 0 and 1 and defaults to 0.8\n   */\n  @Prop() captureQuality: number = 0.8;\n\n  /** Fires when file were selected. */\n  @Event() filesSelected: EventEmitter<File[]>;\n  \n  @State() canTakeSnapshots: boolean = false;\n\n  @State() takingPicture: boolean = false;\n  \n  private dropzone: HTMLElement;\n  private fileInput: HTMLInputElement;\n  private videoPreview: HTMLVideoElement;\n  private videoSettings!: MediaTrackSettings;\n\n\n  componentDidLoad() {\n    if (this.allowCameraMode){\n      this.checkIfBrowserCanTakeSnapshots()\n      .then(result => this.canTakeSnapshots = result);\n    }\n    if (this.allowedExtensions != undefined && this.allowedExtensions.length > 0){\n      var extensionsWithDots = this.allowedExtensions.map(e => `.${e}`);\n      var extensionsList = extensionsWithDots.join(\",\");\n      this.fileInput.accept = extensionsList;\n    }\n  }\n\n  private checkIfBrowserCanTakeSnapshots(): Promise<boolean> {\n    return new Promise((resolve) => {\n      const mediaDevices = navigator.mediaDevices;\n      if (mediaDevices == undefined || mediaDevices.enumerateDevices == undefined) {\n        resolve(false);\n      }\n      mediaDevices.enumerateDevices()\n        .then(devices => {\n          var result = devices.some(device => device.kind == \"videoinput\");\n          resolve(result);\n        });\n    });\n  }\n\n  private getFilesFromFileList(files: FileList) : File[] {\n    var fileList: File[] = [];\n    for (let index = 0; index < files.length; index++) {\n      const file = files[index];\n      fileList.push(file);\n    }\n\n    return fileList;\n  }\n\n  private handleUploadButton(element: HTMLInputElement): void {\n    let files = this.getFilesFromFileList(element.files);\n\n    this.filesSelected.emit(files);\n  }\n\n  private handleDragOver = (event: DragEvent) => \n  {\n    event.stopPropagation();\n    event.preventDefault();\n    event.dataTransfer.dropEffect = \"copy\";\n    this.dropzone.classList.add(\"dropping\");\n  };\n\n  private hasInvalidExtensions(files: FileList): boolean{\n    var hasInvalid = false;\n    for (let fileIndex = 0; fileIndex < files.length; fileIndex++) {\n      const file = files[fileIndex];\n      var regex = /(?:\\.([^.]+))?$/;\n      const fileExtension = regex.exec(file.name)[1];\n      if (fileExtension == undefined){\n        hasInvalid = true;\n      }\n\n      if (this.allowedExtensions != undefined && !this.allowedExtensions.includes(fileExtension)){\n        hasInvalid = true;\n      }\n\n      return hasInvalid;\n    }\n  }\n\n  private handleDrop = (dropEvent: DragEvent) => {\n    dropEvent.stopPropagation();\n    dropEvent.preventDefault();\n    const files = dropEvent.dataTransfer.files;\n\n    if (this.hasInvalidExtensions(files)){\n      return;\n    }\n    var fileList = this.getFilesFromFileList(files);\n    this.filesSelected.emit(fileList);\n  };\n\n  private takeSnapshot(): void {\n    this.takingPicture = true;\n    navigator.mediaDevices.getUserMedia({video: true, audio: false})\n    .then(stream => {\n      stream\n      this.videoPreview.srcObject = stream;\n      this.videoPreview.play()\n      .then(() => {\n        this.videoSettings = stream.getVideoTracks()[0].getSettings();\n      });\n    })\n    .catch(error => alert(error));\n  }\n\n  private applySnapshot(): void {\n    var canvas = document.createElement(\"canvas\");\n    const context = canvas.getContext(\"2d\");\n    canvas.width = this.videoSettings.width;\n    canvas.height = this.videoSettings.height;\n    context.drawImage(this.videoPreview, 0, 0);\n    canvas.toBlob(blob => {\n      var file = new File([blob], \"image.jpeg\", {type:\"image/jpeg\"});\n      this.takingPicture = false;\n      \n      var fileList = [file];\n      this.filesSelected.emit(fileList)\n    }, \"image/jpeg\", this.captureQuality);\n  }\n  \n  render() {\n    return (\n      <Host\n        ref={e => this.dropzone = e}\n        class=\"dropzone\"\n        onDragOver={this.handleDragOver}\n        onDrop={this.handleDrop}\n        onDragLeave={() => this.dropzone.classList.remove(\"dropping\")}\n      >\n        {!this.takingPicture &&\n          [\n            <p>{this.resx?.dragAndDropFile}</p>\n          ,\n            <p>- {this.resx?.or} -</p>\n          ,\n            <label class=\"upload-file\">\n              <input\n                type=\"file\"\n                ref={el => this.fileInput = el}\n                onChange={e => this.handleUploadButton(e.target as HTMLInputElement)}\n              >\n              </input>\n              <span>\n                <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\"><g><rect fill=\"none\" height=\"24\" width=\"24\"/></g><g><path d=\"M5,20h14v-2H5V20z M5,10h4v6h6v-6h4l-7-7L5,10z\"/></g></svg>\n              </span>\n              &nbsp;\n              {this.resx?.uploadFile}\n            </label>\n            ,\n            this.canTakeSnapshots &&\n              [\n                <p>- {this.resx?.or} -</p>\n                ,\n                <button\n                  onClick={() => this.takeSnapshot()}\n                >\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><circle cx=\"12\" cy=\"12\" r=\"3.2\"/><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\"/></svg>\n                  {this.resx?.takePicture}\n                </button>\n              ]\n          ]\n        }\n        {this.takingPicture &&\n          <div class=\"video-preview\">\n            <video ref={e => this.videoPreview = e} />\n            <button\n              onClick={() => this.applySnapshot()}\n            >\n              <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><circle cx=\"12\" cy=\"12\" r=\"3.2\"/><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\"/></svg>&nbsp;\n              {this.resx?.capture}\n            </button>\n          </div>\n        }\n      </Host>\n    );\n  }\n\n}\n"]}

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

@@ -0,0 +1,48 @@
+import { html } from "lit-html";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import readme from './readme.md';
+export default {
+  title: 'Elements/Dropzone',
+  component: 'dnn-dropzone',
+  parameters: {
+    actions: {
+      handles: ['filesSelected'],
+    },
+    notes: readme,
+  },
+  argTypes: {
+    'allowedExtensions': {
+      control: 'text',
+    },
+    'allowCameraMode': {
+      control: 'boolean',
+    },
+  },
+  'captureQuality': {
+    options: [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
+    control: 'number',
+  }
+};
+const resx = {
+  dragAndDropFile: "Drag and drop a file",
+  capture: "Capture",
+  or: "or",
+  takePicture: "Take a picture",
+  uploadFile: "Upload a file",
+};
+const Template = (args) => html `
+        <dnn-dropzone
+            .resx=${args.resx}
+            allowed-extensions=${ifDefined(args.allowedExtensions)}
+            ?allow-camera-mode=${ifDefined(args.allCameraMode)}
+            capture-quality=${ifDefined(args.captureQuality)}>
+        </dnn-dropzone>
+    `;
+export const Dropzone = Template.bind({});
+Dropzone.args = {
+  allowedExtensions: 'jpg,jpeg,png,gif',
+  allowCameraMode: false,
+  captureQuality: 0.8,
+  resx,
+};
+//# sourceMappingURL=dnn-dropzone.stories.js.map