@ionic/pwa-elements - npm Package Compare versions

Comparing version 3.0.1-0 to 3.0.1-1

dist/cjs/ionicpwaelements.cjs.js

 'use strict';
 
-const core = require('./core-992a1039.js');
+const core = require('./core-f4aa8a8b.js');
 
@@ -5,0 +5,0 @@ core.patchBrowser().then(options => {

dist/cjs/loader.cjs.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const core = require('./core-992a1039.js');
+const core = require('./core-f4aa8a8b.js');
 
@@ -8,0 +8,0 @@ const defineCustomElements = (win, options) => {

dist/cjs/pwa-action-sheet.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const core = require('./core-992a1039.js');
+const core = require('./core-f4aa8a8b.js');
 
@@ -8,0 +8,0 @@ const PWAActionSheet = class {

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

@@ -5,3 +5,3 @@ 'use strict';
 
-const core = require('./core-992a1039.js');
+const core = require('./core-f4aa8a8b.js');
 
@@ -8,0 +8,0 @@ const PWACameraModal = class {

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

@@ -5,3 +5,3 @@ 'use strict';
 
-const core = require('./core-992a1039.js');
+const core = require('./core-f4aa8a8b.js');
 
@@ -8,0 +8,0 @@ const PWACameraModal = class {

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

@@ -5,3 +5,3 @@ 'use strict';
 
-const core = require('./core-992a1039.js');
+const core = require('./core-f4aa8a8b.js');
 
@@ -182,2 +182,35 @@ /**
         this.flashMode = 'off';
+        this.handlePickFile = (_e) => {
+        };
+        this.handleShutterClick = (_e) => {
+            console.log();
+            this.capture();
+        };
+        this.handleRotateClick = (_e) => {
+            this.rotate();
+        };
+        this.handleClose = (_e) => {
+            this.handlePhoto && this.handlePhoto(null);
+        };
+        this.handleFlashClick = (_e) => {
+            this.cycleFlash();
+        };
+        this.handleCancelPhoto = (_e) => {
+            const track = this.stream && this.stream.getTracks()[0];
+            let c = track && track.getConstraints();
+            this.photo = null;
+            if (c) {
+                this.initCamera({
+                    video: {
+                        facingMode: c.facingMode
+                    }
+                });
+            }
+            else {
+                this.initCamera();
+            }
+        };
+        this.handleAcceptPhoto = (_e) => {
+            this.handlePhoto && this.handlePhoto(this.photo);
+        };
         this.handleFileInputChange = (e) => {
@@ -398,36 +431,8 @@ const input = e.target;
     }
-    handleShutterClick(_e) {
-        console.log();
-        this.capture();
-    }
-    handleRotateClick(_e) {
-        this.rotate();
-    }
-    handleClose(_e) {
-        this.handlePhoto && this.handlePhoto(null);
-    }
-    handleFlashClick(_e) {
-        this.cycleFlash();
-    }
-    handleCancelPhoto(_e) {
-        const track = this.stream && this.stream.getTracks()[0];
-        let c = track && track.getConstraints();
-        this.photo = null;
-        if (c) {
-            this.initCamera({
-                video: {
-                    facingMode: c.facingMode
-                }
-            });
-        }
-        else {
-            this.initCamera();
-        }
-    }
-    handleAcceptPhoto(_e) {
-        this.handlePhoto && this.handlePhoto(this.photo);
-    }
     iconExit() {
         return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3E%3Cg id='Icon_5_'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M402.2,134L378,109.8c-1.6-1.6-4.1-1.6-5.7,0L258.8,223.4c-1.6,1.6-4.1,1.6-5.7,0L139.6,109.8 c-1.6-1.6-4.1-1.6-5.7,0L109.8,134c-1.6,1.6-1.6,4.1,0,5.7l113.5,113.5c1.6,1.6,1.6,4.1,0,5.7L109.8,372.4c-1.6,1.6-1.6,4.1,0,5.7 l24.1,24.1c1.6,1.6,4.1,1.6,5.7,0l113.5-113.5c1.6-1.6,4.1-1.6,5.7,0l113.5,113.5c1.6,1.6,4.1,1.6,5.7,0l24.1-24.1 c1.6-1.6,1.6-4.1,0-5.7L288.6,258.8c-1.6-1.6-1.6-4.1,0-5.7l113.5-113.5C403.7,138.1,403.7,135.5,402.2,134z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E`;
     }
+    iconPhotos() {
+        return (core.h("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '512', height: '512', viewBox: '0 0 512 512' }, core.h("title", null, "ionicons-v5-e"), core.h("path", { d: 'M450.29,112H142c-34,0-62,27.51-62,61.33V418.67C80,452.49,108,480,142,480H450c34,0,62-26.18,62-60V173.33C512,139.51,484.32,112,450.29,112Zm-77.15,61.34a46,46,0,1,1-46.28,46A46.19,46.19,0,0,1,373.14,173.33Zm-231.55,276c-17,0-29.86-13.75-29.86-30.66V353.85l90.46-80.79a46.54,46.54,0,0,1,63.44,1.83L328.27,337l-113,112.33ZM480,418.67a30.67,30.67,0,0,1-30.71,30.66H259L376.08,333a46.24,46.24,0,0,1,59.44-.16L480,370.59Z' }), core.h("path", { d: 'M384,32H64A64,64,0,0,0,0,96V352a64.11,64.11,0,0,0,48,62V152a72,72,0,0,1,72-72H446A64.11,64.11,0,0,0,384,32Z' })));
+    }
     iconConfirm() {
@@ -454,5 +459,6 @@ return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3E%3Ccircle fill='%232CD865' cx='256' cy='256' r='256'/%3E%3Cg id='Icon_1_'%3E%3Cg%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M208,301.4l-55.4-55.5c-1.5-1.5-4-1.6-5.6-0.1l-23.4,22.3c-1.6,1.6-1.7,4.1-0.1,5.7l81.6,81.4 c3.1,3.1,8.2,3.1,11.3,0l171.8-171.7c1.6-1.6,1.6-4.2-0.1-5.7l-23.4-22.3c-1.6-1.5-4.1-1.5-5.6,0.1L213.7,301.4 C212.1,303,209.6,303,208,301.4z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E`;
         // const acceptStyles = {};
-        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: Object.assign({ backgroundImage: `url(${this.photoSrc})` }, acceptStyles) }))) : (core.h("div", { class: "camera-video" }, this.showShutterOverlay && (core.h("div", { class: "shutter-overlay" })), this.hasImageCapture() ? (core.h("video", { ref: (el) => this.videoElement = el, onLoadedMetaData: this.handleVideoMetadata, 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() })),
+        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, accept: "image/*", class: "select-file-button" }))), this.photo ? (core.h("div", { class: "accept" }, core.h("div", { class: "accept-image", style: Object.assign({ backgroundImage: `url(${this.photoSrc})` }, acceptStyles) }))) : (core.h("div", { class: "camera-video" }, this.showShutterOverlay && (core.h("div", { class: "shutter-overlay" })), this.hasImageCapture() ? (core.h("video", { ref: (el) => this.videoElement = el, onLoadedMetaData: this.handleVideoMetadata, 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: "pick-image", onClick: this.handlePickFile }, core.h("label", { htmlFor: "_pwa-elements-file-pick" }, this.iconPhotos()), core.h("input", { type: "file", id: "_pwa-elements-file-pick", onChange: this.handleFileInputChange, accept: "image/*", class: "pick-image-button" })),
+            core.h("div", { class: "shutter", onClick: this.handleShutterClick }, core.h("div", { class: "shutter-button" })),
+            core.h("div", { class: "rotate", onClick: this.handleRotateClick }, 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() }))))))));
@@ -462,5 +468,5 @@ }
     get el() { return core.getElement(this); }
-    static get style() { return ":host{--header-height:4em;--footer-height:9em;--header-height-landscape:3em;--footer-height-landscape:6em;--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)}\@media (max-height:375px){.camera-header{--header-height:var(--header-height-landscape)}.camera-footer{--footer-height:var(--footer-height-landscape)}.camera-footer .shutter{--shutter-size:4em}}.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;overflow:hidden}.accept .accept-image{width:100%;height:100%;max-height:100%;background-position:50%;background-size:cover;background-repeat:no-repeat}.close img{cursor:pointer}.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;--header-height-landscape:3em;--footer-height-landscape:6em;--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)}\@media (max-height:375px){.camera-header{--header-height:var(--header-height-landscape)}.camera-footer{--footer-height:var(--footer-height-landscape)}.camera-footer .shutter{--shutter-size:4em}}.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}.pick-image{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;position:absolute;left:var(--margin-size-footer);top:0;height:100%;width:var(--icon-size-footer);color:#fff}.pick-image input{visibility:hidden}.pick-image svg{cursor:pointer;fill:#fff;width:var(--icon-size-footer);height:var(--icon-size-footer)}.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;overflow:hidden}.accept .accept-image{width:100%;height:100%;max-height:100%;background-position:50%;background-size:cover;background-repeat:no-repeat}.close img{cursor:pointer}.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/cjs/pwa-toast.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const core = require('./core-992a1039.js');
+const core = require('./core-f4aa8a8b.js');
 
@@ -8,0 +8,0 @@ const PWAToast = class {

dist/collection/collection-manifest.json

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

dist/collection/components/camera/camera.js

@@ -20,2 +20,35 @@ import { h } from "@stencil/core";
         this.flashMode = 'off';
+        this.handlePickFile = (_e) => {
+        };
+        this.handleShutterClick = (_e) => {
+            console.log();
+            this.capture();
+        };
+        this.handleRotateClick = (_e) => {
+            this.rotate();
+        };
+        this.handleClose = (_e) => {
+            this.handlePhoto && this.handlePhoto(null);
+        };
+        this.handleFlashClick = (_e) => {
+            this.cycleFlash();
+        };
+        this.handleCancelPhoto = (_e) => {
+            const track = this.stream && this.stream.getTracks()[0];
+            let c = track && track.getConstraints();
+            this.photo = null;
+            if (c) {
+                this.initCamera({
+                    video: {
+                        facingMode: c.facingMode
+                    }
+                });
+            }
+            else {
+                this.initCamera();
+            }
+        };
+        this.handleAcceptPhoto = (_e) => {
+            this.handlePhoto && this.handlePhoto(this.photo);
+        };
         this.handleFileInputChange = (e) => {
@@ -235,36 +268,11 @@ const input = e.target;
     }
-    handleShutterClick(_e) {
-        console.log();
-        this.capture();
-    }
-    handleRotateClick(_e) {
-        this.rotate();
-    }
-    handleClose(_e) {
-        this.handlePhoto && this.handlePhoto(null);
-    }
-    handleFlashClick(_e) {
-        this.cycleFlash();
-    }
-    handleCancelPhoto(_e) {
-        const track = this.stream && this.stream.getTracks()[0];
-        let c = track && track.getConstraints();
-        this.photo = null;
-        if (c) {
-            this.initCamera({
-                video: {
-                    facingMode: c.facingMode
-                }
-            });
-        }
-        else {
-            this.initCamera();
-        }
-    }
-    handleAcceptPhoto(_e) {
-        this.handlePhoto && this.handlePhoto(this.photo);
-    }
     iconExit() {
         return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3E%3Cg id='Icon_5_'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M402.2,134L378,109.8c-1.6-1.6-4.1-1.6-5.7,0L258.8,223.4c-1.6,1.6-4.1,1.6-5.7,0L139.6,109.8 c-1.6-1.6-4.1-1.6-5.7,0L109.8,134c-1.6,1.6-1.6,4.1,0,5.7l113.5,113.5c1.6,1.6,1.6,4.1,0,5.7L109.8,372.4c-1.6,1.6-1.6,4.1,0,5.7 l24.1,24.1c1.6,1.6,4.1,1.6,5.7,0l113.5-113.5c1.6-1.6,4.1-1.6,5.7,0l113.5,113.5c1.6,1.6,4.1,1.6,5.7,0l24.1-24.1 c1.6-1.6,1.6-4.1,0-5.7L288.6,258.8c-1.6-1.6-1.6-4.1,0-5.7l113.5-113.5C403.7,138.1,403.7,135.5,402.2,134z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E`;
     }
+    iconPhotos() {
+        return (h("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '512', height: '512', viewBox: '0 0 512 512' },
+            h("title", null, "ionicons-v5-e"),
+            h("path", { d: 'M450.29,112H142c-34,0-62,27.51-62,61.33V418.67C80,452.49,108,480,142,480H450c34,0,62-26.18,62-60V173.33C512,139.51,484.32,112,450.29,112Zm-77.15,61.34a46,46,0,1,1-46.28,46A46.19,46.19,0,0,1,373.14,173.33Zm-231.55,276c-17,0-29.86-13.75-29.86-30.66V353.85l90.46-80.79a46.54,46.54,0,0,1,63.44,1.83L328.27,337l-113,112.33ZM480,418.67a30.67,30.67,0,0,1-30.71,30.66H259L376.08,333a46.24,46.24,0,0,1,59.44-.16L480,370.59Z' }),
+            h("path", { d: 'M384,32H64A64,64,0,0,0,0,96V352a64.11,64.11,0,0,0,48,62V152a72,72,0,0,1,72-72H446A64.11,64.11,0,0,0,384,32Z' })));
+    }
     iconConfirm() {
@@ -303,3 +311,3 @@ return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3E%3Ccircle fill='%232CD865' cx='256' cy='256' r='256'/%3E%3Cg id='Icon_1_'%3E%3Cg%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M208,301.4l-55.4-55.5c-1.5-1.5-4-1.6-5.6-0.1l-23.4,22.3c-1.6,1.6-1.7,4.1-0.1,5.7l81.6,81.4 c3.1,3.1,8.2,3.1,11.3,0l171.8-171.7c1.6-1.6,1.6-4.2-0.1-5.7l-23.4-22.3c-1.6-1.5-4.1-1.5-5.6,0.1L213.7,301.4 C212.1,303,209.6,303,208,301.4z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E`;
                 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" }))),
+                h("input", { type: "file", id: "_pwa-elements-camera-input", onChange: this.handleFileInputChange, accept: "image/*", class: "select-file-button" }))),
             this.photo ? (h("div", { class: "accept" },
@@ -311,5 +319,8 @@ h("div", { class: "accept-image", style: Object.assign({ backgroundImage: `url(${this.photoSrc})` }, acceptStyles) }))) : (h("div", { class: "camera-video" },
             this.hasCamera && (h("div", { class: "camera-footer" }, !this.photo ? ([
-                h("div", { class: "shutter", onClick: (e) => this.handleShutterClick(e) },
+                h("div", { class: "pick-image", onClick: this.handlePickFile },
+                    h("label", { htmlFor: "_pwa-elements-file-pick" }, this.iconPhotos()),
+                    h("input", { type: "file", id: "_pwa-elements-file-pick", onChange: this.handleFileInputChange, accept: "image/*", class: "pick-image-button" })),
+                h("div", { class: "shutter", onClick: this.handleShutterClick },
                     h("div", { class: "shutter-button" })),
-                h("div", { class: "rotate", onClick: (e) => this.handleRotateClick(e) },
+                h("div", { class: "rotate", onClick: this.handleRotateClick },
                     h("img", { src: this.iconReverseCamera() })),
@@ -316,0 +327,0 @@ ]) : (h("section", { class: "items" },

dist/esm-es5/pwa-action-sheet.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './core-8e8be6a7.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './core-f86805ad.js';
 var PWAActionSheet = /** @class */ (function () {
@@ -3,0 +3,0 @@ function PWAActionSheet(hostRef) {

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

@@ -37,3 +37,3 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 };
-import { r as registerInstance, c as createEvent, h, g as getElement } from './core-8e8be6a7.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './core-f86805ad.js';
 var PWACameraModal = /** @class */ (function () {
@@ -40,0 +40,0 @@ function class_1(hostRef) {

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

@@ -37,3 +37,3 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 };
-import { r as registerInstance, c as createEvent, h } from './core-8e8be6a7.js';
+import { r as registerInstance, c as createEvent, h } from './core-f86805ad.js';
 var PWACameraModal = /** @class */ (function () {
@@ -40,0 +40,0 @@ function class_1(hostRef) {

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

@@ -37,3 +37,3 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 };
-import { r as registerInstance, d as getContext, h, g as getElement } from './core-8e8be6a7.js';
+import { r as registerInstance, d as getContext, h, g as getElement } from './core-f86805ad.js';
 /**
@@ -220,2 +220,35 @@ * MediaStream ImageCapture polyfill
         this.flashMode = 'off';
+        this.handlePickFile = function (_e) {
+        };
+        this.handleShutterClick = function (_e) {
+            console.log();
+            _this.capture();
+        };
+        this.handleRotateClick = function (_e) {
+            _this.rotate();
+        };
+        this.handleClose = function (_e) {
+            _this.handlePhoto && _this.handlePhoto(null);
+        };
+        this.handleFlashClick = function (_e) {
+            _this.cycleFlash();
+        };
+        this.handleCancelPhoto = function (_e) {
+            var track = _this.stream && _this.stream.getTracks()[0];
+            var c = track && track.getConstraints();
+            _this.photo = null;
+            if (c) {
+                _this.initCamera({
+                    video: {
+                        facingMode: c.facingMode
+                    }
+                });
+            }
+            else {
+                _this.initCamera();
+            }
+        };
+        this.handleAcceptPhoto = function (_e) {
+            _this.handlePhoto && _this.handlePhoto(_this.photo);
+        };
         this.handleFileInputChange = function (e) {
@@ -529,36 +562,8 @@ var input = e.target;
     };
-    class_1.prototype.handleShutterClick = function (_e) {
-        console.log();
-        this.capture();
-    };
-    class_1.prototype.handleRotateClick = function (_e) {
-        this.rotate();
-    };
-    class_1.prototype.handleClose = function (_e) {
-        this.handlePhoto && this.handlePhoto(null);
-    };
-    class_1.prototype.handleFlashClick = function (_e) {
-        this.cycleFlash();
-    };
-    class_1.prototype.handleCancelPhoto = function (_e) {
-        var track = this.stream && this.stream.getTracks()[0];
-        var c = track && track.getConstraints();
-        this.photo = null;
-        if (c) {
-            this.initCamera({
-                video: {
-                    facingMode: c.facingMode
-                }
-            });
-        }
-        else {
-            this.initCamera();
-        }
-    };
-    class_1.prototype.handleAcceptPhoto = function (_e) {
-        this.handlePhoto && this.handlePhoto(this.photo);
-    };
     class_1.prototype.iconExit = function () {
         return "data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3E%3Cg id='Icon_5_'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M402.2,134L378,109.8c-1.6-1.6-4.1-1.6-5.7,0L258.8,223.4c-1.6,1.6-4.1,1.6-5.7,0L139.6,109.8 c-1.6-1.6-4.1-1.6-5.7,0L109.8,134c-1.6,1.6-1.6,4.1,0,5.7l113.5,113.5c1.6,1.6,1.6,4.1,0,5.7L109.8,372.4c-1.6,1.6-1.6,4.1,0,5.7 l24.1,24.1c1.6,1.6,4.1,1.6,5.7,0l113.5-113.5c1.6-1.6,4.1-1.6,5.7,0l113.5,113.5c1.6,1.6,4.1,1.6,5.7,0l24.1-24.1 c1.6-1.6,1.6-4.1,0-5.7L288.6,258.8c-1.6-1.6-1.6-4.1,0-5.7l113.5-113.5C403.7,138.1,403.7,135.5,402.2,134z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E";
     };
+    class_1.prototype.iconPhotos = function () {
+        return (h("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '512', height: '512', viewBox: '0 0 512 512' }, h("title", null, "ionicons-v5-e"), h("path", { d: 'M450.29,112H142c-34,0-62,27.51-62,61.33V418.67C80,452.49,108,480,142,480H450c34,0,62-26.18,62-60V173.33C512,139.51,484.32,112,450.29,112Zm-77.15,61.34a46,46,0,1,1-46.28,46A46.19,46.19,0,0,1,373.14,173.33Zm-231.55,276c-17,0-29.86-13.75-29.86-30.66V353.85l90.46-80.79a46.54,46.54,0,0,1,63.44,1.83L328.27,337l-113,112.33ZM480,418.67a30.67,30.67,0,0,1-30.71,30.66H259L376.08,333a46.24,46.24,0,0,1,59.44-.16L480,370.59Z' }), h("path", { d: 'M384,32H64A64,64,0,0,0,0,96V352a64.11,64.11,0,0,0,48,62V152a72,72,0,0,1,72-72H446A64.11,64.11,0,0,0,384,32Z' })));
+    };
     class_1.prototype.iconConfirm = function () {
@@ -586,5 +591,6 @@ return "data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3E%3Ccircle fill='%232CD865' cx='256' cy='256' r='256'/%3E%3Cg id='Icon_1_'%3E%3Cg%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M208,301.4l-55.4-55.5c-1.5-1.5-4-1.6-5.6-0.1l-23.4,22.3c-1.6,1.6-1.7,4.1-0.1,5.7l81.6,81.4 c3.1,3.1,8.2,3.1,11.3,0l171.8-171.7c1.6-1.6,1.6-4.2-0.1-5.7l-23.4-22.3c-1.6-1.5-4.1-1.5-5.6,0.1L213.7,301.4 C212.1,303,209.6,303,208,301.4z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E";
         // const acceptStyles = {};
-        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: Object.assign({ backgroundImage: "url(" + this.photoSrc + ")" }, acceptStyles) }))) : (h("div", { class: "camera-video" }, this.showShutterOverlay && (h("div", { class: "shutter-overlay" })), this.hasImageCapture() ? (h("video", { ref: function (el) { return _this.videoElement = el; }, onLoadedMetaData: this.handleVideoMetadata, 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() })),
+        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, accept: "image/*", class: "select-file-button" }))), this.photo ? (h("div", { class: "accept" }, h("div", { class: "accept-image", style: Object.assign({ backgroundImage: "url(" + this.photoSrc + ")" }, acceptStyles) }))) : (h("div", { class: "camera-video" }, this.showShutterOverlay && (h("div", { class: "shutter-overlay" })), this.hasImageCapture() ? (h("video", { ref: function (el) { return _this.videoElement = el; }, onLoadedMetaData: this.handleVideoMetadata, 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: "pick-image", onClick: this.handlePickFile }, h("label", { htmlFor: "_pwa-elements-file-pick" }, this.iconPhotos()), h("input", { type: "file", id: "_pwa-elements-file-pick", onChange: this.handleFileInputChange, accept: "image/*", class: "pick-image-button" })),
+            h("div", { class: "shutter", onClick: this.handleShutterClick }, h("div", { class: "shutter-button" })),
+            h("div", { class: "rotate", onClick: this.handleRotateClick }, 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() }))))))));
@@ -603,3 +609,3 @@ };
     Object.defineProperty(class_1, "style", {
-        get: function () { return ":host{--header-height:4em;--footer-height:9em;--header-height-landscape:3em;--footer-height-landscape:6em;--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)}\@media (max-height:375px){.camera-header{--header-height:var(--header-height-landscape)}.camera-footer{--footer-height:var(--footer-height-landscape)}.camera-footer .shutter{--shutter-size:4em}}.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;overflow:hidden}.accept .accept-image{width:100%;height:100%;max-height:100%;background-position:50%;background-size:cover;background-repeat:no-repeat}.close img{cursor:pointer}.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;--header-height-landscape:3em;--footer-height-landscape:6em;--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)}\@media (max-height:375px){.camera-header{--header-height:var(--header-height-landscape)}.camera-footer{--footer-height:var(--footer-height-landscape)}.camera-footer .shutter{--shutter-size:4em}}.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}.pick-image{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;position:absolute;left:var(--margin-size-footer);top:0;height:100%;width:var(--icon-size-footer);color:#fff}.pick-image input{visibility:hidden}.pick-image svg{cursor:pointer;fill:#fff;width:var(--icon-size-footer);height:var(--icon-size-footer)}.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;overflow:hidden}.accept .accept-image{width:100%;height:100%;max-height:100%;background-position:50%;background-size:cover;background-repeat:no-repeat}.close img{cursor:pointer}.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,
@@ -606,0 +612,0 @@ configurable: true

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

@@ -1,2 +0,2 @@
-import { r as registerInstance, h, g as getElement, H as Host } from './core-8e8be6a7.js';
+import { r as registerInstance, h, g as getElement, H as Host } from './core-f86805ad.js';
 var PWAToast = /** @class */ (function () {
@@ -3,0 +3,0 @@ function PWAToast(hostRef) {

dist/esm/pwa-action-sheet.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './core-8e8be6a7.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './core-f86805ad.js';
 
@@ -3,0 +3,0 @@ const PWAActionSheet = class {

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

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './core-8e8be6a7.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './core-f86805ad.js';
 
@@ -3,0 +3,0 @@ const PWACameraModal = class {

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

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h } from './core-8e8be6a7.js';
+import { r as registerInstance, c as createEvent, h } from './core-f86805ad.js';
 
@@ -3,0 +3,0 @@ const PWACameraModal = class {

dist/esm/pwa-camera.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, d as getContext, h, g as getElement } from './core-8e8be6a7.js';
+import { r as registerInstance, d as getContext, h, g as getElement } from './core-f86805ad.js';
 
@@ -177,2 +177,35 @@ /**
         this.flashMode = 'off';
+        this.handlePickFile = (_e) => {
+        };
+        this.handleShutterClick = (_e) => {
+            console.log();
+            this.capture();
+        };
+        this.handleRotateClick = (_e) => {
+            this.rotate();
+        };
+        this.handleClose = (_e) => {
+            this.handlePhoto && this.handlePhoto(null);
+        };
+        this.handleFlashClick = (_e) => {
+            this.cycleFlash();
+        };
+        this.handleCancelPhoto = (_e) => {
+            const track = this.stream && this.stream.getTracks()[0];
+            let c = track && track.getConstraints();
+            this.photo = null;
+            if (c) {
+                this.initCamera({
+                    video: {
+                        facingMode: c.facingMode
+                    }
+                });
+            }
+            else {
+                this.initCamera();
+            }
+        };
+        this.handleAcceptPhoto = (_e) => {
+            this.handlePhoto && this.handlePhoto(this.photo);
+        };
         this.handleFileInputChange = (e) => {
@@ -393,36 +426,8 @@ const input = e.target;
     }
-    handleShutterClick(_e) {
-        console.log();
-        this.capture();
-    }
-    handleRotateClick(_e) {
-        this.rotate();
-    }
-    handleClose(_e) {
-        this.handlePhoto && this.handlePhoto(null);
-    }
-    handleFlashClick(_e) {
-        this.cycleFlash();
-    }
-    handleCancelPhoto(_e) {
-        const track = this.stream && this.stream.getTracks()[0];
-        let c = track && track.getConstraints();
-        this.photo = null;
-        if (c) {
-            this.initCamera({
-                video: {
-                    facingMode: c.facingMode
-                }
-            });
-        }
-        else {
-            this.initCamera();
-        }
-    }
-    handleAcceptPhoto(_e) {
-        this.handlePhoto && this.handlePhoto(this.photo);
-    }
     iconExit() {
         return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3E%3Cg id='Icon_5_'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M402.2,134L378,109.8c-1.6-1.6-4.1-1.6-5.7,0L258.8,223.4c-1.6,1.6-4.1,1.6-5.7,0L139.6,109.8 c-1.6-1.6-4.1-1.6-5.7,0L109.8,134c-1.6,1.6-1.6,4.1,0,5.7l113.5,113.5c1.6,1.6,1.6,4.1,0,5.7L109.8,372.4c-1.6,1.6-1.6,4.1,0,5.7 l24.1,24.1c1.6,1.6,4.1,1.6,5.7,0l113.5-113.5c1.6-1.6,4.1-1.6,5.7,0l113.5,113.5c1.6,1.6,4.1,1.6,5.7,0l24.1-24.1 c1.6-1.6,1.6-4.1,0-5.7L288.6,258.8c-1.6-1.6-1.6-4.1,0-5.7l113.5-113.5C403.7,138.1,403.7,135.5,402.2,134z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E`;
     }
+    iconPhotos() {
+        return (h("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '512', height: '512', viewBox: '0 0 512 512' }, h("title", null, "ionicons-v5-e"), h("path", { d: 'M450.29,112H142c-34,0-62,27.51-62,61.33V418.67C80,452.49,108,480,142,480H450c34,0,62-26.18,62-60V173.33C512,139.51,484.32,112,450.29,112Zm-77.15,61.34a46,46,0,1,1-46.28,46A46.19,46.19,0,0,1,373.14,173.33Zm-231.55,276c-17,0-29.86-13.75-29.86-30.66V353.85l90.46-80.79a46.54,46.54,0,0,1,63.44,1.83L328.27,337l-113,112.33ZM480,418.67a30.67,30.67,0,0,1-30.71,30.66H259L376.08,333a46.24,46.24,0,0,1,59.44-.16L480,370.59Z' }), h("path", { d: 'M384,32H64A64,64,0,0,0,0,96V352a64.11,64.11,0,0,0,48,62V152a72,72,0,0,1,72-72H446A64.11,64.11,0,0,0,384,32Z' })));
+    }
     iconConfirm() {
@@ -449,5 +454,6 @@ return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3E%3Ccircle fill='%232CD865' cx='256' cy='256' r='256'/%3E%3Cg id='Icon_1_'%3E%3Cg%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M208,301.4l-55.4-55.5c-1.5-1.5-4-1.6-5.6-0.1l-23.4,22.3c-1.6,1.6-1.7,4.1-0.1,5.7l81.6,81.4 c3.1,3.1,8.2,3.1,11.3,0l171.8-171.7c1.6-1.6,1.6-4.2-0.1-5.7l-23.4-22.3c-1.6-1.5-4.1-1.5-5.6,0.1L213.7,301.4 C212.1,303,209.6,303,208,301.4z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E`;
         // const acceptStyles = {};
-        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: Object.assign({ backgroundImage: `url(${this.photoSrc})` }, acceptStyles) }))) : (h("div", { class: "camera-video" }, this.showShutterOverlay && (h("div", { class: "shutter-overlay" })), this.hasImageCapture() ? (h("video", { ref: (el) => this.videoElement = el, onLoadedMetaData: this.handleVideoMetadata, 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() })),
+        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, accept: "image/*", class: "select-file-button" }))), this.photo ? (h("div", { class: "accept" }, h("div", { class: "accept-image", style: Object.assign({ backgroundImage: `url(${this.photoSrc})` }, acceptStyles) }))) : (h("div", { class: "camera-video" }, this.showShutterOverlay && (h("div", { class: "shutter-overlay" })), this.hasImageCapture() ? (h("video", { ref: (el) => this.videoElement = el, onLoadedMetaData: this.handleVideoMetadata, 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: "pick-image", onClick: this.handlePickFile }, h("label", { htmlFor: "_pwa-elements-file-pick" }, this.iconPhotos()), h("input", { type: "file", id: "_pwa-elements-file-pick", onChange: this.handleFileInputChange, accept: "image/*", class: "pick-image-button" })),
+            h("div", { class: "shutter", onClick: this.handleShutterClick }, h("div", { class: "shutter-button" })),
+            h("div", { class: "rotate", onClick: this.handleRotateClick }, 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() }))))))));
@@ -457,5 +463,5 @@ }
     get el() { return getElement(this); }
-    static get style() { return ":host{--header-height:4em;--footer-height:9em;--header-height-landscape:3em;--footer-height-landscape:6em;--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)}\@media (max-height:375px){.camera-header{--header-height:var(--header-height-landscape)}.camera-footer{--footer-height:var(--footer-height-landscape)}.camera-footer .shutter{--shutter-size:4em}}.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;overflow:hidden}.accept .accept-image{width:100%;height:100%;max-height:100%;background-position:50%;background-size:cover;background-repeat:no-repeat}.close img{cursor:pointer}.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;--header-height-landscape:3em;--footer-height-landscape:6em;--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)}\@media (max-height:375px){.camera-header{--header-height:var(--header-height-landscape)}.camera-footer{--footer-height:var(--footer-height-landscape)}.camera-footer .shutter{--shutter-size:4em}}.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}.pick-image{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;position:absolute;left:var(--margin-size-footer);top:0;height:100%;width:var(--icon-size-footer);color:#fff}.pick-image input{visibility:hidden}.pick-image svg{cursor:pointer;fill:#fff;width:var(--icon-size-footer);height:var(--icon-size-footer)}.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;overflow:hidden}.accept .accept-image{width:100%;height:100%;max-height:100%;background-position:50%;background-size:cover;background-repeat:no-repeat}.close img{cursor:pointer}.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/esm/pwa-toast.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h, g as getElement, H as Host } from './core-8e8be6a7.js';
+import { r as registerInstance, h, g as getElement, H as Host } from './core-f86805ad.js';
 
@@ -3,0 +3,0 @@ const PWAToast = class {

dist/ionicpwaelements/ionicpwaelements.esm.js

@@ -1,1 +0,1 @@
-import{p as e,b as o}from"./p-b877c280.js";e().then(e=>o([["p-3tapk8kb",[[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-oqljoapu",[[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],rotation:[32]}]]],["p-wvtglxfe",[[1,"pwa-camera-modal-instance",{noDevicesText:[1,"no-devices-text"],noDevicesButtonText:[1,"no-devices-button-text"]},[[32,"keyup","handleBackdropKeyUp"]]]]]],e));
+import{p as e,b as o}from"./p-15febc39.js";e().then(e=>o([["p-bjfgqh5l",[[1,"pwa-camera-modal",{present:[64],dismiss:[64]}]]],["p-fhfll3cn",[[1,"pwa-action-sheet",{header:[1],cancelable:[4],options:[16],open:[32]}]]],["p-zqzr1fwg",[[1,"pwa-toast",{message:[1],duration:[2],closing:[32]}]]],["p-5z1yhwcn",[[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],rotation:[32]}]]],["p-u5kuwqba",[[1,"pwa-camera-modal-instance",{noDevicesText:[1,"no-devices-text"],noDevicesButtonText:[1,"no-devices-button-text"]},[[32,"keyup","handleBackdropKeyUp"]]]]]],e));

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

@@ -46,11 +46,13 @@ import { FlashMode } from '../../definitions';
     flashScreen(): Promise<unknown>;
-    handleShutterClick(_e: Event): void;
-    handleRotateClick(_e: Event): void;
-    handleClose(_e: Event): void;
-    handleFlashClick(_e: Event): void;
-    handleCancelPhoto(_e: Event): void;
-    handleAcceptPhoto(_e: Event): void;
+    handlePickFile: (_e: Event) => void;
+    handleShutterClick: (_e: Event) => void;
+    handleRotateClick: (_e: Event) => void;
+    handleClose: (_e: Event) => void;
+    handleFlashClick: (_e: Event) => void;
+    handleCancelPhoto: (_e: Event) => void;
+    handleAcceptPhoto: (_e: Event) => void;
     handleFileInputChange: (e: InputEvent) => void;
     handleVideoMetadata: (e: Event) => void;
     iconExit(): string;
+    iconPhotos(): any;
     iconConfirm(): string;
@@ -57,0 +59,0 @@ iconReverseCamera(): string;

package.json

 {
   "name": "@ionic/pwa-elements",
-  "version": "3.0.1-0",
+  "version": "3.0.1-1",
   "description": "Stencil Component Starter",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1033129

increased by1.31%

Lines of code

16345

increased by1.04%

No dependency changes