@ionic/pwa-elements - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

dist/cjs/ionicpwaelements.cjs.js

@@ -6,3 +6,3 @@ 'use strict';
 core.patchBrowser().then(options => {
-  return core.bootstrapLazy([["pwa-camera-modal.cjs",[[1,"pwa-camera-modal",{"present":[64],"dismiss":[64]}]]],["pwa-action-sheet.cjs",[[1,"pwa-action-sheet",{"header":[1],"cancelable":[4],"options":[16],"open":[32]}]]],["pwa-toast.cjs",[[1,"pwa-toast",{"message":[1],"duration":[2],"closing":[32]}]]],["pwa-camera.cjs",[[1,"pwa-camera",{"facingMode":[1,"facing-mode"],"handlePhoto":[16],"handleNoDeviceError":[16],"photo":[32],"photoSrc":[32],"showShutterOverlay":[32],"flashIndex":[32]}]]],["pwa-camera-modal-instance.cjs",[[1,"pwa-camera-modal-instance",null,[[32,"keyup","handleBackdropKeyUp"]]]]]], options);
+  return core.bootstrapLazy([["pwa-camera-modal.cjs",[[1,"pwa-camera-modal",{"present":[64],"dismiss":[64]}]]],["pwa-action-sheet.cjs",[[1,"pwa-action-sheet",{"header":[1],"cancelable":[4],"options":[16],"open":[32]}]]],["pwa-toast.cjs",[[1,"pwa-toast",{"message":[1],"duration":[2],"closing":[32]}]]],["pwa-camera.cjs",[[1,"pwa-camera",{"facingMode":[1,"facing-mode"],"handlePhoto":[16],"handleNoDeviceError":[16],"noDevicesText":[1,"no-devices-text"],"noDevicesButtonText":[1,"no-devices-button-text"],"photo":[32],"photoSrc":[32],"showShutterOverlay":[32],"flashIndex":[32],"hasCamera":[32]}]]],["pwa-camera-modal-instance.cjs",[[1,"pwa-camera-modal-instance",{"noDevicesText":[1,"no-devices-text"],"noDevicesButtonText":[1,"no-devices-button-text"]},[[32,"keyup","handleBackdropKeyUp"]]]]]], options);
 });

dist/cjs/loader.cjs.js

@@ -9,3 +9,3 @@ 'use strict';
   return core.patchEsm().then(() => {
-    core.bootstrapLazy([["pwa-camera-modal.cjs",[[1,"pwa-camera-modal",{"present":[64],"dismiss":[64]}]]],["pwa-action-sheet.cjs",[[1,"pwa-action-sheet",{"header":[1],"cancelable":[4],"options":[16],"open":[32]}]]],["pwa-toast.cjs",[[1,"pwa-toast",{"message":[1],"duration":[2],"closing":[32]}]]],["pwa-camera.cjs",[[1,"pwa-camera",{"facingMode":[1,"facing-mode"],"handlePhoto":[16],"handleNoDeviceError":[16],"photo":[32],"photoSrc":[32],"showShutterOverlay":[32],"flashIndex":[32]}]]],["pwa-camera-modal-instance.cjs",[[1,"pwa-camera-modal-instance",null,[[32,"keyup","handleBackdropKeyUp"]]]]]], options);
+    core.bootstrapLazy([["pwa-camera-modal.cjs",[[1,"pwa-camera-modal",{"present":[64],"dismiss":[64]}]]],["pwa-action-sheet.cjs",[[1,"pwa-action-sheet",{"header":[1],"cancelable":[4],"options":[16],"open":[32]}]]],["pwa-toast.cjs",[[1,"pwa-toast",{"message":[1],"duration":[2],"closing":[32]}]]],["pwa-camera.cjs",[[1,"pwa-camera",{"facingMode":[1,"facing-mode"],"handlePhoto":[16],"handleNoDeviceError":[16],"noDevicesText":[1,"no-devices-text"],"noDevicesButtonText":[1,"no-devices-button-text"],"photo":[32],"photoSrc":[32],"showShutterOverlay":[32],"flashIndex":[32],"hasCamera":[32]}]]],["pwa-camera-modal-instance.cjs",[[1,"pwa-camera-modal-instance",{"noDevicesText":[1,"no-devices-text"],"noDevicesButtonText":[1,"no-devices-button-text"]},[[32,"keyup","handleBackdropKeyUp"]]]]]], options);
   });
@@ -12,0 +12,0 @@ };

dist/cjs/pwa-camera-modal-instance.cjs.entry.js

@@ -10,2 +10,4 @@ 'use strict';
         core.registerInstance(this, hostRef);
+        this.noDevicesText = 'No camera found';
+        this.noDevicesButtonText = 'Choose file';
         this.handlePhoto = async (photo) => {
@@ -34,3 +36,3 @@ this.photo.emit(photo);
     render() {
-        return (core.h("div", { class: "wrapper", onClick: e => this.handleBackdropClick(e) }, core.h("div", { class: "content" }, core.h("pwa-camera", { onClick: e => this.handleComponentClick(e), handlePhoto: this.handlePhoto, handleNoDeviceError: this.handleNoDeviceError }))));
+        return (core.h("div", { class: "wrapper", onClick: e => this.handleBackdropClick(e) }, core.h("div", { class: "content" }, core.h("pwa-camera", { onClick: e => this.handleComponentClick(e), handlePhoto: this.handlePhoto, handleNoDeviceError: this.handleNoDeviceError, noDevicesButtonText: this.noDevicesButtonText, noDevicesText: this.noDevicesText }))));
     }
@@ -37,0 +39,0 @@ get el() { return core.getElement(this); }

dist/cjs/pwa-camera.cjs.entry.js

@@ -167,4 +167,7 @@ 'use strict';
         this.facingMode = 'user';
+        this.noDevicesText = 'No camera found';
+        this.noDevicesButtonText = 'Choose file';
         this.showShutterOverlay = false;
         this.flashIndex = 0;
+        this.hasCamera = null;
         // Whether the device has multiple cameras (front/back)
@@ -178,2 +181,8 @@ this.hasMultipleCameras = false;
         this.flashMode = 'off';
+        this.noDevicesTimeoutDelay = 1500;
+        this.handleFileInputChange = (e) => {
+            const input = e.target;
+            const file = input.files[0];
+            this.handlePhoto && this.handlePhoto(file);
+        };
         this.isServer = core.getContext(this, "isServer");
@@ -208,6 +217,7 @@ }
             const devices = await navigator.mediaDevices.enumerateDevices();
-            this.hasMultipleCameras = devices.filter(d => d.kind == 'videoinput').length > 1;
+            const videoDevices = devices.filter(d => d.kind == 'videoinput');
+            this.hasCamera = !!videoDevices.length;
+            this.hasMultipleCameras = videoDevices.length > 1;
         }
         catch (e) {
-            this.handleNoDeviceError && this.handleNoDeviceError(e);
         }
@@ -239,3 +249,2 @@ }
             this.handleNoDeviceError && this.handleNoDeviceError();
-            return;
         }
@@ -370,12 +379,12 @@ // Always re-render
         const videoStreamStyle = this.facingMode == "user" ? { transform: 'scaleX(-1)' } : {};
-        return (core.h("div", { class: "camera-wrapper" }, core.h("div", { class: "camera-header" }, core.h("section", { class: "items" }, core.h("div", { class: "item close", onClick: e => this.handleClose(e) }, core.h("img", { src: this.iconExit() })), core.h("div", { class: "item flash", onClick: e => this.handleFlashClick(e) }, this.flashModes.length > 0 && (core.h("div", null, this.flashMode == 'off' ? core.h("img", { src: this.iconFlashOff() }) : '', this.flashMode == 'auto' ? core.h("img", { src: this.iconFlashAuto() }) : '', this.flashMode == 'flash' ? core.h("img", { src: this.iconFlashOn() }) : ''))))), this.photo ? (core.h("div", { class: "accept" }, core.h("div", { class: "accept-image", style: { backgroundImage: `url(${this.photoSrc})` } }))) : (core.h("div", { class: "camera-video" }, this.showShutterOverlay && (core.h("div", { class: "shutter-overlay" })), this.hasImageCapture() ? (core.h("video", { style: videoStreamStyle, ref: (el) => this.videoElement = el, autoplay: true, playsinline: true })) : (core.h("canvas", { ref: (el) => this.canvasElement = el, width: "100%", height: "100%" })), core.h("canvas", { class: "offscreen-image-render", ref: e => this.offscreenCanvas = e, width: "100%", height: "100%" }))), core.h("div", { class: "camera-footer" }, !this.photo ? ([
+        return (core.h("div", { class: "camera-wrapper" }, core.h("div", { class: "camera-header" }, core.h("section", { class: "items" }, core.h("div", { class: "item close", onClick: e => this.handleClose(e) }, core.h("img", { src: this.iconExit() })), core.h("div", { class: "item flash", onClick: e => this.handleFlashClick(e) }, this.flashModes.length > 0 && (core.h("div", null, this.flashMode == 'off' ? core.h("img", { src: this.iconFlashOff() }) : '', this.flashMode == 'auto' ? core.h("img", { src: this.iconFlashAuto() }) : '', this.flashMode == 'flash' ? core.h("img", { src: this.iconFlashOn() }) : ''))))), this.hasCamera === false && (core.h("div", { class: "no-device" }, core.h("h2", null, this.noDevicesText), core.h("label", { htmlFor: "_pwa-elements-camera-input" }, this.noDevicesButtonText), core.h("input", { type: "file", id: "_pwa-elements-camera-input", onChange: this.handleFileInputChange, class: "select-file-button" }))), this.photo ? (core.h("div", { class: "accept" }, core.h("div", { class: "accept-image", style: { backgroundImage: `url(${this.photoSrc})` } }))) : (core.h("div", { class: "camera-video" }, this.showShutterOverlay && (core.h("div", { class: "shutter-overlay" })), this.hasImageCapture() ? (core.h("video", { style: videoStreamStyle, ref: (el) => this.videoElement = el, autoplay: true, playsinline: true })) : (core.h("canvas", { ref: (el) => this.canvasElement = el, width: "100%", height: "100%" })), core.h("canvas", { class: "offscreen-image-render", ref: e => this.offscreenCanvas = e, width: "100%", height: "100%" }))), this.hasCamera && (core.h("div", { class: "camera-footer" }, !this.photo ? ([
             core.h("div", { class: "shutter", onClick: (e) => this.handleShutterClick(e) }, core.h("div", { class: "shutter-button" })),
             core.h("div", { class: "rotate", onClick: (e) => this.handleRotateClick(e) }, core.h("img", { src: this.iconReverseCamera() })),
-        ]) : (core.h("section", { class: "items" }, core.h("div", { class: "item accept-cancel", onClick: e => this.handleCancelPhoto(e) }, core.h("img", { src: this.iconRetake() })), core.h("div", { class: "item accept-use", onClick: e => this.handleAcceptPhoto(e) }, core.h("img", { src: this.iconConfirm() })))))));
+        ]) : (core.h("section", { class: "items" }, core.h("div", { class: "item accept-cancel", onClick: e => this.handleCancelPhoto(e) }, core.h("img", { src: this.iconRetake() })), core.h("div", { class: "item accept-use", onClick: e => this.handleAcceptPhoto(e) }, core.h("img", { src: this.iconConfirm() }))))))));
     }
     static get assetsDirs() { return ["icons"]; }
     get el() { return core.getElement(this); }
-    static get style() { return ":host{--header-height:4em;--footer-height:9em;--shutter-size:6em;--icon-size-header:1.5em;--icon-size-footer:2.5em;--margin-size-header:1.5em;--margin-size-footer:2.0em;font-family:-apple-system,BlinkMacSystemFont,“Segoe UI”,“Roboto”,“Droid Sans”,“Helvetica Neue”,sans-serif;display:block}.items,:host{width:100%;height:100%}.items{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.items .item{-ms-flex:1;flex:1;text-align:center}.items .item:first-child{text-align:left}.items .item:last-child{text-align:right}.camera-wrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%}.camera-header{color:#fff;background-color:#000;height:var(--header-height)}.camera-header .items{padding:var(--margin-size-header)}.camera-footer{position:relative;color:#fff;background-color:#000;height:var(--footer-height)}.camera-footer .items{padding:var(--margin-size-footer)}.camera-video{position:relative;-ms-flex:1;flex:1;overflow:hidden}.camera-video,video{background-color:#000}video{width:100%;height:100%;max-height:100%;min-height:100%;-o-object-fit:cover;object-fit:cover}.shutter{position:absolute;left:50%;top:50%;width:var(--shutter-size);height:var(--shutter-size);margin-top:calc(var(--shutter-size) / -2);margin-left:calc(var(--shutter-size) / -2);border-radius:100%;background-color:#c6cdd8;padding:12px;-webkit-box-sizing:border-box;box-sizing:border-box}.shutter:active .shutter-button{background-color:#9da9bb}.shutter-button{background-color:#fff;border-radius:100%;width:100%;height:100%}.rotate{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;position:absolute;right:var(--margin-size-footer);top:0;height:100%;color:#fff}.rotate,.rotate img{width:var(--icon-size-footer)}.rotate img{height:var(--icon-size-footer)}.shutter-overlay{z-index:5;position:absolute;width:100%;height:100%;background-color:#000}.error{width:100%;height:100%;color:#fff;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.accept{background-color:#000;-ms-flex:1;flex:1}.accept .accept-image{width:100%;height:100%;background-position:50%;background-size:cover;background-repeat:no-repeat}.close img,.flash img{width:var(--icon-size-header);height:var(--icon-size-header)}.accept-cancel img,.accept-use img{width:var(--icon-size-footer);height:var(--icon-size-footer)}.offscreen-image-render{top:0;left:0;visibility:hidden;pointer-events:none;width:100%;height:100%}"; }
+    static get style() { return ":host{--header-height:4em;--footer-height:9em;--shutter-size:6em;--icon-size-header:1.5em;--icon-size-footer:2.5em;--margin-size-header:1.5em;--margin-size-footer:2.0em;font-family:-apple-system,BlinkMacSystemFont,“Segoe UI”,“Roboto”,“Droid Sans”,“Helvetica Neue”,sans-serif;display:block}.items,:host{width:100%;height:100%}.items{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.items .item{-ms-flex:1;flex:1;text-align:center}.items .item:first-child{text-align:left}.items .item:last-child{text-align:right}.camera-wrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%}.camera-header{color:#fff;background-color:#000;height:var(--header-height)}.camera-header .items{padding:var(--margin-size-header)}.camera-footer{position:relative;color:#fff;background-color:#000;height:var(--footer-height)}.camera-footer .items{padding:var(--margin-size-footer)}.camera-video{position:relative;-ms-flex:1;flex:1;overflow:hidden}.camera-video,video{background-color:#000}video{width:100%;height:100%;max-height:100%;min-height:100%;-o-object-fit:cover;object-fit:cover}.shutter{position:absolute;left:50%;top:50%;width:var(--shutter-size);height:var(--shutter-size);margin-top:calc(var(--shutter-size) / -2);margin-left:calc(var(--shutter-size) / -2);border-radius:100%;background-color:#c6cdd8;padding:12px;-webkit-box-sizing:border-box;box-sizing:border-box}.shutter:active .shutter-button{background-color:#9da9bb}.shutter-button{background-color:#fff;border-radius:100%;width:100%;height:100%}.rotate{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;position:absolute;right:var(--margin-size-footer);top:0;height:100%;color:#fff}.rotate,.rotate img{width:var(--icon-size-footer)}.rotate img{height:var(--icon-size-footer)}.shutter-overlay{z-index:5;position:absolute;width:100%;height:100%;background-color:#000}.error{width:100%;height:100%;-ms-flex-pack:center;-ms-flex-align:center}.error,.no-device{color:#fff;display:-ms-flexbox;display:flex;justify-content:center;align-items:center}.no-device{background-color:#000;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;-ms-flex-pack:center}.no-device label{cursor:pointer;background:#fff;border-radius:6px;padding:6px 8px;color:#000}.no-device input{visibility:hidden;height:0;margin-top:16px}.accept{background-color:#000;-ms-flex:1;flex:1}.accept .accept-image{width:100%;height:100%;background-position:50%;background-size:cover;background-repeat:no-repeat}.close img,.flash img{width:var(--icon-size-header);height:var(--icon-size-header)}.accept-cancel img,.accept-use img{width:var(--icon-size-footer);height:var(--icon-size-footer)}.offscreen-image-render{top:0;left:0;visibility:hidden;pointer-events:none;width:100%;height:100%}"; }
 };
 
 exports.pwa_camera = CameraPWA;

dist/collection/collection-manifest.json

 {
   "entries": [
-    "components/camera-modal/camera-modal.js",
     "components/camera-modal/camera-modal-instance.js",
     "components/camera/camera.js",
-    "components/action-sheet/action-sheet.js",
-    "components/toast/toast.js"
+    "components/camera-modal/camera-modal.js",
+    "components/toast/toast.js",
+    "components/action-sheet/action-sheet.js"
   ],
@@ -9,0 +9,0 @@ "compiler": {

dist/collection/components/camera-modal/camera-modal-instance.js

 import { h } from "@stencil/core";
 export class PWACameraModal {
     constructor() {
+        this.noDevicesText = 'No camera found';
+        this.noDevicesButtonText = 'Choose file';
         this.handlePhoto = async (photo) => {
@@ -27,3 +29,3 @@ this.photo.emit(photo);
             h("div", { class: "content" },
-                h("pwa-camera", { onClick: e => this.handleComponentClick(e), handlePhoto: this.handlePhoto, handleNoDeviceError: this.handleNoDeviceError }))));
+                h("pwa-camera", { onClick: e => this.handleComponentClick(e), handlePhoto: this.handlePhoto, handleNoDeviceError: this.handleNoDeviceError, noDevicesButtonText: this.noDevicesButtonText, noDevicesText: this.noDevicesText }))));
     }
@@ -38,2 +40,40 @@ static get is() { return "pwa-camera-modal-instance"; }
     }; }
+    static get properties() { return {
+        "noDevicesText": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "no-devices-text",
+            "reflect": false,
+            "defaultValue": "'No camera found'"
+        },
+        "noDevicesButtonText": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "no-devices-button-text",
+            "reflect": false,
+            "defaultValue": "'Choose file'"
+        }
+    }; }
     static get events() { return [{
@@ -40,0 +80,0 @@ "method": "photo",

dist/collection/components/camera/camera.js

@@ -6,4 +6,7 @@ import { h } from "@stencil/core";
         this.facingMode = 'user';
+        this.noDevicesText = 'No camera found';
+        this.noDevicesButtonText = 'Choose file';
         this.showShutterOverlay = false;
         this.flashIndex = 0;
+        this.hasCamera = null;
         // Whether the device has multiple cameras (front/back)
@@ -17,2 +20,8 @@ this.hasMultipleCameras = false;
         this.flashMode = 'off';
+        this.noDevicesTimeoutDelay = 1500;
+        this.handleFileInputChange = (e) => {
+            const input = e.target;
+            const file = input.files[0];
+            this.handlePhoto && this.handlePhoto(file);
+        };
     }
@@ -46,6 +55,7 @@ async componentDidLoad() {
             const devices = await navigator.mediaDevices.enumerateDevices();
-            this.hasMultipleCameras = devices.filter(d => d.kind == 'videoinput').length > 1;
+            const videoDevices = devices.filter(d => d.kind == 'videoinput');
+            this.hasCamera = !!videoDevices.length;
+            this.hasMultipleCameras = videoDevices.length > 1;
         }
         catch (e) {
-            this.handleNoDeviceError && this.handleNoDeviceError(e);
         }
@@ -77,3 +87,2 @@ }
             this.handleNoDeviceError && this.handleNoDeviceError();
-            return;
         }
@@ -217,2 +226,6 @@ // Always re-render
                         this.flashMode == 'flash' ? h("img", { src: this.iconFlashOn() }) : ''))))),
+            this.hasCamera === false && (h("div", { class: "no-device" },
+                h("h2", null, this.noDevicesText),
+                h("label", { htmlFor: "_pwa-elements-camera-input" }, this.noDevicesButtonText),
+                h("input", { type: "file", id: "_pwa-elements-camera-input", onChange: this.handleFileInputChange, class: "select-file-button" }))),
             this.photo ? (h("div", { class: "accept" },
@@ -223,3 +236,3 @@ h("div", { class: "accept-image", style: { backgroundImage: `url(${this.photoSrc})` } }))) : (h("div", { class: "camera-video" },
                 h("canvas", { class: "offscreen-image-render", ref: e => this.offscreenCanvas = e, width: "100%", height: "100%" }))),
-            h("div", { class: "camera-footer" }, !this.photo ? ([
+            this.hasCamera && (h("div", { class: "camera-footer" }, !this.photo ? ([
                 h("div", { class: "shutter", onClick: (e) => this.handleShutterClick(e) },
@@ -233,3 +246,3 @@ h("div", { class: "shutter-button" })),
                 h("div", { class: "item accept-use", onClick: e => this.handleAcceptPhoto(e) },
-                    h("img", { src: this.iconConfirm() })))))));
+                    h("img", { src: this.iconConfirm() }))))))));
     }
@@ -293,2 +306,38 @@ static get is() { return "pwa-camera"; }
             }
+        },
+        "noDevicesText": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "no-devices-text",
+            "reflect": false,
+            "defaultValue": "'No camera found'"
+        },
+        "noDevicesButtonText": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "no-devices-button-text",
+            "reflect": false,
+            "defaultValue": "'Choose file'"
         }
@@ -304,5 +353,6 @@ }; }
         "showShutterOverlay": {},
-        "flashIndex": {}
+        "flashIndex": {},
+        "hasCamera": {}
     }; }
     static get elementRef() { return "el"; }
 }

dist/esm-es5/pwa-camera-modal-instance.entry.js

@@ -42,2 +42,4 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
         registerInstance(this, hostRef);
+        this.noDevicesText = 'No camera found';
+        this.noDevicesButtonText = 'Choose file';
         this.handlePhoto = function (photo) { return __awaiter(_this, void 0, void 0, function () {
@@ -73,3 +75,3 @@ return __generator(this, function (_a) {
         var _this = this;
-        return (h("div", { class: "wrapper", onClick: function (e) { return _this.handleBackdropClick(e); } }, h("div", { class: "content" }, h("pwa-camera", { onClick: function (e) { return _this.handleComponentClick(e); }, handlePhoto: this.handlePhoto, handleNoDeviceError: this.handleNoDeviceError }))));
+        return (h("div", { class: "wrapper", onClick: function (e) { return _this.handleBackdropClick(e); } }, h("div", { class: "content" }, h("pwa-camera", { onClick: function (e) { return _this.handleComponentClick(e); }, handlePhoto: this.handlePhoto, handleNoDeviceError: this.handleNoDeviceError, noDevicesButtonText: this.noDevicesButtonText, noDevicesText: this.noDevicesText }))));
     };
@@ -76,0 +78,0 @@ Object.defineProperty(class_1.prototype, "el", {

dist/esm-es5/pwa-camera.entry.js

@@ -202,6 +202,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function class_1(hostRef) {
+        var _this = this;
         registerInstance(this, hostRef);
         this.facingMode = 'user';
+        this.noDevicesText = 'No camera found';
+        this.noDevicesButtonText = 'Choose file';
         this.showShutterOverlay = false;
         this.flashIndex = 0;
+        this.hasCamera = null;
         // Whether the device has multiple cameras (front/back)
@@ -215,2 +219,8 @@ this.hasMultipleCameras = false;
         this.flashMode = 'off';
+        this.noDevicesTimeoutDelay = 1500;
+        this.handleFileInputChange = function (e) {
+            var input = e.target;
+            var file = input.files[0];
+            _this.handlePhoto && _this.handlePhoto(file);
+        };
         this.isServer = getContext(this, "isServer");
@@ -258,3 +268,3 @@ }
         return __awaiter(this, void 0, void 0, function () {
-            var devices, e_1;
+            var devices, videoDevices, e_1;
             return __generator(this, function (_a) {
@@ -267,7 +277,8 @@ switch (_a.label) {
                         devices = _a.sent();
-                        this.hasMultipleCameras = devices.filter(function (d) { return d.kind == 'videoinput'; }).length > 1;
+                        videoDevices = devices.filter(function (d) { return d.kind == 'videoinput'; });
+                        this.hasCamera = !!videoDevices.length;
+                        this.hasMultipleCameras = videoDevices.length > 1;
                         return [3 /*break*/, 3];
                     case 2:
                         e_1 = _a.sent();
-                        this.handleNoDeviceError && this.handleNoDeviceError(e_1);
                         return [3 /*break*/, 3];
@@ -324,3 +335,3 @@ case 3: return [2 /*return*/];
                         this.handleNoDeviceError && this.handleNoDeviceError();
-                        return [2 /*return*/];
+                        _a.label = 3;
                     case 3:
@@ -496,6 +507,6 @@ // Always re-render
         var videoStreamStyle = this.facingMode == "user" ? { transform: 'scaleX(-1)' } : {};
-        return (h("div", { class: "camera-wrapper" }, h("div", { class: "camera-header" }, h("section", { class: "items" }, h("div", { class: "item close", onClick: function (e) { return _this.handleClose(e); } }, h("img", { src: this.iconExit() })), h("div", { class: "item flash", onClick: function (e) { return _this.handleFlashClick(e); } }, this.flashModes.length > 0 && (h("div", null, this.flashMode == 'off' ? h("img", { src: this.iconFlashOff() }) : '', this.flashMode == 'auto' ? h("img", { src: this.iconFlashAuto() }) : '', this.flashMode == 'flash' ? h("img", { src: this.iconFlashOn() }) : ''))))), this.photo ? (h("div", { class: "accept" }, h("div", { class: "accept-image", style: { backgroundImage: "url(" + this.photoSrc + ")" } }))) : (h("div", { class: "camera-video" }, this.showShutterOverlay && (h("div", { class: "shutter-overlay" })), this.hasImageCapture() ? (h("video", { style: videoStreamStyle, ref: function (el) { return _this.videoElement = el; }, autoplay: true, playsinline: true })) : (h("canvas", { ref: function (el) { return _this.canvasElement = el; }, width: "100%", height: "100%" })), h("canvas", { class: "offscreen-image-render", ref: function (e) { return _this.offscreenCanvas = e; }, width: "100%", height: "100%" }))), h("div", { class: "camera-footer" }, !this.photo ? ([
+        return (h("div", { class: "camera-wrapper" }, h("div", { class: "camera-header" }, h("section", { class: "items" }, h("div", { class: "item close", onClick: function (e) { return _this.handleClose(e); } }, h("img", { src: this.iconExit() })), h("div", { class: "item flash", onClick: function (e) { return _this.handleFlashClick(e); } }, this.flashModes.length > 0 && (h("div", null, this.flashMode == 'off' ? h("img", { src: this.iconFlashOff() }) : '', this.flashMode == 'auto' ? h("img", { src: this.iconFlashAuto() }) : '', this.flashMode == 'flash' ? h("img", { src: this.iconFlashOn() }) : ''))))), this.hasCamera === false && (h("div", { class: "no-device" }, h("h2", null, this.noDevicesText), h("label", { htmlFor: "_pwa-elements-camera-input" }, this.noDevicesButtonText), h("input", { type: "file", id: "_pwa-elements-camera-input", onChange: this.handleFileInputChange, class: "select-file-button" }))), this.photo ? (h("div", { class: "accept" }, h("div", { class: "accept-image", style: { backgroundImage: "url(" + this.photoSrc + ")" } }))) : (h("div", { class: "camera-video" }, this.showShutterOverlay && (h("div", { class: "shutter-overlay" })), this.hasImageCapture() ? (h("video", { style: videoStreamStyle, ref: function (el) { return _this.videoElement = el; }, autoplay: true, playsinline: true })) : (h("canvas", { ref: function (el) { return _this.canvasElement = el; }, width: "100%", height: "100%" })), h("canvas", { class: "offscreen-image-render", ref: function (e) { return _this.offscreenCanvas = e; }, width: "100%", height: "100%" }))), this.hasCamera && (h("div", { class: "camera-footer" }, !this.photo ? ([
             h("div", { class: "shutter", onClick: function (e) { return _this.handleShutterClick(e); } }, h("div", { class: "shutter-button" })),
             h("div", { class: "rotate", onClick: function (e) { return _this.handleRotateClick(e); } }, h("img", { src: this.iconReverseCamera() })),
-        ]) : (h("section", { class: "items" }, h("div", { class: "item accept-cancel", onClick: function (e) { return _this.handleCancelPhoto(e); } }, h("img", { src: this.iconRetake() })), h("div", { class: "item accept-use", onClick: function (e) { return _this.handleAcceptPhoto(e); } }, h("img", { src: this.iconConfirm() })))))));
+        ]) : (h("section", { class: "items" }, h("div", { class: "item accept-cancel", onClick: function (e) { return _this.handleCancelPhoto(e); } }, h("img", { src: this.iconRetake() })), h("div", { class: "item accept-use", onClick: function (e) { return _this.handleAcceptPhoto(e); } }, h("img", { src: this.iconConfirm() }))))))));
     };
@@ -513,3 +524,3 @@ Object.defineProperty(class_1, "assetsDirs", {
     Object.defineProperty(class_1, "style", {
-        get: function () { return ":host{--header-height:4em;--footer-height:9em;--shutter-size:6em;--icon-size-header:1.5em;--icon-size-footer:2.5em;--margin-size-header:1.5em;--margin-size-footer:2.0em;font-family:-apple-system,BlinkMacSystemFont,“Segoe UI”,“Roboto”,“Droid Sans”,“Helvetica Neue”,sans-serif;display:block}.items,:host{width:100%;height:100%}.items{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.items .item{-ms-flex:1;flex:1;text-align:center}.items .item:first-child{text-align:left}.items .item:last-child{text-align:right}.camera-wrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%}.camera-header{color:#fff;background-color:#000;height:var(--header-height)}.camera-header .items{padding:var(--margin-size-header)}.camera-footer{position:relative;color:#fff;background-color:#000;height:var(--footer-height)}.camera-footer .items{padding:var(--margin-size-footer)}.camera-video{position:relative;-ms-flex:1;flex:1;overflow:hidden}.camera-video,video{background-color:#000}video{width:100%;height:100%;max-height:100%;min-height:100%;-o-object-fit:cover;object-fit:cover}.shutter{position:absolute;left:50%;top:50%;width:var(--shutter-size);height:var(--shutter-size);margin-top:calc(var(--shutter-size) / -2);margin-left:calc(var(--shutter-size) / -2);border-radius:100%;background-color:#c6cdd8;padding:12px;-webkit-box-sizing:border-box;box-sizing:border-box}.shutter:active .shutter-button{background-color:#9da9bb}.shutter-button{background-color:#fff;border-radius:100%;width:100%;height:100%}.rotate{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;position:absolute;right:var(--margin-size-footer);top:0;height:100%;color:#fff}.rotate,.rotate img{width:var(--icon-size-footer)}.rotate img{height:var(--icon-size-footer)}.shutter-overlay{z-index:5;position:absolute;width:100%;height:100%;background-color:#000}.error{width:100%;height:100%;color:#fff;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.accept{background-color:#000;-ms-flex:1;flex:1}.accept .accept-image{width:100%;height:100%;background-position:50%;background-size:cover;background-repeat:no-repeat}.close img,.flash img{width:var(--icon-size-header);height:var(--icon-size-header)}.accept-cancel img,.accept-use img{width:var(--icon-size-footer);height:var(--icon-size-footer)}.offscreen-image-render{top:0;left:0;visibility:hidden;pointer-events:none;width:100%;height:100%}"; },
+        get: function () { return ":host{--header-height:4em;--footer-height:9em;--shutter-size:6em;--icon-size-header:1.5em;--icon-size-footer:2.5em;--margin-size-header:1.5em;--margin-size-footer:2.0em;font-family:-apple-system,BlinkMacSystemFont,“Segoe UI”,“Roboto”,“Droid Sans”,“Helvetica Neue”,sans-serif;display:block}.items,:host{width:100%;height:100%}.items{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.items .item{-ms-flex:1;flex:1;text-align:center}.items .item:first-child{text-align:left}.items .item:last-child{text-align:right}.camera-wrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%}.camera-header{color:#fff;background-color:#000;height:var(--header-height)}.camera-header .items{padding:var(--margin-size-header)}.camera-footer{position:relative;color:#fff;background-color:#000;height:var(--footer-height)}.camera-footer .items{padding:var(--margin-size-footer)}.camera-video{position:relative;-ms-flex:1;flex:1;overflow:hidden}.camera-video,video{background-color:#000}video{width:100%;height:100%;max-height:100%;min-height:100%;-o-object-fit:cover;object-fit:cover}.shutter{position:absolute;left:50%;top:50%;width:var(--shutter-size);height:var(--shutter-size);margin-top:calc(var(--shutter-size) / -2);margin-left:calc(var(--shutter-size) / -2);border-radius:100%;background-color:#c6cdd8;padding:12px;-webkit-box-sizing:border-box;box-sizing:border-box}.shutter:active .shutter-button{background-color:#9da9bb}.shutter-button{background-color:#fff;border-radius:100%;width:100%;height:100%}.rotate{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;position:absolute;right:var(--margin-size-footer);top:0;height:100%;color:#fff}.rotate,.rotate img{width:var(--icon-size-footer)}.rotate img{height:var(--icon-size-footer)}.shutter-overlay{z-index:5;position:absolute;width:100%;height:100%;background-color:#000}.error{width:100%;height:100%;-ms-flex-pack:center;-ms-flex-align:center}.error,.no-device{color:#fff;display:-ms-flexbox;display:flex;justify-content:center;align-items:center}.no-device{background-color:#000;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;-ms-flex-pack:center}.no-device label{cursor:pointer;background:#fff;border-radius:6px;padding:6px 8px;color:#000}.no-device input{visibility:hidden;height:0;margin-top:16px}.accept{background-color:#000;-ms-flex:1;flex:1}.accept .accept-image{width:100%;height:100%;background-position:50%;background-size:cover;background-repeat:no-repeat}.close img,.flash img{width:var(--icon-size-header);height:var(--icon-size-header)}.accept-cancel img,.accept-use img{width:var(--icon-size-footer);height:var(--icon-size-footer)}.offscreen-image-render{top:0;left:0;visibility:hidden;pointer-events:none;width:100%;height:100%}"; },
         enumerable: true,
@@ -516,0 +527,0 @@ configurable: true

dist/esm/pwa-camera-modal-instance.entry.js

@@ -6,2 +6,4 @@ import { r as registerInstance, c as createEvent, h, g as getElement } from './core-8e8be6a7.js';
         registerInstance(this, hostRef);
+        this.noDevicesText = 'No camera found';
+        this.noDevicesButtonText = 'Choose file';
         this.handlePhoto = async (photo) => {
@@ -30,3 +32,3 @@ this.photo.emit(photo);
     render() {
-        return (h("div", { class: "wrapper", onClick: e => this.handleBackdropClick(e) }, h("div", { class: "content" }, h("pwa-camera", { onClick: e => this.handleComponentClick(e), handlePhoto: this.handlePhoto, handleNoDeviceError: this.handleNoDeviceError }))));
+        return (h("div", { class: "wrapper", onClick: e => this.handleBackdropClick(e) }, h("div", { class: "content" }, h("pwa-camera", { onClick: e => this.handleComponentClick(e), handlePhoto: this.handlePhoto, handleNoDeviceError: this.handleNoDeviceError, noDevicesButtonText: this.noDevicesButtonText, noDevicesText: this.noDevicesText }))));
     }
@@ -33,0 +35,0 @@ get el() { return getElement(this); }

dist/esm/pwa-camera.entry.js

@@ -163,4 +163,7 @@ import { r as registerInstance, d as getContext, h, g as getElement } from './core-8e8be6a7.js';
         this.facingMode = 'user';
+        this.noDevicesText = 'No camera found';
+        this.noDevicesButtonText = 'Choose file';
         this.showShutterOverlay = false;
         this.flashIndex = 0;
+        this.hasCamera = null;
         // Whether the device has multiple cameras (front/back)
@@ -174,2 +177,8 @@ this.hasMultipleCameras = false;
         this.flashMode = 'off';
+        this.noDevicesTimeoutDelay = 1500;
+        this.handleFileInputChange = (e) => {
+            const input = e.target;
+            const file = input.files[0];
+            this.handlePhoto && this.handlePhoto(file);
+        };
         this.isServer = getContext(this, "isServer");
@@ -204,6 +213,7 @@ }
             const devices = await navigator.mediaDevices.enumerateDevices();
-            this.hasMultipleCameras = devices.filter(d => d.kind == 'videoinput').length > 1;
+            const videoDevices = devices.filter(d => d.kind == 'videoinput');
+            this.hasCamera = !!videoDevices.length;
+            this.hasMultipleCameras = videoDevices.length > 1;
         }
         catch (e) {
-            this.handleNoDeviceError && this.handleNoDeviceError(e);
         }
@@ -235,3 +245,2 @@ }
             this.handleNoDeviceError && this.handleNoDeviceError();
-            return;
         }
@@ -366,12 +375,12 @@ // Always re-render
         const videoStreamStyle = this.facingMode == "user" ? { transform: 'scaleX(-1)' } : {};
-        return (h("div", { class: "camera-wrapper" }, h("div", { class: "camera-header" }, h("section", { class: "items" }, h("div", { class: "item close", onClick: e => this.handleClose(e) }, h("img", { src: this.iconExit() })), h("div", { class: "item flash", onClick: e => this.handleFlashClick(e) }, this.flashModes.length > 0 && (h("div", null, this.flashMode == 'off' ? h("img", { src: this.iconFlashOff() }) : '', this.flashMode == 'auto' ? h("img", { src: this.iconFlashAuto() }) : '', this.flashMode == 'flash' ? h("img", { src: this.iconFlashOn() }) : ''))))), this.photo ? (h("div", { class: "accept" }, h("div", { class: "accept-image", style: { backgroundImage: `url(${this.photoSrc})` } }))) : (h("div", { class: "camera-video" }, this.showShutterOverlay && (h("div", { class: "shutter-overlay" })), this.hasImageCapture() ? (h("video", { style: videoStreamStyle, ref: (el) => this.videoElement = el, autoplay: true, playsinline: true })) : (h("canvas", { ref: (el) => this.canvasElement = el, width: "100%", height: "100%" })), h("canvas", { class: "offscreen-image-render", ref: e => this.offscreenCanvas = e, width: "100%", height: "100%" }))), h("div", { class: "camera-footer" }, !this.photo ? ([
+        return (h("div", { class: "camera-wrapper" }, h("div", { class: "camera-header" }, h("section", { class: "items" }, h("div", { class: "item close", onClick: e => this.handleClose(e) }, h("img", { src: this.iconExit() })), h("div", { class: "item flash", onClick: e => this.handleFlashClick(e) }, this.flashModes.length > 0 && (h("div", null, this.flashMode == 'off' ? h("img", { src: this.iconFlashOff() }) : '', this.flashMode == 'auto' ? h("img", { src: this.iconFlashAuto() }) : '', this.flashMode == 'flash' ? h("img", { src: this.iconFlashOn() }) : ''))))), this.hasCamera === false && (h("div", { class: "no-device" }, h("h2", null, this.noDevicesText), h("label", { htmlFor: "_pwa-elements-camera-input" }, this.noDevicesButtonText), h("input", { type: "file", id: "_pwa-elements-camera-input", onChange: this.handleFileInputChange, class: "select-file-button" }))), this.photo ? (h("div", { class: "accept" }, h("div", { class: "accept-image", style: { backgroundImage: `url(${this.photoSrc})` } }))) : (h("div", { class: "camera-video" }, this.showShutterOverlay && (h("div", { class: "shutter-overlay" })), this.hasImageCapture() ? (h("video", { style: videoStreamStyle, ref: (el) => this.videoElement = el, autoplay: true, playsinline: true })) : (h("canvas", { ref: (el) => this.canvasElement = el, width: "100%", height: "100%" })), h("canvas", { class: "offscreen-image-render", ref: e => this.offscreenCanvas = e, width: "100%", height: "100%" }))), this.hasCamera && (h("div", { class: "camera-footer" }, !this.photo ? ([
             h("div", { class: "shutter", onClick: (e) => this.handleShutterClick(e) }, h("div", { class: "shutter-button" })),
             h("div", { class: "rotate", onClick: (e) => this.handleRotateClick(e) }, h("img", { src: this.iconReverseCamera() })),
-        ]) : (h("section", { class: "items" }, h("div", { class: "item accept-cancel", onClick: e => this.handleCancelPhoto(e) }, h("img", { src: this.iconRetake() })), h("div", { class: "item accept-use", onClick: e => this.handleAcceptPhoto(e) }, h("img", { src: this.iconConfirm() })))))));
+        ]) : (h("section", { class: "items" }, h("div", { class: "item accept-cancel", onClick: e => this.handleCancelPhoto(e) }, h("img", { src: this.iconRetake() })), h("div", { class: "item accept-use", onClick: e => this.handleAcceptPhoto(e) }, h("img", { src: this.iconConfirm() }))))))));
     }
     static get assetsDirs() { return ["icons"]; }
     get el() { return getElement(this); }
-    static get style() { return ":host{--header-height:4em;--footer-height:9em;--shutter-size:6em;--icon-size-header:1.5em;--icon-size-footer:2.5em;--margin-size-header:1.5em;--margin-size-footer:2.0em;font-family:-apple-system,BlinkMacSystemFont,“Segoe UI”,“Roboto”,“Droid Sans”,“Helvetica Neue”,sans-serif;display:block}.items,:host{width:100%;height:100%}.items{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.items .item{-ms-flex:1;flex:1;text-align:center}.items .item:first-child{text-align:left}.items .item:last-child{text-align:right}.camera-wrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%}.camera-header{color:#fff;background-color:#000;height:var(--header-height)}.camera-header .items{padding:var(--margin-size-header)}.camera-footer{position:relative;color:#fff;background-color:#000;height:var(--footer-height)}.camera-footer .items{padding:var(--margin-size-footer)}.camera-video{position:relative;-ms-flex:1;flex:1;overflow:hidden}.camera-video,video{background-color:#000}video{width:100%;height:100%;max-height:100%;min-height:100%;-o-object-fit:cover;object-fit:cover}.shutter{position:absolute;left:50%;top:50%;width:var(--shutter-size);height:var(--shutter-size);margin-top:calc(var(--shutter-size) / -2);margin-left:calc(var(--shutter-size) / -2);border-radius:100%;background-color:#c6cdd8;padding:12px;-webkit-box-sizing:border-box;box-sizing:border-box}.shutter:active .shutter-button{background-color:#9da9bb}.shutter-button{background-color:#fff;border-radius:100%;width:100%;height:100%}.rotate{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;position:absolute;right:var(--margin-size-footer);top:0;height:100%;color:#fff}.rotate,.rotate img{width:var(--icon-size-footer)}.rotate img{height:var(--icon-size-footer)}.shutter-overlay{z-index:5;position:absolute;width:100%;height:100%;background-color:#000}.error{width:100%;height:100%;color:#fff;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.accept{background-color:#000;-ms-flex:1;flex:1}.accept .accept-image{width:100%;height:100%;background-position:50%;background-size:cover;background-repeat:no-repeat}.close img,.flash img{width:var(--icon-size-header);height:var(--icon-size-header)}.accept-cancel img,.accept-use img{width:var(--icon-size-footer);height:var(--icon-size-footer)}.offscreen-image-render{top:0;left:0;visibility:hidden;pointer-events:none;width:100%;height:100%}"; }
+    static get style() { return ":host{--header-height:4em;--footer-height:9em;--shutter-size:6em;--icon-size-header:1.5em;--icon-size-footer:2.5em;--margin-size-header:1.5em;--margin-size-footer:2.0em;font-family:-apple-system,BlinkMacSystemFont,“Segoe UI”,“Roboto”,“Droid Sans”,“Helvetica Neue”,sans-serif;display:block}.items,:host{width:100%;height:100%}.items{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.items .item{-ms-flex:1;flex:1;text-align:center}.items .item:first-child{text-align:left}.items .item:last-child{text-align:right}.camera-wrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%}.camera-header{color:#fff;background-color:#000;height:var(--header-height)}.camera-header .items{padding:var(--margin-size-header)}.camera-footer{position:relative;color:#fff;background-color:#000;height:var(--footer-height)}.camera-footer .items{padding:var(--margin-size-footer)}.camera-video{position:relative;-ms-flex:1;flex:1;overflow:hidden}.camera-video,video{background-color:#000}video{width:100%;height:100%;max-height:100%;min-height:100%;-o-object-fit:cover;object-fit:cover}.shutter{position:absolute;left:50%;top:50%;width:var(--shutter-size);height:var(--shutter-size);margin-top:calc(var(--shutter-size) / -2);margin-left:calc(var(--shutter-size) / -2);border-radius:100%;background-color:#c6cdd8;padding:12px;-webkit-box-sizing:border-box;box-sizing:border-box}.shutter:active .shutter-button{background-color:#9da9bb}.shutter-button{background-color:#fff;border-radius:100%;width:100%;height:100%}.rotate{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;position:absolute;right:var(--margin-size-footer);top:0;height:100%;color:#fff}.rotate,.rotate img{width:var(--icon-size-footer)}.rotate img{height:var(--icon-size-footer)}.shutter-overlay{z-index:5;position:absolute;width:100%;height:100%;background-color:#000}.error{width:100%;height:100%;-ms-flex-pack:center;-ms-flex-align:center}.error,.no-device{color:#fff;display:-ms-flexbox;display:flex;justify-content:center;align-items:center}.no-device{background-color:#000;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;-ms-flex-pack:center}.no-device label{cursor:pointer;background:#fff;border-radius:6px;padding:6px 8px;color:#000}.no-device input{visibility:hidden;height:0;margin-top:16px}.accept{background-color:#000;-ms-flex:1;flex:1}.accept .accept-image{width:100%;height:100%;background-position:50%;background-size:cover;background-repeat:no-repeat}.close img,.flash img{width:var(--icon-size-header);height:var(--icon-size-header)}.accept-cancel img,.accept-use img{width:var(--icon-size-footer);height:var(--icon-size-footer)}.offscreen-image-render{top:0;left:0;visibility:hidden;pointer-events:none;width:100%;height:100%}"; }
 };
 
 export { CameraPWA as pwa_camera };

dist/ionicpwaelements/ionicpwaelements.esm.js

@@ -1,1 +0,1 @@
-import{p as a,b as e}from"./p-b877c280.js";a().then(a=>e([["p-m34sbalt",[[1,"pwa-camera-modal",{present:[64],dismiss:[64]}]]],["p-e501uohe",[[1,"pwa-action-sheet",{header:[1],cancelable:[4],options:[16],open:[32]}]]],["p-cuaeu43l",[[1,"pwa-toast",{message:[1],duration:[2],closing:[32]}]]],["p-vo2zccqh",[[1,"pwa-camera",{facingMode:[1,"facing-mode"],handlePhoto:[16],handleNoDeviceError:[16],photo:[32],photoSrc:[32],showShutterOverlay:[32],flashIndex:[32]}]]],["p-b5e3vuhb",[[1,"pwa-camera-modal-instance",null,[[32,"keyup","handleBackdropKeyUp"]]]]]],a));
+import{p as e,b as a}from"./p-b877c280.js";e().then(e=>a([["p-m34sbalt",[[1,"pwa-camera-modal",{present:[64],dismiss:[64]}]]],["p-e501uohe",[[1,"pwa-action-sheet",{header:[1],cancelable:[4],options:[16],open:[32]}]]],["p-cuaeu43l",[[1,"pwa-toast",{message:[1],duration:[2],closing:[32]}]]],["p-jbd4v9bi",[[1,"pwa-camera",{facingMode:[1,"facing-mode"],handlePhoto:[16],handleNoDeviceError:[16],noDevicesText:[1,"no-devices-text"],noDevicesButtonText:[1,"no-devices-button-text"],photo:[32],photoSrc:[32],showShutterOverlay:[32],flashIndex:[32],hasCamera:[32]}]]],["p-ed9rljoa",[[1,"pwa-camera-modal-instance",{noDevicesText:[1,"no-devices-text"],noDevicesButtonText:[1,"no-devices-button-text"]},[[32,"keyup","handleBackdropKeyUp"]]]]]],e));

dist/ionicpwaelements/p-2ae892e9.system.js

@@ -1,1 +0,1 @@
-System.register(["./p-aa4236a7.system.js"],(function(){"use strict";var e,a;return{setters:[function(t){e=t.p;a=t.b}],execute:function(){e().then((function(e){return a([["p-wcjicuim.system",[[1,"pwa-camera-modal",{present:[64],dismiss:[64]}]]],["p-rya2viin.system",[[1,"pwa-action-sheet",{header:[1],cancelable:[4],options:[16],open:[32]}]]],["p-cnejwpcx.system",[[1,"pwa-toast",{message:[1],duration:[2],closing:[32]}]]],["p-xbtbcvg0.system",[[1,"pwa-camera",{facingMode:[1,"facing-mode"],handlePhoto:[16],handleNoDeviceError:[16],photo:[32],photoSrc:[32],showShutterOverlay:[32],flashIndex:[32]}]]],["p-31yxfyha.system",[[1,"pwa-camera-modal-instance",null,[[32,"keyup","handleBackdropKeyUp"]]]]]],e)}))}}}));
+System.register(["./p-aa4236a7.system.js"],(function(){"use strict";var e,t;return{setters:[function(n){e=n.p;t=n.b}],execute:function(){e().then((function(e){return t([["p-wcjicuim.system",[[1,"pwa-camera-modal",{present:[64],dismiss:[64]}]]],["p-rya2viin.system",[[1,"pwa-action-sheet",{header:[1],cancelable:[4],options:[16],open:[32]}]]],["p-cnejwpcx.system",[[1,"pwa-toast",{message:[1],duration:[2],closing:[32]}]]],["p-yxtyjofo.system",[[1,"pwa-camera",{facingMode:[1,"facing-mode"],handlePhoto:[16],handleNoDeviceError:[16],noDevicesText:[1,"no-devices-text"],noDevicesButtonText:[1,"no-devices-button-text"],photo:[32],photoSrc:[32],showShutterOverlay:[32],flashIndex:[32],hasCamera:[32]}]]],["p-txndxqwx.system",[[1,"pwa-camera-modal-instance",{noDevicesText:[1,"no-devices-text"],noDevicesButtonText:[1,"no-devices-button-text"]},[[32,"keyup","handleBackdropKeyUp"]]]]]],e)}))}}}));

dist/types/components.d.ts

@@ -24,2 +24,4 @@ /* eslint-disable */
     'handlePhoto': (e: any) => void;
+    'noDevicesButtonText': string;
+    'noDevicesText': string;
   }
@@ -30,3 +32,6 @@ interface PwaCameraModal {
   }
-  interface PwaCameraModalInstance {}
+  interface PwaCameraModalInstance {
+    'noDevicesButtonText': string;
+    'noDevicesText': string;
+  }
   interface PwaToast {
@@ -90,2 +95,4 @@ 'duration': number;
     'handlePhoto'?: (e: any) => void;
+    'noDevicesButtonText'?: string;
+    'noDevicesText'?: string;
   }
@@ -97,2 +104,4 @@ interface PwaCameraModal {
   interface PwaCameraModalInstance {
+    'noDevicesButtonText'?: string;
+    'noDevicesText'?: string;
     'onNoDeviceError'?: (event: CustomEvent<any>) => void;
@@ -99,0 +108,0 @@ 'onPhoto'?: (event: CustomEvent<any>) => void;

dist/types/components/camera-modal/camera-modal-instance.d.ts

@@ -6,2 +6,4 @@ import { EventEmitter } from '../../stencil.core';
     noDeviceError: EventEmitter;
+    noDevicesText: string;
+    noDevicesButtonText: string;
     handlePhoto: (photo: any) => Promise<void>;
@@ -8,0 +10,0 @@ handleNoDeviceError: (photo: any) => Promise<void>;

dist/types/components/camera/camera.d.ts

@@ -9,2 +9,4 @@ import { FlashMode } from '../../definitions';
     handleNoDeviceError: (e?: any) => void;
+    noDevicesText: string;
+    noDevicesButtonText: string;
     photo: any;
@@ -14,2 +16,3 @@ photoSrc: any;
     flashIndex: number;
+    hasCamera: boolean | null;
     offscreenCanvas: HTMLCanvasElement;
@@ -25,2 +28,4 @@ defaultConstraints: any;
     flashMode: FlashMode;
+    noDevicesTimeout?: any;
+    noDevicesTimeoutDelay: number;
     componentDidLoad(): Promise<void>;
@@ -49,2 +54,3 @@ componentDidUnload(): void;
     handleAcceptPhoto(_e: Event): void;
+    handleFileInputChange: (e: InputEvent) => void;
     iconExit(): string;
@@ -51,0 +57,0 @@ iconConfirm(): string;

package.json

 {
   "name": "@ionic/pwa-elements",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Stencil Component Starter",
@@ -17,4 +17,2 @@ "main": "dist/index.js",
     "start": "stencil build --dev --watch --serve",
-    "test": "stencil test --spec --e2e",
-    "test.watch": "stencil test --spec --e2e --watchAll",
     "release": "np",
@@ -21,0 +19,0 @@ "version": "npm run build"

New alerts

Long strings

Supply chain risk

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

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1003035

increased by1.13%

Lines of code

15841

increased by1.13%

No dependency changes