@ionic/pwa-elements - npm Package Compare versions

Comparing version 3.0.1-1 to 3.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],"noDevicesText":[1,"no-devices-text"],"noDevicesButtonText":[1,"no-devices-button-text"],"photo":[32],"photoSrc":[32],"showShutterOverlay":[32],"flashIndex":[32],"hasCamera":[32],"rotation":[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);
+  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],"rotation":[32],"deviceError":[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],"noDevicesText":[1,"no-devices-text"],"noDevicesButtonText":[1,"no-devices-button-text"],"photo":[32],"photoSrc":[32],"showShutterOverlay":[32],"flashIndex":[32],"hasCamera":[32],"rotation":[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);
+    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],"rotation":[32],"deviceError":[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

@@ -11,3 +11,3 @@ 'use strict';
         this.noDevicesText = 'No camera found';
-        this.noDevicesButtonText = 'Choose file';
+        this.noDevicesButtonText = 'Choose image';
         this.handlePhoto = async (photo) => {
@@ -14,0 +14,0 @@ this.onPhoto.emit(photo);

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

@@ -168,3 +168,3 @@ 'use strict';
         this.noDevicesText = 'No camera found';
-        this.noDevicesButtonText = 'Choose file';
+        this.noDevicesButtonText = 'Choose image';
         this.showShutterOverlay = false;
@@ -174,2 +174,3 @@ this.flashIndex = 0;
         this.rotation = 0;
+        this.deviceError = null;
         // Whether the device has multiple cameras (front/back)
@@ -216,5 +217,12 @@ this.hasMultipleCameras = false;
         };
-        this.handleFileInputChange = (e) => {
+        this.handleFileInputChange = async (e) => {
             const input = e.target;
             const file = input.files[0];
+            try {
+                const orientation = await this.getOrientation(file);
+                console.log('Got orientation', orientation);
+                this.photoOrientation = orientation;
+            }
+            catch (e) {
+            }
             this.handlePhoto && this.handlePhoto(file);
@@ -259,2 +267,3 @@ };
         catch (e) {
+            this.deviceError = e;
         }
@@ -271,2 +280,3 @@ }
         catch (e) {
+            this.deviceError = e;
             this.handleNoDeviceError && this.handleNoDeviceError(e);
@@ -283,2 +293,3 @@ }
         else {
+            this.deviceError = 'No image capture';
             this.handleNoDeviceError && this.handleNoDeviceError();
@@ -325,2 +336,3 @@ }
         console.log('Got orientation', orientation);
+        this.photoOrientation = orientation;
         if (orientation) {
@@ -346,6 +358,3 @@ switch (orientation) {
         }
-        console.log('Rotating photo', this.rotation);
-        //const newBlob = await this.rotateImage(photo, this.rotation);
         this.photoSrc = URL.createObjectURL(photo);
-        console.log('Photo src', this.photoSrc);
     }
@@ -462,5 +471,5 @@ getOrientation(file) {
     render() {
-        const acceptStyles = { transform: `rotate(${-this.rotation}deg)` };
-        // 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, 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 ? ([
+        // const acceptStyles = { transform: `rotate(${-this.rotation}deg)` };
+        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 || !!this.deviceError) && (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" })),
@@ -467,0 +476,0 @@ core.h("div", { class: "shutter", onClick: this.handleShutterClick }, core.h("div", { class: "shutter-button" })),

dist/collection/collection-manifest.json

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

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

@@ -5,3 +5,3 @@ import { h } from "@stencil/core";
         this.noDevicesText = 'No camera found';
-        this.noDevicesButtonText = 'Choose file';
+        this.noDevicesButtonText = 'Choose image';
         this.handlePhoto = async (photo) => {
@@ -75,3 +75,3 @@ this.onPhoto.emit(photo);
             "reflect": false,
-            "defaultValue": "'Choose file'"
+            "defaultValue": "'Choose image'"
         }
@@ -78,0 +78,0 @@ }; }

dist/collection/components/camera/camera.js

@@ -7,3 +7,3 @@ import { h } from "@stencil/core";
         this.noDevicesText = 'No camera found';
-        this.noDevicesButtonText = 'Choose file';
+        this.noDevicesButtonText = 'Choose image';
         this.showShutterOverlay = false;
@@ -13,2 +13,3 @@ this.flashIndex = 0;
         this.rotation = 0;
+        this.deviceError = null;
         // Whether the device has multiple cameras (front/back)
@@ -55,5 +56,12 @@ this.hasMultipleCameras = false;
         };
-        this.handleFileInputChange = (e) => {
+        this.handleFileInputChange = async (e) => {
             const input = e.target;
             const file = input.files[0];
+            try {
+                const orientation = await this.getOrientation(file);
+                console.log('Got orientation', orientation);
+                this.photoOrientation = orientation;
+            }
+            catch (e) {
+            }
             this.handlePhoto && this.handlePhoto(file);
@@ -97,2 +105,3 @@ };
         catch (e) {
+            this.deviceError = e;
         }
@@ -109,2 +118,3 @@ }
         catch (e) {
+            this.deviceError = e;
             this.handleNoDeviceError && this.handleNoDeviceError(e);
@@ -121,2 +131,3 @@ }
         else {
+            this.deviceError = 'No image capture';
             this.handleNoDeviceError && this.handleNoDeviceError();
@@ -163,2 +174,3 @@ }
         console.log('Got orientation', orientation);
+        this.photoOrientation = orientation;
         if (orientation) {
@@ -184,6 +196,3 @@ switch (orientation) {
         }
-        console.log('Rotating photo', this.rotation);
-        //const newBlob = await this.rotateImage(photo, this.rotation);
         this.photoSrc = URL.createObjectURL(photo);
-        console.log('Photo src', this.photoSrc);
     }
@@ -303,4 +312,4 @@ getOrientation(file) {
     render() {
-        const acceptStyles = { transform: `rotate(${-this.rotation}deg)` };
-        // const acceptStyles = {};
+        // const acceptStyles = { transform: `rotate(${-this.rotation}deg)` };
+        const acceptStyles = {};
         return (h("div", { class: "camera-wrapper" },
@@ -315,3 +324,3 @@ h("div", { class: "camera-header" },
                         this.flashMode == 'flash' ? h("img", { src: this.iconFlashOn() }) : ''))))),
-            this.hasCamera === false && (h("div", { class: "no-device" },
+            (this.hasCamera === false || !!this.deviceError) && (h("div", { class: "no-device" },
                 h("h2", null, this.noDevicesText),
@@ -435,3 +444,3 @@ h("label", { htmlFor: "_pwa-elements-camera-input" }, this.noDevicesButtonText),
             "reflect": false,
-            "defaultValue": "'Choose file'"
+            "defaultValue": "'Choose image'"
         }
@@ -449,5 +458,6 @@ }; }
         "hasCamera": {},
-        "rotation": {}
+        "rotation": {},
+        "deviceError": {}
     }; }
     static get elementRef() { return "el"; }
 }

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

@@ -43,3 +43,3 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
         this.noDevicesText = 'No camera found';
-        this.noDevicesButtonText = 'Choose file';
+        this.noDevicesButtonText = 'Choose image';
         this.handlePhoto = function (photo) { return __awaiter(_this, void 0, void 0, function () {
@@ -46,0 +46,0 @@ return __generator(this, function (_a) {

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

@@ -206,3 +206,3 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
         this.noDevicesText = 'No camera found';
-        this.noDevicesButtonText = 'Choose file';
+        this.noDevicesButtonText = 'Choose image';
         this.showShutterOverlay = false;
@@ -212,2 +212,3 @@ this.flashIndex = 0;
         this.rotation = 0;
+        this.deviceError = null;
         // Whether the device has multiple cameras (front/back)
@@ -254,7 +255,27 @@ this.hasMultipleCameras = false;
         };
-        this.handleFileInputChange = function (e) {
-            var input = e.target;
-            var file = input.files[0];
-            _this.handlePhoto && _this.handlePhoto(file);
-        };
+        this.handleFileInputChange = function (e) { return __awaiter(_this, void 0, void 0, function () {
+            var input, file, orientation, e_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        input = e.target;
+                        file = input.files[0];
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, this.getOrientation(file)];
+                    case 2:
+                        orientation = _a.sent();
+                        console.log('Got orientation', orientation);
+                        this.photoOrientation = orientation;
+                        return [3 /*break*/, 4];
+                    case 3:
+                        e_1 = _a.sent();
+                        return [3 /*break*/, 4];
+                    case 4:
+                        this.handlePhoto && this.handlePhoto(file);
+                        return [2 /*return*/];
+                }
+            });
+        }); };
         this.handleVideoMetadata = function (e) {
@@ -305,3 +326,3 @@ console.log('Video metadata', e);
         return __awaiter(this, void 0, void 0, function () {
-            var devices, videoDevices, e_1;
+            var devices, videoDevices, e_2;
             return __generator(this, function (_a) {
@@ -319,3 +340,4 @@ switch (_a.label) {
                     case 2:
-                        e_1 = _a.sent();
+                        e_2 = _a.sent();
+                        this.deviceError = e_2;
                         return [3 /*break*/, 3];
@@ -329,3 +351,3 @@ case 3: return [2 /*return*/];
         return __awaiter(this, void 0, void 0, function () {
-            var stream, e_2;
+            var stream, e_3;
             return __generator(this, function (_a) {
@@ -346,4 +368,5 @@ switch (_a.label) {
                     case 3:
-                        e_2 = _a.sent();
-                        this.handleNoDeviceError && this.handleNoDeviceError(e_2);
+                        e_3 = _a.sent();
+                        this.deviceError = e_3;
+                        this.handleNoDeviceError && this.handleNoDeviceError(e_3);
                         return [3 /*break*/, 4];
@@ -369,2 +392,3 @@ case 4: return [2 /*return*/];
                     case 2:
+                        this.deviceError = 'No image capture';
                         this.handleNoDeviceError && this.handleNoDeviceError();
@@ -409,3 +433,3 @@ _a.label = 3;
         return __awaiter(this, void 0, void 0, function () {
-            var photo, e_3;
+            var photo, e_4;
             return __generator(this, function (_a) {
@@ -429,4 +453,4 @@ switch (_a.label) {
                     case 4:
-                        e_3 = _a.sent();
-                        console.error('Unable to take photo!', e_3);
+                        e_4 = _a.sent();
+                        console.error('Unable to take photo!', e_4);
                         return [3 /*break*/, 5];
@@ -451,2 +475,3 @@ case 5:
                         console.log('Got orientation', orientation);
+                        this.photoOrientation = orientation;
                         if (orientation) {
@@ -472,6 +497,3 @@ switch (orientation) {
                         }
-                        console.log('Rotating photo', this.rotation);
-                        //const newBlob = await this.rotateImage(photo, this.rotation);
                         this.photoSrc = URL.createObjectURL(photo);
-                        console.log('Photo src', this.photoSrc);
                         return [2 /*return*/];
@@ -598,5 +620,5 @@ }
         var _this = this;
-        var acceptStyles = { transform: "rotate(" + -this.rotation + "deg)" };
-        // 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, 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 ? ([
+        // const acceptStyles = { transform: `rotate(${-this.rotation}deg)` };
+        var 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 || !!this.deviceError) && (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" })),
@@ -603,0 +625,0 @@ h("div", { class: "shutter", onClick: this.handleShutterClick }, h("div", { class: "shutter-button" })),

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

@@ -7,3 +7,3 @@ import { r as registerInstance, c as createEvent, h, g as getElement } from './core-f86805ad.js';
         this.noDevicesText = 'No camera found';
-        this.noDevicesButtonText = 'Choose file';
+        this.noDevicesButtonText = 'Choose image';
         this.handlePhoto = async (photo) => {
@@ -10,0 +10,0 @@ this.onPhoto.emit(photo);

dist/esm/pwa-camera.entry.js

@@ -164,3 +164,3 @@ import { r as registerInstance, d as getContext, h, g as getElement } from './core-f86805ad.js';
         this.noDevicesText = 'No camera found';
-        this.noDevicesButtonText = 'Choose file';
+        this.noDevicesButtonText = 'Choose image';
         this.showShutterOverlay = false;
@@ -170,2 +170,3 @@ this.flashIndex = 0;
         this.rotation = 0;
+        this.deviceError = null;
         // Whether the device has multiple cameras (front/back)
@@ -212,5 +213,12 @@ this.hasMultipleCameras = false;
         };
-        this.handleFileInputChange = (e) => {
+        this.handleFileInputChange = async (e) => {
             const input = e.target;
             const file = input.files[0];
+            try {
+                const orientation = await this.getOrientation(file);
+                console.log('Got orientation', orientation);
+                this.photoOrientation = orientation;
+            }
+            catch (e) {
+            }
             this.handlePhoto && this.handlePhoto(file);
@@ -255,2 +263,3 @@ };
         catch (e) {
+            this.deviceError = e;
         }
@@ -267,2 +276,3 @@ }
         catch (e) {
+            this.deviceError = e;
             this.handleNoDeviceError && this.handleNoDeviceError(e);
@@ -279,2 +289,3 @@ }
         else {
+            this.deviceError = 'No image capture';
             this.handleNoDeviceError && this.handleNoDeviceError();
@@ -321,2 +332,3 @@ }
         console.log('Got orientation', orientation);
+        this.photoOrientation = orientation;
         if (orientation) {
@@ -342,6 +354,3 @@ switch (orientation) {
         }
-        console.log('Rotating photo', this.rotation);
-        //const newBlob = await this.rotateImage(photo, this.rotation);
         this.photoSrc = URL.createObjectURL(photo);
-        console.log('Photo src', this.photoSrc);
     }
@@ -458,5 +467,5 @@ getOrientation(file) {
     render() {
-        const acceptStyles = { transform: `rotate(${-this.rotation}deg)` };
-        // 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, 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 ? ([
+        // const acceptStyles = { transform: `rotate(${-this.rotation}deg)` };
+        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 || !!this.deviceError) && (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" })),
@@ -463,0 +472,0 @@ h("div", { class: "shutter", onClick: this.handleShutterClick }, h("div", { class: "shutter-button" })),

dist/ionicpwaelements/ionicpwaelements.esm.js

@@ -1,1 +0,1 @@
-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));
+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-8t1mkw4o",[[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],deviceError:[32]}]]],["p-w86kjxwh",[[1,"pwa-camera-modal-instance",{noDevicesText:[1,"no-devices-text"],noDevicesButtonText:[1,"no-devices-button-text"]},[[32,"keyup","handleBackdropKeyUp"]]]]]],e));

dist/ionicpwaelements/p-627eacab.system.js

@@ -1,1 +0,1 @@
-System.register(["./p-af1e6af1.system.js"],(function(){"use strict";var e,t;return{setters:[function(s){e=s.p;t=s.b}],execute:function(){e().then((function(e){return t([["p-sfl5sv99.system",[[1,"pwa-camera-modal",{present:[64],dismiss:[64]}]]],["p-lu2lsra5.system",[[1,"pwa-action-sheet",{header:[1],cancelable:[4],options:[16],open:[32]}]]],["p-yeodxb9a.system",[[1,"pwa-toast",{message:[1],duration:[2],closing:[32]}]]],["p-idaaxo7a.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],rotation:[32]}]]],["p-bw1com5i.system",[[1,"pwa-camera-modal-instance",{noDevicesText:[1,"no-devices-text"],noDevicesButtonText:[1,"no-devices-button-text"]},[[32,"keyup","handleBackdropKeyUp"]]]]]],e)}))}}}));
+System.register(["./p-af1e6af1.system.js"],(function(){"use strict";var e,t;return{setters:[function(s){e=s.p;t=s.b}],execute:function(){e().then((function(e){return t([["p-sfl5sv99.system",[[1,"pwa-camera-modal",{present:[64],dismiss:[64]}]]],["p-lu2lsra5.system",[[1,"pwa-action-sheet",{header:[1],cancelable:[4],options:[16],open:[32]}]]],["p-yeodxb9a.system",[[1,"pwa-toast",{message:[1],duration:[2],closing:[32]}]]],["p-a8oghfw8.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],rotation:[32],deviceError:[32]}]]],["p-xfzhztoe.system",[[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

@@ -17,2 +17,4 @@ import { FlashMode } from '../../definitions';
     rotation: number;
+    deviceError: any | null;
+    photoOrientation: number;
     exifData: any;
@@ -54,3 +56,3 @@ offscreenCanvas: HTMLCanvasElement;
     handleAcceptPhoto: (_e: Event) => void;
-    handleFileInputChange: (e: InputEvent) => void;
+    handleFileInputChange: (e: InputEvent) => Promise<void>;
     handleVideoMetadata: (e: Event) => void;
@@ -57,0 +59,0 @@ iconExit(): string;

package.json

 {
   "name": "@ionic/pwa-elements",
-  "version": "3.0.1-1",
+  "version": "3.0.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

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1035763

increased by0.25%

Lines of code

16398

increased by0.32%

Number of low quality alerts

0

decreased by-100%

No dependency changes